Semantic Element Document Outline

Developer
Robert Lowe
Size
3,153 Kb
Views
56,672
  1. Semantic Element Document Outline Previews
  2. Semantic Element Document Outline HTML Codes
  3. Semantic Element Document Outline CSS Codes

How do I make an semantic element document outline?

Based on this great post: http://codepen.io/mi-lee/post/an-overview-of-html5-semantics. What is a semantic element document outline? How do you make a semantic element document outline? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.

Semantic Element Document Outline Previews
IQ Test

Semantic Element Document Outline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Semantic Element Document Outline</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>header <nav>nav</nav>
</header>
<div class="main"> <section class="left">section <header>header</header> <article>article <header>header</header> <p>p</p> <div class="with-aside"> <p class="grow">p</p> <aside>aside</aside> </div> <footer>footer</footer> </article> <article>article <p>p</p> <p>p</p> <footer>footer</footer> </article> </section> <section class="right">section <header>header</header> <nav class="grow">nav</nav> </section>
</div>
<footer>footer</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js'></script>
</body>
</html>

Semantic Element Document Outline - Script Codes CSS Codes

*, *::before, *::after { box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif; margin: 2em; padding: 0; background-color: #fff; font-size: 66.5%;
}
header { background-color: #CC5D5D;
}
nav { background-color: #85B2E5;
}
section { background-color: #E4E6C3;
}
article { background-color: #49DCB1;
}
p { background-color: #8CAE68;
}
aside { background-color: #F46036;
}
footer { background-color: #777589;
}
div { background-color: #3772FF;
}
header,
nav,
section,
article,
p,
aside,
footer,
div { text-align: center; padding: 1em; margin: 0.5em; border: 0.1em dashed #fff;
}
div.main, div.with-aside { position: relative; display: flex; flex-flow: row nowrap; padding-top: 2em;
}
div.main::before, div.with-aside::before { position: absolute; top: 0.5em; left: 0; width: 100%; content: 'flexbox div';
}
div.main .grow, div.with-aside .grow { flex-grow: 1;
}
section.left { width: 66.6%;
}
section.right { width: 33.3%; display: flex; flex-flow: column nowrap;
}
@media (max-width: 768px) { div.main { flex-flow: column nowrap; } section.left, section.right { width: 100%; } div.with-aside { flex-flow: column nowrap; }
}
Semantic Element Document Outline - Script Codes
Semantic Element Document Outline - Script Codes
Home Page Home
Developer Robert Lowe
Username rlo206
Uploaded July 23, 2022
Rating 4.5
Size 3,153 Kb
Views 56,672
Do you need developer help for Semantic Element Document Outline?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert Lowe (rlo206) Script Codes
Name
Dynamic UI with AngularJS attributes
Simple changelog display with AngularJS and Flexbox
Animated slider in pure angular
A Pen by Robert Lowe
Crazy Tables
Windows 10 toggle button directive
Google Mic Icon
The Rainball
Editable Table Concept
Interactive data table with Angular and SCSS
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!