<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background: white;
/* background: #000 url(https://wallpaperstock.net/wallpapers/thumbs1/30111wide.jpg); */
/* El cover se usa para que el fondo al ser una imagen abarque el 100% y el fixed para que quede fijo*/
/* background-size:cover;
background-attachment: fixed; */
}
.container {
margin: auto;
width: 90%;
max-width: 1000px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
header {
width: 100%;
padding: 10px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
header .logo {
width: 15%;
}
header .logo img {
width: 100%;
}
header .menu a {
color: #fff;
text-decoration: none;
margin-right: 10px;
}
header .menu a:hover {
text-decoration: underline;
}
.main {
background: #fff;
padding: 20px;
width: 70%;
}
.main article .thumb {
margin-bottom: 20px;
}
.main article .thumb img {
width: 100%;
vertical-align: top;
}
.main article h2 {
margin-bottom: 20px;
font-weight: normal;
font-size: 32px;
text-align: center;
}
.main article p {
margin-bottom: 20px;
font-size: 18px;
line-height: 27px;
}
aside {
width: 30%;
background: #f7f7f7;
padding: 20px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
aside .ad {
font-size: 30px;
text-align: center;
color: #fff;
padding: 50px 0;
margin-bottom: 20px;
background: #4f5d79;
}
footer {
margin: 20px 0;
background: rgba(255 255 255/.2);
padding: 20px;
width: 100%;
color: #000;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
footer .social a {
color: #000;
text-decoration: underline;
margin-left: 10px;
}
footer .social a:hover {
text-decoration: none;
}
@media screen and (max-width: 800px) {
.main {
width: 100%;
}
aside {
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
aside .ad {
width: 30%;
margin-bottom: 0px;
}
}
@media screen and (max-width: 600px) {
header {
flex-direction: column;
padding-bottom: 20px;
justify-content: center;
}
header .menu {
width: 100%;
background: rgba(255 255 255 /.2);
text-align: center;
padding: 10px;
}
header .logo {
width: 30%;
margin-bottom: 5px;
}
footer {
flex-direction: column;
text-align: center;
flex-wrap: wrap;
}
footer .author {
order: 2;
width: 100%;
}
footer .social {
order: 1;
width: 100%;
}
footer .social a {
margin-bottom: 20px;
}
}
@media screen and (max-width: 400px) {
aside {
display: none;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Google_org_logo.svg/1280px-Google_org_logo.svg.png"
alt="">
</div>
<nav class="menu">
<a href="#"> Inicio </a>
<a href="#"> Block </a>
<a href="#"> Contact </a>
</nav>
</header>
<section class="main">
<article>
<div class="thumb">
<img
src="https://images.unsplash.com/photo-1593062096033-9a26b09da705?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
alt="">
</div>
<h2>Titulo del articulo</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, laboriosam perspiciatis! Cumque inventore
maxime, assumenda magnam consequatur iste voluptatem sit, a quasi, architecto eveniet quibusdam laborum ea
in! Eveniet, architecto.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eius voluptatum ea qui distinctio. Unde,
voluptatem tempora voluptatibus laboriosam corrupti vitae odit rerum, aperiam, adipisci aliquid
necessitatibus iste minus magni?
<br> <br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque illo alias fugiat neque atque voluptatem
iste voluptas! Dicta, fuga assumenda libero nihil culpa voluptatum eos, necessitatibus ad, minus molestiae
sunt?
</p>
</article>
</section>
<aside>
<div class="ad">
<p>AD</p>
</div>
<div class="ad">
<p>AD</p>
</div>
<div class="ad">
<p>AD</p>
</div>
</aside>
<footer>
<div class="author">
<p>Creado por Antonio Gelvez</p>
</div>
<div class="social">
<a href="#">GitHub</a>
<a href="#">CodePen</a>
</div>
</footer>
</div>
</body>
</html>
