forked from Laboratoria/AppLove
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (142 loc) · 5.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<title>AppLove</title>
</head>
<body>
<!-- cabecera -->
<header>
<!-- Caja que centrara las secciones -->
<div class="container">
<!-- logo de la página -->
<div class="logo">
<img src="assets/images/logo.png" alt="logo">
</div>
<!-- Menú de navegación -->
<div class="menu text-uppercase">
<a href="#">Services</a>
<a href="#">Work</a>
<a href="#">The team</a>
</div>
</div>
</header>
<!-- home-hero -->
<section class="hero text-uppercase">
<!-- caja que centrara las secciones -->
<div class="container">
<h2>you just found an untilmate</h2>
<h1>We are applove from heart</h1>
<p>handcrafted - modern design - pixel perfect - passioned design</p>
<!-- clase button para los estitos -->
<a href="#" class="button">View services</a>
</div>
</section>
<!-- servicios -->
<section class="services">
<!-- caja que centrara las secciones -->
<div class="container">
<h2 class="text-uppercase">Services</h2>
<h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntut,<br>
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</h4>
<!-- cajitas con la clase (service) donde estara la imagen e información -->
<div class="service">
<img src="assets/images/services-1.png" alt="">
<h5 class="text-uppercase">user interface design</h5>
<h6>Wireframing</h6>
<h6>Prototyping</h6>
<h6>Usability testing</h6>
</div>
<div class="service">
<img src="assets/images/services-2.png" alt="">
<h5 class="text-uppercase">concept and ideas</h5>
<h6>Conceptualization</h6>
<h6>Digital Branding</h6>
<h6>Product Strategy</h6>
</div>
<div class="service">
<img src="assets/images/services-3.png" alt="">
<h5 class="text-uppercase">desing and branding</h5>
<h6>Interaction Design</h6>
<h6>Graphic Design</h6>
<h6>Identity Design</h6>
</div>
</div>
</section>
<!-- trabajo -->
<section class="work">
<!-- caja que centrara nuestras secciones -->
<div class="container">
<h2 class="text-uppercase">work</h2>
<h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntut,<br>
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</h4>
<!-- creamos una clase(big-image) -->
<img class="big-image" src="assets/images/hero.png" alt="">
<!-- grilla -->
<div class="imagebox">
<img src="assets/images/work-1.jpg" alt="">
<!-- cajita para el nombre del proyecto -->
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-2.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-3.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-4.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-5.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-6.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-7.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-8.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-9.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-10.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-11.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
<div class="imagebox">
<img src="assets/images/work-12.jpg" alt="">
<div class="proyect-name">Nombre del Proyecto</div>
</div>
</section>
<!-- pie de pagina -->
<footer>
<div class="container">
<p>© Copyright</p>
</div>
</footer>
<script src="js/app.js"></script>
</body>
</html>