-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path01.html
89 lines (78 loc) · 2.6 KB
/
01.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Box Model</title>
<style>
body{
margin: 0;
}
.box{
height: 400px;
padding: 5px;
background-color: #ffffff;
width: 25%;
float: left;
box-sizing: border-box;
}
.imagen{
text-align: center;
}
img{
max-width: 200px;
}
nav{
background-color: gold;
list-style-type: none;
height: 80px;
width: 100%;
position: fixed;
top: 0;
}
nav li{
float: left;
padding: 30px;
}
.clearfix{
clear: both;
}
.parrafo1{
margin-top: 130px;
}
</style>
</head>
<body>
<nav>
<li>Inicio</li>
<li>Acerca de</li>
<li>Contacto</li>
</nav>
<div class="clearfix"></div>
<p class="parrafo1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus ipsum magnam placeat natus minima sint et harum, voluptatem. Rem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus ipsum magnam placeat natus minima sint et harum, voluptatem. Rem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus ipsum magnam placeat natus minima sint et harum, voluptatem. Rem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus ipsum magnam placeat natus minima sint et harum, voluptatem. Rem!</p>
<div class="box">
<div class="imagen">
<img src="images/logo_desafio_latam.svg" alt="logo desafio latam" >
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus ipsum magnam placeat natus minima sint et harum, voluptatem. Rem!</p>
</div>
<div class="box">
<div class="imagen">
<img src="images/logo_desafio_latam.svg" alt="logo desafio latam">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus ipsum magnam placeat natus minima sint et harum, voluptatem. Rem!</p>
</div>
<div class="box">
<div class="imagen">
<img src="images/logo_desafio_latam.svg" alt="logo desafio latam">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus ipsum magnam placeat natus minima sint et harum, voluptatem. Rem!</p>
</div>
<div class="box">
<div class="imagen">
<img src="images/logo_desafio_latam.svg" alt="logo desafio latam">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus ipsum magnam placeat natus minima sint et harum, voluptatem. Rem!</p>
</div>
</body>
</html>