A Pen by Fa'ez Rawas

Thumbnail
This awesome code was written by saltbrain, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright saltbrain ©
  • HTML
  • CSS
  • JavaScript
    <html>

<head>
  <meta charset="utf-8" />
  <title>Faez Rawas Personal Portfolio</title>
</head>

<body>
  <div>
    <!--<h1>Faez Rawas Portfolio</h1>-->
    <nav>
      <ul>
        <li><a href="#bio">I</a></li>
        <li><a href="#works">Work</a></li>
        <li><a href="#social">Social</a></li>
      </ul>
    </nav>
  </div>
  <div id="lead-banner">
    <img src="http://bourgeononline.com/wp-content/uploads/2016/01/new-banner-1.jpg" alt="banner">
  </div>
  <div id="wrapper">
    <div id="bio">
      <!--<h2>About</h2>-->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consequat justo velit, ut feugiat orci condimentum porttitor. Praesent sed faucibus eros. Duis blandit urna et diam tempus congue non id purus. Vivamus in suscipit urna. Suspendisse viverra
        turpis ac risus viverra, vel vulputate purus hendrerit.</p>
      <!--<h3>Aspiring Web Developer</h3>-->
    </div>
    <div id="works">
      <!--<h2>Portfolio</h2>-->
      <div>
        <img src="https://bit.ly/2buXEcl">
      </div>
      <div>
        <img src="https://bit.ly/2cmspQx">
      </div>
      <div>
        <img src="https://bit.ly/2c4qa04">
      </div>
      <div>
        <img src="https://bit.ly/2buZF8l">
      </div>
      <div>
        <img src="https://bit.ly/2c4rfVP">
      </div>
      <div>
        <img src="https://bit.ly/2c39Oo7">
      </div>
    </div>
    <div id="social">
      <!--<h2>Contact</h2>-->
      <a href="#" class="facebook"></a>
      <a href="#" class="instagram"></a>
      <a href="#" class="free-code-camp"></a>
    </div>
  </div>
</body>

</html>

/*Downloaded from https://www.codeseek.co/saltbrain/a-pen-by-faandaposez-rawas-gwYRBp */
    body {
  font-family: Monospace;
  font-size: 11px;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
}

nav {
  width: 100%;
  border: 1px solid #000;
  margin:  auto;
  padding: 17px;
  position: fixed;
  background: #fff;
}

nav li{
  display: inline-block;
  text-decoration: none;
  border: 1px solid #000;
  padding: 10px;
  color: #000;
  float: right;
}

nav a{
  text-decoration: none;
  color: #000;
}

nav ul:after{
  content:"";
  display: block;
  clear: both;
}

nav li:hover {
  background: #000;
}

nav a:hover {
  color: #fff;
}

#lead-banner img{
  width: 100%;
  margin: 0px auto;
  border: 1px solid #000;
  border-top: none;
}

#bio p{
  width: 70%;
  margin: 100px auto;
  border: 1px solid #000;
  padding: 20px;
}

#bio p:hover {
  text-transform: lowercase;
}

#works div{
  display: inline-block;
  border: 1px solid #fff;
  width: 70%;
  height: 200px;
  margin: 0 auto;
}

#works img{
  display: inline-block;
  width: 50%;
  float: right;
}

#social a{
  display: inline-block;
  width: 50%;
  margin: 0 auto;
}

#social a:hover {
  background: #000;
}


/*Downloaded from https://www.codeseek.co/saltbrain/a-pen-by-faandaposez-rawas-gwYRBp */
    

Comments