-
Notifications
You must be signed in to change notification settings - Fork 0
/
ejercicio4.html
59 lines (57 loc) · 2.96 KB
/
ejercicio4.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ejercicio 4</title>
<style>
html body{
margin: auto;
box-sizing: border-box;
}
.box{
position: absolute;
top: 0;
width: 100%;
height: 1rem;
}
article{
padding: 0 1%;
}
section div{
float: left;
padding: 0 .5%;
width: 24%;
}
nav{
position: fixed;
top: 0;
text-align: right;
background-color: grey;
width: 100%;
}
</style>
</head>
<body>
<nav>
<p>Holaaa, yo soy un menu que te sigue</p>
</nav>
<div class="box"></div>
<article>
<h1>Heeey</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis mollitia, natus animi facilis. Unde quo et natus ducimus aliquid assumenda facilis, ullam, harum similique, accusamus laborum corporis deleniti, aut quod.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsa minima perferendis quibusdam quod, fugit itaque voluptatibus dignissimos, nostrum dicta numquam porro, vero, possimus sequi hic necessitatibus tempore modi incidunt.</p>
<h2>4 columnas!!!</h2>
<section>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat optio qui nisi voluptatem adipisci, quidem ipsa quam earum. Incidunt itaque commodi mollitia voluptate cumque omnis assumenda sunt dignissimos facilis iure. <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, nisi. Enim dolore, vitae sequi incidunt eligendi iure voluptatem, labore doloribus, minus maxime quos eum cumque. Ipsa exercitationem fuga numquam! Magnam.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita labore velit, cupiditate. Minima nulla eveniet facilis voluptatum labore commodi facere architecto dolor laboriosam, eum, asperiores enim reprehenderit, fugiat mollitia harum. <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis nostrum facere eligendi dolores numquam beatae explicabo totam quas id architecto tempora, quia sequi quod tenetur impedit, cum alias at vero.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit enim, maiores itaque doloribus esse odit porro repellendus nobis facere voluptatem laboriosam assumenda odio, perspiciatis impedit consequuntur alias, aliquam magnam ratione! <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quae earum ab maiores illo ipsam totam fuga sunt quasi doloribus eum a, ullam. Commodi esse quas, consectetur eos optio perferendis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eum dignissimos possimus odit expedita laborum est repellendus, magnam et nulla sit culpa aliquid optio nostrum soluta maiores voluptates nisi dolorem. <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor debitis sit doloribus explicabo asperiores eaque tenetur, nisi eius voluptas ea aperiam nemo vitae totam quae ab. Et, minima voluptatem error!</div>
</section>
</article>
</body>
</html>