mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
updates to home
This commit is contained in:
+29
-3
@@ -16,16 +16,21 @@ position: sticky;
|
|||||||
top: 0;
|
top: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
background-color: #1f3d57;
|
background-color: #1f3d57;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
|
gap: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-header .swirl {
|
||||||
|
height: 40px;
|
||||||
|
width: auto;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.site-name {
|
.site-name {
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: 4px;
|
letter-spacing: 4px;
|
||||||
@@ -65,6 +70,27 @@ display: flex;
|
|||||||
font-weight: bold;
|
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 */
|
/* Right Sidebar */
|
||||||
.sidebar-right {
|
.sidebar-right {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -112,7 +138,7 @@ display: flex;
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: 300px;
|
margin-left: 300px;
|
||||||
margin-right: 250px;
|
margin-right: 250px;
|
||||||
margin-top: 65px;
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-card {
|
.recipe-card {
|
||||||
|
|||||||
+7
-2
@@ -10,7 +10,9 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header class="top-header">
|
<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>
|
<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>
|
</header>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@@ -21,14 +23,17 @@
|
|||||||
<li><a href="#">Explore</a></li>
|
<li><a href="#">Explore</a></li>
|
||||||
<li><a href="#">Profile</a></li>
|
<li><a href="#">Profile</a></li>
|
||||||
<li><a href="#">Saved</a></li>
|
<li><a href="#">Saved</a></li>
|
||||||
<li><a href="#">Log Out</a></li>
|
<li><a href="#"> <img src="images/logout_icon.png" alt="Log Out Icon" class="nav_icon"></a></li>
|
||||||
<li><a href="#">Settings</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<a href="#" target="_blank" class="create_icon">
|
||||||
|
<img src="images/create_icon.png" alt="Description of the icon">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<main class="main-content">
|
<main class="main-content">
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 144 B |
Binary file not shown.
|
After Width: | Height: | Size: 144 B |
Binary file not shown.
|
After Width: | Height: | Size: 144 B |
Binary file not shown.
|
After Width: | Height: | Size: 144 B |
Reference in New Issue
Block a user