cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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 lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewpoint" content="width=device-width, intial-scale=1">

  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="queries.css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins:200,300">
  <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
  <!--<script src="https://use.fontawesome.com/7977048be0.js"></script>-->
  <title>Portfolio landing page</title>
</head>

<body>

  <nav class="top-nav"><a href="#"><i class="fa fa-bars"></i></a></nav>
  <header>
    <h1>3 words I code by</h1>
    <h5>David Lower</h5>
  </header>

  <div class="body-width">
    <section class="passion">
      <div class="headings">
        <h2>Passion</h2>
      </div>
      <div class="text-container">
        <p class="passion-text">I left a 14-year career in medicine to pick up a keyboard. My passion for coding and design simply became too much.</p>
      </div>
      <div class="call-to-action">
        <p><a class="body-link" href="https://github.com/davidlower">My code <i class="fa fa-github"></i></a></p>
      </div>
    </section>

    <section class="communication">
      <div class="headings">
        <h2>Communication</h2>
      </div>
      <div class="text-container">
        <p class="communication-text">I am a team player. Treating 1000's of patients has made me an expert in getting information and giving information.</p>
      </div>
      <div class="call-to-action">
        <p><a class="body-link" href="https://codepen.io/davidlower">My projects <i class="fa fa-codepen"></i></a></p>
      </div>
    </section>

    <section class="simplicity">
      <div class="headings">
        <h2>Simplicity</h2>
      </div>
      <div class="text-container">
        <p>Coding and design should be effortlessly simple in its application and delivery. Life is too short for complicated.</p>
      </div>
      <div class="call-to-action">
        <p><a class="body-link" href="https://medium.com/me/stories/drafts">My blog <i class="fa fa-medium"></i></a></p>
      </div>
    </section>
  </div>

  <footer>
    <ul class="footer-text footer-nav">
      <li>
        <p><a href="#"><i class="fa fa-book"></i> My bio</a></p>
      </li>
      <li>
        <p><a href="#"><i class="fa fa-trophy"></i> My achievements</a></p>
      </li>
      <li>
        <p><a href="mailto:davidlower4@gmail.com"><i class="fa fa-envelope"></i> Contact me</a></p>
      </li>
    </ul>
  </footer>

</body>

</html>

            
          
!
            
              
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


html {
  font-size: 14px;
  font-family: Poppins, sans-serif;
  font-weight: 300;
  line-height: 25px;
  background-image: url(typewriter-compressor.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  color: #fcfcfc;
}

.body-width {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.top-nav {
  background-color: rgb(255, 47, 47);
  background-color: rgba(255, 47, 47, 0.7);
  font-size: 130%;
}

nav i {
  color: #fcfcfc;
  padding: 25px 25px 0 0;
  float: right;
  -webkit-transition: Background-color 0s, border 0s, color 0.5s;
  transition: Background-color 0s, border 0s, color 0.5s;
}

nav i:hover {
  color: rgb(128, 128, 128);
}

header{
  padding: 20%;
  background-color: rgb(255, 47, 47);
  background-color: rgba(255, 47, 47, 0.7);
  text-align: center;
}

h1 {
  font-size: 180%;
}

h2 {
  font-size: 180%;
}

h5 {
  font-size: 85%;
  text-align: center;
  font-weight: 200;
}

section {
  background-color: rgb(128, 128, 128);
  background-color: rgba(128, 128, 128, 0.8);
  margin: 75px 50px;
}

.text-container {
  margin: 25px 50px;
  padding: 2.5%;
  border: 2px solid rgb(255, 47, 47);
  border: 2px solid rgba(255, 47, 47, 0.7);
}

.headings {
  padding: 30px 0 0 30px
}

.call-to-action {
  padding: 0 30px 30px 0;
  text-align: right;
}

/*------------------ LINKS --------------------*/

a {
  text-decoration: none;
  -webkit-transition: Background-color 0s, border 0s, color 0.5s;
  transition: Background-color 0s, border 0s, color 0.5s;
}

.body-link:link,
.body-link:visited {
  font-size: 110%;
  color: #3df1bb;
}

.body-link:hover,
.gbody-link:active {
  color: #fcfcfc;
}

/*------------------ FOOTER --------------------*/

footer {
  background-color: #313131;
  padding: 7.5% 0;
}

.footer-nav {
  list-style: none;
  text-align: center;
}
.footer-nav li {
  display: inline-block;
  padding: 0 5%;
}

footer a {
  color: rgb(255, 47, 47);
  color: rgba(255, 47, 47, 0.7);
  font-size: 90%;
}

footer a:hover {
  color: #fcfcfc;
  font-weight: 200;
}

footer li:last-child {
  border: 1px solid rgb(255, 47, 47);
  padding: 2px 6px;
  border-radius: 2px;
}



/* QUERIES */

@media only screen and (min-width: 650px) {
  html {
    font-size: 16px;
  }

  header {
    padding: 140px;
  }

  .text-container {
    margin: 7.5% 15%;
  }

  .communication,
  .simplicity,
  .passion {
    margin: 10% 10%;
  }

  .headings {
    padding: 7.5% 0 0 7.5%;
  }

  .call-to-action {
    padding: 0 7.5% 7.5% 0;
  }

  footer {
    padding: 60px 0;
  }
}

            
          
!
999px
Loading ..................

Console