From 822413f91d7d57ed642cec476273ba829a522986 Mon Sep 17 00:00:00 2001
From: mabalal <95362819+mabalal@users.noreply.github.com>
Date: Wed, 15 Feb 2023 20:29:09 +0000
Subject: [PATCH 1/2] form-1st-edit

---
 Form-Controls/index.html |  67 +++++++++++++++++---
 Form-Controls/styles.css | 132 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 192 insertions(+), 7 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..1b343597 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -10,15 +10,68 @@
 </head>
 <body>
   <header>
-    <h1>Product Pick</h1>
+    <h1>Pick Your Product</h1>
   </header>
-  <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
-  </form>
+  <div class="contact_form">
+
+		<div class="formulario">			
+      <h1>Contacta-nos</h1>
+				<h3>Envia-nos a tua mensagem e respondemos em breve.</h3>
+
+
+					<form action="submeter-formulario.php" method="post">				
+
+						
+								<p>
+									<label for="nome" class="colocar_nome">Nome
+										<span class="obrigatorio">*</span>
+									</label>
+										<input type="text" name="introduzir_nome" id="nome" required="obrigatorio" placeholder="O teu nome">
+								</p>
+							
+								<p>
+									<label for="email" class="colocar_email">Email
+										<span class="obrigatorio">*</span>
+									</label>
+										<input type="email" name="introduzir_email" id="email" required="obrigatorio" placeholder="O teu email">
+								</p>
+						
+								<p>
+									<label for="telefone" class="colocar_telefone">Telefone
+									</label>
+										<input type="tel" name="introduzir_telefone" id="telefone" placeholder="O teu telefone">
+								</p>		
+							
+								<p>
+									<label for="website" class="colocar_website">Website
+									</label>
+										<input type="url" name="introduzir_website" id="website" placeholder="O teu website">
+								</p>		
+							
+								<p>
+									<label for="assunto" class="colocar_asunto">Assunto
+										<span class="obrigatorio">*</span>
+									</label>
+										<input type="text" name="introduzir_assunto" id="assunto" required="obrigatorio" placeholder="O que queres falar?">
+								</p>		
+							
+								<p>
+									<label for="mensagem" class="colocar_mensagem">Mensagem
+										<span class="obrigatorio">*</span>
+									</label>                     
+                               		  <textarea name="introduzir_mensagem" class="texto_mensagem" id="mensagem" required="obrigatorio" placeholder="Escreve a tua mensagem aqui..."></textarea> 
+                               	</p>	  								
+							
+								<button type="submit" name="enviar_formulario" id="enviar"><p>Enviar</p></button>
+
+								<p class="aviso">
+									<span class="obrigatorio"> * </span>Precisas mesmo de preencher estes campos.
+								</p>					
+						
+					</form>
+		</div>	
+	</div>
 
-  </main>
   <footer>
     <!-- change to your name-->
     <h2>By HOMEWORK SOLUTION</h2>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..1a2e4d89 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,132 @@
+/* importação da fonte do google fonts */ 
+@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
+
+
+body{
+	height: 100%; 
+	font-family: 'Noto Sans', sans-serif;
+  background-color: lightgray
+}
+
+
+.contact_form{	
+	width: 450px; 
+  height: auto;
+  margin: 80px auto;
+	border-radius: 10px; 
+	text-align: left; 
+	padding-top: 30px;
+	padding-bottom: 20px;  
+  background-color: #fbfbfb; 
+  padding-left: 30px; 
+}
+
+
+input{
+	background-color: #fbfbfb; 
+	width: 408px; 
+	height: 40px; 
+	border-radius: 5px;  
+	border-style: solid; 
+	border-width: 1px; 
+	border-color: #ec576b; 
+	margin-top: 10px;  
+	padding-left: 10px;
+  margin-bottom: 20px; 
+}
+
+
+textarea{
+  background-color: #fbfbfb; 
+	width: 405px; 
+	height: 150px; 
+	border-radius: 5px;  
+	border-style: solid; 
+	border-width: 1px; 
+	border-color: #ec576b; 
+	margin-top: 10px;  
+	padding-left: 10px;
+  margin-bottom: 20px; 
+  padding-top: 15px; 
+}
+
+
+label{
+  display: block; 
+	float: center; 	
+}
+
+
+button{
+	height: 45px; 
+	padding-left: 5px;
+	padding-right: 5px; 	
+	margin-bottom: 20px; 
+	margin-top: 10px; 	
+	text-transform: uppercase;
+	background-color: #ec576b; 
+	border-color: #ec576b; 
+	border-style: solid; 
+	border-radius: 10px;	
+	width: 420px;   
+  cursor: pointer;
+}
+
+
+button p{
+	color: #fff; 
+}
+
+
+span{
+	color: #1a1818; 
+}
+
+
+.aviso{
+	font-size: 13px;  
+	color: #0e0e0e;  
+}
+
+
+h1{
+	font-size: 35px;  
+	text-align: center; 
+	padding-bottom: 20px; 
+	color: black;
+}
+
+
+h3{
+	font-size: 14px; 
+	padding-bottom: 30px;
+	color: #0e0e0e;   
+}
+
+
+p{
+	font-size: 14px; 
+	color: #0e0e0e; 
+}
+
+
+::-webkit-input-placeholder {
+ color: #a8a8a8;
+}
+
+
+::-webkit-textarea-placeholder {
+ color: #a8a8a8;
+}
+
+
+.formulario input:focus{
+	outline:0;
+	border: 1px solid #97d848;
+}
+
+
+.formulario textarea:focus{
+	outline:0;
+	border: 1px solid #97d848;
+}
\ No newline at end of file

From 7779d7f3b37649392b2dd4450f642df50e9d2f47 Mon Sep 17 00:00:00 2001
From: mabalal <95362819+mabalal@users.noreply.github.com>
Date: Thu, 16 Feb 2023 18:16:43 +0000
Subject: [PATCH 2/2] 2nd-edit

---
 Form-Controls/index.html | 74 +++++++++++++++++++++++-----------------
 Form-Controls/styles.css | 34 ++++++++++++++----
 2 files changed, 71 insertions(+), 37 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 1b343597..ac9b08d7 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -10,13 +10,12 @@
 </head>
 <body>
   <header>
-    <h1>Pick Your Product</h1>
   </header>
   <div class="contact_form">
 
 		<div class="formulario">			
-      <h1>Contacta-nos</h1>
-				<h3>Envia-nos a tua mensagem e respondemos em breve.</h3>
+      <h1><b>London T-shirt Shop</b></h1>
+				<h3>Choose Your Type of T-shirt. Please don't forget to give details on mandetory field.</h3>
 
 
 					<form action="submeter-formulario.php" method="post">				
@@ -26,55 +25,68 @@ <h3>Envia-nos a tua mensagem e respondemos em breve.</h3>
 									<label for="nome" class="colocar_nome">Nome
 										<span class="obrigatorio">*</span>
 									</label>
-										<input type="text" name="introduzir_nome" id="nome" required="obrigatorio" placeholder="O teu nome">
+										<input type="text" name="introduzir_nome" id="nome" required="obrigatorio" placeholder="Yours name">
 								</p>
 							
 								<p>
 									<label for="email" class="colocar_email">Email
 										<span class="obrigatorio">*</span>
 									</label>
-										<input type="email" name="introduzir_email" id="email" required="obrigatorio" placeholder="O teu email">
+										<input type="email" name="introduzir_email" id="email" required="obrigatorio" placeholder="Yours e-mail">
 								</p>
 						
 								<p>
-									<label for="telefone" class="colocar_telefone">Telefone
+									<label for="telefone" class="colocar_telefone">Phone Number:
 									</label>
-										<input type="tel" name="introduzir_telefone" id="telefone" placeholder="O teu telefone">
-								</p>		
-							
-								<p>
-									<label for="website" class="colocar_website">Website
-									</label>
-										<input type="url" name="introduzir_website" id="website" placeholder="O teu website">
-								</p>		
-							
-								<p>
-									<label for="assunto" class="colocar_asunto">Assunto
-										<span class="obrigatorio">*</span>
-									</label>
-										<input type="text" name="introduzir_assunto" id="assunto" required="obrigatorio" placeholder="O que queres falar?">
-								</p>		
-							
+										<input type="tel" name="introduzir_telefone" id="telefone" placeholder="Yours Phone/mobile No.">
+								</p>	
+                
+                <p>
+                  <label for="color" class="color_tshirt">Choose your T-shirt:</label>
+                  <select name="color" id="color">
+                    <option value="Black">Black</option>
+                    <option value="White">White</option>
+                    <option value="Green">Green</option>
+                  </select>
+                </p>
+                
+                <p>
+                  <label for="size" class="size_tshirt">Choose your T-shirt color:</label>
+                  <select name="color" id="color">
+                    <option value="XS">Extra-Small</option>
+                    <option value="S">Small</Small></option>
+                    <option value="M">Medium</option>
+                    <option value="L">Large</option>
+                    <option value="XL">E-Large</option>
+                    <option value="XXL">XX-Large</option>
+                  </select>
+                </p>
+
+                <p>
+                  <label for="date" class="date_tshirt">Choose the date to deliver T-shirt:</label>
+                  <select name="date" id="date">
+                    <option value="1stweek">Within 1st Week</option>
+                    <option value="2ndweek">Within 2nd Week</option>
+                    <option value="3rdWeek">Within 3rd Week</option>
+                    <option value="4thweek">Within 4th Week</option>
+                  </select>
+                </p>
 								<p>
-									<label for="mensagem" class="colocar_mensagem">Mensagem
+									<label for="mensagem" class="colocar_mensagem">Message/feedback
 										<span class="obrigatorio">*</span>
 									</label>                     
-                               		  <textarea name="introduzir_mensagem" class="texto_mensagem" id="mensagem" required="obrigatorio" placeholder="Escreve a tua mensagem aqui..."></textarea> 
+                               		  <textarea name="introduzir_mensagem" class="texto_mensagem" id="mensagem" required="obrigatorio" placeholder="Please white here if you have any specific message."></textarea> 
                                	</p>	  								
 							
-								<button type="submit" name="enviar_formulario" id="enviar"><p>Enviar</p></button>
-
-								<p class="aviso">
-									<span class="obrigatorio"> * </span>Precisas mesmo de preencher estes campos.
-								</p>					
+								<button type="submit" name="enviar_formulario" id="enviar"><p>Submit</p></button>
+					
 						
 					</form>
 		</div>	
 	</div>
 
   <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    
   </footer>
 </body>
 
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index 1a2e4d89..2da887ca 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -20,8 +20,30 @@ body{
   background-color: #fbfbfb; 
   padding-left: 30px; 
 }
-
-
+#color {
+    background-color: #fbfbfb; 
+	width: 408px; 
+	height: 40px; 
+	border-radius: 5px;  
+	border-style: solid; 
+	border-width: 1px; 
+	border-color: #050505; 
+	margin-top: 10px;  
+	padding-left: 10px;
+  margin-bottom: 20px; 
+}
+#date {
+    background-color: #fbfbfb; 
+	width: 408px; 
+	height: 40px; 
+	border-radius: 5px;  
+	border-style: solid; 
+	border-width: 1px; 
+	border-color: #050505; 
+	margin-top: 10px;  
+	padding-left: 10px;
+  margin-bottom: 20px; 
+}
 input{
 	background-color: #fbfbfb; 
 	width: 408px; 
@@ -29,7 +51,7 @@ input{
 	border-radius: 5px;  
 	border-style: solid; 
 	border-width: 1px; 
-	border-color: #ec576b; 
+	border-color: #050505; 
 	margin-top: 10px;  
 	padding-left: 10px;
   margin-bottom: 20px; 
@@ -43,7 +65,7 @@ textarea{
 	border-radius: 5px;  
 	border-style: solid; 
 	border-width: 1px; 
-	border-color: #ec576b; 
+	border-color: #060505; 
 	margin-top: 10px;  
 	padding-left: 10px;
   margin-bottom: 20px; 
@@ -64,8 +86,8 @@ button{
 	margin-bottom: 20px; 
 	margin-top: 10px; 	
 	text-transform: uppercase;
-	background-color: #ec576b; 
-	border-color: #ec576b; 
+	background-color: #0f0d0d; 
+	border-color: #131212; 
 	border-style: solid; 
 	border-radius: 10px;	
 	width: 420px;   
