WebsiteTemplate

BurntWaffleCake · Sep 19, 2023 · ec9154f · ec9154f
1 parent 2ee0b58
commit ec9154f
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 0 deletions.
diff --git a/articlestylesheet.css b/articlestylesheet.css
@@ -0,0 +1,89 @@
+body {
+    background-color: lightgray;
+    margin: 0;
+    border: 1px solid red;
+    height: 100vh;
+}
+
+header {
+    height: 5rem;
+    border:  3px solid purple;
+}
+
+header > * {
+    display: inline-block;
+    padding: 0%;
+    position: relative;
+    vertical-align: middle;
+}
+
+p {
+    border: 1px solid blue;
+}
+
+/* Header */
+#icon {
+    margin: 0%;
+}
+
+#globalNav {
+    border: 3px solid black;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#globalNav ul {
+    text-align: center;
+    list-style: none;
+}
+
+#globalNav ul li {
+    display: inline;
+}
+
+/* Article */
+#articleBody {
+    height: 80;
+    display: grid;
+    grid-template-columns: 15% 70% 15%;
+    border: 5px solid pink;
+    font-size: 0%;
+}
+
+#articleBody > * {
+    margin: 0%;
+    font-size: 1rem;
+}
+
+#articleBody article {
+    grid-column: 2;
+    border: 3px solid black;
+    padding: 2rem;    
+}
+
+#rightNavBar {
+    grid-column: 1;
+    grid-row: 1 ;
+    padding: 0%;
+    border: 1px solid green;
+}
+
+#leftNavBar {
+    grid-column: 3;
+    border: 1px solid yellow;
+}
+
+@media screen and (max-width: 800px) {
+    #articleBody {
+        display: block;
+    }
+
+    #rightNavBar, #leftNavBar {
+        visibility: hidden;
+        display: none;
+    }
+
+    #articleBody article {
+        width: auto;
+    }
+}
diff --git a/templateArticle.html b/templateArticle.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="./articlestylesheet.css">
+
+</head>
+
+<body>
+    <header>
+        <div id="icon">
+            This is an icon 
+        </div>
+        <nav id="globalNav">
+            <ul>
+                <li><a href="">Link1</a></li>
+                <li><a href="">Link2</a></li>
+                <li><a href="">Link3</a></li>
+            </ul>
+        </nav>
+        <p> This is a header</p>
+    </header>
+
+    <div id="articleBody">
+
+        <nav id="rightNavBar">
+            <a>This is part of the nav bar</a>
+        </nav>
+
+        <article>
+            <p>This is the article</p>
+        </article>
+
+        <nav id="leftNavBar">
+            <a href="">Bookmarks</a>
+        </nav>
+    </div>
+
+</body>
+
+</html>