Technigo · gittebe · Aug 27, 2024 · Aug 30, 2024 · Aug 30, 2024 · Aug 30, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,12 +1,31 @@
 # Business Site
+This is a responsive business website created as part of a bootcamp project. The website is designed for a fictional concert venue, "Concert House," with a focus on user registration, mobile-friendly navigation, and layout.
+This project serves as a practical exercise in HTML and CSS, emphasizing responsive design, accessibility, and user interaction.
 
-Replace this readme with your own information about your project. 
+# The Problem
+The goal was to create a user-friendly platform where visitors can sign up for membership and enjoy special offers. The design was built with a mobile-first approach, ensuring that the layout adapts well across devices. Key challenges faced during development include:
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+Image and layout adjustments: Ensuring that images and layout components scale well across different screen sizes, especially for mobile users.
 
-## The problem
+# Next Steps
+Improve mobile navigation: Ensure the hamburger menu works seamlessly, and add functionality to expand/collapse the navigation on mobile and tablet devices.
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+Optimize the registration form: Improve form styling and validation to make the user experience smoother.
+
+Accessibility: Ensuring the website is fully accessible to all users.
+
+# Key Features:
+Responsive Layout: The site adapts to various screen sizes using CSS media queries, ensuring a consistent and user-friendly experience across mobile, tablet, and desktop devices.
+
+Membership Registration Form: Users can sign up for membership by providing personal information and agreeing to terms and conditions.
+
+Footer with Contact Information: Includes a link to the developer's LinkedIn profile for easy contact.
+
+# Technologies Used:
+HTML5: For structuring the website and forms.
+
+CSS: For styling and responsive design, including media queries to adapt the layout across devices.
 
 ## 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://concert-house.netlify.app/
