Created
September 10, 2018 03:16
-
-
Save tracy522/ede7462f35580e9199b9ecac36c695af to your computer and use it in GitHub Desktop.
FCC: Personal 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> | |
<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>Hey i'am Mimic.</h1> | |
<p>a web developer</p> | |
</div> | |
<div id="projects" class="work"> | |
<h2 class="work-header">These are some of my projects..</h2> | |
<a href="https://codepen.io/FreeCodeCamp/pen/NNvBQW" target="_blank" class="project project-tile"> | |
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642794/d084d718-6171-11e6-83fa-ede5d0a67ad2.png" alt="project"> | |
<div class="project-title">Tribute Page</div> | |
</a> | |
<a href="https://codepen.io/FreeCodeCamp/pen/ONjoLe" target="_blank" class="project project-tile"> | |
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642771/7cd6a0c4-6171-11e6-87fb-915f6084d104.png" alt="project"> | |
<div class="project-title">Random Quote Machine</div> | |
</a> | |
<a href="https://codepen.io/FreeCodeCamp/pen/PNKdjo" target="_blank" class="project project-tile"> | |
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642772/7d02406c-6171-11e6-8c79-40a2933163dc.png" alt="project"> | |
<div class="project-title">JavaScript Calculator</div> | |
</a> | |
<a href="https://codepen.io/FreeCodeCamp/pen/mVEJag" target="_blank" class="project project-tile"> | |
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642773/7d08cb94-6171-11e6-8c45-22e7cf64683e.png" alt="project"> | |
<div class="project-title">Map Data Across the Globe</div> | |
</a> | |
<a href="https://codepen.io/FreeCodeCamp/pen/wGqEga" target="_blank" class="project project-tile"> | |
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642774/7d091806-6171-11e6-8d47-ecf2f2833fe2.png" alt="project"> | |
<div class="project-title">Wikipedia Viewer</div> | |
</a> | |
<a href="https://codepen.io/FreeCodeCamp/pen/KzXQgy" target="_blank" class="project project-tile"> | |
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642775/7d354304-6171-11e6-8b56-66eee4681d88.png" alt="project"> | |
<div class="project-title">Tic Tac Toe Game</div> | |
</a> | |
<a href="https://codepen.io/FreeCodeCamp/" class="show-all" target="_blank">Show all</a> | |
</div> | |
</div> | |
<div id="contact" class="contact"> | |
<div class="header"> | |
<h1>Let's work together...</h1> | |
<p>How do you take your coffee?</p> | |
</div> | |
<a href="https://facebook.com/freecodecamp" target="_blank" class="contact-details"><img class="icon" src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/256/social-facebook-button-blue-icon.png" alt="fb icon"></a> | |
<a id='profile-link' href="https://github.com/freecodecamp" target="_blank" class="contact-details"><img class="icon" src="http://icons.iconarchive.com/icons/social-media-icons/glossy-social/256/Github-icon.png" alt="git icon"></a> | |
<a href="https://twitter.com/freecodecamp" target="_blank" class="contact-details"><img class="icon" src="http://icons.iconarchive.com/icons/emey87/social-button/256/twitter-icon.png" alt="twitter icon"></a> | |
<a href="mailto:example@example.com" class="contact-details"><img class="icon" src="http://icons.iconarchive.com/icons/social-media-icons/glossy-social/256/Email-icon.png" alt="email icon"></a> | |
<a href="tel:555-555-5555" class="contact-details"><img class="icon" src="http://icons.iconarchive.com/icons/mysitemyway/clean-3d/256/glossy-3d-blue-phone-icon.png" alt="phone icon"></a> | |
</div> | |
<footer>**This is just a fake portfolio.. All the projects and contact details given are not real.. | |
<p>© Created for <a href="https://www.freecodecamp.com/" target="_blank">FreeCodeCamp</a></p> | |
</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
// coded by @ChaituVR | |
const projectName = 'portfolio'; | |
localStorage.setItem('example_project', 'Personal 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
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.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 { | |
font-family: 'Open Sans', sans-serif; | |
text-align: center; | |
background: teal; | |
} | |
@import url('https://fonts.googleapis.com/css?family=Bungee+Inline'); | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
.intro { | |
top: 0; | |
background: teal; | |
min-height: 45vh; | |
padding: 50vh 0 5vh 0; | |
line-height: 20vh; | |
width:100%; | |
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%); | |
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%); | |
} | |
h1 { | |
color: purple; | |
font-family: 'Bungee Inline', cursive; | |
text-shadow: | |
-1px -1px 0 #fff, | |
1px -1px 0 #fff, | |
-1px 1px 0 #fff, | |
1px 1px 0 #fff; | |
} | |
.intro p { | |
color: white; | |
text-shadow: | |
-4px 3px 5px purple; | |
} | |
nav ul { | |
text-align: right; | |
position: fixed; | |
width: 100%; | |
background-color: white; | |
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); | |
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); | |
z-index:1; | |
} | |
nav ul li { | |
display: inline-block; | |
margin: 55px; | |
margin-bottom: 15px; | |
margin-top: 25px; | |
} | |
nav ul li a { | |
color: teal; | |
text-decoration: none; | |
} | |
nav ul li a:hover { | |
color: purple; | |
} | |
.work { | |
background: url("https://png.pngtree.com/thumb_back/fw800/back_pic/03/70/72/5257b6c12d89875.jpg") repeat-y; | |
background-size: contain; | |
padding: 20px 0 20px 0; | |
-webkit-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%); | |
clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%); | |
} | |
.work .work-header { | |
margin-top: 30px; | |
color: teal; | |
font-weight: bold; | |
text-shadow: | |
-1px -1px 0 #fff, | |
1px -1px 0 #fff, | |
-1px 1px 0 #fff, | |
1px 1px 0 #fff; | |
} | |
.project { | |
text-decoration: none; | |
color: teal; | |
display: inline-block; | |
overflow: hidden; | |
border: 2px solid teal; | |
height: 220px; | |
width: 280px; | |
margin: 40px 100px; | |
background: rgba(255, 255, 255, 0.6); | |
} | |
.project-pic { | |
width: 100%; | |
height: 180px; | |
border-bottom: 4px groove teal; | |
} | |
.project-title { | |
font-weight: bold; | |
} | |
.show-all { | |
text-decoration: none; | |
display: block; | |
width: 200px; | |
height: 30px; | |
margin: 20px auto 90px; | |
background: purple; | |
color: white; | |
font-weight: bold; | |
font-size: 1em; | |
border: 2px solid teal; | |
border-radius: 4px; | |
cursor: pointer; | |
padding-top:10px; | |
} | |
.show-all:hover { | |
background: teal; | |
color: white; | |
} | |
@media only screen and (max-width: 500px) { | |
nav ul { | |
text-align: center; | |
} | |
nav ul li { | |
margin: 20px; | |
} | |
.project { | |
margin: 40px 0; | |
} | |
} | |
.contact { | |
background: teal; | |
padding-bottom: 160px; | |
} | |
.header { | |
padding: 50px 0 50px; | |
-webkit-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%); | |
clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%); | |
background: rgba(255,255,255,0.3); | |
} | |
.contact-details { | |
display: inline-block; | |
font-weight: bold; | |
margin: 0 35px 45px 35px; | |
list-style-type: none; | |
border: 2px solid white; | |
border-radius: 100%; | |
width: 100px; | |
height: 100px; | |
line-height: 100px; | |
background: purple; | |
color: white; | |
text-decoration: none; | |
} | |
.icon { | |
width: 100%; | |
height: 100%; | |
} | |
.contact-details:hover { | |
background: white; | |
} | |
footer { | |
padding: 20px; | |
background: teal; | |
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 teal; | |
border-radius: 0; | |
width: 90px; | |
height: 20px; | |
padding: 10px; | |
line-height: normal; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment