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

              
                <main id="mainBlog">
              <aside id="sideB">
                  <div id="sideLine"> </div>
                    <h4>Archives</h4>
<ul>
	<li><a href='http://dkki.calgarywebsitedeveloper.ca/2018/04/'>April 2018</a></li>
</ul>              </aside>
              <section id="blog">
              <article class="blogPost">  
<div class="blogInfo"><h2>Welcome <span class="fire">|</span></h2>
<p>April 17, 2018 by <a href="#">admin</a></p></div>
 <h3>Welcome to DKKI</h3>
<p>Thank you!</p>
<p>Should you have any questions please post them to the support forum where our support specialists can help you out.<br />
 If possible, please start a new support thread so all of the team can help you out.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum voluptatum odio sunt nam quas harum, aperiam quidem debitis iure vel? Nihil, temporibus ad dignissimos qui dolorum molestias! Ipsa, tenetur magni!</p>
<h2>This is a Heading 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum voluptatum odio sunt nam quas harum, aperiam quidem debitis iure vel? Nihil, temporibus ad dignissimos qui dolorum molestias! Ipsa, tenetur magni!</p>
<h4>This is Heading 3</h4>
<figure>
<img src="DTO.gif" alt="Image info"><figcaption>This is an example of an image caption needed to do something.</figcaption></figure>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum voluptatum odio sunt nam quas harum, aperiam quidem debitis iure vel? Nihil, temporibus ad dignissimos qui dolorum molestias! Ipsa, tenetur magni!</p>
<blockquote><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum voluptatum odio sunt nam quas harum, aperiam quidem debitis iure vel? Nihil, temporibus ad dignissimos qui dolorum molestias! Ipsa, tenetur magni!</p></blockquote>
<h4>This is an ordered list</h4>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<h4>This is an unordered list</h4>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<h4>And this is table</h4>
<table>
<caption>Top Selling Processors</caption>
<thead>
<tr>
<th>Processor</p>
<th>Speed</p>
<th>Cores</p>
<th>L3 Cache Size</p>
<tbody>
<tr>
<td>Intel Core i7-2600K</p>
<td>3.4 GHz</p>
<td>4</p>
<td>8 MB</p>
<tr>
<td>AMD Phenom II X6 1100T</p>
<td>3.3 GHz</p>
<td>6</p>
<td>6 MB<br />
                        </table>
<h2>This is a contact form</h2>
<form id="mainForm" action="handle.php" method="post">
                        <input type="text" name="fName" id="fName" placeholder="Name" required><br />
                        <input type="text" name="email" id="email" placeholder="Email" required><br />
                        <textarea rows="4" cols="50">Your message here&#8230;</textarea><br />
                        <button id="contactForm" name="submit">Send</button><br />
                      </form>
</article>              </section>
            </main>
              
            
!

CSS

              
                /*
Theme Name: DKKI WordPress
Author: Matterhorn Business Solutions
Description: DKKI Group First Wordpress Theme
Version: 0.0.1
Tags: DKKI
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  height: 100%;
}
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(197, 196, 196);
  background:#222;
  font-family: 'Open Sans', sans-serif;
}
#wrapper{
    flex: 1 0 auto;
}
#headerWrap{
  background-image: url('https://s9.postimg.cc/tjngjht1r/headerbg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#headerSecond{
  background-image: url('https://s9.postimg.cc/tjngjht1r/headerbg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  height: 16rem;
  background-color: black;
  border-bottom: 10px solid #F7961C;
}
header{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  flex-basis:100%;
  max-height:275px;
  min-height:175px;
 }
header img{
  height: 5rem;
  margin: 3rem 4rem;
}


#firstHeader{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  color: white;
  align-self: flex-start;
}
#firstHeader > p{
  text-transform: uppercase;
  font-size: 0.9rem;
}
#firstHeader p:nth-of-type(2){
display:none;
}

#introSlogan{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex: 2;
  flex-basis:100%;
  max-height:500px;
  min-height:400px;
  margin-right: 7rem;
}
#introText{
  border-right: 10px solid #F7961C;
  width: 50rem;
}
#introText > p{
margin: 1rem 2rem 1rem 0rem;
text-align: right;
color: white;
font-size: 2.5rem;
line-height:3rem;
 font-weight: 700;
}
#introText button{
  width: 10rem;
  border: 2.5px solid #F7961C;
  border-radius: 30px;
  padding: 0.5rem;
background-color: hsla(0, 100%, 0%, 0);
color: white;
  font-size: 1rem;
  margin-right: 2rem;
}
.fire{
  color:#F7961C;
}
.steel{
  color:#aaa;
}
footer{
  background: black;
  display: flex;
  justify-content: space-between;
  padding: 5rem;
  font-size: 0.8rem;
}
main{
  background:#222;
  max-width: 1500px;
  margin: 0 auto;
}
#primary{
  background-color: #222;
  padding: 3rem 4rem;
}
#mainBlog{
  background-color: #222;
  padding: 3rem 4rem;
  display: flex;
}
#sideB{
width: 20%;
padding-left: 0.5rem;
order: 2;
}

#sideB a{
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9rem;
}
#sideB h3, #sideB h2{
  margin: 1rem 0;
}

#blog{
width: 80%;
}

#sideLine{
  display:none;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px dashed #F7961C;
}
header a{
  text-transform: uppercase;
  text-decoration: none;
  color: white;
}
#mainNav{
  width: 70%;
  display: flex;
  justify-content: space-around;
  max-width: 1500px;
}
#responsiveNav{
  text-align: center;
  visibility: hidden;
  display: flex;
  flex-direction:column;
  overflow: hidden;
  height: 1.3rem;
}

nav a:hover{
color: #F7961C;
transition: .5s ease-in-out;
}
#slogan{
  background: #F7961C;
  text-align: center;
  padding: 3rem;
}
#slogan h2{
  color: white;
  margin: 0;
  border: 0;
}
#slogan h3{
  color: white;
  font-weight: normal;
  background: #F7961C;
  margin: 0;
}
#twoCompanies{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.5rem;
  background: #333;
}
#twoCompaniesWrap{
  width: 70%;
  display: flex;
  justify-content: space-between;
}
#twoCompanies h2{
  color: #F7961C;
  text-transform: uppercase;
  margin-bottom: 3rem;
  border:0;
}
#twoCompaniesWrap figure{
display: flex;
flex-direction: column;
align-items: center;
margin: 3rem;
}
#twoCompaniesWrap figcaption{
  width: 100%;
  text-align: center;
  color: white;
  font-size: 0.95rem;
}
#twoCompaniesWrap figcaption p:first-of-type{
  font-weight: bold;
  color: #F7961C;
  margin: 1rem;
  font-size: 1rem;
}
.circle{
  width: 15rem;
  height: 15rem;  
  background: #222;
  border-radius: 50%;
}
#products{
  width: 100%;
  display: flex;
}
.productRow{
  width: 100%;
}

.productSquare{
  width: 100%;
  background: #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rem;

}
.productSquare:hover{
  filter: brightness(2);
  transition: 1s;
}

.probes{
  background-image: url('https://s9.postimg.cc/srksk5jnz/four.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.accesories{
  background-image: url('https://s9.postimg.cc/u6md8r2pr/one.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.instruments{
  background-image: url('https://s9.postimg.cc/n3eht7plb/two.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.machinery{
  background-image: url('https://s9.postimg.cc/g06mdlzlb/three.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}




.productSquare a{
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  font-size: 1.7rem;
}

Form{
  display: flex;
  flex-direction: column;
  color:#777;
  width: 100%;
  flex:3;
}

#mainForm{
  width: 50%;
  margin: 0 auto;
}

#mainForm input, #mainForm textarea{
  background: #333;
  border-radius: 3px;
  border: 0;
  padding: 0.5rem;
  width: 100%;
}
#mainForm button{
  text-align: center;
  padding:0.7rem 2rem;
  background:#777;
  color: #222;
  border: none;
  border-radius: 10px;
  text-transform: uppercase;
  width:6rem;
}




label, textarea {
	display: block;
	width: 100%;
}
label, input, textarea {
	float: left;
  margin: 0.5rem auto;

}
#contactForm{
  flex:3;
}
#contactForm input, #contactForm textarea{
  background: #222;
  border-radius: 3px;
  border: 0;
  padding: 0.5rem;
  width: 100%;
}
#contactForm button{
  text-align: center;
  padding:0.7rem 2rem;
  background:#555;
  color: #222;
  border: none;
  border-radius: 10px;
  text-transform: uppercase;
  width:6rem;
}


footer h2{
    color: #F7961C;
  text-transform: uppercase;
  margin-bottom: 1rem;
  border: 0;
}
label, textarea {
	display: block;
	width: 100%;
}
label, input, textarea {
	float: left;
  margin: 0.5rem auto;
}
button{
  float: right;
}

#address{
  color: inherit;
  margin-bottom: 3rem;
  color:#777;
  flex:2;
}



/* TEMPLATE PAGE */
blockquote{
  margin-left: 5rem;
  border-left: 10px solid #F7961C;
  padding-left: 3rem;
  font-style: italic;
  width: 70%;
}

h1, h2, h3{
  margin: 2rem;
  text-transform: uppercase;
}

h1{
  color: #F7961C;
}
h2{
  font-size: 1.3rem;
  color: #fff;
}
h3{
  font-size: 1rem;
  color: #F7961C;
}
h4{
  background: #333;
  color: #aaa;
  padding: 0.2rem 1rem;
  border-left: 2px solid #F7961C;
  font-size: 1rem;
}

#primary p{
  margin: 1rem;
}
li {
  margin: auto 4rem;
  
}
ul li::before {content: "▶"; color: #F7961C;
  display: inline-block; width: 1.5em;
  margin-left: -1em}

ul{
 list-style: none;
 margin: 0;
}

ol {list-style: none; counter-reset: li}
ol li::before {content: counter(li); color:#F7961C;
  display: inline-block; width: 1em;
  margin-left: -1em}
ol  li {counter-increment: li}

table{
  width: 100%;
}
th{
border-bottom: 2px solid #F7961C;
color: #F7961C;
}
tr:nth-of-type(even){
  background-color: #333;
}
td{
  font-size: 0.8rem;
text-align: center;
}
td, th{
  padding: 1rem;
}
caption{
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.9rem;
}
figure{
  width: 50%;
}
figure img{
  width: 100%;
  max-width: 700px;
}
figcaption{
  margin-top: 0.3rem;
  color: #777;
  font-style: italic;
  font-size: 0.8rem;
  text-align: center;
}

.blogInfo{
color: #ccc;
text-transform: uppercase;
font-size: 0.7rem;
display: flex;
align-items: center;

}
.blogInfo h2{
  margin-right: 0.5rem;
}

article{
  display: flex;
  flex-direction: column;
}

.blogPost h2, .blogPost h3{
  padding: 0;
  margin: 1rem 0;
}
.blogPost a{
 color: #F7961C;
  text-decoration: none; 
}



/* media queries */

@media screen and (max-width: 1100px){
  #twoCompaniesWrap{width: 100%; flex-direction: column;}
  #products{flex-direction: column;}
  footer{padding: 5rem 3rem;}
  #introText p{font-size:2rem; line-height:2.3rem;}
  #introText{width: 35rem;}
  #mainForm{width: 100%;}
}

@media screen and (max-width: 700px){
  #mainNav{display:none;}
  #responsiveNav{font-size: 1rem; visibility: visible;  transition: .7s height ease-in-out; justify-content: flex-start;}
  #responsiveNav a{ padding: 0.1rem;}
  #responsiveNav a:first-child { display: block;}
  #responsiveNav:hover, #responsiveNav:focus{ height:10rem; }
  #introText p{font-size:1.7rem; line-height:2.2rem;}
  #introText{width: 100%;}
  #introSlogan{margin-right:2.5rem;}
  #twoCompaniesWrap figure{margin: 3rem 1rem ;}
  #twoCompanies{ padding:2.5rem;}
  header  img{margin: 3rem 1rem;}
  header{max-height:100px;min-height:175px;}
  #firstHeader p:nth-of-type(1){display:none;}
  #firstHeader p:nth-of-type(2){display:block; margin-left:1rem;}
  footer{flex-direction:column;}
  #mainBlog{padding: 3rem 1.5rem; flex-direction: column;}
  #blog{width: 100%;}
  #sidebar{width:100%;}
  #sideLine{ display: block;}
}

@media screen and (max-width: 450px){
  #introText p{font-size:1.3rem; line-height:1.7rem;}
  #introSlogan{margin-right:1rem;}
  h1, h2, h3{margin: 2rem 0.5rem;}
  blockquote{margin-left: 2.5rem;  width: 70%;}
  td, th{padding: 0.5rem 0.2rem;}
  figure{width: 100%;}
}

@media screen and (min-width: 2000px){
  #introSlogan{margin-right:15rem;}
  #introText p{font-size:5.5rem; line-height:5rem;}
  #introText{width: 78rem;}
 header{max-height:500px;min-height:175px;}
}
              
            
!

JS

              
                
              
            
!
999px

Console