+
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/assets/logo-note.png b/code/assets/logo-note.png
diff --git a/code/assets/opera.jpg b/code/assets/opera.jpg
diff --git a/code/index.html b/code/index.html
@@ -1,17 +1,102 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Business Site</title>
-    <!-- dont forget to add a css file and link it here! -->
-  </head>
-  <body>
-    <h1>Business name 🌻</h1>
-
-    <!-- video or image as a header is cool :) -->
-
-    <!-- Signup form -->
-
-  </body>
-</html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Business Site</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+  <header>
+    <div class="hero">
+      <a class="logo-container" aria-label="website">
+        <img src="./assets/logo-note.png" alt="the logo is a note">
+      </a>
+      <div class="header-text">
+        <h1>Concert House</h1>
+        <h2>Become a member and enjoy special offers!</h2>
+      </div>
+      <button aria-expanded="false" aria-controls="navigation-menu" aria-label="Open Main Menu">
+        <div class="hamburger-layer"></div>
+        <div class="hamburger-layer"></div>
+        <div class="hamburger-layer"></div>
+      </button>
+      <nav id="navigation-menu" hidden>
+        <a href="http://google.com" aria-label="Go to Google">Google</a>
+        <a href="http://example.com" aria-label="Go to Example">Example</a>
+      </nav>
+    </div>
+  </header>
+  <main>
+    <h3>New Member Registration</h3>
+    <!-- Sign-up form for mobile phones-->
+    <div class="form-container">
+      <form action="http://httpbin.org/anything" method="post">
+        <!-- personal information: first name, last name, address, country, phone, email -->
+        <label for="first-name">First Name</label>
+        <input type="text" id="first-name" name="first-name" placeholder="first name" required>
+
+        <label for="last-name">Last Name</label>
+        <input type="text" id="last-name" name="last-name" placeholder="last name" required>
+
+        <label for="address">Address</label>
+        <input type="text" id="address" name="address" placeholder="address" required>
+
+        <label for="country">Country</label>
+        <select class="drop-down" name="country" required id="country" reuqired tabindex="0">
+          <option value="select" disabled selected>select</option>
+          <option value="sweden">Sweden</option>
+          <option value="germany">Germany</option>
+          <option value="france">France</option>
+          <option value="switzerland">Switzerland</option>
+        </select>
+
+        <label for="phone">Phone</label>
+        <input type="tel" id="phone" name="phone" placeholder="phone" required>
+        <label for="email">Email</label>
+        <input type="email" name="email" placeholder="email" required>
+
+        <!-- membership & Terms & Conditions -->
+        <label for="membership">Choose your Membership</label>
+        <select aria-label="open drop-down to choose membership type" class="drop-down" name="membership"
+          id="membership" required>
+          <option aria-label="close drop-down to choose membership type" value="choose">Choose membership</option>
+          <option value="monthly membership">One month membership</option>
+          <option value="six month membership">Six month membership</option>
+          <option value="one year membership">One year membership</option>
+        </select>
+
+        <div class="terms-and-conditions">
+          <input id="checkbox" type="checkbox" required aria-describedby="terms-description" />
+          <label for="checkbox">I agree to these <a href="https://google.com">Terms and Conditions</a></label>
+          <p id="terms-description" class="sr-only">You must agree to the Terms and Conditions to continue</p>
+        </div>
+
+        <!-- submit button -->
+        <div id="submit-button-container">
+          <button id="submit-button" type="submit">Submit</button>
+        </div>
+      </form>
+    </div>
+  </main>
+
+  <!-- footer for mobile phones -->
+  <footer>
+    <div>
+      <p class="footer-text">Contact: Gitte Beckmann</p>
+    </div>
+
+    <!-- linkedin -->
+    <a href="https://www.linkedin.com/in/gittebeckmann" aria-label="linkedin page of webpage-developer">
+      <svg id="linkedin" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+        class="bi bi-linkedin" viewBox="0 0 16 16">
+        <path
+          d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
+      </svg>
+    </a>
+  </footer>
+</body>
+
+</html>
diff --git a/code/style.css b/code/style.css
@@ -1,5 +1,214 @@
-/* After you've linked the CSS file in the HTML,
-this should turn the background blue ;) */
 body {
-  background: blue;
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+}
+
+/* header style for mobile phones */
+.hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  background: url(./assets/opera.jpg);
+  min-height: 100vh;
+  background-size: cover;
+  background-position: center;
+}
+
+.logo-container {
+  width: 40px;
+  margin-left: 10px;
+  margin-top: 3px;
+}
+
+img {
+  width: 100%;
+  background-color: white;
+}
+
+/* navigation with hamburger-layer for mobile phone*/
+.navigation {
+  margin: 10px;
+}
+
+.hamburger-layer {
+  width: 20px;
+  height: 5px;
+  background-color: black;
+  margin-bottom: 2px;
+  margin-right: 10px;
+  margin-top: 3px;
+}
+
+.header-text {
+  padding-top: 25%;
+  text-align: center;
+}
+
+/* texts of the header for mobile phones */
+h1 {
+  color: #FFDF00;
+  font-size: 40px;
+}
+
+h2 {
+  color: #FFDF00;
+  margin-top: 15%;
+}
+
+/* header for Desktop */
+@media (min-width: 1024px) {
+  .header-text {
+    padding-top: 10%;
+    text-align: center;
+    max-width: 600px;
+  }
+
+  h1 {
+    color: #FFDF00;
+    font-size: 60px;
+  }
+
+  h2 {
+    color: #FFDF00;
+    font-size: 40px;
+    margin-top: 15%;
+  }
+}
+
+/* Title of form for mobile phones */
+
+h3 {
+  color: rgb(81, 81, 132);
+  font-weight: 200;
+  padding-left: 5%;
+}
+
+/* Title of form for Desktop */
+@media (min-width: 1024px) {
+  h3 {
+    font-weight: 500;
+    text-align: left;
+    font-size: xx-large;
+  }
+}
+
+/* sign-up form for mobile phones */
+.form-container {
+  display: flex;
+  justify-content: center;
+  background-color: rgb(236, 233, 233);
+  padding: 5%;
+  border-radius: 5px;
+  margin: auto;
+  max-width: 500px;
+}
+
+form {
+  display: flex;
+  width: 80%;
+  display: block;
+  justify-content: center;
+}
+
+/* personal information */
+label {
+  display: block;
+  text-align: left;
+  padding: 5px;
+}
+
+input {
+  width: 100%;
+  justify-content: center;
+  border: 2px solid rgb(200, 200, 200);
+  border-radius: 5px;
+}
+
+/* Inputs for Tablets, iPads, desktop */
+@media (min-width: 667px) {
+  input {
+    width: 300px;
+  }
+}
+
+/* Input for Desktop */
+@media (min-width:1024px) {
+  input:hover {
+    background-color: rgb(219, 218, 218);
+  }
+}
+
+/* country: drop-down menu */
+.drop-down {
+  border: 2px solid rgb(200, 200, 200);
+  border-radius: 5px;
+}
+
+/* terms and conditions: checkbox-style */
+.terms-and-conditions {
+  display: flex;
+}
+
+#checkbox {
+  width: 20px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+/* submit-button */
+#submit-button-container {
+  display: flex;
+  width: 80%;
+  margin-left: 10%;
+  margin-top: 5px;
+  justify-content: center;
+  background-color: rgb(166, 166, 188);
+  border-radius: 5px;
+  padding: 5px;
+}
+
+#submit-button {
+  background-color: rgb(166, 166, 188);
+  border: none;
+  width: 100%;
+}
+
+#submit-button:active {
+  background-color: #673dda;
+}
+
+/* Input for Desktop */
+@media (min-width:1024px) {
+  #submit-button:hover {
+    background-color: rgb(83, 53, 171);
+    color: white;
+  }
+}
+
+/* footer for mobile phone */
+footer {
+  display: flex;
+  display: row;
+  justify-content: space-around;
+  margin: 2%;
+}
+
+.footer-text {
+  margin: 0;
+  font-size: small;
+}
+
+#linkedin {
+  color: blue;
+  width: 20px;
 }