Skip to content

Commit a156c7b

Browse files
reitenthreitenth
authored
Add files via upload
1 parent c4a9552 commit a156c7b

3 files changed

Lines changed: 279 additions & 239 deletions

File tree

‎foundations/02-landing-page/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1+
# odin-landing-page
12

3+
**Time Spent:** Not Tracked
4+
5+
**What I Learned:** Learning the basics of flexbox.
6+
7+
**What Was Difficult:** The difference between margin and padding to get things where I wanted with flexbox.

‎foundations/02-landing-page/index.html‎

Lines changed: 79 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,79 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>sign-up-form</title>
8-
<link rel="stylesheet" href="style.css" />
9-
</head>
10-
11-
<body>
12-
<div class="page-container">
13-
<div class="image-container">
14-
<img src="https://i.postimg.cc/vBCQRYw5/photo-1585202900225-6d3ac20a6962.avif" alt="image">
15-
<div class="logo-container">
16-
<img
17-
src="https://cdn.statically.io/gh/TheOdinProject/curriculum/5f37d43908ef92499e95a9b90fc3cc291a95014c/html_css/project-sign-up-form/odin-lined.png"
18-
alt="logo">
19-
<h1>ODIN</h1>
20-
</div>
21-
<div class="footer-container">
22-
<p> Photo by Halie West Unsplash</a></p>
23-
</div>
24-
</div>
25-
<div class="info-container">
26-
<div class="header-container">
27-
<p>This is not a real online service! You know you need something like this in your life to help you realize
28-
your deepest dream.<br>Sign up <i>now</i> to get started.</br>
29-
<br>You <i>know</i> you want to.</p></br>
30-
</div>
31-
<div class="form-container">
32-
<div class="intro">
33-
<h3>Let's do this!</h3>
34-
</div>
35-
<div class="forms">
36-
<div class="left-container">
37-
<label for="firstName">FIRST NAME</label>
38-
<input type="text" id="firstName" name="firstName">
39-
40-
<label for="email">EMAIL</label>
41-
<input type="email" id="email" name="email">
42-
43-
<label for="password">PASSWORD</label>
44-
<input type="password" id="password" name="password">
45-
</div>
46-
<div class="right-container">
47-
<label for="lastName">LAST NAME</label>
48-
<input type="text" id="lastName" name="lastName">
49-
50-
<label for="phone">PHONE NUMBER</label>
51-
<input type="tel" id="phone" name="phone">
52-
53-
<label for="confirmPassword">CONFIRM PASSWORD</label>
54-
<input type="password" id="confirmPassword" name="confirmPassword">
55-
</div>
56-
</div>
57-
</div>
58-
<div class="button-container">
59-
<button>Create Account</button>
60-
<p>Already have an account? <a href="" target="">Log in</a></p>
61-
</div>
62-
</div>
63-
</div>
64-
<script src="script.js"></script>
65-
</body>
66-
67-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width>, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="./style.css">
8+
</head>
9+
<body>
10+
<div class="head-container">
11+
<div class="header-container">
12+
<div class="header-logo">
13+
<h3> Header Logo </h1>
14+
</div>
15+
<div class="header-link">
16+
<h6> header link one</h6>
17+
<h6> header link one</h6>
18+
<h6> header link three</h6>
19+
</div>
20+
</div>
21+
22+
<div class="intro-text-image-container">
23+
<div class="intro-text">
24+
<h1>This Website is awesome</h1>
25+
<p>This website has some subtext that goes here under the main title. It's a smaller font and the color is lower contrast</p>
26+
<button>Sign Up</button>
27+
</div>
28+
29+
<div class="intro-image">
30+
<p>this is a placeholder for an image</p>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<div class="info-container">
36+
<h2>Some random information.</h2>
37+
<div class="boxes-container">
38+
<div class="box1">
39+
<div class="box"></div>
40+
<p>this is some subtext under an illustration or image</p>
41+
</div>
42+
43+
<div class="box2">
44+
<div class="box"></div>
45+
<p>this is some subtext under an illustration or image</p>
46+
</div>
47+
48+
<div class="box3">
49+
<div class="box"></div>
50+
<p>this is some subtext under an illustration or image</p>
51+
</div>
52+
53+
<div class="box4">
54+
<div class="box"></div>
55+
<p>this is some subtext under an illustration or image</p>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<div class="quote-container">
61+
<p><em>This is an inspiring quote, or a testimonial from a customer. Maybe its just filling up space, or maybe people will actually read it. Who knows? All I know is that it looks nice.</em></p>
62+
<h4>-Thor, God of Thunder</h4>
63+
</div>
64+
65+
<div class="action-container">
66+
<div class="blue-box">
67+
<div class="action-box">
68+
<h3>Call to action! It's time!</h3>
69+
<p>Sign up for our product by clicking that button right over there!</p>
70+
</div>
71+
<button>Sign Up</button>
72+
</div>
73+
</div>
74+
75+
<footer>
76+
<p>Copyright The Odin Project 2021</p>
77+
</footer>
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)