Created
June 1, 2016 19:21
-
-
Save OrangeBacon/95721126cca3256b4f327b6edda5874c to your computer and use it in GitHub Desktop.
Portfolio (FCC)
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-fixed-top'> | |
<div class='container'> | |
<div class='nav navbar-nav navbar-left'> | |
<li><a class='brand'><span class='logo'>-ScratchOs</span> Web Design Portfolio</a></li> | |
</div> | |
<div class='collapse navbar-collapse nav navbar-nav navbar-right'> | |
<li><a class='active'>About</a></li> | |
<li><a>Portfolio</a></li> | |
<li><a>Contact</a></li> | |
</div> | |
</div> | |
</nav> | |
<article> | |
<section class='intro'> | |
<div class='left'> | |
<p>My name is Will and this is my protfolio of work as a front-end web developer. I have experience working with HTML, CSS and JavaScript to produce responsive, interactive web pages.</p> | |
<p class='sep-right'> | |
<i class="fa fa-code" aria-hidden="true"></i> | |
</p> | |
</div> | |
<div class='right'> | |
<img src='https://avatars2.githubusercontent.com/u/12380303?v=3&s=460'> | |
</div> | |
</section> | |
</article> | |
<footer> | |
<section class='about'> | |
<div class='left'>Made with <3 by -ScratchOs</div> | |
<div class='right'> | |
<a href='https://github.com/ScratchOs' class='icon-round'><i class="fa fa-github fa-fw" aria-hidden="true"></i></a> | |
</div> | |
</section> | |
<section class='copyright'> | |
<p>-ScratchOs © 2016. All Rights Reversed | |
</section> | |
</footer> |
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://code.jquery.com/jquery-2.2.4.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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
/* General */ | |
html, | |
body { | |
background-color: #888; | |
user-select: none; | |
} | |
.icon-round { | |
border: 1px solid white; | |
color: white; | |
border-radius: 50%; | |
line-height: 48px; | |
font-size: 35px; | |
height: 50px; | |
width: 50px; | |
display: inline-block; | |
text-align: center; | |
transition: 2s all; | |
} | |
.icon-round:hover { | |
color: #722872!important; | |
background-color: white; | |
} | |
.sep-right { | |
text-align: right; | |
} | |
.sep-right:before { | |
content:'⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯'; | |
font-size:50px; | |
text-align:right; | |
} | |
.sep-right > i { | |
font-size:50px; | |
} | |
/* Nav */ | |
nav { | |
background-color: #722872; | |
box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75); | |
//height:50px; | |
} | |
.logo { | |
font-family: 'Lobster Two' | |
} | |
.nav>li { | |
a:hover { | |
background-color: #722872; | |
color: white; | |
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.5); | |
} | |
a.active { | |
background-color: white; | |
color: black; | |
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.5); | |
} | |
a { | |
color: white; | |
height: auto; | |
padding-top: 5px; | |
padding-bottom: 5px; | |
margin: 10px 5px 0 5px; | |
cursor: pointer; | |
} | |
} | |
.brand, | |
.brand:hover { | |
color: white; | |
text-decoration: none; | |
font-size: 16px; | |
cursor: default; | |
box-shadow: none!important; | |
} | |
@media (max-width: 979px) { | |
body { | |
padding-top: 0px; | |
} | |
} | |
/* content*/ | |
article { | |
padding-top: 70px; | |
width: 80%; | |
background-color: #aaa; | |
margin-left: 10%; | |
padding: 3em; | |
} | |
article > section { | |
padding: 2em; | |
} | |
.intro > .left { | |
width:66%; | |
color:white; | |
font-size:16px; | |
font-weight:400; | |
float:left; | |
} | |
.intro > .right { | |
width:33%; | |
float:right; | |
} | |
.intro > .right > img { | |
border-radius:50%; | |
width:250px; | |
max-width:80%; | |
} | |
/* footer */ | |
footer { | |
background-color: #722872; | |
box-shadow: 0px -5px 5px 0px rgba(50, 50, 50, 0.75); | |
} | |
footer > .about { | |
background-color: #aaa; | |
height: 5em; | |
color: white; | |
} | |
footer > .about > .left { | |
float: left; | |
padding: 2em; | |
font-weight: 600; | |
} | |
footer > .about > .right { | |
float: right; | |
padding-right: 2em; | |
padding-top: calc((5em - 50px) / 2) | |
} | |
.copyright { | |
text-align: center; | |
padding: 10px; | |
} |
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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment