| <html> | |
| <head> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
| <title>The World of Sasskar</title> | |
| </head> | |
| <body> | |
| <!-- nav --> | |
| <nav class="navbar navbar-default navbar-fixed-top nav navbar-nav"> | |
| <a href="#">HOME</a>| | |
| <a href="#about">ABOUT</a>| | |
| <a href="#portfolio">PORTFOLIO</a> | |
| </nav> | |
| <!-- end nav --> | |
| <!-- start sections --> | |
| <!-- 0 --> | |
| <div id="home"> | |
| <section> | |
| <h1 class="sneha">SNEHA SANKAR</h1> | |
| </section> | |
| </div> | |
| <!-- 1 --> | |
| <div id="about"> | |
| <section> | |
| <div class="para"> | |
| AVOCADO | |
| </div> | |
| <div class="row foot"> | |
| <div class="foot-item col-md-1 col-md-offset-4 col-xs-2 col-xs-offset-2"> | |
| <a href="https://www.instagram.com/snehasanks/"><span class="glyphicon glyphicon-heart-empty"></span></a> | |
| </div> | |
| <div class="foot-item col-md-1 col-xs-2"> | |
| <a href="https://www.facebook.com/snehasanks?fref=ts"><span class="glyphicon glyphicon-thumbs-up"></span></a> | |
| </div> | |
| <div class="foot-item col-md-1 col-xs-2"> | |
| <a href="https://www.behance.net/snehasankar"><span class="glyphicon glyphicon-certificate"></span></a> | |
| </div> | |
| <div class="foot-item col-md-1 col-xs-2"> | |
| <a href="https://www.behance.net/gallery/26197195/Rsum"><span class="glyphicon glyphicon-education"></span></a> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- 2 --> | |
| <div id="portfolio"> | |
| <section> | |
| <div class="photos container-fluid"> | |
| <a href="https://www.behance.net/gallery/37925411/Freak-Fruit"><img class="img-responsive" src="https://mir-s3-cdn-cf.behance.net/projects/404/100d2e37925411.Y3JvcCw0MTU5LDMyNTcsMzkyLDA.jpg" /></a> | |
| <a href="https://www.behance.net/gallery/37819633/Quinkessence"><img class="img-responsive" src="https://mir-s3-cdn-cf.behance.net/projects/404/ff8b5037819633.Y3JvcCwzMTg5LDI0OTEsNDk4LDg2OA.jpg" /></a> | |
| <a href="https://www.behance.net/gallery/22317983/TwentyFour-Hours"><img class="img-responsive" src="https://mir-s3-cdn-cf.behance.net/projects/404/22317983.549e5e09c8964.jpg" /></a> | |
| <a href="https://www.behance.net/gallery/22262703/Typeface-Design-Sharktooth-Tamil"><img class="img-responsive" src="https://mir-s3-cdn-cf.behance.net/projects/404/22262703.54997f1d3517a.jpg" /></a> | |
| <a href="https://www.behance.net/gallery/22881511/Once-Upon-a-Type"><img class="img-responsive" src="https://mir-s3-cdn-cf.behance.net/projects/404/5ada5922881511.54e1b0e142ee1.jpg" /></a> | |
| <a href="https://www.behance.net/gallery/23687401/Posters-and-Things"><img src="https://mir-s3-cdn-cf.behance.net/projects/404/7f897323687401.54e0a5e33ced4.png" /></a> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- end sections --> | |
| </body> | |
| </html> |
A one-page HTML portfolio-- to play around with img-responsive grids and other Bootstrap elements, and as a response to the 'Build a Personal Portfolio' challenge of FreeCodeCamp.
The photos belong to Sneha Sankar (https://www.behance.net/snehasankar) and the grid design comes from research and the never-ending resources on the Internet. I wish I could use a better font, but beggars can't be choosers on codepen.io.
A Pen by Maya Shankar on CodePen.
| @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic); | |
| @import url(https://fonts.googleapis.com/css?family=Quicksand); | |
| .sneha { | |
| font-family: 'Quicksand', sans-serif; | |
| font-weight: 300; | |
| font-size: 60px; | |
| color: #e24e42; | |
| text-align: center; | |
| padding-top: 50px; | |
| margin: 0 !important; | |
| } | |
| nav { | |
| opacity: 0.5; | |
| filter: alpha(opacity=50); | |
| border: none !important; | |
| font-family: 'Quicksand', sans-serif; | |
| color: #e24e42; | |
| text-align: center !important; | |
| } | |
| nav a { | |
| text-decoration: none !important; | |
| color: inherit !important; | |
| padding: 0 20px; | |
| line-height: 50px; | |
| } | |
| nav a:hover { | |
| text-decoration: none; | |
| color: inherit; | |
| font-weight: bold; | |
| } | |
| nav a .current { | |
| text-decoration: none; | |
| color: inherit; | |
| font-weight: bold; | |
| } | |
| section { | |
| height: 100vh; | |
| background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| -webkit-background-size: cover; | |
| position: relative; | |
| margin-top: 0 !important; | |
| } | |
| #home { | |
| background: url("https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/a5c08637925411.575081044efd5.jpg") no-repeat center; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| } | |
| #about { | |
| background-color: #d5d5d5; | |
| background-attachment: fixed; | |
| max-width: 100%; | |
| max-height: 100%; | |
| position: relative; | |
| } | |
| #about .para { | |
| font-family: 'Quicksand', sans-serif; | |
| font-weight: 700; | |
| color: #1e392a; | |
| font-size: 70px; | |
| letter-spacing: .25px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| border: 2px solid; | |
| } | |
| #about .foot { | |
| position: relative; | |
| top: 90%; | |
| } | |
| #about .foot-item { | |
| text-align: center; | |
| font-size: 30px; | |
| } | |
| #about .foot-item a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| #about .foot-item a:hover { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .img-sneha { | |
| height: 20vh !important; | |
| margin: 30px !important; | |
| } | |
| .img-sneha img { | |
| display: block !important; | |
| margin: 0 auto !important; | |
| max-height: 100%; | |
| max-width: 100%; | |
| } | |
| #portfolio { | |
| background: ivory; | |
| position: relative; | |
| } | |
| #portfolio .photos { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| padding-top: 80px; | |
| } | |
| #portfolio .photos img { | |
| display: inline-block; | |
| padding: 4px; | |
| } | |
| #portfolio .photos img:hover { | |
| opacity: 0.7; | |
| } |