"HARUN PEHLİVAN Resume Flexbox"
Bootstrap 3.0.0 Snippet by harunpehlivan

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" /> <title>HARUN PEHLİVAN</title> <!-- CSS --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- SOCIAL MEDIA ICONS --> <link rel="stylesheet" href="https://s3.amazonaws.com/icomoon.io/114779/Socicon/style.css?rd5re8"> </head> <body> <div class="container"> <div class="aside"> <h1>Hi there!</h1> <h2>I'm HARUN PEHLİVAN</h2> <!-- image option <img src="images/bill-murray-500x500.jpg"> --> <img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1504470047"> <div class="social-media"> <ul> <a href="https://www.facebook.com/profile.php?id=100008152065270"><li><span class="socicon-facebook"></span> Facebook</li></a> <a href="https://twitter.com/HTERCUMANP"><li><span class="socicon-twitter"></span> Twitter</li></a> <a href="https://www.instagram.com/harunpehlivantebimtebitagem"><li><span class="socicon-instagram"></span> Instragram</li></a> </ul> </div> <div class="basic-information"> <h3>Occupation</h3> <p>FOUNDER| CEO | BLOGGER<p> </div> <div class="basic-information"> <h3>Birth Date</h3> <p>07/22/1984 (age 33)</p> </div> <div class="basic-information"> <h3>Web me!</h3> <p> <a href="http://harunpehlivantebimtebitagem.ml" target="_blank">TEBİM/TEBİTAGEM FOUNDER,CEO BLOGGER</a> <h3>Email me!</h3> <p><a href="mailto:trcmnhp@hotmail.com">trcmnhp@hotmail.com</a></p> </div> </div> <div class="main"> <div class="main-info"> <h3>CV</h3> <p> <a href="http://www.doyoubuzz.com/harun-pehlivan" target="_blank">E-CV</a></p> <h3>Adress</h3> <blockquote>YENİ MAHALLE MİMAR SİNAN SOKAK NO:2 SULUOVA/AMASYA TÜRKİYE POSTA KODU:05500</blockquote> <blockquote>TEL: 0(358) 417 62 30 </blockquote> <span> <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank">FOUNDER,CEO BLOGGER E-CV</a> </span> </div> </div> <div class="footer"> </div> </div> </body> </html>
/*** Fonts ***/ @import url('https://fonts.googleapis.com/css?family=Oswald:400,500,700'); /*** General resets ***/ * { box-sizing: border-box; /* 1 */ } body { margin: 0; font-family: 'Oswald', sans-serif; padding: 1rem; background-color: #401934; } h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; } ul{ margin: 0; padding: 0; } li{ list-style: none; margin: 0; } /*** Main structure ***/ .container { display: -webkit-flex; display: flex; max-width: 1000px; margin: 0 auto; box-shadow: 1px 1px 30px #000000; } .aside { -webkit-flex: 1; flex: 1; flex-basis:25%; background-color: #7a164a; padding: 2rem; text-align: center; border:8px solid #f21a2f; color: white; } .main{ -webkit-flex: 3; flex: 3; flex-basis:75%; background: url('http://www.gabrielhidalgo.com.au/others-images/bill-murray-cv-background.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .main p{ margin: 0; padding:0.5rem 0 1rem 0; } /*** Main section ***/ .main-info{ padding:2rem; color: white; } .main-info p{ font-weight: 400; } .main-info a{ color: white; text-decoration: underline; } .secondary-info{ padding:2rem; color: white; border-top: 1px solid white; } /*** Aside section ***/ .aside h1{ font-size: 2.5rem; } .aside img{ border-radius: 50%; width: 100%; max-width:250px; min-width:200px; text-align: center; box-shadow: 3px 3px 5px #401934; margin: 1rem 0; border:2px solid white; } .aside .social-media ul li{ padding: 0.5rem 0; border-bottom: 1px solid white; } .aside .social-media a{ color: white; text-decoration: none; } .basic-information{ margin: 2rem 0 0 0; } .basic-information h3{ margin: 0.3rem 0; } .basic-information p{ margin: 0; } .basic-information a{ color: white; } /* Small screens */ @media all and (max-width:700px) { .container { /* On small screens, we are no longer using row direction but column */ flex-direction: column; } .aside { width:100%; padding: 2rem 0; } .main{ width: 100%; } .aside .social-media ul li{ padding: 0.5rem; display: inline-block; border-bottom: none; } .aside .social-media a{ text-decoration: none; } }

Related: See More

Light Bootstrap Dashboard
Simple Resume template
flexbox | column | bootstrap MixIn

Questions / Comments: