css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              //Loader
.loader-wrapper
  .flex
    .loader.loader-top
      span {AJ}
  .loader-section.left
  .loader-section.right
  
//logo
a.logo(href="#about") {AJ}

//menu
.menubutton
  img(src='https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png' height="50vh")

.overlay
  .overlay-content
    a(href="#about") 
      h5 About
  .overlay-content  
    a(href="#skills")
      h5 Skills
  .overlay-content  
    a(href="#projects") 
      h5 Projects
  .overlay-content  
    a(href="#contact") 
      h5 Contact
  
//Containers
.holder#about
  .container.blue
    .info
      h1 Hi, I'm Adam.
    .info
      h2 Web Developer | Army Reservist | Lifeguard | Swimming Teacher | Carer | Computer Refurbishment Operator
    a.arrow.bounce(href="#skills")
.holder#skills
  .container.green
    .skillscircle
    .textsidebox
    
    a.arrow.bounce(href="#projects")
.holder#projects
  .container.green
    .probox.blue
      .proimage
      .proinfo
      .proinfo
      .proinfo
  
    a.arrow.bounce(href="#contact")
.holder#contact
  .container.green
    .contact-form
      h4 Send Me A Message
        form(action='mailto:adamjackswork@gmail.com', method='post', enctype='text/plain')
          input(type='text', name='field1', placeholder='Your name')
          input(type='email', name='field2', placeholder='Email address')
          textarea(name='field3', placeholder='Type your message')
          input(type='submit', value='Send')
          
          //PHP
          //in email.php file mail($to, $subject, $message, $from);
          //form(action='email.php', method='post', enctype='text/plain')
          //input(type='text', name='field1', placeholder='Your Name')
          //input(type='email', name='field2', placeholder='Email Address')
          //textarea(name='field3', placeholder='Type your Message')
          //input(type='submit', value='Send')
          //
          //

            
          
!
            
              body
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: 14px
  background: #9ad3de
  margin: 0
  padding: 0
  border: 0
  //overflow: hidden
  
a
  text-decoration: none
  
h1
  font-size: 10vw
  font-weight: 700
  letter-spacing: -10px
  text-indent: -10px
  text-align: center
  color: #e3e3e3
  text-shadow: 0px 2px 6px #333
  margin: 0
  
h2
  bottom: 0
  font-size: 5vh
  text-align: center
  color: #e3e3e3
  margin: 0
  
h3
  font-size: 7vw
  letter-spacing: -10px
  text-indent: -10px
  text-align: center
  color: #323232
  text-shadow: 0px 2px 6px #333
  margin: 0
  opacity: 1
  
h5
  font-size: 10vh
  opacity: 1
  color: #fff
  margin: 10vh
  &:hover
    animation: growtext 300ms linear 1 forwards
  
.info
  padding: 8vh
  padding-bottom: 0
  
.loader-section
  position: absolute
  top: 0
  width: 51%
  height: 101%
  background: #222222
  z-index: 999
  animation: curtainsout 500ms linear 1 forwards
  animation-delay: 3.8s
  &:after
    width: 0px
  
@keyframes curtainsout
  to
    width: 0px

.left
  left: 0
 
.right
  right: 0
  
.loader-top
  top: 10vh

.flex
  display: flex
  align-items: center
  justify-content: center
  
.loader
  position: absolute
  z-index: 1000
  color: #fff
  font-family: Consolas, Menlo, Monaco, monospace
  font-weight: bold
  font-size: 32vh
  opacity: 0.8
  span
    display: inline-block
    animation: pulse 500ms alternate 8 ease-in-out, fadeout 500ms linear 3.2s 1 forwards

@keyframes pulse 
  to 
    transform: scale(0.8)
    opacity: 0.6
    
@keyframes fadeout
  to
    transform: scale(0)
    opacity: 0

.arrow
  position: absolute
  bottom: 9vh
  left: 50%
  margin-left: -20px
  width: 40px
  height: 40px
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=)
  background-size: contain
  
.flip
  -moz-transform: scaleY(-1)
  -o-transform: scaleY(-1)
  -webkit-transform: scaleY(-1)
  transform: scaleY(-1)
  filter: FlipV
  -ms-filter: "FlipV"

.bounce
  animation: bounce 2s infinite
  
@keyframes bounce
  0%, 100%
    transform: translateY(0px)
  50%
    transform: translateY(2vh)

.logo
  left: 5vw
  top: 3vh
  position: fixed
  z-index: 200
  color: #fff
  font-family: Consolas, Menlo, Monaco, monospace
  font-weight: bold
  font-size: 10vh
  opacity: 0.8
  text-decoration: none
  
.holder
  height: 100vh
  padding-top: 4vh

.container
  position: relative
  width: 90vw
  height: 90vh
  margin: auto
  -moz-box-shadow: 1px 2px 10px rgba(0,0,0,.5)
  -webkit-box-shadow: 1px 2px 10px rgba(0,0,0,.5)
  box-shadow: 1px 2px 10px rgba(0,0,0,.5)
  
.blue
  background: #89bdd3
    
.green
  background: #b3ffb3
  
.menubutton
  z-index: 1002
  position: fixed
  right: 6vw
  top: 5vh
  cursor: pointer
  
.overlay
  z-index: 1001
  position: fixed
  width: 100vw
  height: 100vh
  background: #222222
  opacity: 0.9
  animation: overlayani 1s linear 1 forwards
  
.overlay-content
  z-index: 600
  display: block
  text-align: center
  opacity: 1
  
@keyframes overlayani
  from
    border-radius: 40%
    transform: opacity(0)
    transform: scale(0)
  to
    border-radius: 0%
    transform: opacity(0.9)
    transform: scale(1)
    
@keyframes fadein
  from
    transform: opacity(0)
  to
    transform: opacity(1)
    
@keyframes growtext
  from
    transform: scale(1)
  to
    transform: scale(1.2)
    
//Skills

.skillscircle
  margin-top: 0px
  height: 55vh
  width: 55vh
  border-radius: 50%
  background-color: #81FF81
  position: relative
  top: 22.5%
  left: 5vw
  display: flex
  align-items: center
  justify-content: center
  border: 10px solid transparent
  border-right-color: orangered
  animation: circle 30s linear infinite forwards
  &:after
    color: black
    content: "Concept"
    font-size: 7vh
    animation: circletext 30s linear infinite
  
.textsidebox
  position: relative
  top: -40%
  left: 45%
  height: 50vh
  width: 40vw
  display: flex
  align-items: center
  justify-content: center
  &:after
    color: black
    content: "When starting a project it's important to know what you are going to be making; what's its purpose, how much information does it need, does it need backend work, what colours to use. Once you know what you are putting on the website and maybe have a basic design in your head you can move onto the design phase."
    font-size: 3.3vh
    animation: textside 30s linear infinite
  
  
@keyframes circle
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)
  
@keyframes circletext
  0%
    transform: rotate(0deg)
    content: "Concept"
  25%
    content: "Design"
  50%
    content: "Code"
  75%
    content: "Launch"
  100%
    transform: rotate(-360deg)
  
@keyframes textside
  0%
    content: "When starting a project it's important to know what you are going to be making; what's its purpose, how much information does it need, does it need backend work, what colours to use. Once you know what you are putting on the website and maybe have a basic design in your head you can move onto the design phase."
  25%
    content: "This is where a creative mind comes into play. To save a lot of trial and error you should workout how you are going to make the site look before building it, this way you can work out approximate sizing, colours, and the general layout."
  50%
    content: "Bring the project to life! Using HTML and CSS for the base design for text, images, colours, layout, and animations. Javascript can be used to add more functional machanics to the website by adding extra functions such as toggling on click to allowing you to make games with canvas."
  75%
    content: "Allowing others onto your website and getting to see it come to life! After all of the hard work you have this to show."
  
  

//Projects

.probox
  position: relative
  margin: auto
  top: 15%
  height: 70%
  width: 70%
  
.proimage
  position: relative
  top: 5%
  height: 75%
  width: 93%
  margin: auto
  background-color: black
  
.proinfo
  position: relative
  bottom: -5%
  float: left
  left: 20%
  height: 10%
  width: 20%
  background-color: red
  border: 3px solid black
  

//Contact form

.contact-form
  font: 95% Arial, Helvetica, sans-serif
  max-width: 400px
  margin: auto
  padding: 16px
  padding-top: 10vh
  h4
    background: #43D1AF
    padding: 20px 0
    font-size: 200%
    font-weight: 300
    text-align: center
    color: #fff
    margin: -16px -16px 16px -16px
  input
    &[type="text"], &[type="date"], &[type="datetime"], &[type="email"], &[type="number"], &[type="search"], &[type="time"], &[type="url"]
      outline: none
      box-sizing: border-box
      -webkit-box-sizing: border-box
      -moz-box-sizing: border-box
      width: 95%
      margin-bottom: 4vh
      border: 1px solid #ccc
      padding: 3%
      color: #555
      font: 95% Arial, Helvetica, sans-serif
  textarea, select
    resize: vertical
    outline: none
    box-sizing: border-box
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    width: 95%
    background: #fff
    border: 1px solid #ccc
    padding: 3vh
    color: #555
    font: 95% Arial, Helvetica, sans-serif
  input
    &[type="submit"], &[type="button"]
      font-size: 100%
      box-sizing: border-box
      -webkit-box-sizing: border-box
      -moz-box-sizing: border-box
      width: 95%
      padding: 3%
      background: #43D1AF
      border-top: 2px solid #30C29E
      border-bottom: 2px solid #30C29E
      border-right-style: none
      border-left-style: none
      border-radius: 12%
      color: #fff
    &[type="submit"]:hover, &[type="button"]:hover
      background: #2EBC99
            
          
!
            
              $(document).ready(function() {
  //hamburger
  $(".overlay").hide();
  $(".menubutton").click(function(){
  $(".overlay").toggle();
  });
  
  //scroll delay
  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  });
  
  //scroller
  
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console