-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (129 loc) · 7.9 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
<!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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet">
<title>Simple landing page</title>
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/media.css">
</head>
<body>
<div class="wrapper">
<!-- header -->
<header class="header">
<div class="header__menu">
<div class="header__logo"></div>
<nav class="header__nav">
<a href="/" class='header__link'>Product</a>
<a href="/" class='header__link'>About</a>
<a href="/" class='header__link'>Contacts</a>
</nav>
<button type="button" class="header__button">Download Now</button>
<button class="header__menu-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="header__list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>
</div>
<!-- hero -->
<div class="header__hero">
<h2 class="hero__title">Fast and powerful, just like your work</h2>
<p class="hero__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</header>
<main class="main">
<!-- about -->
<div class="about">
<div class="about__group">
<h4 class="about__title">Nulla commodo aliqua aliqua ut</h4>
<div class="about__content">
<article class="about__text">
<p class="about__desc">
Lorem quis sunt magna dolor consectetur aliqua officia laborum reprehenderit
</p>
<a class="about__link" href="/"><span class="about__link-text">Read more</span><img class="about__arrow" src="assets/about/arrow.svg" alt="arrow"></a>
</article>
<article class="about__text">
<p class="about__desc">
Lorem quis sunt magna dolor consectetur aliqua officia laborum reprehenderit
</p>
<a class="about__link" href="/"><span class="about__link-text">Read more</span><img class="about__arrow" src="assets/about/arrow.svg" alt="arrow"></a>
</article>
</div>
</div>
<img class="about__image" src="assets/about/image.jpg" alt="The mountain" />
</div>
<!-- offers -->
<div class="offers">
<div class="offers__block">
<h5 class="offers__title">Nulla ut ea</h5>
<p class="offers__subtitle">Reprehenderit esse labore id veniam ut veniam non ex adipisicing amet ullamco dolor proident. Exercitation velit ea incididunt</p>
</div>
<div class="offers__frame">
<ul class="offers__list">
<li class="offers__item">Graphic Design</li>
<li class="offers__item">UX Design</li>
<li class="offers__item">Prototyping</li>
<li class="offers__item">Webflow</li>
</ul>
<ul class="offers__list">
<li class="offers__item">Branding</li>
<li class="offers__item">Coding</li>
<li class="offers__item">Back-End</li>
</ul>
</div>
</div>
<!-- showcases -->
<div class="showcases">
<div class="showcases__box">
<h6 class="showcases__title">Where teams design together</h6>
<p class="showcases__text">Lorem quis sunt magna dolor consectetur aliqua officia laborum reprehenderit</p>
</div>
<img class="showcases__image" src="assets/showcases/picture-one.jpg" alt="The photo">
<img class="showcases__image" src="assets/showcases/picture-two.jpg" alt="The photo">
<img class="showcases__image" src="assets/showcases/picture-three.jpg" alt="The photo">
</div>
<!-- testimonials -->
<div class="testimonials">
<h4 class="testimonials__title">Nulla commodo aliqua aliqua ut</h4>
<div class="testimonials__cards">
<div class="testimonials__frame">
<p class="testimonials__text">Reprehenderit esse labore id veniam ut veniam non ex adipisicing amet ullamco dolor proident. Exercitation velit ea incididunt sit qui do ipsum fugiat laboris minim nostrud dolor qui.</p>
<p class="testimonials__name">Ralph Richards</p>
<p class="testimonials__job">UX Designer</p>
</div>
<div class="testimonials__frame">
<p class="testimonials__text">Reprehenderit esse labore id veniam ut veniam non ex adipisicing amet ullamco dolor proident. Exercitation velit ea incididunt sit qui do ipsum fugiat laboris minim nostrud dolor qui.</p>
<p class="testimonials__name">Angel Wilson</p>
<p class="testimonials__job">UX Designer</p>
</div>
</div>
</div>
</main>
<!-- footer -->
<footer class="footer">
<img class="footer__logo" src="assets/footer/footer-logo.svg" alt="Logo">
<div class="footer__frame">
<h6 class="footer__title">cillum incididunt</h6>
<div class="footer__image">
<a class="footer__icon" href="/"><img src="assets/footer/linkedin.svg" alt="linkedin"></a>
<a class="footer__icon" href="/"><img src="assets/footer/twitter.svg" alt="twitter"></a>
<a class="footer__icon" href="/"><img src="assets/footer/facebook.svg" alt="facebook"></a>
<a class="footer__icon" href="/"><img src="assets/footer/instagram.svg" alt="instagram"></a>
</div>
<div class="footer__copyright">
<p class="footer__text">Nostrud aliquip laboris</p>
<p class="footer__text">© 2020 Wirefigma</p>
</div>
</div>
</footer>
</div>
</body>
</html>