-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
218 lines (209 loc) · 11.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
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Digital Crafters</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/0d92068486.js"></script>
</head>
<body class="page">
<header class="header">
<nav class="header__menu">
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="#about">About</a></li>
<li class="menu__item"><a class="menu__link" href="#">Testimonials</a></li>
<li class="menu__item"><a class="menu__link" href="#services">Services</a></li>
<li class="menu__item"><a class="menu__link" href="#portfolio">Portfolio</a></li>
<li class="menu__item"><a class="menu__link" href="#contact">Contact</a></li>
</ul>
</nav>
<a class="header__logo logo" href="#">
<div class="logo__img"></div>
<span class="logo__text">Digital Crafters</span>
</a>
<div class="header__burger burger-icon"><div class="burger-icon__middle"></div></div>
<button class="header__button button button--outline">Request a quote</button>
</header>
<section id="hero" class="hero">
<p class="hero__suptitle">Get the foolproof strategy that helps you win</p>
<h1 class="hero__title">We give you the stuff you need to make more money</h1>
<p class="hero__text">Bring us your remarkable business. We’ll give you the design, content and tool you need to become unstoppable. 2018 is the year you become rich.</p>
<button class="hero__button button button--with-border">Claim your free consultation</button>
</section>
<section id="about" class="about">
<p class="about__suptitle">How we can help you</p>
<h1 class="about__title">You come up with the business, we’ll build the website</h1>
<p class="about__text about__text--first">Maybe you’ve hired someone in the past to create your website, only to find<br/> out they know everything about pretty fonts and nothing about designs that convert. Perhaps you’ve worked with a content creator who writes suspiciously like a robot.</p>
<div class="about__devices devices">
<div class="devices__inner">
<div class="devices__macbook"><img class="devices__macbook-inner" src="https://via.placeholder.com/489x308"></div>
<div class="devices__iphone"><img class="devices__iphone-inner" src="https://via.placeholder.com/138x244"></div>
</div>
</div>
<p class="about__text about__text--second">Or worse, you’ve heard horror stories about programmers, web designers and writers who sprint out of the starting blocks… and then disappear entirely. Luckily, you found us, and no one can stop you now from working with us.</p>
<button class="about__button button">Claim your free consultation</button>
<div class="about__slider slider slider--about">
<div class="about__slider-content slider__content">
<div class="slider__item slider__item--active slider__item--first about__card card">
<div class="card__logo"></div>
<p class="about__quotation text">Vivamus non porta dui. Vivamus eu est sodales, porta nisl eget, sollicitudin magna. Sed placerat sagittis dapibus. Vestibulum eget elit id nulla finibus rhoncus sit amet sodales quam. Nunc sollicitudin dictum nisl, et consequat dui ultrices at. Praesent mauris nisi, eleifend id libero non, tincidunt posuere nulla. Ut vel odio ut tellus faucibus luctus. Mauris libero justo, semper a felis ut, vehicula molestie nisi. Vestibulum sagittis.</p>
<span class="about__author text">Jenna Mosey</span><span class="about__position text"> - Manager at Softvision</span>
</div>
<div class="slider__item about__card card">
<div class="card__logo"></div>
<p class="about__quotation text">We have worked with Digital Crafters for several years across a range of projects. They have built the critical elements of our system and have always delivered a strong return on investment. Moreover, they are a pleasure to work with — always enthusiastic, professional and with a positive culture. I would, and have, recommended them to others in need of flexible development capacity.</p>
<span class="about__author text">Todd Quinto</span><span class="about__position text"> - CEO at Endave Software</span>
</div>
<div class="slider__item about__card card">
<div class="card__logo"></div>
<p class="about__quotation text">Vivamus non porta dui. Vivamus eu est sodales, porta nisl eget, sollicitudin magna. Sed placerat sagittis dapibus. Vestibulum eget elit id nulla finibus rhoncus sit amet sodales quam. Nunc sollicitudin dictum nisl, et consequat dui ultrices at. Praesent mauris nisi, eleifend id libero non, tincidunt posuere nulla. Ut vel odio ut tellus faucibus luctus. Mauris libero justo, semper a felis ut, vehicula molestie nisi. Vestibulum sagittis.</p>
<span class="about__author text">Jenna Mosey</span><span class="about__position text"> - Manager at Softvision</span>
</div>
</div>
<div class="slider__control">
<button class="slider__prev"><</button>
<button class="slider__ellipse slider__ellipse--active"></button>
<button class="slider__ellipse"></button>
<button class="slider__ellipse"></button>
<button class="slider__next">></button>
</div>
</div>
</section>
<section id="services" class="services">
<h1 class="services__title">Our Services</h1>
<p class="services__text">We’ll do everything we can to grow your revenue. Our motivation is to drive your business further that you can imagine.</p>
<div class="services__list">
<div class="services__item orion">
<div class="orion__logo orion__logo--journal"></div>
<h1 class="orion__title">Copywriting Material</h1>
<p class="orion__text">Or worse, you’ve heard horror stories about programmers, web designers and writers who sprint out of the starting blocks.</p>
</div>
<div class="services__item orion">
<div class="orion__logo orion__logo--home-page"></div>
<h1 class="orion__title">Landing Page Design</h1>
<p class="orion__text">Or worse, you’ve heard horror stories about programmers, web designers and writers who sprint out of the starting blocks.</p>
</div>
<div class="services__item orion">
<div class="orion__logo orion__logo--megaphone"></div>
<h1 class="orion__title">Full Marketing Design</h1>
<p class="orion__text">Or worse, you’ve heard horror stories about programmers, web designers and writers who sprint out of the starting blocks.</p>
</div>
<div class="services__item orion">
<div class="orion__logo orion__logo--browser-window"></div>
<h1 class="orion__title">Website Development</h1>
<p class="orion__text">Or worse, you’ve heard horror stories about programmers, web designers and writers who sprint out of the starting blocks.</p>
</div>
<div class="services__item orion">
<div class="orion__logo orion__logo--bookmark-archive"></div>
<h1 class="orion__title">Marketing Materials</h1>
<p class="orion__text">Or worse, you’ve heard horror stories about programmers, web designers and writers who sprint out of the starting blocks.</p>
</div>
</div>
</section>
<section id="portfolio" class="portfolio">
<h1 class="portfolio__title">Our Portfolio</h1>
<p class="portfolio__text">We’ve done lots of stuff in the past and we made millions in revenue for hundreds of happy customers.</p>
<div class="portfolio__slider slider">
<div class="slider__content">
<div class="slider__item slider__item--active work">
<!--<div class="work__photo">
<div class="work__photo-inner">
<img width="100%" src="https://via.placeholder.com/315x235">
</div>
</div>-->
<img class="work__photo-1" src="https://via.placeholder.com/586x467">
<div class="work__inner">
<div class="work__logo"></div>
<h1 class="work__title">LandingZap App</h1>
<p class="work__text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<div class="work__chips">
<span class="work__tag">UX</span>
<span class="work__tag">UI</span>
<span class="work__tag">Mobile app</span>
</div>
</div>
</div>
<div class="slider__item work">
<div class="work__photo">
<div class="work__photo-inner">
<img width="100%" src="https://via.placeholder.com/586x467">
</div>
</div>
<div class="work__inner">
<div class="work__logo"></div>
<h1 class="work__title">LandingZap App</h1>
<p class="work__text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<div class="work__chips">
<span class="work__tag">UX</span>
<span class="work__tag">UI</span>
<span class="work__tag">Mobile app</span>
</div>
</div>
</div>
<div class="slider__item work">
<div class="work__photo">
<div class="work__photo-inner">
<img width="100%" src="https://via.placeholder.com/586x467">
</div>
</div>
<div class="work__inner">
<div class="work__logo"></div>
<h1 class="work__title">LandingZap App</h1>
<p class="work__text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<div class="work__chips">
<span class="work__tag">UX</span>
<span class="work__tag">UI</span>
<span class="work__tag">Mobile app</span>
</div>
</div>
</div>
</div>
<div class="slider__control">
<button class="slider__prev"><</button>
<button class="slider__ellipse slider__ellipse--active"></button>
<button class="slider__ellipse"></button>
<button class="slider__ellipse"></button>
<button class="slider__next">></button>
</div>
</div>
</section>
<section id="contact" class="contact">
<h1 class="contact__title">Contact us today to learn how we increase your revenue.</h1>
<form class="form">
<div class="form__input">
<div class="form__icon form__icon--name"></div>
<input class="form__input-inner" type="text" name="name" placeholder="Your name">
</div>
<div class="form__input">
<div class="form__icon form__icon--mail"></div>
<input class="form__input-inner" type="email" name="email" placeholder="Email">
</div>
<div class="form__input">
<div class="form__icon form__icon--textarea"></div>
<textarea class="form__input-inner" rows="5" cols="32" placeholder="How we can help you?"></textarea>
</div>
<input class="form__button button" type="button" value="Claim your free consultation">
</form>
</section>
<footer class="footer">
<a class="footer__logo logo" href="#">
<div class="logo__img"></div>
<span class="logo__text">Digital Crafters</span>
</a>
<div class="social">
<a class="social__item" href="#"><i class="fab fa-twitter"></i></a>
<a class="social__item" href="#"><i class="fab fa-facebook-square"></i></a>
<a class="social__item" href="#"><i class="fab fa-instagram"></i></a>
<a class="social__item" href="#"><i class="fab fa-linkedin"></i></a>
</div>
<div class="footer__other">
<a class="footer__link" href="#">Terms of service</a>
<a class="footer__link" href="#">Privacy poicy</a>
</div>
</footer>
<script src="index.js"></script>
</body>
</html>