-
Notifications
You must be signed in to change notification settings - Fork 0
/
ejercicio1.html
107 lines (94 loc) · 5.7 KB
/
ejercicio1.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
<!--Realiza las correcciones y ejercicios de forma local; luego guarda los cambios y
súbelos a tu repositorio de Github.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ejercicio 1</title>
<link rel="stylesheet" href="">
<style>
.box{
height: 100px;
margin: 5px;
background-color: gray;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> -->
<!-- BORDER-BOX: Agregar 4 cajas distribuidas horizontalmente, con width de 25% y margin de 5px. -->
<!-- FLOAT: Agregar texto e imágenes a las cajas, de acuerdo al siguiente ejemplo: -->
<!-- FIXED: Agregar un sticky navbar en el borde superior, que ocupe el 100% del ancho, agregar
texto y color de fondo. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ejercicio 1</title>
<link rel="stylesheet" href="">
<style>
body{
margin: 0;
}
.navbar h2{
width: 100%;
height: 50px;
background-color: orange;
position: fixed;
margin: 0;
text-align: center;
}
.box{
width: 25%;
height: 400px;
padding: 5px;
display: inline-block;
float: left;
box-sizing: border-box;
}
img{
position: relative;
left: 60px;
}
p{
position: relative;
top: -10px;
text-align: justify;
}
</style>
</head>
<body>
<div class="navbar">
<h2> Ejercicio 1 Border-Box, Float, Fixed</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus nesciunt eos, voluptas optio, ab architecto, corporis mollitia fugiat accusamus pariatur, quas fuga ipsa exercitationem facilis. Illum obcaecati, reprehenderit nostrum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus nesciunt eos, voluptas optio, ab architecto, corporis mollitia fugiat accusamus pariatur, quas fuga ipsa exercitationem facilis. Illum obcaecati, reprehenderit nostrum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus nesciunt eos, voluptas optio, ab architecto, corporis mollitia fugiat accusamus pariatur, quas fuga ipsa exercitationem facilis. Illum obcaecati, reprehenderit nostrum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus nesciunt eos, voluptas optio, ab architecto, corporis mollitia fugiat accusamus pariatur, quas fuga ipsa exercitationem facilis. Illum obcaecati, reprehenderit nostrum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus nesciunt eos, voluptas optio, ab architecto, corporis mollitia fugiat accusamus pariatur, quas fuga ipsa exercitationem facilis. Illum obcaecati, reprehenderit nostrum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus nesciunt eos, voluptas optio, ab architecto, corporis mollitia fugiat accusamus pariatur, quas fuga ipsa exercitationem facilis. Illum obcaecati, reprehenderit nostrum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus nesciunt eos, voluptas optio, ab architecto, corporis mollitia fugiat accusamus pariatur, quas fuga ipsa exercitationem facilis. Illum obcaecati, reprehenderit nostrum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus nesciunt eos, voluptas optio, ab architecto, corporis mollitia fugiat accusamus pariatur, quas fuga ipsa exercitationem facilis. Illum obcaecati, reprehenderit nostrum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus nesciunt eos, voluptas optio, ab architecto, corporis mollitia fugiat accusamus pariatur, quas fuga ipsa exercitationem facilis. Illum obcaecati, reprehenderit nostrum.</p>
<div class="box">
<img src="images/logodesafio.jpg" alt="">
<p class="texto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut et quam, officia explicabo eaque voluptas harum distinctio saepe quidem voluptate soluta maxime, facere iure cum omnis sequi odio molestias quos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur numquam nam, quis unde aperiam non eaque blanditiis iure odit tempora. Aut velit ducimus fugiat cumque. Quis, eveniet! Quod eaque, totam.</p>
</div>
<div class="box">
<img src="images/logodesafio.jpg" alt="">
<p class="texto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut et quam, officia explicabo eaque voluptas harum distinctio saepe quidem voluptate soluta maxime, facere iure cum omnis sequi odio molestias quos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur numquam nam, quis unde aperiam non eaque blanditiis iure odit tempora. Aut velit ducimus fugiat cumque. Quis, eveniet! Quod eaque, totam.</p>
</div>
<div class="box">
<img src="images/logodesafio.jpg" alt="">
<p class="texto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut et quam, officia explicabo eaque voluptas harum distinctio saepe quidem voluptate soluta maxime, facere iure cum omnis sequi odio molestias quos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur numquam nam, quis unde aperiam non eaque blanditiis iure odit tempora. Aut velit ducimus fugiat cumque. Quis, eveniet! Quod eaque, totam.</p>
</div>
<div class="box">
<img src="images/logodesafio.jpg" alt="">
<p class="texto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut et quam, officia explicabo eaque voluptas harum distinctio saepe quidem voluptate soluta maxime, facere iure cum omnis sequi odio molestias quos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur numquam nam, quis unde aperiam non eaque blanditiis iure odit tempora. Aut velit ducimus fugiat cumque. Quis, eveniet! Quod eaque, totam.</p>
</div>
</body>
</html>