Portfolio building.
Help from Freecodecamp.
<nav> | |
<ul id='navbar'> | |
<li><a href="#welcome-section">About</a></li> | |
<li><a href="#projects">Work</a></li> | |
<li><a href="#contact">Contact</a></li> | |
</ul> | |
</nav> | |
<div id="welcome-section" class="intro"> | |
<h1>Hello its Peter.</h1> | |
<p>an aspiring developer</p> | |
</div> | |
<div id="projects" class="work"> | |
<h2 class="work-header">Here are some of my projects!</h2> | |
<a href="https://codepen.io/Peabody/pen/dQaZZo" target="_blank" class="project project-tile"> | |
<img class="project-pic" src="https://www.oscars.org/sites/oscars/files/styles/hero_image_default/public/miyazaki_main-banner_photo.jpg?itok=1-rZFQK5" alt="project"> | |
<div class="project-title">Tribute Page</div> | |
</a> | |
<a href="https://codepen.io/Peabody/pen/JexwzJ" target="_blank" class="project project-tile"> | |
<img class="project-pic" src="https://content.screencast.com/users/PJMacd/folders/Jing/media/0507f502-c3e4-4f25-906e-2a3a766ca2a7/2018-12-09_0954.png" alt="project"> | |
<div class="project-title">Survey Form</div> | |
</a> | |
<a href="https://codepen.io/Peabody/pen/XywBJM" target="_blank" class="project project-tile"> | |
<img class="project-pic" src="https://content.screencast.com/users/PJMacd/folders/Jing/media/a462f35a-0dba-4b08-9357-69ff253e5f81/2018-12-09_0956.png" alt="project"> | |
<div class="project-title">Project Landing Page</div> | |
</a> | |
<a href="https://codepen.io/Peabody/pen/VVoxbN" target="_blank" class="project project-tile"> | |
<img class="project-pic" src="https://content.screencast.com/users/PJMacd/folders/Jing/media/a5c6db86-af3b-4c98-a363-61743c28e4ca/2018-12-09_0957.png" alt="project"> | |
<div class="project-title">Documentation Site</div> | |
</a> | |
<div id="contact" class="contact"> | |
<div class="header"> | |
<h1>Let's work together..</h1> | |
<p>How do you take your coffee? ☕</p> | |
</div> | |
<a id='profile-link' href="https://github.com/Pbodeh" target="_blank" class="contact-details">GitHub</a> | |
<a href="https://www.linkedin.com/in/peter-macdonald-007/" target="_blank" class="contact-details">LinkedIn</a> | |
</div> | |
<footer>**More to come... | |
<p>© Created with the amazing help from <a href="https://www.freecodecamp.com/" target="_blank">FreeCodeCamp</a></p> | |
</footer> |
html, | |
body { | |
font-family: 'Open Sans', sans-serif; | |
text-align: center; | |
} | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
.intro { | |
top: 0; | |
background: #41f4a9; | |
min-height: 55vh; | |
padding-top: 45vh; | |
/* line-height: 100vh; */ | |
/* width:100%; | |
height:96vh; | |
border:solid; */ | |
} | |
.intro p { | |
color: #007BA7; | |
} | |
nav ul { | |
text-align: right; | |
position: fixed; | |
width: 100%; | |
background-color: #e0ebe8; | |
} | |
nav ul li { | |
display: inline-block; | |
margin: 55px; | |
margin-bottom: 15px; | |
margin-top: 25px; | |
} | |
nav ul li a { | |
color: #008080; | |
text-decoration: none; | |
} | |
nav ul li a:hover { | |
color: green; | |
} | |
.work { | |
padding-top: 60px; | |
margin-top: -60px; | |
background: url("https://content.screencast.com/users/PJMacd/folders/Jing/media/e219c16d-f5e3-4adb-a2d5-c6f61d386b3b/2018-12-09_1024.png") repeat; | |
} | |
.work .work-header { | |
margin-top: 0px; | |
color: #008080; | |
font-weight: normal; | |
} | |
.project { | |
text-decoration: none; | |
color: #008080; | |
display: inline-block; | |
overflow: hidden; | |
border: 2px solid lightblue; | |
height: 220px; | |
width: 280px; | |
margin: 40px 100px; | |
background-color: white; | |
} | |
.project-pic { | |
width: 100%; | |
height: 180px; | |
border-bottom: 2px solid lightblue; | |
} | |
.project-title { | |
font-weight: bold; | |
} | |
@media only screen and (max-width: 500px) { | |
nav ul { | |
text-align: center; | |
} | |
nav ul li { | |
margin: 20px; | |
} | |
.project { | |
margin: 40px 0; | |
} | |
} | |
.contact { | |
/* height:800px; */ | |
/* min-height:800px; */ | |
background: #42bff4; | |
padding-bottom: 160px; | |
} | |
.header { | |
padding: 160px 0 110px; | |
} | |
.contact-details { | |
display: inline-block; | |
font-weight: bold; | |
margin: 0 35px 45px 35px; | |
list-style-type: none; | |
border: 2px solid #41f4a9; | |
border-radius: 100%; | |
width: 100px; | |
height: 100px; | |
line-height: 100px; | |
background: #e0ebe8; | |
color: #008080; | |
text-decoration: none; | |
} | |
.contact-details:hover { | |
background: #E4F1FE; | |
color: #41f4a9; | |
} | |
footer { | |
padding: 20px; | |
background: #22313F; | |
color: white; | |
line-height: 40px; | |
} | |
footer a { | |
color: white; | |
} | |
@media only screen and (max-width: 367px) { | |
/* #contact{ | |
min-height:1100px; | |
} */ | |
.contact-details { | |
border: 2px solid #22313F; | |
border-radius: 0; | |
width: 90px; | |
height: 20px; | |
padding: 10px; | |
line-height: normal; | |
} | |
} |