- Share this text:
Versão Mobile - posted by guest on 2nd February 2020 05:22:57 AM
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background:#eee;
font-family:Calibri;
font-size:18px;
margin:0;
}
a { text-decoration:none; }
a:hover { text-decoration:none; }
#container {
width:80%;
margin:50px auto 20px auto;
}
.posts {
width:calc(65% - 100px);
padding:30px;
background:#fff;
border:1px solid #dfdfdf;
text-align:justify;
margin-bottom:40px;
}
.posts img {
max-width:100%;
}
aside {
display:inline-block;
width:35%;
float:right;
}
aside img {
border-radius:100%;
max-width:100%;
display:block;
margin:0 auto;
}
aside .description {
text-align:justify;
width:80%;
margin:5px auto;
}
header {
background:black;
text-align:center;
}
header h1 {
margin:0;
padding:20px 20px 0px 20px;
color:#fff;
}
header nav {
padding-bottom:20px;
}
header nav a {
text-transform:uppercase;
color:#fff;
font-weight:900;
}
footer {
background:black;
text-align:center;
}
footer h1 {
margin:0;
padding:20px;
color:#fff;
}
@media screen and (max-width:600px) {
aside {
display:none;
}
#container {
width:98%;
margin-top:20px;
}
.posts {
width:calc(100% - 40px);
padding:20px;
}
header h1 {
display:none;
}
header nav {
padding:20px;
}
}
</style>
</head>
<body>
<header>
<h1>{Title}</h1>
<nav>
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
<a href="/">link</a>
</nav>
</header>
<div id="container">
<aside>
<img src="https://static.tumblr.com/6486875831a92b53bf9e1f0837e6c7be/s2qsk1o/9FAq4vbwx/tumblr_static_ahirqszr0rkg404g4sgcok8c0.png" />
<div class="description">
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
</div>
</aside>
<div class="posts">
<img src="https://images.unsplash.com/photo-1580554530913-3241d593478d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1280&q=80" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="posts">
<img src="https://images.unsplash.com/photo-1580579179951-694bfb327c6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1280&q=80" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<footer>
<h1>{Title}</h1>
</footer>
</body>
</html>