Skip to content

Instantly share code, notes, and snippets.

@IASshaikh

IASshaikh/index.html

Created February 13, 2019 16:16
Show Gist options
  • Save IASshaikh/ac04abba7ffae13f3a9f11374776b8c5 to your computer and use it in GitHub Desktop.
Save IASshaikh/ac04abba7ffae13f3a9f11374776b8c5 to your computer and use it in GitHub Desktop.
Download ZIP
PersonalPorfolioPage
Raw
index.html
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<html>
<head>
<title>Personal Portfolio</title>
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#welcome-section" id="nav-link">About</a>
</li>
<li><a href="#Projects" id="nav-link">Work</a>
</li>
<li><a href="#Contact" id="nav-link">Contact</a>
</li>
</ul>
</nav>
<section id="welcome-section">
<div id="FirstImpression">
<h1>Hi I am Sam</h1>
<h5>A Full Stack Developer</h5>
</div>
</section>
<section id="projects">
<h5>Projects</h5>
<div class="project-tile">
<a href="https://codepen.io/iasshaikh/pen/pGJXNm">Technical Documentation</a>
</div>
</section>
<section id="Contact">
<h5>Contacts</h5>
<ul>
<li>
<a href="https://github.com/IASshaikh" id="profile-link" target=_blank>GitHub</a>
</li>
</ul>
</section>
</body>
</html>
Raw
style.css
#FirstImpression{
padding:1px;
text-align: center;
font-weight:bold;
font-size:1.5em;
}
#nav-link{
}
@media only screen and (max-width: 600px) {
body {
background-color: #006622;
}
}
#navbar{
display: inline-block;
width: fit-content;
position:fixed;
top:0;/* Keep at the very top of the viewport */
}
#navbar li {
display: inline-block;
margin-right:10px;
}
li a:hover {
background-color: #555;
color: white;
}
#welcome-section{
height:100vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment