diff options
Diffstat (limited to 'csci4131/hw2/strap012')
-rw-r--r-- | csci4131/hw2/strap012/MyForm.html | 14 | ||||
-rw-r--r-- | csci4131/hw2/strap012/myWidgets.html | 14 | ||||
-rw-r--r-- | csci4131/hw2/strap012/style.css | 30 |
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; -} + |