not pretty wip homepage

2026-05-10 20:52:58 +00:00 · 2026-03-03 00:29:42 -07:00
parent 137dcbf948
commit 418ddf483c
3 changed files with 209 additions and 0 deletions
@@ -0,0 +1,146 @@
+body, html {
+  background-attachment: fixed; 
+  height: 100%;
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+.container {
+  display: flex;
+  height: 100vh;
+}
+
+/* Header Styles */
+.top-header {
+position: sticky;
+top: 0;
+  display: flex;
+  align-items: center;
+  background-color: #1f3d57;
+  color: white;
+  padding: 10px 20px;
+  height: 60px;
+}
+
+
+.site-name {
+position: absolute;
+  left: 50%;
+  font-size: 2.5em;
+  font-weight: bold;
+  letter-spacing: 4px;
+  font-family: 'EB Garamond', serif;}
+
+/* Left Sidebar */
+.sidebar-left {
+  overflow: hidden;
+  margin: 20px;
+  position: fixed;
+  border-radius: 20px;
+  z-index: 10;
+
+  width: 200px;
+  background-color: #38a7e8;
+  color: white;
+  padding: 20px;
+  font-size: 1.15em;
+
+display: flex;
+  flex-direction: column;
+  justify-content: space-between; 
+}
+
+.sidebar-left ul {
+  list-style: none;
+  padding: 0;
+}
+
+.sidebar-left li {
+  margin-bottom: 15px;
+}
+
+.sidebar-left a {
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+/* Right Sidebar */
+.sidebar-right {
+overflow: hidden;
+  margin: 20px;
+height: 70%;
+  position: fixed;
+  border-radius: 20px;
+  z-index: 1;
+
+right: 0;
+overflow-x: hidden;
+
+  width: 200px;
+  background-color: #38a7e8;
+  color: white;
+  padding: 20px;
+  font-size: 1.15em;
+
+display: flex;
+  flex-direction: column;
+  justify-content: space-between; 
+}
+
+.sidebar-right ul {
+  list-style: none;
+  padding: 0;
+}
+
+.sidebar-right li {
+  margin-bottom: 15px;
+}
+
+.sidebar-right a {
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+
+/* Main Content */
+.main-content {
+  flex-grow: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+margin-left: 300px;
+margin-right: 250px;
+margin-top: 65px;
+}
+
+.recipe-card {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 35px;
+    justify-content: flex-start;
+}
+
+.card {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    
+    flex: 0.2 0.2 260px;
+    max-width: 300px;
+    background: orange;
+    border-radius: 12px;
+    padding: 20px;
+}
+
+.card img {
+    width: 100%;
+    height: 100px;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+.card-left, .card-right {
+    width: 50%;
+}