added a slideshare embed

tweaked the responsive background example updated the first letter example added horizontal line demo added JavaScript contains placeholder
docluv · Sep 7, 2018 · b42833f · b42833f
1 parent bab0f48
commit b42833f
Show file tree

Hide file tree

Showing 15 changed files with 604 additions and 27 deletions.
diff --git a/css/index.html b/css/index.html
@@ -2,6 +2,7 @@
 <html>
 
 <head>
+    <base href="/">
     <title>CSS Demos</title>
 
     <style>
@@ -18,13 +19,28 @@
 <body>
     <ul>
         <li>
-            <a href="../../">Home</a>
+            <a href="/">Home</a>
         </li>
         <li>
-            <a href="/">CSS</a>
+            <a href="css/absolute-center/">Center in CSS & HTML</a>
         </li>
         <li>
-            <a href="text-transform/">text-transform</a>
+            <a href="css/background-stripes/">Background Stripes</a>
+        </li>
+        <li>
+            <a href="css/bullet-list/">Bullet List</a>
+        </li>
+        <li>
+            <a href="css/placeholder-color/">Placeholder Colors</a>
+        </li>
+        <li>
+            <a href="css/responsive-background-hero/">Responsive Background Hero</a>
+        </li>
+        <li>
+            <a href="css/shapes/">CSS Shapes</a>
+        </li>
+        <li>
+            <a href="css/underline/">HTML & CSS Underline</a>
         </li>
     </ul>
 

diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,320 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    width: 100%;
+}
+
+
+body {
+    margin: 0;
+    background: #fff;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-weight: 400;
+    padding: 0;
+}
+
+/* Begin Layout Rules */
+
+.body-row{
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+.content {
+    z-index: 0;
+    width: 100%;
+    margin: auto;
+    position: relative;
+    top: 70px;
+    display: flex;
+    justify-content: flex-start;
+    justify-items: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+.shell-footer {
+    background-color: #666;
+    color: #fff;
+    padding: 5% 10% 0 10%;
+    padding: 5vh 10vw 0 10vw;
+    margin: 5% 0 0 0;
+    margin: 10vh 0 0 0;
+    text-align: center;
+    min-height: 100px;
+
+    display: flex;
+    justify-content: flex-start;
+    justify-items: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+.shell-footer a{
+    color: #fff;
+    text-decoration: none;
+}
+
+.shell-footer-row{
+    flex: 0 0 100%;
+    max-width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    justify-items: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+.footer-column{
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+.footer-column nav ul{
+    display: block;
+}
+
+.footer-column nav li{
+    text-align: left;
+    padding: 3px;
+}
+
+.footer-column nav a{
+    font-size: 1rem;
+}
+
+.footer-column .card-panel{
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+.footer-column .card{
+    width: 90%;
+}
+
+.subfooter,
+.subfooter a{
+    color: #fff;
+    text-decoration: none;
+    text-align: center;
+}
+
+.text-right{
+    text-align: right;
+    padding-right: 3%;
+}
+
+.text-left{
+    text-align: left;
+    padding-left: 3%;
+}
+
+@media(min-width: 1024px){
+
+    .shell-footer-row{
+        flex-direction: row;
+    }    
+
+    .footer-column{
+        flex: 0 0 33%;
+        max-width: 33%;
+    }
+
+}
+
+/* End Layout Rules */
+
+
+
+/* Begin navigation Rules */
+
+.main-header {
+    background-color: #333;
+    text-align: center;
+    position: fixed;
+    z-index: 999;
+    width: 100%;
+}
+
+.logo {
+    width: 70%;
+    padding: 3%;
+    margin: 0;
+    margin-left: 1em;
+    height: 70px;
+    display: flex;
+    align-items: center;
+}
+
+.logo img {
+    width: 100%;
+}
+
+.nav-toggle {
+    display: none;
+}
+
+.nav-toggle-label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-right: 1em;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.nav-toggle-label span,
+.nav-toggle-label span::before,
+.nav-toggle-label span::after {
+    display: block;
+    background: #fff;
+    height: 2px;
+    width: 2em;
+    border-radius: 2px;
+    position: relative;
+}
+
+.nav-toggle-label span::before,
+.nav-toggle-label span::after {
+    content: '';
+    position: absolute;
+}
+
+.nav-toggle-label span::before {
+    bottom: 7px;
+}
+
+.nav-toggle-label span::after {
+    top: 7px;
+}
+
+nav {
+    position: absolute;
+    text-align: left;
+    top: 100%;
+    left: 0;
+    background-color: #fff;
+    width: 100%;
+    transform: scale(1, 0);
+    transform-origin: top;
+    transition: transform 400ms ease-in-out;
+}
+
+nav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+nav li {
+    margin-bottom: 1em;
+    margin-left: 1em;
+}
+
+nav a {
+    color: #222;
+    text-decoration: none;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+}
+
+nav a:hover {
+    color: #c30000;
+}
+
+.nav-toggle:checked~nav {
+    transform: scale(1, 1);
+}
+
+.nav-toggle:checked~nav a {
+    opacity: 1;
+    transition: opacity 250ms ease-in-out 250ms;
+}
+
+@media screen and (min-width: 800px) {
+    .nav-toggle-label {
+        display: none;
+    }
+    header {
+        display: grid;
+        grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
+    }
+    .logo {
+        grid-column: 2 / 3;
+    }
+    nav {
+        all: unset;
+        grid-column: 3 / 4;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+    nav ul {
+        display: flex;
+    }
+    nav li {
+        margin-left: 3em;
+        margin-bottom: 0;
+    }
+    nav a {
+        opacity: 1;
+        position: relative;
+        color: #fff;
+    }
+
+    nav a::before {
+        content: '';
+        display: block;
+        height: 5px;
+        background: black;
+        position: absolute;
+        top: -.75em;
+        left: 0;
+        right: 0;
+        transform: scale(0, 1);
+        transition: transform ease-in-out 250ms;
+    }
+    nav a:hover::before {
+        transform: scale(1, 1);
+    }
+}
+
+/* End navigation Rules */
+
+
+/* begin utility rules here */
+
+.background-white {
+    background-color: #fff;
+}
+
+
+/* end utility rules here */
+
+/* begin page content rules here */
+
+
+.page-content {
+    z-index: 100;
+    background-color: #fff;
+}
+
+.content-row,
+.row {
+    width: 100%;
+    padding: 5% 2%;
+    padding: 5vh 2vw;
+}
+
+/* end page content rules here */
+
+