"Portfolio based on Bootstrap"
Bootstrap 3.2.0 Snippet by astralproductions

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Erythrina works</title> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Serif' rel='stylesheet' type='text/css'> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css" > </head> <body> <div id="scrollable" data-spy="scroll" data-target="#target_nav"> <!-- .....NAV BAR...... --> <header> <nav class="navbar-fixed-top" id="target_nav"> <div class="container"> <a href=""><div class="navbar-overbox"><h1> ERYTHINA</h1><h2>let me make you believe<h2> </div></a> <div class="pull_right"> <ul> <li><a href="#portfolio">PORTFOLIO</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#contact">CONTACT</a></li> </ul> </div> </nav> </header> <div class="headerImage"> </div> <div class="blueline"></div> <div class="container"> <!--CONTAINER OPEN--> <!-- .....PORTFOLIO...... --> <!-- .the bootstrap modal lg. --> <div id="portfolio"></div> <div class="modal fade bs-example-modal-lg" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg "> <div class="modal-content my_modalbox"> <img class="pull_right close" data-dismiss="modal" src="cerrar.png" height="30" width="30"> <div class="centering"><img class="centering" src="titulo.png" height="30" width="224"> </div> <div class="text-center"><h1> categoria del proyecto </h1></div> <h2>modal box for picture 1</h2> <div class="horizontalpic centering"> 1pic</div> <div class="verticalpic"> 2pic</div> <div class="verticalpic"> 3pic</div> <div class="clearfix"></div> </div> </div> </div> <div class="modal fade bs-example-modal-lg" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg "> <div class="modal-content my_modalbox"> <img class="pull_right close" data-dismiss="modal" src="cerrar.png" height="30" width="30"> <div class="centering"><img class="centering" src="titulo.png" height="30" width="224"> </div> <div class="text-center"><h1> categoria del proyecto </h1></div> <h2>modal box for picture 2</h2> <div class="horizontalpic centering"> 1pic</div> <div class="verticalpic"> 2pic</div> <div class="verticalpic"> 3pic</div> <div class="clearfix"></div> </div> </div> </div> <div class="modal fade bs-example-modal-lg" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg "> <div class="modal-content my_modalbox"> <img class="pull_right close" data-dismiss="modal" src="cerrar.png" height="30" width="30"> <div class="centering"><img class="centering" src="titulo.png" height="30" width="224"> </div> <div class="text-center"><h1> categoria del proyecto </h1></div> <h2>modal box for picture 3</h2> <div class="horizontalpic centering"> 1pic</div> <div class="verticalpic"> 2pic</div> <div class="verticalpic"> 3pic</div> <div class="clearfix"></div> </div> </div> </div> <!-- </div>--> <div class="section-heading centering"> <img class="centering" src="portfolio.png" height="30" width="224"> </div> <!-- .carrousel --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <!--<li data-target="#myCarousel" data-slide-to="2"></li>--> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active"> <!-- .thumbnails row. --> <div class="row thumbnailStyle"> <div class="col-sm-3"> <div id="thumbnailImage1" data-toggle="modal" data-target=".bs-example-modal-lg"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage2" data-toggle="modal" data-target=".bs-example-modal-lg"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage3"> <div id="overlay"></div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage4"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage5"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage6"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage7"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage8"> <div id="overlay"> </div> </div> </div> </div> </div> <div class="item"> <div class="row thumbnailStyle"> <div class="col-sm-3"> <div id="thumbnailImage1"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage2"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage3"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage4"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage5"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage6"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage7"> <div id="overlay"> </div> </div> </div> <div class="col-sm-3"> <div id="thumbnailImage8"> <div id="overlay"> </div> </div> </div> </div> </div> </div> <!-- Carousel nav left-right --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <div id="about"></div> <!-- .....ABOUT ......... --> <section class="aboutSection section-heading"> <div class="text-center centering"> <img src="about.png" height="30" width="224" align="middle"> </div> <div class="row"> <div class="col-sm-4"> <div class="about-skills"> <img src="skills.png"> </div> </div> <div class="col-sm-8 about-text"> <h2><p> ||| HELLO WORLD ||| I’m young full time desginer / photographer !!!</p> After high school, I made my vocational training press design. Then I decided to make a Design bachelor degree with a strong fundation in conventional arts. Currently I’m training myself in interactive desging and in the audiovisual field.  <a href=""> CV.pdf</a></h2> </div> </div> </section> <div class="greyline"></div> <!-- .....CONTACT......... --> <section class= "contactSection" id="contact"> <div class="text-center"> <img src="contact.png" height="30" width="224" align="middle"> </div> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-8 contact-text"> <h2>me if you are interested in hiring me or need a freelance designer.</h2> <a href="">or send an e-mail</a> </div> <div class="contact-form"> <form action="contact me"> <input type="text" placeholder="Name" name="name" required> <input type="email" placeholder="Email" name="email" required> <textarea placeholder="Message" name="message" required></textarea> <div class="captcha"> <input type="text" value="2 + 3 =" name="question" required readonly> <input type="text" placeholder="Answer" name="captcha" required> </div> <input class="send" type="submit" value="Send"> </form> </div> </section> </div> </div> <!-- container --> <!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script> </body> <footer class="text-center"> <h1>Copyright &copy 2014 Lidia Diaz Navarro </h1> </footer> </html>
/*TYPE refence font-family: 'Droid Sans', sans-serif; font-family: 'Droid Serif', serif; h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; } */ /*GENERAL STYLE*/ .centering{ display: block; margin-left: auto; margin-right: auto; } .headerImage h1 { margin: 0px auto 0px auto; padding-top: 200px; width: 150px } .headerImage h2 { margin: 0px auto 0px auto; padding-top: 30px; width: 300px } .headerImage { margin-top: 45px; height: 600px; background-color: rgb(216,0,62); /*background:url(full_1.png); background-size: cover; */ } .blueline { height: 65px; background:url(lines.png); background-color: rgb(106,236,175); } .greyline { height: 65px; background:url(lines.png); background-color: rgb(180,180,180); } .greyline { height: 65px; background-color: rgb(180,180,180); } .redline { margin-top: 300px; height: 50x; background-color: rgb(216,0,62); } .section-heading{ height: 30px; width: 100%; margin-top: 100px; background-color: rgb(255,255,255); margin-bottom: 30px; } /* NAV BAR */ .pull_right{ position: :absolute; float:right; } nav{ padding-left: 50px; padding-right: 50px; height: 45px; background-color: rgb(255,255,255); -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.4); } nav ul{ position: :absolute; margin-top: -63px; } nav li{ display: inline-block; font-family: 'Droid Sans', sans-serif; font-weight: bold; font-size: 140%; color: rgb(77,77,77); padding-left: 40px; } nav li.active:focus{ color: rgb(216,0,62); text-decoration: underline; } nav li.active a:hover{ color: rgb(106,236,175); } nav a{ color: rgb(77,77,77); } nav a:hover{ text-decoration: none; color: rgb(216,0,62); } .navbar-overbox{ height: 75px; width: 200px; padding-left: 65px; margin-top: -20px; background-color: rgb(106,236,175); } .navbar-overbox h1{ font-family: 'Droid Sans', sans-serif; font-weight: bold; font-size: 200%; color: rgb(255,255,255); margin-left: -32px; padding-top: 19px; } .navbar-overbox h2{ font-family: 'Droid Sans', sans-serif; font-size: 80%; color: rgb(255,255,255); margin-left: -30px; margin-top: -10px; } /*--------------------PORTFOLIO*/ .close{ margin-right: 10px; float:right; } .my_modalbox{ margin-top: 10px; padding-top: 30px; } .poppy h1{ font-family: 'Droid Sans', sans-serif; font-weight: bold; font-size: 100%; color: rgb(77,77,77); } .poppy h2{ font-family: 'Droid Serif', serif; font-size: 100%; color: rgb(77,77,77); margin-top: 40px; } .horizontalpic{ background-color: rgb(180,180,180); margin-top: 5px; margin-bottom: 5px; /*float: left;*/ height: 500px; width: 890px; } .verticalpic{ background-color: rgb(180,180,180); margin: 5px 5px 30px 5px; float: left; height: 600px; width: 439px; } .squaredpic{ background-color: rgb(180,180,180); margin-top: 5px; margin-bottom: 5px; height: 500px; width: 500px; } /*the thumbnails */ .thumbnailStyle{ color: rgb(180,180,180); height: 602px; } #thumbnailImage1 { margin-top: 1px; border-bottom:1px solid #fff; border-right:2px solid #fff; background:url(thumbnail.png); background-size:cover; overflow:hidden; } #thumbnailImage2 { margin-top: 1px; border-bottom:1px solid #fff; border-right:2px solid #fff; background:url(thumbnail.png); background-size:cover; overflow:hidden; } #thumbnailImage3 { margin-top: 1px; border-bottom:1px solid #fff; border-right:2px solid #fff; background:url(thumbnail.png); background-size:cover; overflow:hidden; } #thumbnailImage4 { margin-top: 1px; border-bottom:1px solid #fff; border-right:2px solid #fff; background:url(thumbnail.png); background-size:cover; overflow:hidden; } #thumbnailImage5 { margin-top: 1px; border-bottom:1px solid #fff; border-right:2px solid #fff; background:url(thumbnail.png); background-size:cover; overflow:hidden; } #thumbnailImage6 { margin-top: 1px; border-bottom:1px solid #fff; border-right:2px solid #fff; background:url(thumbnail.png); background-size:cover; overflow:hidden; } #thumbnailImage7 { margin-top: 1px; border-bottom:1px solid #fff; border-right:2px solid #fff; background:url(thumbnail.png); background-size:cover; overflow:hidden; } #thumbnailImage8 { margin-top: 1px; border-bottom:1px solid #fff; border-right:2px solid #fff; background:url(thumbnail.png); background-size:cover; overflow:hidden; } #overlay{ background:rgba(90,0,34,.5); text-align:center; padding:150px 0 150px 0; opacity:0; -webkit-transition: opacity .25s ease; } #thumbnailImage1:hover #overlay { opacity:1;} #thumbnailImage2:hover #overlay { opacity:1;} #thumbnailImage3:hover #overlay { opacity:1;} #thumbnailImage4:hover #overlay { opacity:1;} #thumbnailImage5:hover #overlay { opacity:1;} #thumbnailImage6:hover #overlay { opacity:1;} #thumbnailImage7:hover #overlay { opacity:1;} #thumbnailImage8:hover #overlay { opacity:1;} /*making the overlayed boxes*/ /* ABOUT */ .aboutSection { margin-top: 55px; padding-top: 30px; height: 260px; background-color: rgb(216,0,62); -webkit-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4); box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.4); /*HOW TO PUT THE SHADOW OVER THE GRAYBOX*/ } .aboutSection img{ margin-left: 85px; } .about-text a{ margin-left: 0px; text-decoration: underline; color: rgb(255,255,255); } .about-text a:hover{ color: rgb(180,180,180); } .about-skills { margin-top: 0px; margin-left: 35px } .about-text{ width: 600px; padding-top: 10px; padding-left: 80px; } .about-text h1{ font-family: 'Droid Sans', sans-serif; font-size: 50%; color: rgb(255,255,255); margin-left: 0px; margin-top: 0px; } .about-text h2{ font-family: 'Droid Serif', serif; font-size: 100%; color: rgb(255,255,255); margin-left: 0px; margin-top: 0px; line-height: 150%; } /* CONTACT */ .contactSection{ background: #f9f9f9; margin-top: 0px; margin-left: -50px; margin-right: -50px; padding-top: 30px; padding-bottom: 90px; } .contact-text{ padding-top: 15px; padding-left: 80px; padding-right: 200px; } .contact-text h2{ width: 415px; font-family: 'Droid Serif', serif; font-size: 100%; color: rgb(77,77,77); margin-left: 0px; margin-top: 0px; line-height: 180%; } .contact-text a{ text-decoration: underline; color: rgb(77,77,77); } .contact-text a:hover{ text-decoration: underline; color: rgb(216,0,62); } .contact-form{ width: 800px; margin-left: 18%; margin-top: 100px; padding-top:50px; } /* FORM */ // Colours $green: #6AECAF; $red: #D8003E; $blue: #D8003E; form { width: 50%; margin: 13% auto; min-width: 9rem; padding-left: 20%; padding-right: 20%; margin-top: 20px; } input, textarea { float: left; width: 100%; max-width: 100%; outline: 0; border: 0px solid; margin: 0.5rem 0; padding: 0.5rem 1rem; /*background: darken(#f9f9f9, 10%);*/ color: darken(#f9f9f9, 50%); &[type=submit] { background: $green; color: #fff; width: auto; float: right; } &::placeholder { color: darken(#f9f9f9, 50%); } &.error { background: $red; color: #fff; &::placeholder { color: darken($red, 60%); } } } .send{ } .send:hover{ background: rgb(106,236,175); } textarea { height: 10rem; } .captcha { float:left; input { float: right; } input[name=question] { width: 4rem; text-align: right; padding-right: 0; } [name=captcha] { width: 5rem; padding-left: 0.5rem; &::placeholder { text-align: center; } } } ) * { box-sizing: border-box; } @font-face { font-family: 'Droid Sans', sans-serif; font-weight: 400; } body { color: #2f2f2f; font-family: 'Droid Sans', sans-serif; } /*FOOTER*/ footer { height: 60x; background-color: rgb(216,0,62); margin-left: -50px; margin-right: -50px; margin-bottom: -50px; margin-top: -50px; -webkit-box-shadow: 0px 0px 20px -9px rgba(0,0,0,0.68); -moz-box-shadow: 0px 0px 20px -9px rgba(0,0,0,0.68); box-shadow: 0px 0px 20px -9px rgba(0,0,0,0.68); } footer h1{ opacity: 0.8; padding-top: 22px; padding-bottom: 28px; font-family: 'Droid Sans', sans-serif; font-size: 90%; color: rgb(77,77,77); }

Related: See More


Questions / Comments: