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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

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

<body>
  <nav class="menu" id="navbar">
    <ul>
      <li class="menu-item">
        <a href="#top">Top</a>
      </li>
      <li class="menu-item">
        <a href="#projectsSection">Projects</a>
      </li>
      <li class="menu-item">
        <a href="#aboutMeSection">About Me</a>
      </li>
    </ul>
  </nav>
  <a name="top" id="top">Hidden Anchor</a>
  <section id="welcome-section">
    <div class="plate">
      
      <h1 class="star-wars">A long time ago, in a galaxy far far away...</h1>
    </div>
    <div class="bigger-plate">
      <div class="bigger-star-wars"><a id="profile-link" href="https://www.freecodecamp.org/fcc697a85aa-7137-48cd-8b41-af3df5fd408a" target="_blank">hbar1st</a> took her first computer science class programming in Basic...</div>
    </div>
    <div class="final-plate">
      <div class="star-wars-end">...and the rest is <span id="his">his</span>
        <span id="story">story!</span>        
      </div>
    </div>
  </section>
  
  <a name="projectsSection" id="projectsSection">Hidden Anchor</a>
  <section id="projects">
    <img id="projectSectionTitle" target="_blank"src="http://res.cloudinary.com/hbrwdfccc/image/upload/v1530839952/FCCPROJECTS.jpg" alt="FCC Projects" />
      <div class="circle-border">
       <a class="project-tile" target="_blank" href="https://codepen.io/hbar1st/full/KeWPeB/"><img src="http://res.cloudinary.com/hbrwdfccc/image/upload/v1530838578/2018-07-05.png" alt="Tribute Project"/></a>
        <a href="https://codepen.io/hbar1st/full/qKvpvw/" target="_blank"><img src="http://res.cloudinary.com/hbrwdfccc/image/upload/v1530841525/2018-07-05_1.png" alt="Technical Docs"/></a>
        <a href="https://codepen.io/hbar1st/full/GGzdZR/" target="_blank"><img src="http://res.cloudinary.com/hbrwdfccc/image/upload/v1530841493/2018-07-05_6.png" alt="Product Landing Page"/></a>
        <a href="https://codepen.io/hbar1st/full/mKMYvZ/" target="_blank"><img src="http://res.cloudinary.com/hbrwdfccc/image/upload/v1530841518/2018-07-05_4.png" alt="Trip Survey"/></a>

      </div>
  </section>
  
  <a name="aboutMeSection" id="aboutMeSection" >Hidden Anchor</a>
  <section id="aboutMe">
    <h1>About Me</h1>
    
    <ul class="timeline">
      <li class="event" simply="1">
        <span id="data-date">1999</span>
        <h3>B.Sc. Computer Science</h3>
        <p>Ryerson University</p>
      </li>
      <li class="event">
        <span id="data-date">2001</span>
        <h3>M.Sc. Computer Science</h3>
        <p>Queen's University</p>
      </li>
      <li class="event">
        <span id="data-date">2001-2015</span>
        <h3>Software Developer</h3>
        <p>IBM</p>
      <li class="event">
        <span id="data-date">2018</span>
        <h3>Responsive Web Design Certificate</h3>
        <p>Free Code Camp</p>
      </li>
    </ul>
  </section>
  -->
</body>

              
            
!

CSS

              
                
body {
  width: 100%;
  background-color:black;
}  
* {
  margin: 0;
  padding: 0;
}
#welcome-section a {
  color: #ff99aa; /*very pink!*/
  text-decoration: none;
  border: 2px ridge yellow;
  font-size: 3rem;
}
#welcome-section {
    background-image:
  radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
  radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
  radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
  radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  width: auto;
  height: 100vh;
  padding-top: 10vh;
  padding-bottom: 10vh;
  text-align: center;
  vertical-align: center;
  box-sizing: border-box;
}
.star-wars {
  /*position: relative;*/
  height: 100%;
  width: 100%;
  /**-webkit-perspective: 1500;**/
}

.star-wars, .star-wars-end, .bigger-star-wars {
  font-size: 2rem;
  -webkit-transition: 200ms;
  -moz-transition: 200ms;
  transition: 200ms;
  -webkit-transform: translateY(65%);
  -moz-transform: translateY(65%);
  -ms-transform: translateY(65%);
  -o-transform: translateY(65%);
  transform: translateY(65%);
}

.star-wars, .bigger-star-wars, .star-wars-end {
  font-family: Righteous, monospace;
  color: yellow ;
}

.biggerplate{
  width: 60%;
  margin: 0 auto;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotateX(65deg);
  -moz-transofrm: rotate(65deg); 
  display: block;
}

#story::before {
  content: "her";
  color: #ff99aa;
  font-size: 4rem;
  position: relative;
  top: -2.3rem;
  left: 2.1rem;
  z-index: 1;
}
#insert {
  color: pink;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
  left: -.1rem;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(=90deg);
  font-size: 4rem;
}
#his {
  text-decoration: line-through;
  text-decoration-style: double;
  text-decoration-color: red;
}
#story {
  position: relative;
  left: -2.9rem;
}
.plate, .final-plate, .bigger-plate {
  width: 60%;
  margin: 0 auto;
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotateX(65deg);
  -moz-transform-origin: 0 0;
  -moz-transform: rotateX(65deg);
  display: block;
}
.plate {
  margin-top: 1rem;
}
.bigger-plate {
  width: 70%;
}
.final-plate {
  width: 80%;
}
.star-wars-end {
  font-size: 3.5rem;
}
.bigger-star-wars {
  font-size: 3rem;
}

#projects {
  box-sizing: border-box;
  background-color: white;
  height: auto;
  padding-bottom: 3vh;
  display: block;
  width: 100%;
}

.circle-border {
  display: grid;
  margin-top: 1rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 'top-left top-right' 'bottom-left bottom-right';
  grid-gap: 0px 0px;
  align-content: space-around;
  justify-content: center;
}
.circle-border img {
  width:13rem;
  height: 13rem;
  text-align:center;
  color: black;
  border-radius: 0% 100% 100% 100%;
  -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  -moz-filter: grayscale(100%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%);
  -o-transition: .5s ease-in-out;
}
.circle-border a:nth-child(1) {
  grid-area: top-left;
  border-radius: 100% 100% 0% 100%;
  border: .5rem pink solid;
  justify-self: end;
  align-self: end;
}
.circle-border a:nth-child(2) {
  grid-area: top-right;
  margin-top:0;
  border-radius: 100% 100% 100% 0%;
  border: .5rem darkblue solid;
  justify-self: start;
  align-self: end;
}
.circle-border a:nth-child(3) {
  grid-area: bottom-left;
  border-radius: 100% 0% 100% 100%;
  margin-top: 0;
  border: .5rem red solid;
  justify-self: end;
  align-self: start;
}
.circle-border a:nth-child(4)  {
  grid-area: bottom-right;
  margin-top: 0;
  border-radius: 0% 100% 100% 100%;
  border: .5rem lightblue solid;
  justify-self: start;
  align-self: start;
}

.circle-border a:nth-child(1) img {
  grid-area: top-left;
  border-radius: 100% 100% 0% 100%;
  border: .3rem pink dotted;
  justify-self: end;
  align-self: end;
}
.circle-border a:nth-child(2) img {
  grid-area: top-right;
  border-radius: 100% 100% 100% 0%;
  border: .3rem darkblue dotted;
  justify-self: start;
  align-self: end;
}
.circle-border a:nth-child(3) img {
  grid-area: bottom-left;
  border-radius: 100% 0% 100% 100%;
  margin-top: 0;
  border: .3rem red dotted;
  justify-self: end;
  align-self: end;
}
.circle-border a:nth-child(4) img {
  grid-area: bottom-right;
  margin-top: 0;
  border-radius: 0% 100% 100% 100%;
  border: .3rem lightblue dotted;
  justify-self: start;
  align-self: end;
}
.circle-border a img:hover {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
  padding: 0rem;
  -webkit-transform: rotateX(45deg);
  -moz-transform: rotateX(45deg);
}

.circle-border a:nth-child(1) :hover {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
}
.circle-border a:nth-child(3) :hover {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
}
.circle-border a:nth-child(2) :hover {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(5deg);
}
.circle-border a:nth-child(4) :hover {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(5deg);
}
#projects #projectSectionTitle {
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@keyframes navborder {
    from {border: 1px dashed white;}
    to {border: 10px dashed gold;}
}
/* Define the main Navigation block */
#navbar {
  animation-name: navborder;
  animation-duration: 2s;
  animation-delay: 4s;
  position: fixed;
  box-sizing: border-box;
  width: auto;
  padding: 0;
  font-family: helvetica, san-serif;
  line-height: 2rem;
  font-size: 1.2rem;
  height: auto;
  background: rgba(255, 255, 102, .3);
  letter-spacing: 0.2em;
  border-radius: 5px;
  border: 10px dashed gold;
  margin-top: 1rem;
  margin-left: 1.3rem;
  transform: skewX(-15deg);
  -moz-transform: skewX(-15deg);
  -webkit-transform: skewX(-15deg);
    -moz-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
}

#navbar ul {
  width: auto;
  list-style: none;
  padding: 0;
  margin: 1px 1px 1px 1px;
  margin-left: auto;
  margin-right: auto;
}

#navbar ul li {
  text-align: center;
  text-decoration: none;
  margin: 10px 0px 10px 0px;
  font-weight: bold;
  font-variant: small-caps;
  padding: 0;
  display: block;
  width: auto;
}
#navbar ul li:not(:last-child) {
  border-bottom: 1px dotted white;
}
#navbar ul li a {
  padding: .3rem;
  text-decoration: none;
  text-align: center;
  color: pink;
  text-shadow: 1px 1px 2px purple, 0 0 25px yellow, 0 0 5px darkblue;
  opacity: 1;
}
#navbar ul * {
  -webkit-transform: rotateY(-25deg);
  -moz-transform: rotateY(-25deg);
}
#navbar ul *:hover {
  color: white;
  transform: rotateY(5deg);
  -moz-transform: rotateY(5deg);
  -webkit-transform: rotateY(5deg);
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}

#top, #aboutMeSection, #projectsSection {
  display: block;
  width: 100%;
  position: relative;
  color: purple;
  visibility: hidden;
  grid-column-start: 1;
  grid-column-end: 2;
  top: 0rem;
}

#projectsSection {
  top: 0rem;
}
#aboutMeSection {
  top: 0rem;
}

/* Base */
p {
  font-weight: 300;
}

strong {
  font-weight: 600;
}

#aboutMe h1 {
  font-family: 'Saira', sans-serif;
  letter-spacing: 1.5px;
  color: white;
  font-weight: 400;
  font-size: 2.4em;
}

#aboutMe {
  margin-top: -1rem;
  text-align: center;
  background: #252827;
  font-size: 16px;
  color: yellow;
  padding-bottom: .5rem;
}

/* Timeline */

.timeline {
  border-left: 4px solid silver; /*#004ffc;*/
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  background: #3d4241;
  color: pink ;
  font-family: 'Chivo', sans-serif;
  margin: 1rem auto;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.4em;
  font-size: 1.03em;
  padding: 3.4rem;
  list-style: none;
  text-align: left;
  font-weight: 100;
  max-width: 30%;
  
  h1 {
    font-family: 'Saira', sans-serif;
    letter-spacing: 1.5px;
    font-weight: 100;
    font-size: 1.4em;
  }
  
  h2, h3 {
    font-family: 'Saira', sans-serif;
    letter-spacing: 1.5px;
    font-weight: 400;
    font-size: 1.4em;
  }
}
.event {
  border-bottom: 1px dashed white;
  padding-bottom: 0rem;
  margin-bottom: 50px;
  position: relative;
}

.event :last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
}

#data-date {
  left: (((120px * 0.6) + 50px + 4px + 11px + (4px * 2)) * 1.5) * -1;
  color: yellow;
  text-align: right;
  font-weight: 100;
  font-size: 0.9em;
  font-family: 'Saira', sans-serif;
}

@media screen and (max-width: 500px) {
  .circle-border a:nth-child(1) :hover {
  -webkit-transform: none;
}
.circle-border a:nth-child(3) :hover {
  -webkit-transform: none;
}
.circle-border a:nth-child(2) :hover {
  -webkit-transform: none;
}
.circle-border a:nth-child(4) :hover {
  -webkit-transform: none;
}

  #welcome-section a {
    font-size: 2rem;
  }
  .timeline {
    max-width: 70%;
  }
  
  #navbar, #navbar * {
    display: none;
  }
  
  body {
    margin-top: 0%;
  }
  #welcome-section {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #aboutMe {
    z-index: 2;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
  .plate {
    width: 50vw;
    text-align: center;
  }
  .bigger-plate {
    width: 70vw;
    text-align: center;
  }
  .final-plate {
    width: 80vw;
    text-align: center;
  }
  #star-wars {
    font-size: 1rem !important;
  }
  #bigger-star-wars {
    font-size: 1.5rem !important;
  }
  #star-wars-end {
    font-size: 1.8rem ; 
  }
  #projects {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    padding-bottom: 10px;
    background-color: white;
    text-align: center;
    align: center;
    display: block;
    height: auto;
  }
  #projects #projectSectionTitle {
    margin:0
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 50%;
  }
  .circle-border {
    margin:0;
    padding: 0;

  display: grid;
  margin-top: 1rem;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'top-left' 'top-right' 'bottom-left' 'bottom-right';
  grid-gap: 0px 0px;
  align-content: center;
  justify-content: center;
}
  .circle-border img {
    margin:0;
  }
  .circle-border a img {
    margin-top: 0vh;
  }
  .circle-border a:nth-child(1) img {
    border-radius: 100% 100% 0% 100%;
    margin-left: 0;
    margin-right: 0;
    border: 1vw pink dotted;
  }
  .circle-border a:nth-child(2) img {
    border-radius: 100% 100% 100% 0%;
    border: 1vw darkblue dotted;
    margin-left: 0;
    margin-right: 0;
  }
  .circle-border a:nth-child(3) img {
    border-radius: 50% 0% 50% 50%;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
    border: 1vw red dotted;
  }
  .circle-border a:nth-child(4) img {
    margin-top: 0;
    border-radius: 0% 50% 50% 50%;
    border: 1vw lightblue dotted;
    margin-left: 0;
    margin-right: 0;
  }
  #story::before {
    position: static;
    content: "her";
    top: 0;
    left: 0;
  }
}


              
            
!

JS

              
                
              
            
!
999px

Console