-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (157 loc) · 6.77 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edie homepage</title>
<link rel="stylesheet" href="./css/styles.css">
<link rel="icon" href="./images/devchallenges.png">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<span class="logo">Edie</span>
<nav>
<ul>
<li class="links"><a class="link" href="#">Home</a></li>
<li class="links"><a class="link" href="#">Services</a></li>
<li class="links"><a class="link" href="#">Our Works</a></li>
<li class="links"><a class="link" href="#">Clients</a></li>
<li class="links"><a class="link" href="#">Contact</a></li>
</ul>
</nav>
<img class="menu" src="./images/menu_black.svg" alt="">
</header>
<main>
<section class="top">
<div class="proposal">
<p class="color-text">Unhappy with your website?</p>
<h1>We create beautiful and fast web services</h1>
</div>
<img class="hero-img" src="./images/heroImage.jpg" alt="hero">
<div class="proposal">
<h2>Story, emotion and purpose</h2>
<p class="description">We help transform your ideas into real world applications that will outperform your toughest competition and help you achieve your strategic goals in short period of time.</p>
<p class="little-text">Want us to contact you?</p>
<div class="form">
<input class="input" type="email" placeholder="Email">
<a class="button-join" href="#">Join</a>
</div>
</div>
</section>
<section class="mid">
<h3>We offer high demand services</h3>
<section class="cards">
<div class="card">
<img class="icons" src="./images/ui.svg" alt="icon-ui">
<span class="stacks">UI/UX Design</span>
<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a metus ac nulla consequat aliquet id quis turpis.</p>
<a class="started" href="#">Get started</a>
</div>
<div class="card">
<img class="icons" src="./images/front.svg" alt="icon-ui">
<span class="stacks">Front End</span>
<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a metus ac nulla consequat aliquet id quis turpis.</p>
<a class="started" href="#">Get started</a>
</div>
<div class="card">
<img class="icons" src="./images/back.svg" alt="icon-ui">
<span class="stacks">Back End</span>
<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a metus ac nulla consequat aliquet id quis turpis.</p>
<a class="started" href="#">Get started</a>
</div>
</section>
<h3 class="h3-width">Good design means good business</h3>
<section class="desings">
<section class="des-left">
<div class="desing des-one">
<img class="desing-img" src="./images/smarthome.jpg" alt="">
<p class="desing-description">Full stack application</p>
<p class="desing-name">Smart home dashboard</p>
</div>
<div class="desing">
<img class="desing-img" src="./images/booking.png" alt="">
<p class="desing-description">Mobile application</p>
<p class="desing-name">Booking system</p>
</div>
</section>
<section class="des-right">
<div class="desing des-three">
<img class="desing-img" src="./images/onboard.png" alt="">
<p class="desing-description">UX/UI design</p>
<p class="desing-name">Onboard application</p>
</div>
<div class="desing">
<img class="desing-img" src="./images/juice-product.png" alt="">
<p class="desing-description">Front End applicati on</p>
<p class="desing-name">Juice product homepage</p>
</div>
<div class="see-more">
<p class="more">see more</p>
<img class="blue-arrow" src="./images/arrow.svg" alt="arrow">
</div>
</section>
</section>
</section>
<section class="bot">
<section class="team">
<section>
<p class="color-text text-red">Meet the team</p>
<h3 class="h3-resize">We are chilled and a laidback team</h3>
<p class="lorem lorem-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="members">
<div>
<img class="member-photo member-one" src="./images/person3.png" alt="member">
</div>
<div class="mens">
<img class="member-photo member-two" src="./images/person1.png" alt="member">
<img class="member-photo member-three" src="./images/person2.png" alt="member">
</div>
</section>
</section>
<section class="recomendation">
<h4>“Fast and outstanding resutls. Edie understands their customer’s needs. They have a young and talented team.”</h4>
<section class="by">
<div class="carlos-photo">
<img class="carlos" src="./images/person4.png" alt="carlos">
</div>
<div class="carlos-info">
<span class="carlos-name">Carlos Tran</span>
<p class="puesto">The Decorate Gatsby</p>
</div>
</section>
</section>
</section>
</main>
<footer>
<section class="footer-container">
<div class="sections">
<ul class="footer-links">
<li class="links"><a class="link-footer" href="#">Home</a></li>
<li class="links"><a class="link-footer" href="#">Services</a></li>
<li class="links"><a class="link-footer" href="#">Our Works</a></li>
<li class="links"><a class="link-footer" href="#">Clients</a></li>
<li class="links"><a class="link-footer" href="#">Contact</a></li>
</ul>
</div>
<section class="redes">
<span class="logo logo-white">Edie</span>
<div class="social-icons">
<div><img class="social" src="./images/instagram.svg" alt="instagram"></div>
<div><img class="social" src="./images/linkedin.svg" alt="linkedin"></div>
<div><img class="social" src="./images/twitter.svg" alt="twitter"></div>
</div>
</section>
<section class="footer-form">
<p class="little-text little-footer">Want us to contact you?</p>
<div class="form">
<input class="input" type="email" placeholder="Email">
<a class="button-join" href="#">Join</a>
</div>
</section>
</section>
<p class="created">created by <a class="iam" href="https://github.com/villalb4" target="_blanck">villalb4</a> - devChallenges.io</p>
</footer>
</body>
</html>