02 - Final Original Branded Less Example Site

In this example below you will see how to do a 02 - Final Original Branded Less Example Site with some HTML / CSS and Javascript

Un-Less this for screen shots; Remove Normalise for part of screen shots** Variables **

Thumbnail
This awesome code was written by pstansfield, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pstansfield ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>02 - Final Original Branded Less Example Site</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="pageContent"> 

  <h2>Our company</h1>
  
  <p>Please enter your email address and hit submit to opt-in to one, or all, of our mailing lists.</p>
  
  <div class="wrapper">
    <h2>New business</h2>
    <div class="sectionBody">
      <p>If you require further information about becoming one of our customers, please enter your email address here.</p>
      <p>
        <label>email address <span class="mandatory">*</span></label> <input type="text" />
      </p>
      <input type="submit" />
      <a href="#">More info</a>
    </div>
  </div>
  
  <div class="wrapper">
    <h2>Company announcements</h2>
  
    <div class="sectionBody">
      <p>If you want to hear more about recent events in our company, please sign up for emails here.</p>
        <p>
        <label>email address <span class="mandatory">*</span></label> <input type="text" />
      </p>
      <input type="submit" />
      <a href="#">More info</a>
    </div>
  </div>
  
  <div class="wrapper">
    <h2>Eco friendly</h2>
    <div class="sectionBody">
      <p>By providing your email address here, we will keep you updated on our progress on helping the environment.</p>
      <p>
        <label>email address <span class="mandatory">*</span></label> <input type="text" />
      </p>
      <input type="submit" />
      <a href="#">More info</a>
    </div>
  </div>
  
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pstansfield/02-final-original-branded-less-example-site-kzxdn */
/* Start of CSS setup for Codepen */
body {
  margin: 20px 40px 20px 20px;
}
.pageContent {
  width: 550px;
}
/* Palette Variables */
/* 'Semantic' Variables */
/* Mixins */
.box_shadow {
  -webkit-box-shadow: 4px 4px 4px 0px #000;
  box-shadow: 4px 4px 4px 0px #000;
}
/* Styling */
h2 {
  color: #115533;
}
.wrapper {
  color: #115533;
  border-color: #115533;
  border-width: 2px;
  border-style: solid;
  overflow: hidden;
  margin-bottom: 10px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 4px 4px 4px 0px #000;
  box-shadow: 4px 4px 4px 0px #000;
}
.wrapper h2 {
  margin: 0px;
  padding: 10px 0px 10px 10px;
  border: 2px solid #115533;
  border-top: none;
  border-left: none;
  border-right: none;
  color: #115533;
  background-color: #cceedd;
}
.sectionBody {
  margin-top: 0;
  margin-bottom: 10px;
  padding: 0 10px 10px 10px;
}
.sectionBody div {
  padding: 0 10px 10px 10px;
}
.sectionBody a {
  color: #800000;
}
.mandatory {
  color: #800000;
}
input[type=submit] {
  color: #115533;
  background-color: #cceedd;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

Comments