-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (152 loc) · 8.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Primary Meta Tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Challenge: Responsive Layouts don't have to be a struggle</title>
<meta name="title" content="Challenge: Responsive Layouts don't have to be a struggle">
<meta name="description" content="Last challenge from Kevin Powell's free course Conquering Responsive Layout! With mobile-first approach and semantic HTML.">
<meta name="author" content="Amodeus R.">
<link rel="shortcut icon" href="./img/favicon.png" type="image/x-icon">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://amodeusr.github.io/ResponsiveWebDesign-LastChallenge/">
<meta property="og:title" content="Challenge: Responsive Layouts don't have to be a struggle">
<meta property="og:description" content="Last challenge from Kevin Powell's free course Conquering Responsive Layout! With mobile-first approach and semantic HTML.">
<meta property="og:image" content="https://amodeusr.github.io/ResponsiveWebDesign-LastChallenge/img/page-models/metaDisplay.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://amodeusr.github.io/ResponsiveWebDesign-LastChallenge/">
<meta property="twitter:title" content="Challenge: Responsive Layouts don't have to be a struggle">
<meta property="twitter:description" content="Last challenge from Kevin Powell's free course Conquering Responsive Layout! With mobile-first approach and semantic HTML.">
<meta property="twitter:image" content="https://amodeusr.github.io/ResponsiveWebDesign-LastChallenge/img/page-models/metaDisplay.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Oswald:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/main.css">
<script src="menu.js" defer></script>
</head>
<body>
<header class="header">
<div class="hamburger">
<div class="hamburger-btn"></div>
</div>
<nav class="header__nav container">
<img class="header__logo" src="./img/logo.svg" alt="Site logo">
<ul class="header__list list">
<li class="header__list-item list-item">
<a href="#" class="header__link">Home</a>
</li>
<li class="header__list-item list-item">
<a href="#" class="header__link">About</a>
</li>
<li class="header__list-item list-item">
<a href="#" class="header__link">Contact</a>
</li>
<li class="header__list-item list-item">
<a href="#" class="header__link">Sign in</a>
</li>
<li class="header__list-item list-item">
<a href="#" class="header__link">Sign up</a>
</li>
</ul>
</nav>
</header>
<section class="hero">
<div class="container hero__desktop">
<h1 class="hero__title">Responsive Layouts <span class="accent-color">don't have to be a struggle</span>
</h1>
<div class="hero__cta">
<p class="hero__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto eius adipisci iure nam. Possimus nemo vero, dolorem eum quam error!</p>
<button class="hero__button">I want to learn</button>
</div>
</div>
</section>
<section class="alt-section">
<div class="container flex">
<div class="alt-section__card">
<h2 class="alt-section__title">Mobile-first</h2>
<p class="alt-section__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis dolorum voluptatem necessitatibus minima nesciunt quasi maiores sunt a exercitationem dolore?</p>
</div>
<div class="alt-section__card">
<h2 class="alt-section__title">Efficient</h2>
<p class="alt-section__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime similique minus at aspernatur ab dolores, consectetur veritatis expedita amet laboriosam.</p>
</div>
<div class="alt-section__card">
<h2 class="alt-section__title">Done Right</h2>
<p class="alt-section__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim corporis laboriosam officia nam sequi optio fuga commodi accusamus odio error.</p>
</div>
</div>
</section>
<main class="main container">
<section class="main__section">
<h2 class="main__title">It doesn't have to be so hard</h2>
<p class="main__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat ipsam voluptates debitis, atque reprehenderit voluptate tempora distinctio expedita, sunt eaque possimus nostrum? Quam, deleniti dolore voluptates delectus natus at minus.</p>
<img src="./img/page-image.jpg" alt="Image of page layouts drawn in a sheet" class="main__image">
<p class="main__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nesciunt debitis voluptatum accusamus nam beatae ab doloremque. Eum autem saepe, doloremque est consequuntur ipsum omnis aliquid blanditiis. Cupiditate, repudiandae minus?</p>
</section>
<aside class="main__aside flex">
<div class="aside__card">
<h3 class="aside__title">Break it down</h3>
<p class="aside__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem alias deleniti veniam eligendi quae accusamus iusto amet molestias?</p>
</div>
<div class="aside__card">
<h3 class="aside__title">Work your way up</h3>
<p class="aside__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate natus asperiores veniam earum placeat possimus maiores corporis? Quisquam.</p>
</div>
<div class="aside__card">
<h3 class="aside__title">Do it the right way</h3>
<p class="aside__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non voluptatem doloribus velit unde repellendus ea voluptas laboriosam!</p>
</div>
</aside>
</main>
<footer class="footer">
<div class="container">
<h4 class="footer__title">just scratching the surface</h4>
<div class="footer__columns">
<div class="footer__column">
<div class="footer__info">
<h5 class="info__title">About our company</h5>
<p class="info__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa aliquid mollitia, sapiente debitis nisi fugiat voluptas reiciendis ducimus voluptatum, voluptatem ipsum beatae animi quibusdam et.</p>
</div>
</div>
<div class="footer__column">
<div class="footer__info">
<h5 class="info__title">Getting around</h5>
<ul class="info__list list">
<li class="info__list-item list-item"><a href="#" class="footer__link">Home</a></li>
<li class="info__list-item list-item"><a href="#" class="footer__link">About</a></li>
<li class="info__list-item list-item"><a href="#" class="footer__link">Contact</a></li>
</ul>
</div>
</div>
<div class="footer__column">
<div class="footer__info">
<h5 class="info__title">Other things</h5>
<ul class="info__list list">
<li class="info__list-item list-item"><a href="#" class="footer__link">Lorem ipsum</a></li>
<li class="info__list-item list-item"><a href="#" class="footer__link">Dolor</a></li>
<li class="info__list-item list-item"><a href="#" class="footer__link">Sit amet</a></li>
<li class="info__list-item list-item"><a href="#" class="footer__link">Consectectur</a></li>
</ul>
</div>
</div>
<div class="footer__column">
<div class="footer__info">
<h5 class="info__title">And more</h5>
<ul class="info__list list">
<li class="info__list-item list-item"><a href="#" class="footer__link">Lorem ipsum</a></li>
<li class="info__list-item list-item"><a href="#" class="footer__link">Dolor</a></li>
<li class="info__list-item list-item"><a href="#" class="footer__link">Sit amet</a></li>
<li class="info__list-item list-item"><a href="#" class="footer__link">Consectectur</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>