Last active
October 16, 2019 03:38
-
-
Save jrej-dev/3bfbd0ce8c78d7257496401ef5cfe0e2 to your computer and use it in GitHub Desktop.
Portfolio
This file contains hidden or 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
| FCC Web Design Projects - Portfolio | |
| ----------------------------------- | |
| A [Pen](https://codepen.io/Jrej/pen/PXEqeR) by [Jrej](https://codepen.io/Jrej) on [CodePen](https://codepen.io). | |
| [License](https://codepen.io/Jrej/pen/PXEqeR/license). |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title> | |
| FCC Web Design Project - Personal Portfolio | |
| </title> | |
| </head> | |
| <header> | |
| <nav id="navbar"> | |
| <div class="light"> | |
| </div> | |
| <div id="light2" class="light"> | |
| </div> | |
| <div id="light3" class="light"> | |
| </div> | |
| <div id="light4" class="light"> | |
| </div> | |
| <div id="light5" class="light"> | |
| </div> | |
| <div class="city"> | |
| </div> | |
| <div id="city2"class="city"> | |
| </div> | |
| <div id="city3"class="city"> | |
| </div> | |
| <ul> | |
| <li><a href="#about"> About</a></li> | |
| <li><a href="#projects"> Projects</a></li> | |
| <li><a href="#Profile-link"> Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <body> | |
| <div id="welcome-section"> | |
| <h1 class=title> My name is Jrej, | |
| </h1> | |
| <h2 class=title>This is my portfolio. | |
| </h2> | |
| </div> | |
| <div id="projects"> | |
| <section class="project-tile"> | |
| <h1> | |
| Below my most recent projects: | |
| </h1> | |
| <a href="https://codepen.io/Jrej/pen/LMOXjd"> FCC Web Design Project - Technical Documentation Page </a> | |
| </section> | |
| <section class="project-tile"> | |
| <a href="https://codepen.io/Jrej/pen/zyPwaq"> FCC Web Design Project - Landing Page </a> | |
| </section> | |
| <section class="project-tile"> | |
| <a href="https://codepen.io/Jrej/pen/YdZvYm"> FCC Web Design Project - Survey Page </a> | |
| </section> | |
| <section class="project-tile"> | |
| <a href="https://codepen.io/Jrej/pen/LMGmKx"> FCC Web Design Project - Tribute Page </a> | |
| </section> | |
| </div> | |
| </br> | |
| <hr> | |
| </br> | |
| <div > | |
| <a href="https://www.freecodecamp.org/jrej" target="_blank" id="profile-link"> FCC Profile </a> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| #welcome-section{ | |
| background:lightblue; | |
| height: 100vh; | |
| } | |
| .light{ | |
| position:absolute; | |
| background: transparent; | |
| width: 5px; | |
| height: 16px; | |
| top:25px; | |
| left:105px; | |
| border-color: white; | |
| border-style: dotted; | |
| z-index: 1; | |
| } | |
| } | |
| #light2{ | |
| left:185px; | |
| top:17px; | |
| } | |
| #light3{ | |
| height:20px; | |
| width:5px; | |
| left:233px; | |
| top:22px; | |
| } | |
| #light4{ | |
| left:275px; | |
| top:20px; | |
| } | |
| #light5{ | |
| left:155px; | |
| top:27px; | |
| } | |
| #city2{ | |
| left:180px; | |
| } | |
| #city3{ | |
| left:220px; | |
| } | |
| .city{ | |
| background:lightblue; | |
| position:absolute; | |
| width:20px; | |
| height:30px; | |
| top:20px; | |
| left:100px; | |
| } | |
| .city:before{ | |
| content:""; | |
| position:absolute; | |
| background:lightblue; | |
| width:80px; | |
| height:10px; | |
| top:20px; | |
| left:0px; | |
| } | |
| .city:after{ | |
| content:""; | |
| background:lightblue; | |
| position:absolute; | |
| width:20px; | |
| height:15px; | |
| top:10px; | |
| left:50px; | |
| } | |
| .title{ | |
| position:relative; | |
| text-align: center; | |
| top:35%; | |
| } | |
| li>a{ | |
| color:black; | |
| text-decoration: none; | |
| font-weight: bold; | |
| } | |
| h1{ | |
| text-shadow: 3px 5px 12px white; | |
| } | |
| .project-tile>h1{ | |
| margin-top:50px; | |
| margin-bottom:100px; | |
| } | |
| h2{ | |
| color:white; | |
| text-shadow: 2px 1px 2px black; | |
| } | |
| li{ | |
| display:inline; | |
| padding: 25px; | |
| color:black; | |
| font-size: 23px; | |
| margin-right:1%; | |
| } | |
| #navbar{ | |
| position:fixed; | |
| width: 100%; | |
| height:50px; | |
| background: white; | |
| top:0px; | |
| text-align: right; | |
| z-index:1; | |
| } | |
| .project-tile{ | |
| padding:50px; | |
| text-align:center; | |
| } | |
| #profile-link{ | |
| margin:50%; | |
| } | |
| @media only screen and (max-width: 600px){ | |
| h1{ | |
| font-size: 30px | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
codepen to github