-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnav.html
101 lines (96 loc) · 3.6 KB
/
nav.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Conquering Responsive Layouts</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="nav.css" />
</head>
<body>
<header>
<div class="container row">
<a class="logo" href="#"
><img src="img/logo.svg" alt="conquering responsive design"
/></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="#" 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">Sign up</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="container row">
<div class="hero__text">
<h1>Responsive layouts don’t have to be a struggle</h1>
<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>
<img
src="img/hero-img.jpg"
alt="UX design sketches"
class="hero__img"
/>
</div>
</section>
<main class="main container row">
<section class="primary-content">
<h2 class="section-title">
Quality designs made custom, on demand, just for you
</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>
<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">
<h2 class="sidebar-title">Cheap</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>
<h2 class="sidebar-title">Quick</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>
<h2 class="sidebar-title">Quality</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>
</aside>
</main>
</body>
</html>