A Pen by Rachada Chairangsaris on CodePen.
Created
December 7, 2019 20:05
-
-
Save BayLadyCoder/07eaadf7b41577b6503a99126dba9a13 to your computer and use it in GitHub Desktop.
FCC Portfolio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="navbar navbar-default navbar-fixed-top"> | |
<div class="container-fluid"> | |
<!-- Brand and toggle get grouped for better mobile display --> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> | |
<span class="sr-only ">Toggle navigation</span> | |
<span class="icon-bar "></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand whiteText" href="#">Rachada Chairangsaris</a> | |
</div> | |
<!-- Collect the nav links, forms, and other content for toggling --> | |
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1"> | |
<ul class="nav navbar-nav"> | |
<li ><a class="whiteText" href="#about">About <span class="sr-only">(current)</span></a></li> | |
<li class=""><a class="whiteText" href="#portfolio">Portfolio</a></li> | |
</ul> | |
<ul class="nav navbar-nav navbar-right"> | |
<li><a class="whiteText" href="#contact">Contact</a></li> | |
</ul> | |
</div><!-- /.navbar-collapse --> | |
</div><!-- /.container-fluid --> | |
</nav> | |
<div id="about" class="row header container-fluid"> | |
<div class=" col-md-4 col-sm-12 col-xs-6"> | |
<img id="img" src="https://d3n8a8pro7vhmx.cloudfront.net/taxpayers/pages/679/attachments/original/1499663166/4-ways-cheer-up-depressed-cat.jpg?1499663166" alt=""></div> | |
<div class="text-center col-md-8 col-sm-12 col-xs-7 header-content"> | |
<h4>Cat ipsum dolor sit amet, leave dead animals as gifts. Stretch eat and than sleep on your face for jump five feet high and sideways when a shadow moves. </h4> | |
<div class="social-media text-center blackText"> | |
<a class="social-media" href="#"> | |
<i class="fa fa-github-square social-media" aria-hidden="true"></i> | |
</a> | |
<a class="social-media" href="#"> | |
<i class="fa fa-linkedin-square" aria-hidden="true"></i> | |
</a> | |
<a class="social-media" href="https://codepen.io/baebay/"> | |
<i class="fa fa-codepen" aria-hidden="true"></i> | |
</a> | |
<a class="social-media" href="#"> | |
<i class="fa fa-facebook-square" aria-hidden="true"></i> | |
</a> | |
</div> | |
</div></div> | |
<div id="portfolio" class="row portfolio text-center"> | |
<h2 class="whiteText">Portfolio</h2> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1453487021979-5b739b2849f4?auto=format&fit=crop&w=1383&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1490474418585-ba9bad8fd0ea?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1453831362806-3d5577f014a4?auto=format&fit=crop&w=1338&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1437750769465-301382cdf094?auto=format&fit=crop&w=1355&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1456068452617-8d02d8160d72?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1441986060468-324610e6e6a8?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1479894720049-067d8b87f2d9?auto=format&fit=crop&w=1351&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1455731657401-43502b7c1ab9?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1499778003268-cbafc6d08bab?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1461009683693-342af2f2d6ce?auto=format&fit=crop&w=1331&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1502741338009-cac2772e18bc?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="col-lg-4 col-sm-6"> | |
<div class="thumbnail"> | |
<img src="https://images.unsplash.com/photo-1463183665146-ce2ed31df6b0?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"> | |
</div> | |
</div> | |
<div class="container-fluid"> | |
<hr/ id="contact"> | |
<h2 id="contactMe" class="text-center whiteText">Contact Me</h2> | |
<form action="input"> | |
<input class="input" type="text" placeholder="Name"><br> | |
<input class="input" type="email" placeholder="Email Address"><br> | |
<input class="input" type="tel" placeholder="Phone Number"><br> | |
<input id="message" class="input" type="text" placeholder="Message"><br> | |
<button id="submit" href="#about" class="btn btn-default btn-success">Submit</button> | |
</form> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body { | |
background: #36D1DC; /* fallback for old browsers */ | |
background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC); /* Chrome 10-25, Safari 5.1-6 */ | |
background: linear-gradient(to right, #5B86E5, #36D1DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
font-family: 'Roboto Mono', monospace; | |
} | |
nav { | |
background: #159957; /* fallback for old browsers */ | |
background: -webkit-linear-gradient(to right, #155799, #159957); /* Chrome 10-25, Safari 5.1-6 */ | |
background: linear-gradient(to right, #155799, #159957); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
color: white; | |
} | |
nav.navbar { | |
border: none; | |
border-radius: 0px; | |
} | |
nav ul li:hover { | |
border: 0.1px white dashed; | |
background: #c9640c; | |
} | |
#brand { | |
color: white; | |
} | |
.whiteText { | |
color: #FFFFFF !important; | |
} | |
.navbar-right { | |
font-size: 17px | |
} | |
.navbar-default .navbar-toggle .icon-bar { | |
color: white ; | |
border-color: white ; | |
background-color: white ; | |
} | |
.social-media { | |
font-size: 50px; | |
color: #283344 !important; | |
padding-top: 0; | |
} | |
.social-media:hover { | |
color: #050049 !important;; | |
} | |
.header { | |
width: 1100px; | |
height: 100%; | |
margin: 0 auto; | |
padding: 30px 50px 50px 50px; | |
background: rgba(0,0,0,0.05); | |
text-align: center; | |
} | |
#img { | |
border-radius: 50px; | |
height: 220px; | |
width: 300px; | |
border: white 5px double; | |
text-align: center; | |
margin-top: 50px; | |
margin-left: 20px; | |
} | |
.header-content { | |
padding-top: 70px; | |
text-align: center; | |
padding-left: 20px; | |
} | |
h4 { | |
padding-top: 20px; | |
font-size: 20px; | |
} | |
.portfolio { | |
padding: 50px; | |
background: rgba(0,0,0,0.25); | |
width: 1100px; | |
margin: 0 auto; | |
} | |
h2 { | |
font-size: 40px; | |
padding-bottom: 20px; | |
text-decoration: underline; | |
} | |
hr{ | |
background: white; | |
height: 2px; | |
width: 800px; | |
margin-top: 50px; | |
margin-bottom: 30px; | |
} | |
.input { | |
margin: 10px; | |
width: 250px; | |
height: 35px; | |
font-size: 18px; | |
} | |
#message { | |
height: 150px; | |
} | |
#submit { | |
font-size: 16px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment