Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- START NAV BAR -->
<header>
<nav id="navbar" class="nav">
  <ul class="nav-list">
    
     <li><a href="#welcome-section">Home</a></li>
    
      <li><a href="#about">About</a></li>
    
      <li><a href="#projects">Projects</a></li>
    
      <li><a href="#contact">Contact</a></li>
    
  </ul>
  
</nav>
</header>
<!-- END NAV BAR -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
  <!-- START WELCOME SECTION -->
  
  <div id="welcome-section" class="hero">
    
    <h1>Welcome to my <span> Portfolio </span></h1>
  </div>
    <section  class="welcome" >
   <div class="welcome-left">
     <img src="https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?ixlib=rb-1.2.1&auto=format&fit=crop&w=1347&q=80" alt="black floor lamp at the corner" width="100" height="100">
   </div>
    
    <div class="welcome-middle">
      <h2>Hi I am Xun</h2>
      <p>These are my portfolios which include page tribute, survey form, product launching page and technical document page.</p>
    </div>
                
<div class="welcome-right">
  <img src="https://images.unsplash.com/photo-1556794108-2b59ad2b75d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="rectangular beige wooden table" width="100" height="100" >
</div>    
    </section>
  <!-- END WELCOME SECTION -->
<!--   START ABOUT ME SECTION -->
<section id="about" class="about-me">
  <img  class="about-img" src="https://lh3.googleusercontent.com/WF1d-B2n7-KFqidqIENStjVHt2dXzUpsqFvLMywh6M7MkzRNflo1aoyoSGBqAxyHitOVLaIkT4F0qpK6lnuaODcn14oqhYZSeCm6rICXpmZKNcEJxwSFaqA3GMFLBVj_sD_EVcm3QOh0kNnrUPvU3c-alFhuz0J3ButcVfVu5CUSGALE6OWwqFOG4ZGP3Oo0b1hmCE2iwMIbofrwJXYjlStvSXPCuQkGfF3t5IYot-hNRbIAAT6KxVTGjxtuAQXeOdEcB171dR6lRMlPB_s-pE7nO22jhCeuh2mbuEEhKI1EaBgyhU9mSz7fn4NVT757FAYACMz1nepbFt5xqMAIe_jZb8Ibv_9C-v_lRdLNfOJpgL1KAUHQOGLt7Al_PQute35IufI8UwauVYuXHcPCHX-XyAkdFlGzyWzOQ9_vcITdkEUtqFfWNLeCbEI7xwubxPKuQDodD0lAv5Yz8Cz6oqhLc_u5y_kFui65y19qiu4Gv-Oeg1QcbqdgMGbN4klA6CJU8Zw8mDk0ya8rd46C-H2ro5vg5KK69IEplSvfALegL-oTBPOQLt659duW8sBBTWoPORatVzw42LxEfeVnuwCc0PePXR6cuKtK9s8ofwWmZb6QJETU-ZEyqyl2O0rq5lXiCsAeEtnvk6zzEZgg03XDAdLdNZI6pXgFiQmmU5h5whIn3hfgHWoSjpx0=w475-h938-no?authuser=0" width="320" height="600" alt="About me">
  <h1 class="about-title">Xun Portfolio</h1> 
 <h2 class="about-subtitle">Baby web-developer</h2>
   <div class="about-text">
     
     <p>Aviation/Business Management graduate. Learning some coding skills. When I was doing the capstone subject for Business Management, I had the opportunity to apply and integrate the business theories that I have learnt in the past few years in a real-world scenario. The following highlights some of my key skills and experiences that demonstrate this: - Extensive researching skills, innovative thinking and public speaking abilities were demonstrated in Management In Practice, a capstone subject in Business Management course. I and my group members worked together to analyse Aurecon, an engineering consulting firm, and provided a suitable solution for the firm’s knowledge management issues. We utilised SWOT and VRIO frameworks as our solution's foundation. The firm's external and internal environments were analysed in order to determine the competitive advantages of the firm. The solution attained high levels of satisfaction by firm’s executives as well as excellent presentation marks. </p>
     
     <p>Fascinated by tech and comps.</p>

   </div>
</section>
    <!-- END ABOUT ME SECTION -->
  
<!--  START PROJECT SECTION -->
    <section id="projects" class="project-section"  >
      <h2>My Projects</h2>
      
      <div class="project-tile" >
        
<!-- Portfolio Project 1 -->
      <figure  class="portfolio-item">
        <img src="https://www.freelogodesign.org/Content/img/logo-samples/bakary.png" alt="The Little Bakery">
        <figcaption>
          <h2 class="portfolio-title">Product Landing Page</h2>
  <p class="portfolio-desc"> A short description can go here </p>       
          
          <a href="https://codepen.io/Nux909/pen/yLevgWE" target="blank" class="portfolio-link">More info</a>
        </figcaption>
      </figure>
        
<!-- Portfolio Project 2 -->
      <figure  class="portfolio-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Manfred_von_Richthofen.jpg" alt="Manfred Von Richthofen">
        <figcaption>
          <h2 class="portfolio-title">Tribute Page</h2>
         <p class="portfolio-desc"> A short description can go here </p>
          <a href="https://codepen.io/Nux909/pen/LYGREeW" target="blank" class="portfolio-link">More info</a>
        </figcaption>
      </figure>
        
<!-- Portfolio Project 3 -->
      <figure  class="portfolio-item small">
        <img  src="https://i0.wp.com/statisticsbyjim.com/wp-content/uploads/2018/04/normal_distribution_standard_deviation_different.png?w=576&ssl=1" alt="Technical Document">
        <figcaption>
          <h2 class="portfolio-title">Technical Documentation Page</h2>
          <p class="portfolio-desc"> A short description can go here </p>
          <a href="https://codepen.io/Nux909/pen/XWXOGLy" target="blank" class="portfolio-link">More info</a>
        </figcaption>
      </figure>        
     
    
 <!-- Portfolio Project 4 -->
      <figure  class="portfolio-item featured">
        <img src="https://images.unsplash.com/photo-1535572290543-960a8046f5af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="Children Survey Form">
        <figcaption>
          <h2 class="portfolio-title">Children Survey Form</h2>
         <p class="portfolio-desc"> This is a survey focuses on customers' perception towards traditional children toy. </p>
          <a href="https://codepen.io/Nux909/pen/YzwZGrX" target="blank" class="portfolio-link">More info</a>
          
        </figcaption>
      </figure>
      </div>
  </section>
  
  <!--  END PROJECT SECTION -->
  
  <!-- START CONTACT SECTION -->
  
  <section id="contact" class="contact-section">
    <h1>Contact Me</h1>
    <form action="">
      
      <label class="name" class="name">Name:
        <input type="text" id="name">
      </label>
      
      <label class="email" class="email">Email:
        <input type="email" id="email">
      </label>
      
      <label class="message" class="message">Message:
        <textarea name="" id="message"></textarea>
      </label>
      
      <input class="button form-button" type="submit" value="SEND">
    </form>
    
<!--  <div class="contact-links">   
     <a
      id="profile-link"
      href="#"
      target="_blank"
      class="btn contact-details"
      ><i class="fab fa-github"></i> FFC</a
    >
    </div> -->
  </section>
  
  
   <!-- END CONTACT SECTION -->
  
  <!-- FOOTER SECTION -->
  <footer>
    <p> Follow me on social media</p>
    
    <div class="social-icons">

      
      <a href="#" class="fa fa-twitter"></a>
      
      
      <a href="#" class="fa fa-instagram"></a>
      
      
      <a id="profile-link" href="https://forum.freecodecamp.org/u/lzxbmwz4/summary" target="_blank" class="fa fa-free-code-camp"></a>
      
    </div>
    
    <p class="copyright">Copyright 2020 Xun portfolio</p>
  </footer>
  
  <!-- END FOOTER SECTION -->
</body>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Raleway:300,700');

// Fonts
$sans-serif: 'Raleway', sans-serif;
$font-light: 300;
$font-bold: 700;

@mixin sans-serif ($fs, $ls: .8rem, $color: $dark-gray, $tt: uppercase, $lh:1 ){
  font-size: $fs;
  letter-spacing: $ls;
  color: $color;
  text-transform: $tt;
  line-height: $lh;
  font-family: $sans-serif;
}

// Colors
$white: #FFFFFF ; 
$light-gray: #E8E9EB #A7A7A7;
$gray: #A7A7A7;
$dark-gray: #606060 ;
$accent: #03AFC2;
$dark-blue:#223843 ;

// Semantic color names

$menu-background: $gray;


// ===================
// Mixins
// ===================

@mixin container($width: 90%, $max-width: 50em){
  width:$width;
  margin: 0 auto;
  max-width: $max-width;
 
}

@mixin clearfix{
  &::after{
    content:'';
    display: block;
    clear: both;
    }
}

@mixin mq($width:50em){
  @media (min-width:$width){
    @content;
}
}

// ===================
// General styles
// ===================
html{
  scroll-behavior:smooth;
}

body{
  color: $gray;
  font-family: $sans-serif;
  line-height: 1.6;
  background: $white;
  font-size: 0.875rem;
  
  @include mq{
    font-size:1.125rem;
  }
}

// img{
//   max-midth: 100%;
// }

h1, h2, p {
  margin-top: 0 ;
    margin-bottom: 1em;
}

h1{
  color: $accent;
  line-height: 1;
  font-size: 3.125rem;
  
  @include mq{
    font-size: 4.25rem;
  }
}

h2{
 @include sans-serif($fs:2rem, $ls: 0.1rem);
  
  @include mq{
    font-size: 3rem;
  }
}

// ===================
// NAVBAR SECTION
// ===================
header{
  font-weight: $font-bold;
  background:$menu-background;
  position:sticky;
  width:100%;
  z-index: 10;
  top:0;
  margin-bottom:0;
}

nav li{
   margin-right: 2rem;
  list-style: none;
  
  @media (max-width: 560px){
    margin-bottom: 1em;
  }
}

nav a{
  @include sans-serif($fs:1.5rem, $ls: 0.1rem,  $color:$white);
  text-decoration: none;
}

.nav{
  display:flex;
  justify-content:flex-end;
  // padding:1em;
  
  @media (max-width: 600px){
    justify-content:center;
    font-size:1em;
  }
  
  @media (max-width: 570px){
    justify-content:center;
    font-size:0.8em;
  }
  
  
}

 ul {
    @media (max-width: 560px){
        flex-direction: column;
    justify-content:center;
    font-size:0.2em;
     
   }
}
.nav-list {
  display: flex;
}





// ===================
// HERO SECTION
// ===================

.hero{
  background-image: 
     linear-gradient(rgba(248, 249, 249,0.6), rgba(255, 255, 255, 0.9)),
    url(https://lh3.googleusercontent.com/18KTbWJA_vk7lsdPIOxCfj7PnhJ4vV0tr3cfVnFT2XlZ_9L2CVsNrZLUFRhuj7DPzERITgQ7SAs6myTeZzFlcAONKU5gmANyfwD6K8_0PrG3sOxUbdGkaYN3DYM8yrhsosvQ0T6jZ6VTwRKBhjJWCXYdALxyysx7kmDp6o2UPDnLsxVooClEcEVFWZYLsmVOSbtceP-LUaqUYBc74g5z5lHBLOIGUYkVneRLkiAROQVH_L8H1T3mHZVqDPT1s3M_K9f6O2XD_36aTApu5eqHROP6tilPEzLWT-4LnycLWGi9wHWzMmeWW1xwuzxt4aD8siCQ3-f5kMWpK3BrrNVmRED2tmUBzBjc2ewsHUE3CfAwqFNLRXVHCOd_KCvmuA67WNJ-UkdvqVVVTQ4B1AoyzVmZMkO0_2Dn45cWoJ7Os1LxTvu1j-KVm-omRamOjVn1Li4enGw9174F1CUw7RKx6BzMAkBrXY80VNZh02DBua9HYTYNIeTdgd_wp1MO0v5EOEfvZlBn4Gw7mpIVaCL_FloJrfjOf2wdFcV3DCksm0D1lttSfw44laBOisrbV0epfLyJRINJT0SsH_Swzo6ooqH9eCTXpOP9_7tKBzjVXsKSyR7GY9flOQ61brGoe7v6XpM9G65_k7mb6JixEVozF1KjSEtw_yvn1xNAshHAeMVzDkXwalpwOhDt1_GM=w792-h594-no?authuser=0);
  height: 100vh;
  display:flex;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  align-items: center;
  justify-content: center;
  
  h1{
    font-size: 1.5rem;
    font-weight: $font-light;
    color: $dark-blue;
    line-height: 1.5;
    text-align: center;
     @include mq {
      font-size: 3vw;
    }
    
    span{
    @include sans-serif($fs:2rem,$color:$accent) ;
    display: block;
      // margin:0 auto;
      
      @include mq {
      font-size: 10vw;
    }
      }
    
    &::before,
    &::after
    {
      content:'';
      display: block;
      width: 80%;
      height: 1px;
      background: $dark-blue;
      
    }
    
    &::before{
      margin: 0 auto 2em;
    }
    
    &::after{
      margin: 2em auto 0;
    }
    
  }
}

// ===================
// WELCOME SECTION
// ===================

.welcome{
 
  display: flex;
  color: rgba($white, 0.8);
  
  h2{
    color: $white;
    
    &::after{
      display: block;
      content:'';
      width:30%;
      height: 1px;
      background: rgba( $white, 0.5);
      margin: 1em auto 0;
      
    }
  }
  
  @supports (display: grid){
    display: grid;
    grid-template-columns: minmax(4em, 1fr) minmax(auto, 40em) minmax(4em, 1fr);
  }
}

.welcome-middle {
  
  background: $dark-blue;
  padding: 2em ;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.welcome-left img,
.welcome-right img {
  
  object-fit: cover;
  min-height: 100%;
  min-width: 100%;
  max-width:100%;
 
}


// ===================
// ABOUT ME SECTION
// ===================

.about-me{
  @include container;
  @include clearfix;
  margin-top: 5em;
  margin-bottom: 5em;
  padding:90px;
}

.about-img{
  @media (min-width: 42em){
  float: left;
  margin-right: 1em;
  }
  
  @media (max-width: 23em)
  {
    width:80vw;
    object-fit:cover;
  }
}

.about-title{
  margin-bottom: 0.5em;
}


.about-subtitle{
    margin: 0.5em 0;
  }

@supports (display:grid){
  .about-me {
    display: grid;
    grid-template-columns: [port-start] minmax(6em, 1fr) [name-start] minmax(6em, 1fr) [img-end] 2fr [port-end];
    // grid-column-gap: 0.5em;
  }
  
  .about-img {
    grid-column: port / img;
    grid-row: 1/2;
    
    @include mq{
      grid-row: 1/4;
    }
  }
  
  .about-title {
    grid-column: name / img;
    grid-row: 1/2;
    align-self: flex-end;
    
    @media (max-width: 23em){
      font-size:3em;
      grid-column: port / name;
    grid-row: 1/2;
   
    }
  }
  
  .about-subtitle,
  .about-text {
    grid-column: port / port;
    
    @include mq{
    grid-column: img-end / port-end;
  }
  }
  
  .about-subtitle{
    grid-row:2/3;
  }
  
  .about-text {
   grid-row:3/4;
}

// ===================
// PROJECT SECTION
// ===================

.project-section{
  text-align: center;
  background: $light-gray;
  padding: 5em 0;
}

.project-tile{
  
  display: flex;
  flex-wrap: wrap;
  @include container ($max-width: 75em);
}

.portfolio-item{
  position: relative;
  overflow: hidden;
  flex: 1 1 10rem;
  padding: 0;
  margin: 0;
 
  img{
    display: block;
    width: 100%;
  }
  

 figcaption {
  position: absolute;
  top: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 2em;
  background: rgba($accent, 0.75);
  color: $white;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: top ease-in-out 250ms;
   // cursor: pointer;
   
   
}
  
  &:hover figcaption,
  &:focus figcaption
  {
    top:0;
  }
  
}


  
.portfolio-title{
  color: $white;
  font-size: 1.25em;
  margin-bottom: auto;
  
  .featured & {
    font-size: 1em;
  }
  
}

.portfolio-desc {
  display: none;
}

 .portfolio-link{
   color: $white;
   font-weight: $font-bold;
   font-size: 0.85rem;
   text-decoration: none;
   border-bottom: 2px solid $white;
   align-self: flex-start;
  }

@supports (display: grid){
  .project-tile{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    
    @include mq
    {grid-template-columns: repeat(4, 1fr)}
  }
  
  .portfolio-item.featured{
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    // margin: 0 auto;
  }
  
  .featured {
      .portfolio-title{
        font-size: 1.5rem;
        
        @include mq{
          font-size: 3em;
        }
      }
    .portfolio-desc {
      display: block;
    }   }
}
  
  .small{
    @media (max-width: 1141px){
      figcaption{ 
        padding:2em;
        font-size:0.75em;
      }
      
      .portfolio-link{
        font-size:0.7rem;
      }
    }
    
     @media (max-width: 900px){
      figcaption{ 
        padding:1em;
        font-size:0.65em;
      }
      
      .portfolio-link{
        font-size:0.7rem;
      }
    }
    
    @media (max-width: 800px){
      figcaption{ 
        padding:1em;
        font-size:1.25em;
      }
      
      .portfolio-link{
        font-size:0.7rem;
      }
    }
    
     @media (max-width: 540px){
      figcaption{ 
        padding:2em;
        font-size:0.85em;
      }
      
      .portfolio-link{
        font-size:0.7rem;
      }
    }
    
    @media (max-width: 480px){
      figcaption{ 
        padding:2em;
        font-size:0.75em;
      }
      
      .portfolio-link{
        font-size:0.7rem;
      }
    }
    
     @media (max-width: 376px){
      figcaption{ 
        padding:1em;
        font-size:0.75em;
      }
      
      .portfolio-link{
        font-size:0.7rem;
      }
    }
    
      @media (max-width: 353px){
      figcaption{ 
        padding:0.8em;
        font-size:0.6em;
      }
      
      .portfolio-link{
        font-size:0.7rem;
      }
    }
  }


// ===================
// CONTACT SECTION
// ===================

.contact-section {
  @include container;
  padding: 5em 0;
  
  h1{
    text-align: center;
  }
 }

form {
  display: flex;
  flex-direction: column;
  
  @supports (display:grid){
    @include mq {
    display:grid;
      grid-column-gap:1em;
    grid-template-areas: 
      "name     email"
      "message  message"
      "   .     button";
  
      .name{
        grid-area:name;
        }
      
      .email{
        grid-area:email;
        }
      
      .message{
        grid-area:message;
        textarea{
          height:10em;
        }
        }
      
      .button{
        grid-area:button;
        }
  }
 }
}


label{
  display: block;
  margin-top: 1em;
  color: $dark-gray;
}

textarea,
input{
  box-sizing: border-box;
  display: block;
  padding: 0.75em;
  width: 100%;
  background: lighten($gray, 32%);
  border: 1px solid $gray;
  font-size: 1.2rem;
}

.button{
  display: block;
  width: auto;
  margin-top: 1em;
  margin-left: auto;
  background: $accent;
  border: none;
  color: white;
  @include sans-serif($fs: 2rem, $ls:0, $color: $white );
  padding: 0.5em 1.5em;
}
 
// ===================
// FOOTER SECTION
// ===================

footer{
  background: $dark-blue;
  padding: 5em 0;
  text-align: center;
}

.social-icons {
  @include container($max-width: 5em);
  font-size: 30px;
  display: flex;
  justify-content: space-between;
  margin: 1em auto 2em;
  a{
    text-decoration: none;
  }
}

.fa-twitter,
.fa-instagram,
.fa-free-code-camp{ 
  width: 25%;
  color: white;
}

.copyright {
  &::before {
    content:'';
    display:block;
    height: 1px;
    background: rgba($white, 0.15);
    margin: 1em auto;
    width: 35%;
    
   
  }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console