portfolio home page

In this example below you will see how to do a portfolio home page with some HTML / CSS and Javascript

portfolio home page w/o bootstrap

Thumbnail
This awesome code was written by gwenduling, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gwenduling ©
  • HTML
  • CSS
  • JavaScript
    <!-- header -->
<div class="home-header">
  <p class="text-center">
    <i class="ion-ios-cloudy-night"></i> 
    gwenduling
  </p>
</div>
<!-- nav -->
<div class="nav">
  <ul class="text-center">
    <li><a href="#"> <i class="ion-ios-home"></i> HOME</a></li>
    <li><a href="#"><i class="ion-ios-compose"></i> BLOG</a></li>
    <li><a href="#"><i class="ion-ios-infinite"></i> UPDATES</a></li>
    <li><a href="#"><i class="ion-ios-monitor"></i> PORTFOLIO</a></li>
    <li class="contact"><a href="#collaborate"><i class="ion-ios-telephone"></i> CONTACT</a></li>
  </ul>
</div>
<!-- content -->
<div class="content">
  <div class="column col1of3">
    <p> &#60;hello-world&#62; </p>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&#60;name&#62; Giowee Argao &#60;/name&#62; </p>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&#60;field&#62; Front End Web Development &#60;/field&#62;</p>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&#60;college&#62;</p>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;school&#62; Holy Angel University &#60;/school&#62;</p>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;course&#62; BS in Information Technology &#60;/course&#62;</p>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;major&#62; Web Development &#60;/major&#62;</p>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&#60;/college&#62;</p>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&#60;email&#62; gioweeargao@gmail.com &#60;/email&#62;</p>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&#60;mobile&#62; 09209586986 &#60;/mobile&#62;</p>
    <p> &#60;/hello-world&#62; </p>
  </div>
  <div class="column col2of3">
    <img class="img-fluid" src="https://images.unsplash.com/photo-1436985847904-40f78a6bef9d?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" />
  </div>
</div>
<!-- content2 -->
<div class="content-2" id="collaborate">
  <div class="collaborate">
    <p class="text-center"><i class="ion-paper-airplane"></i> Let's Collaborate</p>
    <form class="col1of3">
      <label>name</label>
      <input type="text" placeholder="johndoe">
      <label>email</label>
      <input type="text" placeholder="johndoe@sample.com">
      <label>message</label>
      <textarea rows="10">
      </textarea>
      <button class="btn">Send Message</button>
    </form>
  </div>   
</div>

/*Downloaded from https://www.codeseek.co/gwenduling/portfolio-home-page-gLVwEm */
    body {
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
  background-color: #222;
}
p { color: #a5a5a5; }
label {
  margin: 0;
  font-size: 20px;
  color: #989898;
}
.text-center { text-align: center; }
.img-fluid { max-width: 100%; }
.column { float: left; }
.col1of2 { width: 50%; }
.col1of3 { width: 33.33%; }
.col2of3 { width: 66.67%; }
input,
textarea {
  width: 100%;
  padding: 10px;
  background-color: transparent;
  border: 1px solid #656565;
  border-radius: 2px;
  color: #f1f1f1;
}
.btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #323232;
  box-shadow: none;
  -webkit-box-shadow: none;
  border: none;
  border-radius: 2px;
  color: #a5a5a5;
}
.home-header {
  margin: 0;
  padding-top: 40px;
  padding-bottom: 40px;
  background: #262626;
  p {
    font-size: 90px;
    font-weight: 200;
  }
}
.nav {
  &::after { clear: both; }
  ul {
    width: 100%;
    margin: 0;
    padding: 0;
    li {
      display: inline;
      float: left;
      width: 20%;
      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: 2px solid #323232;
      &.contact {
        background-color: #292929;
      }
      a { 
        text-decoration: none;
        color: #989898; 
      }
    }
  }
}
.content {
  max-width: 997px;
  margin: 100px auto;
  padding: 20px;
  background-color: #1c1c1c;
  clear: both;
  overflow: hidden;
}
.content-2 {
  width: 100%;
  background-color: #202020;
  .collaborate {
    padding: 20px;
    font-size: 40px;
    font-weight: 200;
    form { 
      margin: 0 auto;
      padding-bottom: 60px;
    }
  }
}


/*Downloaded from https://www.codeseek.co/gwenduling/portfolio-home-page-gLVwEm */
    

Comments