A Pen by Gabriela on CodePen. License.
The purpose of the project is just personal learning. Kept for future reference.
Project is: finished, - technically it passed the tests.
Based on FreeCodeCamp's _Build a _ project, required to earn the Responsive Web Design certification here.
| <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> | |
| <!-- NAVBAR --> | |
| <!-- 6.My portfolio should have a navbar with an id of "navbar--> | |
| <navbar id="navbar" class="nav"> | |
| <ul> | |
| <li><a href="#welcome-section">About</a></li> | |
| <li><a href="#projects">Work</a></li> | |
| <li><a href="#contact-section">Contact</a></li> | |
| </ul> | |
| </navbar> | |
| <!-- WELCOME SECTION --> | |
| <!-- 1. My portfolio should have a Welcome section with an id of "welcome-section"--> | |
| <section id="welcome-section"> | |
| <div> | |
| <h1>My name is Gabriela</h1> | |
| </div> | |
| </section> | |
| <!-- PROJECTS SECTION --> | |
| <!--3. My portfolio should have a projects section with an id of "projects".--> | |
| <section id="projects" class="projects-section"> | |
| <h2 class="projects-section-header">Portfolio</h2> | |
| <div class="projects-grid"> | |
| <!-- | |
| 4. The projects section should contain at least one element with a class of "project-tile" to hold a project. | |
| All info of each project is contained in div container w/class "project-tile" and id= to the project's name. | |
| --> | |
| <a id="survey-form" | |
| class="project project-tile" | |
| href="https://codepen.io/candytale55/pen/qBWZYZp" | |
| target="_blank"> | |
| <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" | |
| alt="Tribute page project snapshot"> | |
| <p class="project-title"> | |
| <span class="thingies"><</span> | |
| Survey Form | |
| <span class="thingies">/></span> | |
| </p> | |
| </a> <!--End of id="survey-form"--> | |
| <a id="tribute-page" | |
| class="project project-tile" | |
| href="https://codepen.io/candytale55/pen/bGbppor" | |
| target="_blank"> | |
| <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" | |
| alt="Tribute page"> | |
| <p class="project-title"> | |
| <span class="thingies"><</span> | |
| Tribute Page | |
| <span class="thingies">/></span> | |
| </p> | |
| </a> <!--End of id="tribute-page"--> | |
| <a id="technical-doc" | |
| class="project project-tile" | |
| href="https://codepen.io/candytale55/pen/RXVWZj" | |
| target="_blank"> | |
| <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" | |
| alt="Tribute page project snapshot"> | |
| <p class="project-title"> | |
| <span class="thingies"><</span> | |
| Technical Documentation | |
| <span class="thingies">/></span> | |
| </p> | |
| </a> <!--End of id="technical-doc"--> | |
| <a id="product-landing-page" | |
| class="project project-tile" | |
| href="https://codepen.io/candytale55/pen/MWgjmOv" | |
| target="_blank"> | |
| <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" | |
| alt="Tribute page project snapshot"> | |
| <p class="project-title"> | |
| <span class="thingies"><</span> | |
| Product Landing Page | |
| <span class="thingies">/></span> | |
| </p> | |
| </a> <!--End of id="product-landing-page"--> | |
| </div> <!--End of "projects-grid"--> | |
| <a | |
| href="#" | |
| class="btn btn-show-more" | |
| target="_blank" | |
| > | |
| Show more | |
| <span class="icon">></span> | |
| </a> | |
| </section> <!-- End of Projects Section --> | |
| <!-- CONTACT SECTION --> | |
| <section id="contact-section"> | |
| <div class="contact-links"> | |
| <a href="#"><i></i>Facebook</a> | |
| </div> | |
| <div class="contact-links"> | |
| <a id="profile-link" | |
| href="https://github.com/candytale55" | |
| target="_blank"> | |
| <i></i>GitHub</a> | |
| </div> | |
| <div class="contact-links"> | |
| <a href="#"><i></i>CodePen</a> | |
| </div> | |
| <div class="contact-links"> | |
| <a href="#">OtherStuff</a> | |
| </div> | |
| </section> | |
| <!-- FOOTER SECTION --> | |
| <footer> | |
| <div> | |
| <p>This is a fake portfolio</p> | |
| <p>fake.name@mail.com</p> | |
| <p>phone: 555-55-55-55</p> | |
| <p> © 2019</p> | |
| </div> | |
| </footer> |
| // !! IMPORTANT README: | |
| // You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. | |
| /*********** | |
| INSTRUCTIONS: | |
| - Select the project you would | |
| like to complete from the dropdown | |
| menu. | |
| - Click the "RUN TESTS" button to | |
| run the tests against the blank | |
| pen. | |
| - Click the "TESTS" button to see | |
| the individual test cases. | |
| (should all be failing at first) | |
| - Start coding! As you fulfill each | |
| test case, you will see them go | |
| from red to green. | |
| - As you start to build out your | |
| project, when tests are failing, | |
| you should get helpful errors | |
| along the way! | |
| ************/ | |
| // PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example! | |
| // Once you have read the above messages, you can delete all comments. |
| :root{ | |
| --white: #f0f0f0; | |
| --welcome-bkg: #303841; /*Dark Gray*/ | |
| --projects-bkg: #45567d; /*Blue*/ | |
| --contact-bkg: #303841; /*Dark Gray*/ | |
| --navbar-bkg: #FFB03B; /*Orange*/ | |
| --footer-bkg: #303841; /*Dark Gray*/ | |
| --tiles-bkg: var(--navbar-bkg); | |
| --font-family-main: 'Montserrat', sans-serif;" | |
| } | |
| /*General Reset */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html{ | |
| box-sizing: border-box; | |
| font-size: 10px; /* This means 1 rem = 10 px */ | |
| } | |
| body { | |
| background-color: var(--projects-bkg); | |
| color: var(--white); /*White*/ | |
| font-family: var(--font-family-main); | |
| font-size: 1.8rem; /* 18px */ | |
| font-weight: 400; | |
| line-height: 1.4; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: var(--white); /*White*/ | |
| } | |
| img { | |
| display: block; | |
| width: 100%; | |
| } | |
| /* NAVBAR SECTION */ | |
| .nav{ | |
| width: 100%; | |
| padding: 3rem 2rem; | |
| display: flex; | |
| } | |
| #navbar{ | |
| background-color: var(--navbar-bkg); | |
| justify-content: flex-end; | |
| } | |
| #navbar li{ | |
| display: inline-flex; | |
| padding: 0 0 0 3rem; | |
| font-size: 2.5rem; | |
| list-style: none; | |
| } | |
| #navbar a{ | |
| color: var(--white); | |
| text-decoration: none; | |
| } | |
| /* WELCOME SECTION */ | |
| #welcome-section{ | |
| height: 100vh; | |
| background-color: var(--welcome-bkg); | |
| display: flex; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| section div{ | |
| margin: auto; | |
| } | |
| section h1{ | |
| font-size: 4rem; | |
| } | |
| /* PROJECTS SECTION */ | |
| #projects { /* This is the complete <section>*/ | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| } | |
| .projects-section-header{ | |
| max-width: 640px; | |
| margin: 0 auto 6rem auto; | |
| padding-bottom: 1.5rem; | |
| text-transform: uppercase; | |
| color: var(--tiles-bkg); /*Orange*/ | |
| border-bottom: 0.2rem solid var(--tiles-bkg); | |
| } | |
| /* MEDIA QUERIES GO HERE - PENDING !! */ | |
| /* This is what sets the image grid using no media queries */ | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| grid-gap: 4rem; | |
| width: 100%; | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| margin: 7rem 0; | |
| } | |
| /* MEDIA QUERIES GO HERE - PENDING !! */ | |
| /*This in the end makes all tiles the same size*/ | |
| .project-image { | |
| height: calc(100% - 6.8rem); | |
| object-fit: cover; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| .project-tile { | |
| text-decoration: none; | |
| text-align: center; | |
| text-transform: uppercase; | |
| background: var(--navbar-bkg); /*Orange*/ | |
| box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); | |
| border-radius: 2px; | |
| /* This is the <a> element that contains the whole tile, you can susbtitute .tile with "a" */ | |
| } | |
| .project-title { | |
| color: var(--welcome-bkg); /*Dark Grey*/ | |
| font-weight: 700; | |
| font-size: 2rem; | |
| padding: 2rem 0.5rem; | |
| } | |
| /* Thingies | |
| Thingies are the "<" and "/>" symbols at each side of the project-titles. | |
| They are the same color as the project-titles background color, therefore invisible and they change to a darker color ("projects" background) when hovered over. | |
| */ | |
| .thingies { | |
| color: var(--tiles-bkg); | |
| transition: color 0.3s ease-out; | |
| } | |
| .project:hover .thingies { | |
| color: var(--projects-bkg); | |
| } | |
| /* Button & icon */ | |
| .btn { | |
| display: inline-block; | |
| padding: 1rem 2rem; | |
| border-radius: 2px; | |
| text-transform: uppercase; | |
| } | |
| .btn-show-more { | |
| font-size: 2rem; | |
| background-color: var(--welcome-bkg); /* Dark Gray */ | |
| transition: background 0.3s ease-out; | |
| /*The last part slows-down the change of color (rule below). | |
| Pending: find out why background is that funny collor*/ | |
| } | |
| .btn-show-more:hover { | |
| background: var(--tiles-bkg); /* CHANGE COLOR !!!!!! */ | |
| /*The btn changes to this color when hovered*/ | |
| } | |
| .icon { | |
| font-size: 2.125rem; | |
| font-weight: 500; | |
| } | |
| /* CONTACT SECTION */ | |
| #contact-section{ | |
| background-color: var(--contact-bkg); | |
| display:flex; | |
| } | |
| /* FOOTER SECTION */ | |
| footer { | |
| width: 100%; | |
| background-color: var(--footer-bkg); | |
| padding: 2rem 0; | |
| display: inline-flex; | |
| } | |
| @media (max-width: 75em) { | |
| html { | |
| font-size: 60%; | |
| } | |
| } | |
| #about{ | |
| height:50vh; | |
| } | |
| #navbar{ | |
| position:fixed; | |
| } | |
| /* FOOTER */ | |
| footer { | |
| width: 100%; | |
| display: flex; | |
| font-weight: 300; | |
| text-align: center; | |
| background-color: var(--footer-bkg); | |
| border-top: .25rem solid var(--navbar-bkg); | |
| } | |
| footer div{ | |
| margin:auto; | |
| display: inline-flex; | |
| justify-content: space-between; | |
| } | |
| footer p { | |
| padding: 2rem; | |
| } |