Add a basic landing page layout

jcidp · Apr 6, 2024 · bb6a27b · bb6a27b
1 parent b37c52a
commit bb6a27b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Dish Hunter</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,24 @@
+nav {
+  display: flex;
+  justify-content: center;
+  border-bottom: 1px solid lightgrey;
+
+  a {
+    text-decoration: none;
+    color: black;
+    font-size: 1.5rem;
+    margin: 1rem 0;
+  }
+}
+
+header {
+  text-align: center;
+
+  h1 {
+    margin: 1rem 0;
+  }
+}
+
+main {
+  text-align: center;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,19 @@ import './App.css'
 
 function App() {
   return (
-    <h1>Hello, world!</h1>
+    <>
+      <nav>
+        <a href="/">Dish Hunter</a>
+      </nav>
+      <header>
+        <h1>Welcome to the recipe hunt!</h1>
+        <p>Search for a recipe based on ingredients</p> 
+      </header>
+      <main>
+        <input type="search" name="ingredients" id="ingredients" placeholder="ingredients" />
+        <button type="submit">Search</button>
+      </main>
+    </>
   )
 }
 

diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+:root {
+  font-family: "Montserrat", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}