added about page with basic html/css, updated css code on home

IbroRebronja · May 6, 2024 · ec7937a · ec7937a
1 parent 16aa62c
commit ec7937a
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 3 deletions.
diff --git a/about.html b/about.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" href="images/favicon/favicon.ico" type="image/x-icon" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Oleo+Script:wght@700&family=Quicksand:wght@300;500&display=swap"
+    rel="stylesheet" />
+  <link rel="stylesheet" href="styles/shared.css" />
+  <link rel="stylesheet" href="styles/about.css" />
+  <script src="app.js"></script>
+  <title>Bosnia & Herzegovina Cities</title>
+</head>
+
+<body>
+  <header>
+    <div id="page-logo">
+      <a href="index.html">Bosnia & Herzegovina Cities</a>
+    </div>
+    <nav>
+      <ul>
+        <li><a href="places.html">Destinations</a></li>
+        <li><a href="about.html">About</a></li>
+      </ul>
+    </nav>
+    <a href="#side-drawer" class="menu-btn">
+      <span></span>
+      <span></span>
+      <span></span>
+    </a>
+  </header>
+
+  <main>
+
+  </main>
+
+  <aside id="side-drawer">
+    <header>
+      <a href="#" class="menu-btn">
+        <span></span>
+        <span></span>
+        <span></span>
+      </a>
+    </header>
+    <nav>
+      <ul>
+        <li><a href="places.html">Destinations</a></li>
+        <li><a href="about.html">About</a></li>
+      </ul>
+    </nav>
+  </aside>
+
+  <footer>
+    <ul>
+      <li><a href="https://www.instagram.com/p/CxxeivYMPpC/" target="_blank"><img src="images/icons/instagram.png"
+            alt="Instagram Logo"></a></li>
+      <li><a href="https://www.facebook.com/groups/121884106451487/" target="_blank"><img
+            src="images/icons/facebook.png" alt="facebook Logo"></a></li>
+    </ul>
+  </footer>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0 />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="icon" href="images/favicon/favicon.ico" type="image/x-icon"/>
   <link
     href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Oleo+Script:wght@700&family=Quicksand:wght@300;500&display=swap"
@@ -23,10 +23,16 @@
     <nav>
       <ul>
         <li><a href="places.html">Destinations</a></li>
-        <li><a href="about">About</a></li>
+        <li><a href="about.html">About</a></li>
       </ul>
     </nav>
+    <a href="#side-drawer" class="menu-btn">
+      <span></span>
+      <span></span>
+      <span></span>
+    </a>
   </header>
+
   <main>
     <section id="hero">
       <div id="hero-content">
@@ -52,6 +58,22 @@ <h2>Highlights</h2>
     </section>
   </main>
 
+  <aside id="side-drawer">
+    <header>
+      <a href="#" class="menu-btn">
+        <span></span>
+        <span></span>
+        <span></span>
+      </a>
+    </header>
+    <nav>
+      <ul>
+        <li><a href="places.html">Destinations</a></li>
+        <li><a href="about.html">About</a></li>
+      </ul>
+    </nav>
+  </aside>
+
   <footer>
     <ul>
       <li><a href="https://www.instagram.com/p/CxxeivYMPpC/" target="_blank"><img src="images/icons/instagram.png" alt="Instagram Logo"></a></li>

diff --git a/places.html b/places.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0 />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <link rel="icon" href="images/favicon/favicon.ico" type="image/x-icon" />
   <link
     href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Oleo+Script:wght@700&family=Quicksand:wght@300;500&display=swap"
@@ -271,6 +271,7 @@ <h2>Gradačac</h2>
       </li>
     </ul>
   </main>
+
   <aside id="side-drawer">
     <header>
       <a href="#" class="menu-btn">

diff --git a/styles/about.css b/styles/about.css
@@ -0,0 +1,84 @@
+body {
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(30deg, rgb(199, 233, 219), #a9d6f0);
+  color: rgb(68, 68, 68);
+}
+
+header {
+  position: static;
+}
+.menu-btn {
+  width:3rem;
+  height:3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  display: none;
+  transition: transform 0.5s ease;
+}
+
+.menu-btn:hover{
+  transform: scale(1.1);
+  transition: transform 0.5s ease;
+}
+
+.menu-btn span {
+  width: 100%;
+  height:0.1875rem;
+  background-color: white;
+}
+
+#side-drawer {
+  width: 100%;
+  height: 100%;
+  background-color: rgb(29,26,27);
+  position: fixed;
+  top: 0;
+  left: 0; 
+  display:none;
+}
+
+#side-drawer:target {
+  display: block;
+}
+
+#side-drawer header {
+  height: 5rem;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 5%;
+}
+
+#side-drawer ul {
+  list-style: none;
+  margin: 0;
+  padding: 4rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#side-drawer li {
+  margin: 1rem 0;
+}
+
+#side-drawer a {
+  color: rgb(253,239,213);
+  font-size: 2rem;
+}
+
+@media (max-width: 48rem) {
+  #page-logo a{
+    font-size:1.5rem;
+  }
+
+  header a{
+  display:none;
+  }
+
+  .menu-btn {
+    display:flex;
+  }
+}
diff --git a/styles/places.css b/styles/places.css
@@ -159,6 +159,8 @@ main li img {
     grid-template-columns: 100%;
     margin: auto;
     width:90%;
+    margin-top: 1.5rem;
+    margin-bottom: 2rem;
   }
 
   main li{

diff --git a/styles/styles.css b/styles/styles.css
@@ -99,7 +99,79 @@
   color: rgb(38, 146, 117);
 }
 
+.menu-btn {
+  width:3rem;
+  height:3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  display: none;
+  transition: transform 0.5s ease;
+}
+
+.menu-btn:hover{
+  transform: scale(1.1);
+  transition: transform 0.5s ease;
+}
+
+.menu-btn span {
+  width: 100%;
+  height:0.1875rem;
+  background-color: white;
+}
+
+#side-drawer {
+  width: 100%;
+  height: 100%;
+  background-color: rgb(29,26,27);
+  position: fixed;
+  top: 0;
+  left: 0; 
+  display:none;
+}
+
+#side-drawer:target {
+  display: block;
+}
+
+#side-drawer header {
+  height: 5rem;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 5%;
+}
+
+#side-drawer ul {
+  list-style: none;
+  margin: 0;
+  padding: 4rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 
+#side-drawer li {
+  margin: 1rem 0;
+}
+
+#side-drawer a {
+  color: rgb(253,239,213);
+  font-size: 2rem;
+}
 
+@media (max-width: 48rem) {
+  #page-logo a{
+    font-size:1.5rem;
+  }
+
+  header a{
+  display:none;
+  }
+
+  .menu-btn {
+    display:flex;
+  }
+}