A Pen by Mayank Solan on CodePen.
Created
December 8, 2018 20:38
-
-
Save mayanksolan/dd97cb1e3ac5a5df76b556a0d5e505df to your computer and use it in GitHub Desktop.
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> | |
| <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>© Created for <a href="https://www.freecodecamp.com/" target="_blank">FreeCodeCamp</a></p> | |
| </footer> | |
| </body> |
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
| 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