Technigo · JoyceKuode · Aug 26, 2024 · Aug 27, 2024 · Aug 27, 2024 · Aug 28, 2024
diff --git a/README.md b/README.md
@@ -1,10 +1,15 @@
 # Business Site
 
-Replace this readme with your own information about the project. You can include things like:
+The aim of this project was to demonstrate competency in creating and designing a form within the context of a business site.
 
-- Brief description of the assignment
-- How you approached the task, what tools and techniques you used, and how you planned it
-- If you had more time, what would be next?
+I chose to use a real business run by someone I know. My goal was to improve on an existing concept and realize the company’s vision. My approach began with inviting the business owner over for coffee. In this case, the business is my husband’s former cover band, and the band leader is our friend who lives across the street. We brainstormed necessary features for the new and improved website, and he showed me websites of other bands, highlighting elements he liked.
+
+I used ChatGPT whenever I had an idea for something I didn’t know how to implement. For instance, my client asked if I could make the logo rotate 360 degrees. I had no idea if that was possible, but ChatGPT provided some code that I tested, and it worked. I got other ideas from some of the material in class meetings and team labs, such as using videos as a background and creating a gradient effect. I also applied techniques from last week’s project, like using flexbox and grid to create the layout. I also found a YouTube video that helped me create a favicon. 
+
+If I had more time, I would experiment more with styling, such as trying different fonts. I would also like to update the review boxes so that on mobile, it fits 4 or 5 boxes, but as the screen enlarges, more boxes are added, and they can appear in a different grid design with some boxes in various shapes. I would also add more media, like a photo carousel. 
 
 ## View it live
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+
+https://theroyalswedes.netlify.app/
+
+
diff --git a/code/images/fb.png b/code/images/fb.png
diff --git a/code/images/insta.png b/code/images/insta.png
diff --git a/code/images/swedes-logo-bottom.jpeg b/code/images/swedes-logo-bottom.jpeg
diff --git a/code/images/swedes-logo-bottom1.jpeg b/code/images/swedes-logo-bottom1.jpeg
diff --git a/code/images/swedes-logo-top-trim.jpeg b/code/images/swedes-logo-top-trim.jpeg
diff --git a/code/images/swedes-logo-top.jpeg b/code/images/swedes-logo-top.jpeg
diff --git a/code/images/swedes-logo.jpeg b/code/images/swedes-logo.jpeg
diff --git a/code/images/the-royal-swedes-favicon.png b/code/images/the-royal-swedes-favicon.png
diff --git a/code/images/the-royal-swedes-live-2.jpeg b/code/images/the-royal-swedes-live-2.jpeg
diff --git a/code/images/the-royal-swedes-live-3.jpeg b/code/images/the-royal-swedes-live-3.jpeg
diff --git a/code/images/the-royal-swedes-live.jpeg b/code/images/the-royal-swedes-live.jpeg
diff --git a/code/images/the-royal-swedes-live2.jpeg b/code/images/the-royal-swedes-live2.jpeg
diff --git a/code/images/tiktok.png b/code/images/tiktok.png
diff --git a/code/images/youtube.png b/code/images/youtube.png
diff --git a/code/index.html b/code/index.html
@@ -1,17 +1,160 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Business Site</title>
-    <!-- Don't forget to link the CSS file here! -->
-  </head>
-  <body>
-    <h1>Business name 🌻</h1>
 
-    <!-- Video or image as a header is cool :) -->
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>The Royal Swedes</title>
+  <link rel="stylesheet" href="style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Cinzel:[email protected]&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">
+  <link rel="icon" type="image/png" href="./images/the-royal-swedes-favicon.png">
+</head>
 
-    <!-- Signup form -->
+<body>
+  <header class="header">
+    <div class="top-row">
+      <div class="hamburger">
+        <div class="hamburger-layer"></div>
+        <div class="hamburger-layer"></div>
+        <div class="hamburger-layer"></div>
+      </div>
+      <ul class="nav-menu">
+        <li><a href="#home">Home</a></li>
+        <li><a href="#the-swedes">The Swedes</a></li>
+        <li><a href="#vibes">Vibes</a></li>
+        <li><a href="#review">Review</a></li>
+      </ul>
+      <div class="social-media">
+        <a href="https://www.facebook.com/theroyalswedes" target="_blank">
+          <img src="./images/fb.png">
+        </a>
+        <a href="https://www.instagram.com/theroyalswedes/" target="_blank">
+          <img src="./images/insta.png">
+        </a>
+        <a href="https://www.youtube.com/channel/UCBAikymgmy7C5lQ5EhJT4bw/featured" target="_blank">
+          <img src="./images/youtube.png">
+        </a>
+        <a href="https://www.tiktok.com/@theroyalswedes" target="_blank">
+          <img src="./images/tiktok.png">
+        </a>
+      </div>
 
-  </body>
-</html>
+    </div>
+    <!-- 3D logo -->
+    <div class="logo-container">
+      <div class="logo-top">
+        <img src="./images/swedes-logo-top.jpeg" alt="logo">
+      </div>
+      <div class="logo-bottom">
+        <img src="./images/swedes-logo-bottom1.jpeg" alt="logo" class="logo">
+      </div>
+    </div>
+  </header>
+
+  <div class="image">
+    <img src="./images/the-royal-swedes-live-3.jpeg">
+  </div>
+
+  <div class="description" id="the-swedes">
+    <br>
+    <p>Hailing from the land of vikings and vibrant melodies, The Royal Swedes blend pop and rock with regal flair.
+      Featuring timeless
+      classics and contemporary hits, they captivate audiences with a sound that is both bold and nostalgic. <br><br>
+      Whether
+      it's
+      reliving the glory days of rock or creating new memories on the dance floor, The Royal Swedes know how to turn
+      any event into a celebration fit for royalty.</p><br>
+  </div>
+
+  <div class="grid-container" id="vibes">
+    <video class="video-bg" autoplay muted loop playsinline>
+      <source src="./video/royal-swedes-live - Made with Clipchamp.mp4" type="video/mp4">
+    </video>
+    <div class="grid-item">
+      <h2>"One of the best groups I have seen in a long time. Their music has a wide variety, they cater for all tastes,
+        and the lead singer has such a brilliant voice."</h2>
+      <p>Linda H.</p>
+    </div>
+    <div class="grid-item">
+      <h2>"The band is so talented and full of energy. They know how to entertain and interact wonderfully with the
+        crowd. 10 out of 10."</h2>
+      <p>Brenda K.</p>
+    </div>
+    <div class="grid-item">
+      <h2>"Kunde spela väldigt blandad musik. Superbra!!!"</h2>
+      <p>Marjo R.</p>
+    </div>
+    <div class="grid-item">
+      <h2>"Definitely worth attending their performance. Powerful, energetic and very talented."</h2>
+      <p>Charles G.</p>
+    </div>
+  </div>
+
+  <div class="form-container" id="review">
+    <div class="form">
+      <form action="https://httpbin.org/anything" method="post">
+        <h2>Submit Your Review</h2>
+
+        <label for="name">Name (optional):</label>
+        <input type="text" id="name" name="Name">
+
+        <label for="email">Email Address (optional):</label>
+        <input type="email" id="email" name="email">
+
+        <label for="rating">Rating:</label>
+        <select name="rating" id="rating" required>
+          <option value="5">5 - Viking Victory: Epic performances that make you want to raise your horn and sing along
+          </option>
+          <option value="4">4 - Abba-solutely Delightful: Great energy and catchy tunes that get everyone dancing
+          </option>
+          <option value="3">3 - Smörgåsbord Surprise: A mixed platter of hits and misses</option>
+          <option value="2">2 - IKEA Assembly Required: All the pieces were there, but it felt like a struggle to put it
+            together</option>
+          <option value="1">1 - Melancholy Moose: A slow and somber performance</option>
+        </select>
+
+        <label for="review-text">Your Review:</label>
+        <textarea name="review-text" id="review-text" rows="6" cols="50" required></textarea>
+
+        <label for="favorite-song">Favorite Song/Performance (optional):</label>
+        <input type="text" id="favorite-song" name="favorite-song">
+
+        <label class="custom-checkbox">I consent to having my review published publicly on The Royal Swedes website and
+          social media channels.
+          <input type="checkbox" name="consent">
+          <span class="checkmark"></span>
+        </label>
+
+        <input type="submit" value="SUBMIT">
+      </form>
+    </div>
+  </div>
+
+
+  <div class="band-photo">
+    <img src="./images/the-royal-swedes-live2.jpeg">
+  </div>
+
+  <footer class="footer">
+    <div class="social-icon">
+      <a href="https://www.facebook.com/theroyalswedes" target="_blank">
+        <img src="./images/fb.png">
+      </a>
+      <a href="https://www.instagram.com/theroyalswedes/" target="_blank">
+        <img src="./images/insta.png">
+      </a>
+      <a href="https://www.youtube.com/channel/UCBAikymgmy7C5lQ5EhJT4bw/featured" target="_blank">
+        <img src="./images/youtube.png">
+      </a>
+      <a href="https://www.tiktok.com/@theroyalswedes" target="_blank">
+        <img src="./images/tiktok.png">
+      </a>
+    </div>
+
+    <div class="copyright">&copy 2024 The Royal Swedes. All rights reserved.</div>
+  </footer>
+
+</body>
+
+</html>