CodeYourFuture · adamazakaria2021 · Sep 27, 2025
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -3,25 +3,51 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
+    <title>My Form-Control</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
     <header>
-      <h1>Product Pick</h1>
+      <h1>Selling T-shirts</h1>
     </header>
     <main>
       <form>
         <!-- write your html here-->
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
-      </form>
+         <label for="fname">First name</label><br>
+         <input type="text" id="fname" name="fname" value=""><br>
+          <label for="lname">Last name</label><br>
+  <input type="text" id="lname" name="lname" value=""><br>
+  <label for="email">Email</label><br>
+  <input type="text" id="email" email="email" value=""><br>
+<form>
+  <label for="tshirtColour">Colour</label>
+  <select id="tshirtColour" name="tshirtColour" required>
+    <option value="Black">Blac</option>
+    <option value="Red">Red</option>
+    <option value="Blue">Blue</option>
+  </select>
+<form>
+  <label for="tshirtSize">Size</label>
+  <select id="tshirtSize" name="tshirtSize" required>
+    <option value="XS">XS</option>
+    <option value="S">S</option>
+    <option value="M">M</option>
+    <option value="L">L</option>
+    <option value="XL">XL</option>
+    <option value="XXL">XXL</option>
+  </select>
+</form>
+<form>
+<button type="submit">Submit</button>
+</form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <p2>By Mohamed Zakaria</p2>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/gettyimages-1131949134-170667a.jpg b/Wireframe/gettyimages-1131949134-170667a.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -9,25 +9,45 @@
   <body>
     <header>
       <h1>Wireframe</h1>
+      <h2> Tourist Attractions in Africa.</h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+         Curiosity is wired into human nature. People want to see new places, experience unfamiliar cultures, taste different foods, and explore landscapes unlike their own.
+        Africa is a vast and diverse continent, home to some of the world's most breathtaking natural wonders and vibrant cultural traditions. From dramatic landscapes to wildlife safaris
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
+        <div>
+          <div style="text-align: center;">
+<img src="gettyimages-1131949134-170667a.jpg" alt="Centered Image" width="400" height="200" style="float:middle">
+        <h2>Safari-beach</h2>
+        <p>so much to offer, from spectacular scenery! friendly people to cultural treasures to blissful beaches.but above all els but it is the wildlife and Safari lifestyle that will draw you back, again and again.once you go on your first Safari, Africa gets into your blood. you develop a deep longing</p>
+        <a href="https://www.bing.com/search?q=safari+beach+holidays&PC=YA02&FORM=YASBRD">Read more</a>
+        </div>
       </article>
+
+      <article>
+         <div style="text-align: center;">
+        <img src="OIP.jpg" alt="Beach View" width="400" height="200"/>
+        <h2>Safari Beach View</h2>
+        <p>Enjoy the excitement of seeing one of the Big five in the wild along with the opportunity to relax in the warm sun with ocean rushing beneath you. use a little indulgence to temper the wildness. so where will you go on your beach Safari vacation?</p>
+         <a href="https://www.newmarketholidays.co.uk/holidays/safari/safari-beach-holidays/">Read more......</a>
+         </div>
+    </article>
+    <article>
+       <img src="Zebra.jpg" alt="Zebra" width="400" height="200"/>
+       <h2>Zebras</h2>
+       <p>Zebra are an iconic Safari animal, and fortunatly,common throughout virtually all safari areas.There are three species of Zebra .</p>
+       <a href="https://www.bing.com/search?q=safari+zebra&PC=YA02&FORM=YASBRD">Read more about Zebras</a>
+    </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+  <div>
+    <p>Find US ON</p>
+    <a href="https://facebook.com">Facebook</a>
+    <a href="https://instagram.com">Instagram</a>
+  </div>
     </footer>
   </body>
 </html>
+
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,58 +1,45 @@
-/* Here are some starter styles
-You can edit these or replace them entirely 
-It's showing you a common way to organise CSS 
-And includes solutions to common problems 
-As well as useful links to learn more */
 
-/* ====== Design Palette ======
- This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
- At work, a designer will give these to you based on the corporate brand, but while you are learning
- You can design it yourself if you like
- Inspect the starter design with Devtools
- Click on the colour swatches to see what is happening
- I've put some useful CSS you won't have learned yet
- For you to explore and play with if you are interested
- https://web.dev/articles/min-max-clamp
- https://scrimba.com/learn-css-variables-c026
-====== Design Palette ====== */
-:root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 system-ui;
-  --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
-  --container: 1280px;
-}
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
 body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
+  background-color: #3f13dc00;
+  color: #3a0ee8ea;
 }
 a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+ margin-top: 20px;
+  margin-bottom: 20px;
+  margin-right: 100px;
+  margin-left: 120px;
+}
+p {
+  color: #333;
+  font-size: 16px;
+  line-height: 1.5;
+  margin-bottom: 1em;
+}
+
+image {
+  width: 75;
+  height: 75;
+  margin: center;
 }
-img,
-svg {
-  width: 100%;
-  object-fit: cover;
+.myDiv {
+  border: 5px outset red;
+  background-color: rgba(218, 226, 229, 0.027)
+  text-align: center;
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
-main {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
+  main {
+  margin: 0;
+  padding: px;
+  background-color: rgb(211, 211, 211);
 }
 footer {
-  position: fixed;
-  bottom: 0;
   text-align: center;
+  padding: 5px;
+  background-color: rgba(224, 232, 229, 0.11);
+  color: rgb(7, 233, 49);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -64,7 +51,7 @@ https://gridbyexample.com/learn/
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--space);
+  gap: 15px;
   > *:first-child {
     grid-column: span 2;
   }
@@ -74,6 +61,7 @@ Setting the rules for how elements are placed in the article.
 Now laying out just the INSIDE of the repeated card/article design.
 Keeping things orderly and separate is the key to good, simple CSS.
 */
+
 article {
   border: var(--line);
   padding-bottom: var(--space);
@@ -87,3 +75,5 @@ article {
     grid-column: span 3;
   }
 }
+
+
diff --git a/gettyimages-1131949134-170667a.jpg b/gettyimages-1131949134-170667a.jpg