Finish Web

3 files changed, 32 insertions, 26 deletions

diff --git a/csci4131/hw2/strap012/MyForm.html b/csci4131/hw2/strap012/MyForm.html
index 2bf0273..261d8df 100644
--- a/csci4131/hw2/strap012/MyForm.html
+++ b/csci4131/hw2/strap012/MyForm.html
@@ -18,28 +18,28 @@
     </nav><br>
     <h2>Simple Form</h2>
     <form action="http://www-users.cselabs.umn.edu/~joh13266/echo.php/" method="post">
-        <p>
+        <p class="Form">
             <label>Name:
-                <input name="name" type="text" size="25" maxlength="30" id="name"><br><br>
+                <input name="name" pattern="[A-za-z0-9]+" required title="Contact's name must be alphanumeric." type="text" size="25" maxlength="30" id="name"><br><br>
             </label>
             <label>Category:
-            	<select name="category" type="text" id="category">
+            	<select name="category" required id="category" size=3>
             		<option value="Personal">Personal</option>
   			<option value="Academic">Academic</option>
                 	<option value="Industry">Industry</option>
             	</select><br><br>
             </label>
             <label>Location:
-            <input name="location" type="text" size="25" maxlength="250" id="location"><br><br>
+            <input name="location" required type="text" size="25" maxlength="250" id="location"><br><br>
             </label>
             <label>Contact Information:
-            <input name="contact" size="25" maxlength="250" id="contact"><br><br>
+            <input name="contact" required size="25" maxlength="250" id="contact"><br><br>
             </label>
             <label>Email:
-                <input name="email" Type="email" size="25" maxlength="30" id="email"><br><br>
+                <input name="email" required Type="email" size="25" maxlength="30" id="email"><br><br>
             </label>
             <label> URL
-                <input name="website" Type="url" size="25" maxlength="30" id="website"><br>
+                <input name="website" required Type="url" size="25" maxlength="30" id="website"><br>
             </label>
         </p>
         <p>
diff --git a/csci4131/hw2/strap012/myWidgets.html b/csci4131/hw2/strap012/myWidgets.html
index 301cbd6..79fc15e 100644
--- a/csci4131/hw2/strap012/myWidgets.html
+++ b/csci4131/hw2/strap012/myWidgets.html
@@ -20,13 +20,13 @@
     </nav>
     <br><br>
     <div class="grid">
-        <div class="griditem", id="grid0">
+        <div class="griditem" id="grid0">
 	        <iframe width="500" height="350" src="https://www.youtube.com/embed/videoseries?list=PLkNVwyLvX_TFBLHCvApmvafqqQUHb6JwF" allow="utoplay; encrypted-media" allowfullscreen></iframe>
         </div>
         <div class="griditem" id="grid1">
             <a class="twitter-timeline" data-lang="en" data-width="300" data-height="400" data-dnt="true" data-theme="light"
             href="https://twitter.com/elonmusk?ref_src=twsrc%5Etfw">Tweets by elonmusk</a>
-            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+            <script async src="https://platform.twitter.com/widgets.js"></script>
         </div>
         <div class="griditem" id="grid2">
             <blockquote class="instagram-media" data-instgrm-captioned
@@ -52,8 +52,8 @@
                 </div>
                 <div style="padding: 19% 0;"></div>
                 <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px"
-                        viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg"
-                        xmlns:xlink="https://www.w3.org/1999/xlink">
+                        viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink">
                         <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                             <g transform="translate(-511.000000, -20.000000)" fill="#000000">
                                 <g>
@@ -66,7 +66,7 @@
                     </svg></div>
                 <div style="padding-top: 8px;">
                     <div
-                        style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">
+                        style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:600; line-height:18px;">
                         View this post on Instagram</div>
                 </div>
                 <div style="padding: 12.5% 0;"></div>
@@ -121,8 +121,8 @@
             </blockquote>
             <script async src="https://www.instagram.com/embed.js"></script>
         </div>
-        <div class="griditem" id="password">
-            <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet'
+        <div class="griditem">
+            <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet'
                 type='text/css'>
             <link rel="stylesheet" href="passwordcheck.css" /><!-- Include Your CSS file here-->
             <script src="passwordcheck.js" defer></script><!-- Include Your js file here-->
diff --git a/csci4131/hw2/strap012/style.css b/csci4131/hw2/strap012/style.css
index 8b92eaa..1f03947 100644
--- a/csci4131/hw2/strap012/style.css
+++ b/csci4131/hw2/strap012/style.css
@@ -1,11 +1,17 @@
+body {
+    background-color:antiquewhite;
+}
+
 .linkTable {
     border: 1px solid black;
     margin-left: 20px;
     background-color: white;
+    border-collapse: separate;
 }
 
-label {
-    color: black;
+.smol {
+    max-height: 100%;
+    width: 6em;
 }
 
 #bigboi {
@@ -14,20 +20,22 @@ label {
     max-width: 28%;
 }
 
-.smol {
-    max-height: 100%;
-    width: 6em;
+.Form {
+    background-color: whitesmoke;
+    padding-left: 5%;
+    max-width: 15%;
 }
 
 .grid {
+    align-content: center;
     display: inline-grid;
-    grid-template-columns: auto auto auto;
-    grid-gap: 2%;
+    grid-template-columns: 40% 40%;
+    grid-template-rows: 30%;
+    gap: .1em 10%;
 }
 
 .griditem {
-    align-content: center;
-    padding: 1%;
+    padding: 10%;
 }
 
 table, th, td {
@@ -50,6 +58,4 @@ iframe {
     border: 0px;
 }
 
-body {
-    background-color:antiquewhite;
-}
+