CodeYourFuture · nohetekelmariyam · Oct 21, 2023 · Nov 7, 2023 · Nov 8, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/Form-Controls/images (1).jpg b/Form-Controls/images (1).jpg
diff --git a/Form-Controls/img/download.png b/Form-Controls/img/download.png
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -1,28 +1,124 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>My form exercise</title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <header>
-    <h1>Product Pick</h1>
-  </header>
-  <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
-  </form>
-
-  </main>
-  <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
-  </footer>
-</body>
-
-</html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>My form exercise</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <div class="header-div">
+      <div class="black">
+        <img class="img-div" src="https://images.tshirtstudio.com/general/shopping-cart2.svg">
+      </div>
+      <h2 class="title"><span>CYF</span> T-SHIRT</h2>
+      <div class="header-right">
+         <input class="search" placeholder="What are you looking for today?">
+         <img class="img-div"  src="https://images.tshirtstudio.com/general/myAccountIcon.svg">
+      </div>
+      </div>
+      <nav class="navigation">
+        <ul class="nav-ul">
+          <li>25% off</li>
+          <li>Polo</li>
+          <li>Sport</li>
+          <li>print t-shirt</li>
+          <li>customize</li>
+          <li>Sale</li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+      <section class="section-div">
+        <img class="shirt-img" src="images (1).jpg" />
+
+
+      <form>
+        <h3>Product pic</h3>
+        <p>Slim-Fit Stretch-Cotton Jersey T-Shirt</p>
+        <p>$70</p>
+
+        <p class="size-color-date">color :</p>
+        <input
+          type="radio"
+          id="radio1"
+          name="radio"
+
+        />
+        <label
+          class="label-1"
+          for="radio1"
+        ></label>
+
+        <input
+          type="radio"
+          id="radio2"
+          name="radio"
+
+        />
+        <label
+          class="label-2"
+          for="radio2"
+        ></label>
+
+
+         <input
+          type="radio"
+          id="radio3"
+          name="radio"
+
+        />
+        <label
+          class="label-3"
+          for="radio3"
+        ></label>
+
+        <div class="color-div"> </div>
+
+
+        <section class="section-size">
+          <p class="size-color-date">Size :</p>
+          <button class="xs-size">XS</button>
+          <button class="s-size">S</button>
+          <button class="m-size">M</button>
+          <button class="l-size">L</button>
+          <button class="xl-size">XL</button>
+          <button class="xll-size">XLL</button>
+        </section>
+
+        <label for="date-time"> Deliver Date:</label>
+        <input type="datetime-local" max="2024-02-02T00:00"  id="date-time" required />
+
+        <section class="form-section">
+          <div class="input-section">
+            <label for="fullname">Full Name</label><br />
+            <input type="text" id="fullname" name="text" required />
+          </div>
+
+          <div class="input-section">
+            <label for="fullname">Email</label> <br />
+            <input type="email" id="fullname" name="text" required />
+          </div>
+        </section>
+        <input type="submit" id="submit-button">
+      </form>
+
+    </main>
+   </section>
+    <footer>
+      <div class="footer">
+
+      <h5>Cloth</h5>
+      <h5>Gift</h5>
+      <h5>Collection</h5>
+      <h5>Helps</h5>
+      </div>
+       <h4>Nohe Tekelmariyam</h4>
+      <h4>By HOMEWORK SOLUTION</h>
+    </footer>
+  </body>
+</html>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
@@ -0,0 +1,161 @@
+/* header */
+.header-div,
+.header-right {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.black {
+  background-color: black;
+}
+.img-div {
+  cursor: pointer;
+}
+span {
+  color: red;
+}
+.title {
+}
+
+.search {
+  width: 55%;
+  padding: 0.5em 1.5em;
+  border: none;
+  box-shadow: 2px 4px;
+  border-radius: 5px;
+  outline: none;
+}
+
+.navigation {
+  border-bottom: 1px solid gray;
+  border-top: 6px solid black;
+}
+
+.nav-ul {
+  display: flex;
+  justify-content: space-around;
+  list-style-type: none;
+}
+
+ul li {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+ul li:hover {
+  color: rgb(218, 39, 39);
+}
+/*  section-div*/
+.section-div {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 2em;
+}
+.shirt-img {
+  width: 25%;
+  padding-bottom: 2em;
+}
+/* input-section */
+
+.form-section {
+  margin-top: 1.5em;
+}
+
+/* size-button */
+.size-color-date {
+  display: inline-block;
+}
+button {
+  color: white;
+  font-weight: bold;
+  background-color: rgb(53, 40, 40);
+  border: none;
+  cursor: pointer;
+}
+button:hover {
+  color: red;
+  background-color: white;
+}
+/* radio-button */
+/* radio1 */
+
+#radio1 {
+  opacity: 0;
+}
+.label-1 {
+  padding: 8px 15px;
+  background-color: rgb(235, 27, 27);
+  cursor: pointer;
+}
+
+#radio1:checked ~ .color-div {
+  background-color: rgb(232, 40, 26);
+}
+/* radio2 */
+#radio2 {
+  opacity: 0;
+}
+.label-2 {
+  padding: 8px 15px;
+  background-color: gray;
+  cursor: pointer;
+}
+
+#radio2:checked ~ .color-div {
+  background-color: gray;
+}
+
+/* radio3 */
+
+#radio3 {
+  opacity: 0;
+}
+.label-3 {
+  padding: 8px 15px;
+  background-color: black;
+  cursor: pointer;
+}
+
+#radio3:checked ~ .color-div {
+  background-color: black;
+}
+
+.color-div {
+  width: 1em;
+  height: 1em;
+  border: 1px solid black;
+}
+
+#submit-button {
+  margin-left: 4em;
+  margin-top: 1.5em;
+  border-style: none;
+  padding: 0.5em;
+  color: red;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+#submit-button:hover {
+  color: black;
+}
+/* footer */
+footer {
+  background-color: black;
+}
+.footer {
+  display: flex;
+  justify-content: center;
+}
+h5:hover {
+  color: red;
+}
+h5 {
+  cursor: pointer;
+  color: white;
+  margin-left: 2em;
+}
+h4 {
+  text-align: center;
+  color: white;
+}
diff --git a/MultiPage-Clone/20230418_233231noh.jpg b/MultiPage-Clone/20230418_233231noh.jpg