STYLE PREVIEW

This is an example of how regular paragraph text could look on your website. You can use bold text, italic text, and inline links to add some variation to your content.

Heading Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis erat eget nibh gravida, vitae feugiat erat fermentum. Morbi quis diam quam. Sed sollicitudin pulvinar laoreet.

Heading Three

Smaller headings can be used to divide longer pages into sections and make your content easier to read.

“A little blockquote”

Some Links

Small Details

You can also highlight important information, use inline code, or add a simple horizontal divider like the one down below.

This is an example of smaller supporting text, such as a date, caption, credit, etc.

Grab the code here!

HTML

<!DOCTYPE html>
            <html lang="en">
            <head>

<meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Template #001 - LadyGinger</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic" rel="stylesheet">

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

</head>
            <body>

<div id="container">
              <div id="header">
            	  <div id="title">
            	    <a href="/" class="title">HEADER 900x300</a>
            	  </div>
              </div>

<ul id="navigation">
                <li><a href="LINK HERE">HOME</a></li>
                <li><a href="LINK HERE">ABOUT</a></li>
                <li><a href="LINK HERE">DOMAIN</a></li>
                <li><a href="LINK HERE">AFFILIATES</a></li>
                <li><a href="LINK HERE">LINK</a></li>
              </ul>

<div id="sidebar">
                <h2>TITLE HERE</h2>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis erat eget nibh gravida vitae feugiat erat fermentum. Morbi quis diam quam.

<h2>TITLE HERE</h2>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis erat eget nibh gravida vitae feugiat erat fermentum. Morbi quis diam quam.

</div>

<div id="content">
                <h1>STYLE PREVIEW</h1>
                <p>This is an example of how regular paragraph text could look on your website. You can use <strong>bold text</strong>, <em>italic text</em>, and <a href="#">inline links</a> to add some variation to your content. </p>

<h2>Heading Two</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis erat eget nibh gravida, vitae feugiat erat fermentum. Morbi quis diam quam. Sed sollicitudin pulvinar laoreet. </p>

<h3>Heading Three</h3>
                <p>Smaller headings can be used to divide longer pages into sections and make your content easier to read. </p>

<blockquote> “A little blockquote” </blockquote>

<h2>Some Links</h2>
                  <ul>
                    <li><a href="#">Regular link</a></li>
                    <li><a href="#">Another example link</a></li>
                    <li><a href="#">A third link</a></li>
                  </ul>

<h2>Small Details</h2>
                <p> You can also highlight <mark>important information</mark>, use <code>inline code</code>, or add a simple horizontal divider. </p>

<hr>
                <p class="small-text"> This is an example of smaller supporting text, such as a date, caption, credit, or additional information. </p>

</div>

<div id="footer">
              © Template (CSS) by <a href="https://mrsginger.nl/">LadyGinger</a>.
              </div>

</body>
            </html>

CSS

/* 
    ________________________________________________________
    > website:            mrsginger.nl/
    > theme:              template name
    > designed by:        ladyginger
    > please do NOT remove this credit!
    
    > this design was handmade with lots of frustration, trial
      and errors, and it would be appreciated if you didn't 
      steal the code!
    ________________________________________________________ */

/*  ________________________________________________________
    -- ROOT SETTINGS -- 
    ________________________________________________________ */
:root {
  --font-size:              10px;
  --body:                   #919191;
  --header:                 #161515;
  --container:              #555555;
  --footer:                 #121111;
  --border:                 #100C0F;
  --linkbuttons:            #151515;
  --linkbuttonhover:        #808080;
  --activelink:             #808080;
  --hoverlink:              #ffffff;
  --navhover:               #121111;
  --font:           		    'Open Sans', sans-serif;
}

* {
  box-sizing:               border-box;
}

/* -- MAIN BODY -- */
body,html,head {
	background:               var(--body);
	margin:                   0;
	padding:                  0;
}

#header {
	background:               var(--header);
	width:                    900px;
	height:                   300px;
	margin:                   0 auto;
	text-align:               center;
}

#title{
	padding-top:              120px;
}

a.title:link, a.title:active, a.title:visited {
	color:                    var(--activelink);
	text-decoration:          none;
	margin:                   0;
	font-family:              var(--font);
	font-size:                50px;
}

a.title:hover {
	font-family:              var(--font);
	font-size:                50px;
	color:                    var(--hoverlink);
	text-decoration:          none;
}

a:link,a:active,a:visited {
	font-family:              var(--font);
	font-size:                12px;
	color:                    var(--hoverlink);
	text-decoration:          none;
}

a:hover {
	font-family:              var(--font);
	font-size:                12px;
	color:                    var(--hoverlink);
	text-decoration:          none;
}

/* -- NAVIGATION -- */
#navigation {
	margin:                   0;
	list-style:               none;
}

#navigation li {
	float:                    left;
}

#navigation li a {
	color:                    var(--activelink);
	display:                  block;
	width:                    150px;
	font-family:              var(--font);
	font-size:                14px;
	padding:                  10px;
	text-decoration:          none;
	text-align:               center;
}

#navigation li a:hover {
	font-family:              var(--font);
	font-size:                16px;
	color:                    var(--navhover);
	text-decoration:          none;
}

/* -- NAVIGATION BUTTONS --*/
a.nav2, a.nav2:link, a.nav2:active, a.nav2:visited { 
	width:                    90px;
	height:                   90px;
	display:                  inline-block;
	border-radius:            45px;
	  -moz-border-radius:     45px;
	  -webkit-border-radius:  45px;
	  -khtml-border-radius:   45px;
	font-size:                18px;
	margin:                   2px;
	line-height:              90px;
	text-align:               center;
	background:               var(--linkbuttons);
	font-family:              var(--font); 
	text-transform:           lowercase; 
	font-style:               italic;
	text-decoration:          none;
	font-weight:              none;
	letter-spacing:           -1px;
	  -webkit-transition:     0.8s ease-out;
	  -moz-transition:        0.8s ease-out;
	  transition:             0.8s ease-out;
	color:                    var(--linkbuttonhover);
	border:                   2px solid #100C0F;
}

a.nav2:hover { 
	transform:                rotate(360deg); 
	  -moz-transform:         rotate(360deg); 
	  -webkit-transform:      rotate(360deg); 
	  -o-transform:           rotate(360deg);
	color:                    #151515;
	background:               #808080;
}

/* -- CONTAINER -- */
#container {
	font-family:              var(--font);
	font-size:                12px;
	background:               var(--container);
	text-align:               justify;
	width:                    920px;
	margin:                   10px auto;
	padding:                  10px;
}

#content {	
	width:                    630px;
	float:                     left;
}

#sidebar{
	width:                    230px;
	float:                    right;
}

#footer {
	background:               var(--footer);
	clear:                    both;
	height:                   30px;
	padding:                  5px;
	text-align:               center;
	align:                    center;
	color:                    #808080;
	font-family:              var(--font);
	font-size:                10px;
}

/* -- TEXT SETTINGS -- */
h1 {
	font-family:              var(--font);
	font-size:                23px;
	text-align:               center;
	color:                    #808080;
  border-bottom:            1px solid #121111;
}

h2 {
	font-family:              var(--font);
	font-size:                17px;
	text-align:               left;
	color:                    #121111;
  border-bottom:            1px dashed #808080;
}

h3 {
  font-family:              var(--font);
  font-size:                15px;
  color:                    #808080;
  margin-bottom:            5px;
}

blockquote {
  margin:                   20px 0;
  padding:                  10px 15px;
  border-left:              3px solid #121111;
  color:                    #808080;
  font-style:               italic;
}

ul {
  padding-left:             25px;
}

li {
  margin-bottom:            5px;
}

mark {
  background:               #121111;
  color:                    #ffffff;
  padding:                  2px 4px;
}

code {
  background:               #121111;
  color:                    #aaa;
  padding:                  2px 5px;
  font-family:              monospace;
}

hr {
  border:                   0;
  border-top:               1px solid #121111;
  margin:                   20px 0;
}

.small-text {
  font-size:                10px;
  color:                    #808080;
}

/* -- CODE BOX -- */
.code-grid {
  display:                  grid;
  grid-template-columns:    300px 300px;
  gap:                      10px;
}

.code-grid textarea {
  width:                    100%;
  height:                   150px;
  margin:                   0;  
  padding:                  5px;
  box-sizing:               border-box;
  font:                     10px monospace;
  line-height:              1.4;
  border:                   1px solid var(--border);
  background:               var(--accent5);
  color:                    var(--text);
  resize:                   none;
}

.code-grid textarea {
  display:                  block;
  width:                    100%;
  height:                   250px;
  margin:                   0;
  padding:                  8px;
  box-sizing:               border-box;
  font:                     10px/1.4 monospace;
  border:                   1px solid var(--border);
  background:               var(--header);
  color:                    #ffffff;
  resize:                   none;
  overflow:                 auto;
}