Serverless navbar

Lioydiano · May 20, 2023 · 1a7745a · 1a7745a
1 parent 78830b8
commit 1a7745a
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 84 deletions.
diff --git a/capitello-corinzio.html b/capitello-corinzio.html
@@ -51,8 +51,15 @@
         </style>
     </head>
     <body>
-        <!-- Header -->
-        <include-html path="header.html"></include-html>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="capitello-dorico.html">Doric style</a></li>
+                <li><a href="capitello-ionico.html">Ionic style</a></li>
+                <li class="active"><a href="capitello-corinzio.html">Corintian style</a></li>
+                <li><a href="contacts.html">Contacts</a></li>
+            </ul>
+        </nav>
 
         <div class="intro">
             <h1> <a href="index.html"> CORINTIAN STYLE</a>

diff --git a/capitello-dorico.html b/capitello-dorico.html
@@ -25,7 +25,15 @@
     </head>
     <body>
         <!-- Header -->
-        <include-html path="header.html"></include-html>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li class="active"><a href="capitello-dorico.html">Doric style</a></li>
+                <li><a href="capitello-ionico.html">Ionic style</a></li>
+                <li><a href="capitello-corinzio.html">Corintian style</a></li>
+                <li><a href="contacts.html">Contacts</a></li>
+            </ul>
+        </nav>
 
         <div class="intro">
             <h1><a href="index.html"> DORIC STYLE</a></h1>

diff --git a/capitello-ionico.html b/capitello-ionico.html
@@ -30,7 +30,15 @@
     </head>
     <body>
         <!-- Header -->
-        <include-html path="header.html"></include-html>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="capitello-dorico.html">Doric style</a></li>
+                <li class="active"><a href="capitello-ionico.html">Ionic style</a></li>
+                <li><a href="capitello-corinzio.html">Corintian style</a></li>
+                <li><a href="contacts.html">Contacts</a></li>
+            </ul>
+        </nav>
 
         <div class="intro">
             <h1><a href="index.html"> IONIC STYLE</a></h1>

diff --git a/contacts.html b/contacts.html
@@ -11,7 +11,15 @@
         <link rel="shortcut icon" href="images/instagram_icon.webp">
     </head>
     <body>
-        <include-html path="header.html"></include-html>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="capitello-dorico.html">Doric style</a></li>
+                <li><a href="capitello-ionico.html">Ionic style</a></li>
+                <li><a href="capitello-corinzio.html">Corintian style</a></li>
+                <li class="active"><a href="contacts.html">Contacts</a></li>
+            </ul>
+        </nav>
 
         <h1><pre>Contacts</pre></h1><hr>
 

diff --git a/header.html b/header.html
diff --git a/index.html b/index.html
@@ -12,7 +12,15 @@
         <link rel="stylesheet" href="style/style.css">
     </head>
     <body>
-        <include-html path="header.html"></include-html>
+        <nav>
+            <ul>
+                <li class="active"><a href="index.html">Home</a></li>
+                <li><a href="capitello-dorico.html">Doric style</a></li>
+                <li><a href="capitello-ionico.html">Ionic style</a></li>
+                <li><a href="capitello-corinzio.html">Corintian style</a></li>
+                <li><a href="contacts.html">Contacts</a></li>
+            </ul>
+        </nav>
 
         <h1><pre>Collector's Shop</pre></h1><hr>
         <div class="rectangles">

diff --git a/script/include-html.js b/script/include-html.js
diff --git a/style/style.css b/style/style.css
@@ -143,6 +143,42 @@ tbody tr td img {
     border-radius: 10px;
 }
 
+/* Navbar style */
+nav ul {
+    display: flex;
+    flex-direction: horizontal;
+    justify-content: space-around;
+    align-items: center;
+    height: 6vw;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0;
+    border-radius: 1vw;
+    border-style: groove;
+    border-width: 0.2vw;
+    background-color: rgb(255, 228, 194);
+}
+@media screen and (max-width: 800px) {
+    nav ul {
+        flex-direction: row;
+        margin-left: auto;
+        margin-right: auto;
+        list-style-type: none;
+    }
+}
+nav ul li {
+    font-size: 2vw;
+    background-color: beige;
+    border-radius: 1vw;
+    padding: 1vw;
+    border-style: ridge;
+    border-color: burlywood;
+}
+nav ul li.active {
+    background-color: rgb(255, 193, 118);
+}
+
 /* CSS per computer */
 @media screen and (min-width: 800px) {
     div.intro, div.outro {