-
Notifications
You must be signed in to change notification settings - Fork 0
/
layout_fluido.html
91 lines (83 loc) · 2.24 KB
/
layout_fluido.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Layout Fluido</title>
<link rel="stylesheet" href="">
<style>
html{
width: 100%;
font-family: Verdana;
color: white;
}
.header{
width: 90%;
height: 90px;
margin-left: 5%;
background-color: #85929E;
}
h1{
text-align: center;
margin: 0;
position: relative;
top: 30px;
}
.articlep{
width: 60%;
height: 500px;
margin: 0.2% 0 0 5%;
background-color: #85929E;
display: inline-block;
float: left;
clear: both;
}
.aside{
width: 30%;
height: 500px;
margin: 0.2% 0 0 0.08%;
background-color: #85929E;
display: inline-block;
box-sizing: border-box;
}
p{
margin: 15px 5px 0 5px;
text-align: center;
}
.footer{
width: 90%;
height: 40px;
background-color:#85929E;
margin: 0.2% 0 0 5%;
}
h4{
text-align: center;
margin: 0;
position: relative;
top: 10px;
}
</style>
</head>
<body>
<header>
<div class="header">
<h1> Layout fluido %</h1>
</div>
</header>
<article>
<div class="articlep">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur maiores tenetur facilis, sit eveniet molestiae id fugiat praesentium ullam, eaque neque, voluptate, inventore exercitationem enim aliquam assumenda dolorem temporibus debitis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam voluptas saepe veritatis culpa tenetur, architecto autem corporis quod id ab tempore quos, sapiente et nihil suscipit veniam iste doloremque. Quibusdam!</p>
</div>
</article>
<aside>
<div class="aside">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis asperiores, quasi totam ex assumenda beatae, modi maxime perferendis. Dicta quibusdam a recusandae, sunt veniam veritatis molestiae maiores magni architecto perferendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia in velit ullam voluptatibus at quae nostrum, maxime similique incidunt. Quasi eligendi saepe, mollitia unde ea voluptatem, minima officiis! Laudantium, ratione.</p>
</div>
</aside>
<footer>
<div class="footer">
<h4> © Todos los derechos reservados.</h4>
</div>
</footer>
</body>
</html>