Mobile versionCode: Select all
$(document).ready(function() {
$("#hamburger").click(function() {
$("header nav").animate({width: 'toggle'});
});
$("header nav").mouseleave(function() {
$("header nav").animate({width: 'toggle'});
});
});< /code>
/* Universal Styles */
* {
box-sizing: border-box;
}
body {
text-align: center;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
/* Cross Styles */
aside,
.navBlock {
font-family: 'Bungee Inline', cursive;
}
/* Header Styles */
.logo {
width: 150px;
cursor: pointer;
transition: all .2s;
float: left;
margin-bottom: 10px;
}
nav,
header{
overflow: auto;
width: 100%;
}
#hamburger {
float: right;
transition: all .2s;
cursor: pointer;
}
/* Navigation Styles */
header nav {
position: absolute;
width: 50%;
top: 0;
height: 100%;
background-color: #354551;
margin: 0;
box-shadow: inset 0px 0px 12px 2px rgba(0,0,0,0.75);
display: none;
z-index: 100;
}
.navBlock {
background-color: #354551;
text-transform: uppercase;
font-size: 2em;
color: white;
letter-spacing: 3px;
border: none;
cursor: pointer;
line-height: 175%;
transition: all .2s;
}
header nav ul {
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
margin-top: 50%;
border-top: 1px dashed lightgrey;
border-bottom: 1px dashed lightgrey;
}
/* Profiles Styles */
aside ul,
aside li,
aside {
overflow: auto;
}
aside {
background-color: #90afc5;
box-shadow: inset 0px 20px 9px -22px #000;
color: #eef3f6;
font-size: 1.5em;
letter-spacing: 2px;
text-shadow: 0px 1px 1px #4d4d4d;
width: 100%;
}
aside li {
display: inline;
}
aside img {
border-radius: 100%;
transition: all .2s;
}
/* Footer Styles */
footer {
font-family: 'Oswald', cursive;
letter-spacing: 1px;
font-size: .9em;
height: 25px;
background-color: #abc3d3;
color: #2c4354;
}
footer span {
line-height: 25px;
}
/* Showcase */
main h4 {
margin-top: 30px;
color: white;
font-size: 2em;
letter-spacing: 2px;
text-shadow: 0px 1px 1px #4d4d4d;
font-family: 'Bungee Inline', cursive;
border: 10x dashed lightgray;
box-shadow: 0px -20px 9px -22px #000;
}
.webShowcase img,
.logoShowcase img {
width: 80%;
margin: 50px auto;
transition: all .3s;
border: 1px solid lightgrey;
}
.webShowcase h4 {
background-color: #ffbb00;
margin: 0;
}
.webShowcase ul,
.logoShowcase ul {
margin-top: 30px;
text-align: center;
}
.webShowcase ul,
.webShowcase li,
.webShowcase,
.logoShowcase,
.logoShowcase li,
.logoShowcase ul {
overflow: auto;
}
.webShowcase,
.logoShowcase {
width: 100%;
}
.logoShowcase h4 {
background-color: #aebd38;
margin: 0;
}
/* Effects */
aside img:hover,
.logo:hover,
.navBlock:hover,
#hamburger:hover,
main img:hover {
opacity: .5;
}
/* Tablet View */
@media only screen and (min-width: 767px) {
aside ul {
margin-bottom: 10px;
}
}
/* Computer View */
@media only screen and (min-width: 1200px) {
.logo {
width: 250px;
}
#hamburger {
content: url("../media/img/hamburgerResized.png");
}
header nav {
width: 25%;
}
.webShowcase img,
.logoShowcase img {
width: 30%;
display: inline-block;
}
.webShowcase li,
.webShowcase,
.webShowcase ul,
.logoShowcase,
.logoShowcase li,
.logoShowcase ul {
overflow: auto;
}
.webShowcase li,
.logoShowcase li {
display: inline;
margin: 0 10px;
padding: 0;
}
.webShowcase ul,
.logoShowcase ul {
margin: 0;
padding: 0;
}
.webShowcase ul:nth-child(odd) {
background-color: #ffcf4d;
}
.webShowcase ul:nth-child(even) {
background-color: white;
}
.logoShowcase ul:nth-child(odd) {
background-color: #c3d062;
}
.logoShowcase ul:nth-child(even) {
background-color: white;
}
}< /code>
Name | Portfolio
[*]
& l t ; / h e a d & g t ; < b r / > & l t ; b o d y & g t ; < b r / > & l t ; h e a d e r & g t ; < b r / > & l t ; a h r e f = " . . / . . / i n d e x . h t m l " & g t ; & l t ; i m g c l a s s = " l o g o " s r c = " . . / . . / m e d i a / i m g / l o g o . p n g " a l t = " n a m e ' s l o g o " & g t ; & l t ; / a & g t ; < b r / > & l t ; i m g i d = " h a m b u r g e r " s r c = " . . / . . / m e d i a / i m g / h a m b u r g e r . p n g " a l t = " t h r e e l i n e n a v i g a t i o n " & g t ; < b r / > & l t ; n a v & g t ; < b r / > & l t ; u l & g t ; < b r / > & l t ; l i c l a s s = " n a v B l o c k n a v H o m e " & g t ; & l t ; a h r e f = " . . / . . / i n d e x . h t m l " & g t ; h o m e & l t ; / a & g t ; & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " n a v B l o c k n a v A b o u t " & g t ; & l t ; a h r e f = " . . / p a g e s / a b o u t / i n d e x . h t m l " & g t ; a b o u t & l t ; / a & g t ; & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " n a v B l o c k n a v C o n t a c t " & g t ; & l t ; a h r e f = " . . / p a g e s / c o n t a c t / i n d e x . h t m l " & g t ; c o n t a c t & l t ; / a & g t ; & l t ; / l i & g t ; < b r / > & l t ; l i c l a s s = " n a v B l o c k n a v R e s u m e " & g t ; & l t ; a h r e f = " . . / p a g e s / r e s u m e / i n d e x . h t m l " & g t ; r e s u m e & l t ; / a & g t ; & l t ; / l i & g t ; < b r / > & l t ; / u l & g t ; < b r / > & l t ; / n a v & g t ; < b r / > < b r / > & l t ; m a i n & g t ; < b r / > & l t ; s e c t i o n c l a s s = " w e b S h o w c ase">
[h4]Websites[/h4]
[list]
[url=#]
[img]../../media/img/github.png[/img]
[/url]
[*][url=#]
[img]../../media/img/codepen.png[/img]
[/url]
[*][url=#]
[img]../../media/img/linkedin.png[/img]
[/url]
[*][url=#]
[img]../../media/img/dribble.png[/img]
[/url]
[*][url=#]
[img]../../media/img/upwork.png[/img]
[/url]
[*][url=#]
[img]../../media/img/fiverr.png[/img]
[/url]
[/list]
©Name
