Skip to content

Instantly share code, notes, and snippets.

@shekaryenagandula

shekaryenagandula/fcc-personal-portfolio.markdown

Created November 3, 2020 01:16
Show Gist options
  • Save shekaryenagandula/0c9b3f6d7202aba0da9d8b9c52cfd81e to your computer and use it in GitHub Desktop.
Save shekaryenagandula/0c9b3f6d7202aba0da9d8b9c52cfd81e to your computer and use it in GitHub Desktop.
Download ZIP
FCC: Personal Portfolio
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>FCC: Personal Portfolio</title>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-
B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
</head>
<body>
<main>
<nav>
<ul></ul>
<ul id="nav">
<li><a href="#About">About</a></li>
<li><a href="#Work">Work</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<section id="about">
<header>Hey I am Shekar</header>
<div id="web">a web developer</div>
</section>
<section id="Work">
<header id="heading">These are some of my projects</header>
<div class="container">
<div class="card-item">
<card id="projectCard">
<a href="https://codepen.io/shekaryenagandula/pen/ZEWgozr">
<img id="projectCardImg" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg">
<header id="projectCardHeader"><span><&nbsp;</span>Tribute Page<span>&nbsp;/></span></header>
</a>
</card>
</div>
<div class="card-item">
<card id="projectCard">
<a href="https://codepen.io/shekaryenagandula/pen/wvWaKOR">
<img id="projectCardImg" src="https://github.com/ShekarYenagandula/Images/blob/main/JS%20Documentation.PNG?raw=true">
<header id="projectCardHeader"><span><&nbsp;</span>JS Documentation<span>&nbsp;/></span></header>
</a>
</card>
</div>
<div class="card-item">
<card id="projectCard">
<a href="https://codepen.io/shekaryenagandula/pen/KKMpKWJ">
<img id="projectCardImg" src="https://github.com/ShekarYenagandula/Images/blob/main/LandingPage.jpeg?raw=true">
<header id="projectCardHeader"><span><&nbsp;</span>Product Landing Page<span>&nbsp;/></span></header>
</a>
</card>
</div>
<div class="card-item">
<card id="projectCard">
<a href="https://codepen.io/shekaryenagandula/pen/QWEwBPe">
<img id="projectCardImg" src="https://github.com/ShekarYenagandula/Images/blob/main/FreeCodeCamp.JPG?raw=true">
<header id="projectCardHeader"><span><&nbsp;</span>Survey Form<span>&nbsp;/></span></header>
</a>
</card>
</div>
<div class="card-item">
<card id="projectCard">
<a href="https://codepen.io/shekaryenagandula/pen/VwjvXqP">
<img id="projectCardImg" src="https://littlewits.com/wp-content/themes/littlewiths/images/coming-soon-image.jpg">
<header id="projectCardHeader"><span><&nbsp;</span>Upcoming Projects<span>&nbsp;/></span></header>
</a>
</card>
</div>
<div class="card-item">
<card id="projectCard">
<a href="https://codepen.io/shekaryenagandula/pen/VwjvXqP">
<img id="projectCardImg" src="https://littlewits.com/wp-content/themes/littlewiths/images/coming-soon-image.jpg">
<header id="projectCardHeader"><span><&nbsp;</span>Upcoming Projects<span>&nbsp;/></span></header>
</a>
</card>
</div>
</div>
</div>
<button>Show all<code><strong>&nbsp;&nbsp;></strong></code></button>
</section>
<section id="Contact">
<header>Let's work together...</header>
<subheader>How do you take your coffee?</subheader>
<ul id="contact-list">
<li><i class="fab fa-facebook-f"></i><a href="https://www.facebook.com/yenagandula.shekar/">Facebook</a></li>
<li><i class="fab fa-github"></i><a href="https://github.com/ShekarYenagandula/">GitHub</a></li>
<li><i class="fab fa-twitter"></i><a href="https://twitter.com/Shekar98765">Twitter</a></li>
<li><i class="fas fa-at"></i><a href="mailto:yenagandulashekar123@gmail.com">Send a mail</a></li>
<li><i class="fas fa-mobile-alt"></i><a href="tel:+919763039338">Call me</a></li>
</ul>
<hr>
<footer>
<div>**This is just a fake portfolio. All the projects and contact details given are not real.</div>
<div>© Created for freeCodeCamp Project</div>
</footer>
</section>
</main>
</body>
</html>
Raw
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
display: flex;
position: fixed;
width: 100%;
justify-content: space-between;
height: 70px;
background-color:#BE3144 ;
}
#nav{
display: flex;
margin-right: 2.3em;
}
#nav li{
padding:20px 40px;
list-style: none;
}
#nav li:hover{
background-color: #87ceeb;
}
#nav li a{
text-decoration: none;
color: white;
font-size: 1.2em;
align-self: center;
font-family: Roboto;
}
#about{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
}
#about header{
color: whitesmoke;
font-size: 6vw;
font-family: Roboto;
}
#Work{
padding: 20px 0;
background-color:#45567d;
height: 100%;
}
#Work #heading{
margin: 0 auto;
padding:20px 0;
border-bottom-style: solid;
border-bottom-width: 2px;
width: fit-content;
font-size: 3.5vw;
color: white;
text-align: center;
}
.container{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card-item{
max-width: 400px;
background-color: #333333;
margin:20px;
}
#projectCardImg{
width: 100%;
height: 300px;
}
#web{
color: maroon;
font-size: 3vw;
font-style: italic;
font-family: Roboto;
font-weight: 300;
}
#projectCard a #projectCardHeader,#projectCard a{
font-size: 1.4em;
text-decoration: none;
color: white;
padding: 20px 0;
}
#projectCardHeader{
display: flex;
justify-content: center;
}
span{
display: none;
transition: color 0.5s;
}
.card-item:hover span{
display: block;
transition-timing-function: linear;
color:#FF1493;
}
button{
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
border: none;
padding: 10px;
font-weight: 500;
font-size: 1.1em;
background-color: #303841;
color: white;
transition:background-color 0.3s;
width: auto;
}
button code{
margin: 0;
font-size: 1.2em;
padding-left: 0;
font-weight: 900;
transition: padding-left 0.3s;
}
button:hover{
background-color: #be3144;
}
button:hover code{
padding-left: 10px;
}
#Contact{
text-align: center;
padding: 80px 0;
color: white;
background-color: #303841;
font-family: "Open sans";
}
#Contact header{
font-size: 3.5em;
padding: 10px;
font-weight: 400;
}
#Contact subheader{
font-size: 1.3em;
font-style: italic;
font-weight: 100;
}
#contact-list{
display: flex;
width: 80%;
flex-wrap: wrap;
margin: 30px auto;
height: 80px;
justify-content: space-between;
align-items: center;
}
#contact-list li,#contact-list li a{
list-style: none;
text-decoration: none;
font-size: 25px;
color: white;
}
.fab ,.fas{
padding-right: 10px;
}
#Contact #contact-list li{
transition: 0.4s all;
}
#Contact #contact-list li:hover,#Contact a:hover{
transform:translateY(30%);
color:orange;
}
hr{
border: 2px solid #BE3144;
}
footer{
padding:50px 0 0 0;
display: flex;
flex-wrap: wrap;
font-size: 20px;
justify-content: space-around;
align-items: center;
}
footer div{
margin:10px 0;
}
@media screen and (max-width:750px){
#about header{
font-size: 10vw;
}
#web{
font-size: 6vw;
}
#Work #heading{
font-size: 5vw;
color: white;
text-align: center;
}
#contact-list{
display: flex;
width: 100%;
justify-content: center;
flex-wrap: wrap;
height: auto;
}
#contact-list li{
padding: 20px;
}
button{
width: 50%;
box-shadow: 2px 3px black;
font-size: 1.4em;
}
#Contact header{
font-size: 8vw;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment