updates to home

2026-05-10 20:52:58 +00:00 · 2026-03-07 21:19:51 -07:00
parent 9994b9c746
commit 63f0987020
6 changed files with 36 additions and 5 deletions
@@ -16,16 +16,21 @@ position: sticky;
 top: 0;
  display: flex;
  align-items: center;
+  justify-content: center;
  background-color: #1f3d57;
  color: white;
  padding: 10px 20px;
  height: 60px;
+ gap: 40px;
 }

+.top-header .swirl {
+  height: 40px;
+  width: auto;
+  margin: 0 20px;
+}

 .site-name {
-position: absolute;
-  left: 50%;
  font-size: 2.5em;
  font-weight: bold;
  letter-spacing: 4px;
@@ -65,6 +70,27 @@ display: flex;
  font-weight: bold;
 }

+.sidebar-left .nav_icon {
+  height: 40px;
+  width: auto;
+  margin: 5 5px;
+}
+
+/* Create Icon */
+.create_icon {
+    position: fixed;
+    bottom: 30px;
+    left: 60px;
+    z-index: 1000;
+}
+
+.create_icon img {
+    width: 150px;
+    height: auto;
+    border-radius: 10%;
+}
+
+
 /* Right Sidebar */
 .sidebar-right {
 overflow: hidden;
@@ -112,7 +138,7 @@ display: flex;
  align-items: center;
 margin-left: 300px;
 margin-right: 250px;
-margin-top: 65px;
+margin-top: 0px;
 }

 .recipe-card {
@@ -10,7 +10,9 @@
 <body>

 <header class="top-header">
+    <img src="images/header_left.png" alt="Violin f-hole shape to the left of header." class="swirl">
    <h1 class="site-name">Thyme Crunch</h1>
+    <img src="images/header_right.png" alt="Violin f-hole shape to the right of header." class="swirl">
  </header>

 <div class="container">
@@ -21,14 +23,17 @@
        <li><a href="#">Explore</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Saved</a></li>
-        <li><a href="#">Log Out</a></li>
-        <li><a href="#">Settings</a></li>
+        <li><a href="#"> <img src="images/logout_icon.png" alt="Log Out Icon" class="nav_icon"></a></li>
      </ul>
    </nav>


 </nav>

+<a href="#" target="_blank" class="create_icon">
+    <img src="images/create_icon.png" alt="Description of the icon">
+</a>
+

    <!-- Main Content -->
    <main class="main-content">