-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (96 loc) · 3.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Conquering Rsponsive Layouts</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="container row">
<a href="#" class="logo">
<img src="img/logo.svg" />
</a>
<nav class="nav row">
<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">
<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>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>
<div class="hero__img">
<img src="img/hero-img.jpg" alt="hero picture" />
</div>
</div>
</section>
<main class="container row content">
<section class="content__text">
<h2>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="content__sidebar">
<div>
<h2>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>
</div>
<div>
<h2>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>
</div>
<div>
<h2>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>
</div>
</aside>
</main>
</body>
</html>