-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (155 loc) · 7.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald:wght@700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>The Final Challenge</title>
</head>
<body>
<header>
<div class="container row">
<button class="nav-toggle" aria-label="open navigation">
<span class="hamburger"></span>
</button>
<a class="logo" href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/logo.svg" alt="Logo Image">
</a>
<nav class="nav">
<ul class="nav__list nav__list--primary">
<li class="nav__item"><a href="#" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
<li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
</ul>
<ul class="nav__list nav__list--secondary">
<li class="nav__item"><a href="#" class="nav__link">Sign In</a></li>
<li class="nav__item"><a href="#" class="nav__link nav__link--button">Sign up</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="container row">
<div class="hero__text">
<h1 class="hero__text-title">Responsive layouts <span class="hero__text-title-highlight">don’t have to
be a struggle</spa>
</h1>
<div class="hero__text-learn">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et
dolore magna aliqua. Ut enim ad minim veniam.</p>
<a href="#" class="btn">I want to learn</a>
</div>
</div>
</div>
</section>
<section class="advantages">
<div class="container row advantages__row">
<div class="advantages__col mobile-first">
<h2 class="advantages__title">Mobile-first</h2>
<p class="advantages__content">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam.</p>
</div>
<div class="advantages__col efficient">
<h2 class="advantages__title">Efficient</h2>
<p class="advantages__content">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam</p>
</div>
<div class="advantages__col done-right">
<h2 class="advantages__title">Done right</h2>
<p class="advantages__content">Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam.</p>
</div>
</div>
</section>
<main class="main container">
<section class="primary-content">
<h2 class="section-title">It doesn’t have to be so hard</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam.</p>
<img src="image/the-image.jpg" alt="UX design sketches" class="hero__img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<aside class="sidebar">
<div class="sidebar-col">
<h2 class="sidebar-title">Break it down</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div class="sidebar-col">
<h2 class="sidebar-title">Work your way up</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div class="sidebar-col">
<h2 class="sidebar-title">Break it down</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
</aside>
</main>
<footer class="footer">
<div class="container row">
<h1 class="footer-title just-scratch">just scratching the surface</h1>
<nav class="footer__navbar">
<div id="about" class="footer__about">
<h2 class="footer-title">About our company</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<div class="footer__navbar-nav getting-around">
<h2 class="footer-title">Getting around</h2>
<a href="#" class="footer__nav__link">Home</a>
<a href="#" class="footer__nav__link">About</a>
<a href="#" class="footer__nav__link">Contact</a>
</div>
<div class="footer__navbar-nav other-things">
<h2 class="footer-title">Other things</h2>
<a href="#" class="footer__nav__link">Lorem ipsum</a>
<a href="#" class="footer__nav__link">dolor</a>
<a href="#" class="footer__nav__link">sit amet</a>
<a href="#" class="footer__nav__link">consectetur</a>
</div>
<div class="footer__navbar-nav and-more">
<h2 class="footer-title">And more</h2>
<a href="#" class="footer__nav__link">Lorem ipsum</a>
<a href="#" class="footer__nav__link">dolor</a>
<a href="#" class="footer__nav__link">sit amet</a>
<a href="#" class="footer__nav__link">consectetur</a>
</div>
</nav>
</div>
<div class="attribution">
<p>Created with 💚 by <a href="https://github.com/azizp128">Aziz Prabowo</a></p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>