A freeCodeCamp certification project on Responsive Web Design.
A Pen by Vishrut Aggarwal on CodePen.
Last active
January 25, 2022 15:29
-
-
Save VishrutAggarwal/cf332609a86c0afca1c0af0c60c11370 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
| <html> | |
| <body> | |
| <header> | |
| <nav id = "navbar"> | |
| <a href = "#welcome-section">About me</a> | |
| <a href = "#projects">My work</a> | |
| <a href = "#contact-section">Contact me</a> | |
| </nav> | |
| </header> | |
| <main> | |
| <section id = "welcome-section"> | |
| <div class = "container-width"> | |
| <h1>Hi! I am Vishrut.</h1> | |
| <h2>A Professional Sleeping Enthusiast.</h2> | |
| </div> | |
| </section> | |
| <section id = "projects"> | |
| <div class = "container-width"> | |
| <p>If you would like to see some of my projects...</p> | |
| <div class = "project-links"> | |
| <a href = "https://codepen.io/vishrutaggarwal/full/BawGQjq" id = "tribute-page" class = "project-tile" target = "_blank">Tribute Page</a> | |
| <a href = "https://codepen.io/vishrutaggarwal/full/RwLqzMz" id = "survey-form" class = "project-tile" target = "_blank">Survey Form</a> | |
| <a href = "https://codepen.io/vishrutaggarwal/full/JjrwXwJ" id = "product-landing-page" class = "project-tile" target = "_blank">Product Landing Page</a> | |
| <a href = "https://codepen.io/vishrutaggarwal/full/rNGoMYo" id = "technical-documentation-page" class = "project-tile" target = "_blank">Technical Documentation Page</a> | |
| </div> | |
| <a href = "https://codepen.io/vishrutaggarwal" id = "codepen-link" target = "_blank">See all my CodePen Projects here</a> | |
| </div> | |
| </section> | |
| <section id = "contact-section"> | |
| <div class = "container-width"> | |
| <p>Look at my profiles using these links...</p> | |
| <div class = "profile-links"> | |
| <a href = "https://www.freecodecamp.org/fcc5d53773d-dd96-429f-bc7a-1c321d7f9857" id = "profile-link" target = "_blank"><img src = "https://design-style-guide.freecodecamp.org/downloads/fcc_secondary_small.svg" alt = "freecodecamp icon"></a> | |
| </div> | |
| <p>Talk to me on...</p> | |
| <div class = "contact-links"> | |
| <a href = "https://github.com/VishrutAggarwal" id = "contact-link" target = "_blank"><img src = "https://cdn-icons-png.flaticon.com/512/25/25231.png" alt = "github icon"></a> | |
| <a href = "https://github.com/VishrutAggarwal" id = "contact-link" target = "_blank"><img src = "https://friconix.com/png/fi-xnsuxl-linkedin.png" alt = "linkedin icon"></a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>This is just a fake portfolio. All the projects and contact details given are not real.</p> | |
| </footer> | |
| </body> | |
| </html> |
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
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| background-color: #E2E07E; | |
| color: #959C34; | |
| font-family: sans-serif; | |
| } | |
| header { | |
| display: flex; | |
| flex-direction: row; | |
| position: fixed; | |
| background-color: #CED246; | |
| width: 100%; | |
| height: 30px; | |
| justify-content: right; | |
| align-items: center; | |
| } | |
| nav a { | |
| color: #FFEFEF; | |
| text-decoration: none; | |
| padding: 7px 10px; | |
| height: 100%; | |
| } | |
| nav a:hover { | |
| background-color: #80582D; | |
| } | |
| main { | |
| width: 100%; | |
| } | |
| section { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| width: 100%; | |
| } | |
| h1 { | |
| font-size: 4rem; | |
| } | |
| #projects { | |
| background-color: #959C34; | |
| color: #F4F4C0; | |
| font-size: 2rem; | |
| } | |
| .container-width { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 500px; | |
| width: 80vw; | |
| } | |
| .container-width div { | |
| padding-bottom: 30px; | |
| } | |
| #projects a { | |
| background-color: #F4F4C0; | |
| color: #959C34; | |
| text-decoration: none; | |
| font-size: 1rem; | |
| border-radius: 8px; | |
| padding: 7px; | |
| margin: 5px; | |
| } | |
| #projects a:hover { | |
| font-weight: 600; | |
| text-decoration: underline; | |
| padding: 10px; | |
| margin: 8px; | |
| } | |
| #projects #codepen-link { | |
| margin: 0; | |
| margin-top: 50px; | |
| font-size: 1.5rem; | |
| border-radius: 10px; | |
| background-color: #CED246; | |
| font-weight: 700; | |
| padding: 10px; | |
| } | |
| #contact-section { | |
| font-size: 2rem; | |
| font-weight: 600; | |
| } | |
| #contact-section .profile-links { | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| #contact-section img { | |
| height: 50px; | |
| width: 50px; | |
| background-color: #959C34; | |
| border-radius: 8px; | |
| padding: 7px; | |
| margin: 5px; | |
| } | |
| #contact-section img:hover { | |
| height: 60px; | |
| width: 60px; | |
| padding: 10px; | |
| margin: 8px; | |
| } | |
| footer { | |
| display: flex; | |
| justify-content: right; | |
| align-items: center; | |
| font-size: 0.7rem; | |
| height: 20px; | |
| background-color: #81712E; | |
| color: #F4F4C0; | |
| padding-right: 10px; | |
| } | |
| @media screen & (max-width: 500px) { | |
| #contact-section .profile-links { | |
| flex-direction: column; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment