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

              
                <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FEWD Exercise - Kristyn Lyncheski</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <div class="container">

      <div class="header">
        <div class="navbar">
          <div class="navbar-left">
            <nav>
              <ul>
                <li>Careers</li>
                <li>Get in touch</li>
              </ul>
            </nav>
          </div>
          <div class="navbar-right">
            <div class="left-foot-logo">
              <img src="./assets/Logos.png" alt="LeftFoot + Axiom" />
            </div>
          </div>
        </div>  <!--end of navbar div-->

        <div class="header-content">
          <div class="header-content-left">
            <h1>Rethinking the business of law</h1>
            <p>A podcast with Axiom Vice President and General Manager of Northeast, Bryan Caplin, hosted by LeftFoot in partnership with ALM.</p>
            <p>In this 30-minute ALM special edition podcast, LeftFoot host Nicole Giantonio chats with Axiom VP of Sales Bryan Caplin about the habits that have helped build a successful sales organization in a changing industry disrupted by technology.</p>
          </div>
          <div class="header-content-right">
            <div class="circle">
              <p>Download the podcast</p>
            </div>
          </div>
        </div> <!--end of header-content-->
      </div> <!--end of header div-->

      <div class="quote-container">
        <div class="quote">
          <p>Our focus is a change from the artisanal paradigm to the industrialization of legal services (using automation, technology, tools, and repeatable process to deliver better results).</p>
          <p><a href="">Listen to the full podcast here</a></p>
        </div>
      </div> <!--end of quote container-->

      <div class="links-container">

        <div class="links-item">
          <p class="caption">Bryan Caplin<br />VP Sales, Axiom</p>
          <img src="./assets/bryan-caplin-a.jpg" alt="Bryan Caplin" />
        </div>
        <div class="links-item">
          <h3>About Axiom</h3>
        </div>
        <div class="links-item">
          <h3>About Axiom</h3>
        </div>
        <div class="links-item">
          <h3>About Axiom</h3>
        </div>
        <div class="links-item">
          <h3>About Axiom</h3>
        </div>

      </div> <!--end of links-container-->


      <div class="changes-container">
        <div class="changes-content">

          <h2>ch-ch-ch-changes</h2>
          <p>The Axiom point of view on the disruption of law and what’s in store for the future - straight from the (orange) horse’s mouth.</p>

          <div class="changes-boxes">
            <div class="changes-boxes-item">
              <p class="box-title">Video</p>
              <p>Rethink Law</p>
            </div>
            <div class="changes-boxes-item">
              <p class="box-title">Video</p>
              <p>Rethink Law</p>
            </div>
            <div class="changes-boxes-item">
              <p class="box-title">Video</p>
              <p>Rethink Law</p>
            </div>
          </div>

        </div> <!--end of changes-content-->
      </div> <!--end of changes-container-->


      <div class="contact-container">
        <div class="contact-content">
          <h2>Get in touch:</h2>
          <form>
            <input type="text" name="first-name" placeholder="First Name" />
            <input type="text" name="last-name" placeholder="Last Name" />
            <input type="text" name="email" placeholder="Email" />
            <button type="button" class="location-button">Location</button>

            <button type="submit" name="button" class="connect-button">Let's connect!</button>
          </form>
        </div> <!-- end of contact-content-->
      </div> <!-- end of contact-container-->



    </div> <!--end of container div-->








    <script type="text/javascript" src="./scripts/main.js">
    </script>
  </body>
</html>
              
            
!

CSS

              
                * {
  /*box-sizing: border-box;*/
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Brandon Grotesque', sans-serif;
  font-size: 15px;
  font-weight: normal;
}

.header {
  background: #DE5927;
  padding: 50px 0;
}

/* NAV STYLES */
.navbar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 0 50px;
}

.navbar-left {
  margin-top: 20px;
}

nav ul {
  list-style-type: none;
  display:flex;
  flex-flow:row nowrap;
  margin:0;
  padding:0;
}

nav ul li {
  text-transform: uppercase;
  color:#fff;
  font-weight:bold;
  font-size: 12px;
  margin-right: 40px;
}

.navbar-right {
}

.left-foot-logo img {
  max-width: 400px;
}

.header-content {
  display: flex;
  flex-flow: row nowrap;
  margin: 0 100px;
}

.header-content-left {
  color: #fff;
  width: 60%;
}

.header-content-left h1 {
  font-family: 'Adobe Garamond Pro', serif;
  font-weight: normal;
  font-size: 60px;
}

.header-content-left p {
  font-size: 15px;
  margin:0;
  padding:10px 0;
  margin-right:20px;
}

.header-content-left p {
  border-bottom: 1px solid #fff;
}

.header-content-left p:last-child {
  border-bottom: none;
}

.header-content-right {
  width: 40%;
  background-image: url('../assets/rocket.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}

.circle {
  background: #fff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  text-align:center;
  margin:0 auto;
  margin-top: 100px;
}

.circle p {
  color: #474749;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  margin:0;
  padding: 35px 0 0 0;
}

/* QUOTE STYLES */
.quote-container {
}

.quote-container .quote {
  max-width: 500px;
  margin: 50px auto;
  text-align:center;
}

.quote p {
  font-size: 18px;
}

.quote a {
  color: #DE5927;
}

/* LINKS SECTION STYLE */
.links-container {
  display:flex;
  flex-flow: row no-wrap;
  width:100%;
}

.links-item {
  width:20%;
  background: #333F48;
  border-right: 1px solid #8C8F93;
  position: relative;
}

.links-item img {
  width:100%;
}

.links-item .caption {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  bottom: 10px;
  left: 20px;
  margin: 0;
}

.links-item h3 {
  color: #ABABAE;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  margin: 50px 0 0 25px;
}

/* CHANGES STYLES */
.changes-content {
  width: 700px;
  margin: 50px auto;
  text-align: center;
}

.changes-content h2  {
  font-size: 25px;
  font-weight: normal;
  margin: 0;
}

.changes-content p {
  margin: 0 auto;
  color: #8C8F93;
  width: 80%;
}

.changes-boxes {
 display: flex;
 flex-flow: row nowrap;
}

.changes-boxes-item {
  width:200px;
  height: 150px;
  margin: 0 20px;
  padding: 25px 10px;
  box-shadow: 5px 5px 5px #999;

}

.changes-boxes-item p {
  width: 100%;
  margin: 0;
  color: #DE5927;
  text-align: center;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  line-height:20px;
}


.changes-boxes-item p.box-title {
  color: #ABABAE;
}

/* CONTACT STYLES */
.contact-container {
  background: #DE5927;
  padding: 50px 0;
}

.contact-content {
  width: 570px;
  margin: 0 auto;
  text-align:center;
}

.contact-content h2 {
  font-size: 25px;
  color: #fff;
  font-weight: normal;
  margin-top: 0;
}

.contact-content form {
  display: flex;
  flex-flow: row wrap;
}

.contact-content form input {
  width: 250px;
  margin: 0 5px 5px 0;
  padding: 10px 15px;
  border: 0;
  outline: 0;
  font-family: 'Brandon Grotesque', sans-serif;
  font-weight: lighter;
  font-size: 16px;
}

.contact-content form .location-button {
  width: 280px;
  height: 43px;
  margin: 0 5px 5px 0;
  padding: 10px 15px;
  border: 0;
  outline: 0;
  font-family: 'Brandon Grotesque', sans-serif;
  font-weight: lighter;
  font-size: 16px;
  text-align:left;
  color: #474749;
}

.contact-content form .connect-button {
  width: 280px;
  height: 43px;
  margin:0 auto;
  padding: 10px 15px;
  border: 0;
  outline: 0;
  font-family: 'Brandon Grotesque', sans-serif;
  text-align:center;
  color: #474749;
  border-radius: 40px;
}

              
            
!

JS

              
                
              
            
!
999px

Console