Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Personal Portfolio
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body link="#404040">
<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">
<h1> Hi, I am Mayank Solan</h1>
<p>A web developer</p>
</div>
<div id="projects" class="work">
<h2>These are some of my projects</h2>
<a href="https://codepen.io/mayanksolan/pen/oQMZVX" target="_blank" class="project project-tile">
<img class="project-pic" src="https://images.pexels.com/photos/1603650/pexels-photo-1603650.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="project">
<div class="project-title">Taj Mahal</div>
</a>
<a href="https://codepen.io/mayanksolan/pen/ZmMyMB" target="_blank" class="project project-tile">
<img class="project-pic" src="https://lucid.me/wp-content/uploads/2018/09/lucid-work-life-balance.png" alt="project">
<div class="project-title">Work Life Balance Survey</div>
</a>
<a href="https://codepen.io/mayanksolan/pen/eQQQLY" target="_blank" class="project project-tile">
<img class="project-pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Need_For_Speed_logo.svg/250px-Need_For_Speed_logo.svg.png" alt="project">
<div class="project-title">Need For Speed Best Games</div>
</a>
<a href="https://codepen.io/mayanksolan/pen/eQazpW" target="_blank" class="project project-tile">
<img class="project-pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Max_Payne_logo.jpg/250px-Max_Payne_logo.jpg" alt="project">
<div class="project-title">Top Games of all time</div>
</a>
</div>
<div id="contact" class="contact">
<div class="header">
<h1>These are the ways you can reach me</h1>
</div>
<div class="boxes">
<a id='profile-link' href="https://gist.github.com/mayanksolan" target="_blank" class="contact-details">GitHub</a>
<a href="https://www.linkedin.com/in/mayank-solan-42628915/" target="_blank" class="contact-details">Linkedin</a>
<a href="https://twitter.com/mayanksolan" target="_blank" class="contact-details">Twitter</a>
<a href="https://facebook.com/mayanksolan" target="_blank" class="contact-details">Facebook</a>
<a href="https://instagram.com/mayanksolan" target="_blank" class="contact-details">Instagram</a>
</div>
</div>
<footer>
<p>&copy; Created for <a href="https://www.freecodecamp.com/" target="_blank">FreeCodeCamp</a></p>
</footer>
</body>
body {
font-family: monospace;
text-align: center;
background-color: #66ccff;
}
* {
margin: 0;
padding: 0;
}
nav ul {
text-align: right;
position: fixed;
width: 100%;
background-color: #66ccff;
}
nav ul li {
display: inline-block;
margin: 50px;
margin-bottom: 20px;
margin-top: 20px;
}
nav ul li a {
color: #003366;
}
#welcome-section {
top: 0;
background: #66ccff;
min-height: 50vh;
padding-top: 50vh;
}
#projects {
background: #99ddff;
min-height:50vh;
padding-top: 5vh;
}
.project {
text-decoration: none;
color: #008080;
display: inline-block;
overflow: hidden;
border: 5px solid #66ccff;
height: 220px;
width: 280px;
margin: 40px 100px;
}
.project-pic {
width: 100%;
height: 80%;
border-bottom: 5px solid #66ccff;
}
.project-title {
font-weight: bold;
font-size:15px;
}
nav {
font-size:20px;
}
.contact {
background-color:#66ccff;
min-height: 50vh;
padding-top: 20vh;
}
.boxes {
padding-top: 10vh;
}
.contact-details {
display: inline-block;
font-weight: bold;
margin: 0 35px 45px 35px;
list-style-type: none;
border: 2px solid #0077b3;
border-radius: 100%;
width: 100px;
height: 100px;
line-height: 100px;
background: #e0ebe8;
color: #0077b3;
text-decoration: none;
}
footer {
padding: 20px;
background: #0077b3;
color: white;
line-height: 40px;
}
@media only screen and (max-width: 350px) {
.contact-details {
border: 2px solid #90C695;
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
You can’t perform that action at this time.