aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--.gitignore3
-rw-r--r--csci4131/hw2/strap012/MyForm.html14
-rw-r--r--csci4131/hw2/strap012/myWidgets.html14
-rw-r--r--csci4131/hw2/strap012/style.css30
4 files changed, 34 insertions, 27 deletions
diff --git a/.gitignore b/.gitignore
index 0292304..1d20b3c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ GPATH
GTAGS
GRTAGS
*synctex*
-*.pdf \ No newline at end of file
+*.pdf
+*.zip \ No newline at end of file
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;
-}
+