Build a Portfolio page Challenge

build-a-portfolio-page-challenge.markdown

Build a Portfolio page Challenge

A Pen by Dan Haddock on CodePen.

License.

index.html

<!-- Bootstrap -->

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;700&family=Montserrat:wght@100;400;700;900&display=swap" rel="stylesheet">

<!-- Navigation -->
<section id="navigation">
  <div class="navbar">
    <ul>
      <li><a class="nav-link" href="#projects">Projects</a></li>
      <li>
        <a class="nav-link" href="#workbench">The Workbench</a>
      </li>
    </ul>
  </div>
</section>

<!-- Welcome Section  -->
<section class='section' id="welcome">
  <div class="row-welcome">
    <h1 class="welcome-h1">Portfolio</h1>
  </div>
</section>

<!-- Projects Section -->
<section class='section' id="projects">
  <h1 class='projects-h1'>Latest Projects</h1>
  <div class="row project-row">
    <div class="tiles col-lg-3">
      <div class="card">
        <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17ded11189b%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17ded11189b%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Project One</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary link-btn">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="tiles secondary col-lg-3">
      <div class="card">
        <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17ded11189b%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17ded11189b%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Project Two</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary link-btn">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="tiles tertiary-project col-lg-3">
      <div class="card">
        <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17ded11189b%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17ded11189b%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Project Three</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary link-btn">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section" id="workbench">
  <div class="items">
    <h1>The Workbench</h1>
    <p>Below is the icon outside the link and p tags
      <i class="fab fa-github"></i>
    </p>
  </div>
</section>

script.babel

let links = document.getElementsByClassName("nav-link");
let navbar = document.getElementById("navigation");

let isClicked = () => {
  navbar.click();
};

let shadowOn = () => {
  if (isClicked === true) {
    navbar.setAttribute("shadow");
  }
};
shadowOn();

scripts

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.css

body {
  margin: 0;
  font-family: Lato;
  font-weight: 500;
  padding: 0;
  position: relative;
}

h1 {
  color: unset;
  margin: 0;
}
a,
li {
  text-decoration: none;
  color: black;
  border: #ebf1ff 1px solid;
  font-weight: 700;
}
#navigation {
  background-color: #ebf1ff;
  width: 100%;
  position: fixed;
  z-index: 10;
  top: 0;
  padding-top: 25px;
  margin: 0;
  box-shadow: 1px 0.1px 1px black;
  /*   border-bottom: 1px solid #FFF; */
}

.shadow {
  /*   position: absolute; */
  box-shadow: 1px 1px 1px black;
}
.navbar {
  padding: 0;
  margin-left: 65%;
  z-index: 1;
}
.navbar ul {
  list-style: none;
  margin: 0;
}
.navbar li {
  display: inline-block;
}
.nav-link {
  padding: 5px 25px;
  /*   border: 1px red solid; */
  text-align: center;
  color: black;
  margin-left: 0%;
  margin-bottom: 5px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
}
.nav-link:hover {
  background-color: #fff;
  font-weight: 400;
  color: black;
  border: 1px #ebf1ff solid;
  border-radius: 5px;
}
/* Global Section Settings */
.section {
  height: 100vh;
}

/* welcome section */
#welcome {
  margin: 0;
  background-color: #ebf1ff;
}
.welcome-h1 {
  color: black;
  padding-top: 10%;
  text-transform: uppercase;
  letter-spacing: 15px;
  text-align: center;
  font-size: 3rem;
  font-weight: 100;
}
.row-welcome {
  margin: 0;
}
/* Project Section */
.project-row {
  margin: 5%;
}
#projects {
  z-index: 0;
  width: 100%;
}
.projects-h1 {
  text-align: center;
  font-size: 55px;
  padding-top: 15%;
}
.tiles {
  /*   border: 1px red solid; */
  position: relative;
  padding: 0%;
  margin: 0 auto;
}
.link-btn {
  background-color: #183446;
  border: 1px solid #ebf1ff;
}
/* Workbench Section */
#workbench {
  border-top: 1px solid #ebf1ff;
  height: 25vh;
}
.items {
  padding: 10%;
}
#workbench h1 {
  text-align: center;
}
#workbench p {
  text-align: center;
}

@media only screen and (max-width: 900px) {
  h1 {
    color: purple;
  }
}

styles

<link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />