Blog personal.

<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700|Roboto+Condensed&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"/><div class="fond-blog"><div class="navb-blog" style="background:#7C545D;"><span class="nb-bl">home</span><span class="nb-bl">about</span><span class="nb-bl">contact</span></div><div class="port-blog" style="background: url(http://via.placeholder.com/480x201);background-size:cover;"><div class="port-t" style="font-family: 'Dancing Script', cursive;"><span class="g">B</span>etty</div></div><div class="about-blog"><div class="fot-bl"><div class="bord-im"><img src="http://via.placeholder.com/150"/></div></div><div class="tex-blo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum eleifend lacus, ut lobortis dui luctus eget. Proin a hendrerit velit. Curabitur pretium nisl sit amet maximus rutrum. Nullam tempus tempor convallis.<br/><br/><a href="#"><span class="lnr lnr-file-empty ic-bl"></span></a><a href="#"><span class="lnr lnr-bubble ic-bl"></span></a><a href="#"><span class="lnr lnr-clock ic-bl"></span></a><a href="#"><span class="lnr lnr-smartphone ic-bl"></span></a></div></div><div class="post-anb"><div class="tit-pos">popular posts</div><div class="post-am"><div class="cuadri-bl" style="background:url(http://via.placeholder.com/100)center;"></div><div class="cuadri-bl"style="background:url(http://via.placeholder.com/100)center;"></div><div class="cuadri-bl"style="background:url(http://via.placeholder.com/100)center;"></div><div class="cuadri-bl"style="background:url(http://via.placeholder.com/100)center;"></div><div class="cuadri-bl"style="background:url(http://via.placeholder.com/100)center;"></div><div class="cuadri-bl"style="background:url(http://via.placeholder.com/100)center;"></div><div class="cuadri-bl"style="background:url(http://via.placeholder.com/100)center;"></div><div class="cuadri-bl"style="background:url(http://via.placeholder.com/100)center;"></div></div></div></div><div class="cred"><a href="https://bettyleg.tumblr.com">bettyleg</a></div>
<style>.fond-blog{width:480px; height:auto; background:#eee; outline:1px solid #ddd; margin:0 auto;} .navb-blog{height:15px; padding:10px; padding-left:40px;} .nb-bl{color:#fff; font-family: 'Roboto Condensed', sans-serif; font-size:8px; text-transform:uppercase; background:# 000; padding-right:25px; letter-spacing:2px; font-weight:900; position:relative; padding-left:2px; webkit-transition: 1s;-o-transition: 1s;transition: 1s;} .nb-bl:hover{cursor:pointer; font-style:italic; border-left:1px solid #fff; padding-left:10px; webkit-transition: 1s;-o-transition: 1s;transition: 1s; color:#C0AE8A;} .port-blog{height:200px; background-color:#D6C58C; border-bottom:1px solid #ddd;} .port-t {font-size:95px; width:400px; margin:0px auto; text-align:center; padding-top:75px; color:#fff; letter-spacing:2px; text-shadow:1px 1px 1px #000, -1px 1px 1px #ddd; height:70px;} .g{color:#C0AE8A ;} .about-blog{height:210px; background:#fafafa; display:grid; grid-template-columns:auto auto;} .fot-bl{width:165px; height:165px; padding:20px; padding-left:15px;} .bord-im{width:150px; height:150px; border-radius:180px; border:1px solid #ccc; padding:4px;} .bord-im img{width:150px; height:150px; border-radius:180px;} .tex-blo{width:270px; height:110px; margin-top:60px; margin-left:-35px; text-align:center; font-size:12px; color:#444; font-family: 'Roboto Condensed', sans-serif} .ic-bl{color:#999; font-size:15px; padding:3px 10px; background:#eee; margin-left:4px; border-radius:4px;} .ic-bl:hover{background:#C0AE8A; color:#fff} .tex-blo a{text-decoration:none;} .post-anb{height:272px; background:#fafafa; border:20px solid #eee; outline:1px solid #ddd; outline-offset:-20px;} .tit-pos{font-family: 'Roboto Condensed', sans-serif; font-size:12px; padding:20px 0px 5px 0px; text-align:center; width:250px; margin:0 auto; border-bottom:1px solid #ddd; text-transform:uppercase; color:#777; font-weight:900; letter-spacing:2px;} .post-am{height:209px; width:416px; margin:10px auto; outline:0 px solid #ccc; outline-offset:2px;} .cuadri-bl{float:left; width:100px; height:100px; background:#000; margin:2px; webkit-transition: 1s;-o-transition: 1s;transition: 1s; border-radius:0px;} .cuadri-bl:hover{webkit-transition: 1s;-o-transition: 1s;transition: 1s; border-radius:180px;} .cred{ width:500px; margin:0 auto; text-align:center; margin-top:0px; } .cred a{text-decoration:none; color:#444; background:#fafafa; outline:1px solid #ddd; padding:3px 10px; font-size:8px; text-transform: uppercase; letter-spacing:2px;}</style>