Week 10 Files

dac18026 · Mar 29, 2021 · 472a4de · 472a4de
1 parent b69b788
commit 472a4de
Show file tree

Hide file tree

Showing 13 changed files with 278 additions and 0 deletions.
diff --git a/week-10/.DS_Store b/week-10/.DS_Store
diff --git a/week-10/.vscode/settings.json b/week-10/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "liveServer.settings.port": 5501,
+  "powermode.enabled": true,
+  "powermode.explosionSize": 5
+}
diff --git a/week-10/css/style.css b/week-10/css/style.css
@@ -0,0 +1,150 @@
+body {
+  background-image: url(../images/image.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+}
+
+nav {
+  background-color: rgb(8, 8, 8);
+}
+.navbar-brand {
+  padding-left: 2rem;
+  width: 100px;
+  height: auto;
+}
+.navbar-collapse {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 2rem;
+}
+.navbar-toggler {
+  margin-right: 2rem;
+}
+.nav-link {
+  color: white;
+}
+.nav-link:hover {
+  color: #ffffff86;
+}
+.nav-link:active {
+  color: orange;
+}
+.custom-toggler .navbar-toggler {
+  color: rgb(255, 255, 255);
+}
+
+.cont-one {
+  margin-bottom: 10rem;
+  margin-top: 10rem;
+  align-items: center;
+}
+.row {
+  align-items: center;
+}
+.download-title {
+  color: white;
+  margin-top: 15px;
+}
+#special-text {
+  color: white;
+}
+.download-text {
+  color: white;
+}
+.download-btn {
+  background-color: transparent;
+  border-color: white;
+  border-style: solid;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  color: white;
+  font-size: medium;
+  margin-bottom: 15px;
+}
+
+.card-body {
+  padding: 0px;
+}
+.card-title {
+  background-color: lightgrey;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+.free {
+  color: orange;
+  font-weight: bolder;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.form-slots {
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-bottom: 25px;
+}
+#form-text {
+  border-radius: 0;
+  border-top-style: hidden;
+  border-right-style: hidden;
+  border-left-style: hidden;
+  border-bottom-style: groove;
+  padding: 10px;
+}
+#form-btn {
+  background-color: orange;
+  border-radius: 0;
+  border: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  color: white;
+  font-size: larger;
+}
+
+.lower-section {
+  background-color: white;
+  padding-bottom: 30px;
+}
+.my-cont-2 {
+  background-color: white;
+}
+.socials-col {
+  display: flex;
+  justify-content: space-between;
+}
+.social-icons {
+  width: 70px;
+  height: auto;
+  padding-right: 10px;
+}
+.row-2 {
+  padding-top: 30px;
+}
+
+footer {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  background-color: rgb(8, 8, 8);
+  color: white;
+  padding: 30px;
+  padding-bottom: 3rem;
+  margin: 0;
+}
+footer p {
+  padding: 10px;
+  margin: 0;
+}
+.footer-icons {
+  fill: white;
+  padding-left: 2.5px;
+  padding-right: 2.5px;
+}
+.footer-col {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+}
diff --git a/week-10/images/Logo.png b/week-10/images/Logo.png
diff --git a/week-10/images/facebook.svg b/week-10/images/facebook.svg
diff --git a/week-10/images/google.svg b/week-10/images/google.svg
diff --git a/week-10/images/image.png b/week-10/images/image.png
diff --git a/week-10/images/instagram.svg b/week-10/images/instagram.svg
diff --git a/week-10/images/pinterest.svg b/week-10/images/pinterest.svg
diff --git a/week-10/images/rss.svg b/week-10/images/rss.svg
diff --git a/week-10/images/twitter.svg b/week-10/images/twitter.svg
diff --git a/week-10/index.html b/week-10/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Week 9 Assignment</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <nav class="navbar navbar-dark navbar-expand-md fixed-top">
+      <img src="images/Logo.png" alt="Logo" class="navbar-brand">
+      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
+          <span class=" custom-toggler navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarCollapse">
+          <ul class="navbar-nav">
+              <li class="navbar-item">
+                  <a href="#" class="nav-link">Features</a>
+              </li>
+              <li class="navbar-item">
+                  <a href="#" class="nav-link">About</a>
+              </li>
+              <li class="navbar-item">
+                  <a href="#" class="nav-link">Pricing</a>
+              </li>
+              <li class="navbar-item">
+                  <a href="#" class="nav-link">Reviews</a>
+              </li>
+              <li class="navbar-item">
+                <a href="#" class="nav-link">Contact</a>
+            </li>
+          </ul>
+      </div>
+    </nav>
+    <div class="container cont-one">
+      <div class="row row-1">
+        <div class="col-md-6">
+          <img src="images/Logo.png" alt="Big Logo">
+            <h2 class="download-title">Modern axure template for beautiful prototypes</h2>
+            <p id="special-text">__________</p>
+            <p class="download-text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
+              esse eligendi quae at quod, voluptatem eum voluptate, accusantium
+            </p>
+            <button class="download-btn">Download</button>
+        </div>
+          <div class="col-md-4 offset-md-2">
+            <div class="card">
+              <h4 class="card-title">Try Your <span class="free">FREE</span> Trial Today</h4>
+              <form action="mailto:daniel.collette@uconn.edu" method="POST" class="card-body">
+                <div class="form-slots">
+                  <input type="text" placeholder="Name" id="form-text" class="form-control"/>
+                  <input type="email" placeholder="Email" id="form-text" class="form-control"/>
+                  <input type="text" placeholder="Password" id="form-text" class="form-control"/>
+                </div>
+                <input type="submit" value="Get Started" id="form-btn" class="form-control"/>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <section class="lower-section">
+      <div class="container my-cont-2" style="margin-top: 3em;">
+        <div class="row row-2">
+          <div class="col-md-4">
+            <h3>Social Media</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni
+              officiis, quas eum enim
+            </p>
+          </div>
+          <div class="col-md-7 offset-md-1 socials-col">
+            <img src="images/instagram.svg" alt="insta" class="social-icons">
+            <img src="images/twitter.svg" alt="insta" class="social-icons">
+            <img src="images/google.svg" alt="insta" class="social-icons">
+            <img src="images/facebook.svg" alt="insta" class="social-icons">
+            <img src="images/rss.svg" alt="insta" class="social-icons">
+            <img src="images/pinterest.svg" alt="insta" class="social-icons">
+          </div>
+        </div>
+      </div>
+    </section>
+    <footer>
+      <div class="container">
+        <div class="row">
+          <div class="col footer-col">    
+            <span  class="footer-icons">        
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/></svg>
+            </span>
+            <span class="footer-icons">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"/></svg>
+            </span>
+            <span class="footer-icons">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.917 16.083c-2.258 0-4.083-1.825-4.083-4.083s1.825-4.083 4.083-4.083c1.103 0 2.024.402 2.735 1.067l-1.107 1.068c-.304-.292-.834-.63-1.628-.63-1.394 0-2.531 1.155-2.531 2.579 0 1.424 1.138 2.579 2.531 2.579 1.616 0 2.224-1.162 2.316-1.762h-2.316v-1.4h3.855c.036.204.064.408.064.677.001 2.332-1.563 3.988-3.919 3.988zm9.917-3.5h-1.75v1.75h-1.167v-1.75h-1.75v-1.166h1.75v-1.75h1.167v1.75h1.75v1.166z"/></svg>
+            </span>
+            <span class="footer-icons">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg>
+            </span>
+            <span class="footer-icons">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3.374 17c-.897 0-1.626-.727-1.626-1.624s.729-1.624 1.626-1.624 1.626.727 1.626 1.624-.729 1.624-1.626 1.624zm3.885 0c-.03-3.022-2.485-5.474-5.511-5.504v-2.406c4.361.03 7.889 3.555 7.92 7.91h-2.409zm4.081 0c-.016-5.297-4.303-9.571-9.592-9.594v-2.406c6.623.023 11.985 5.384 12 12h-2.408z"/></svg>
+            </span>
+            <span class="footer-icons">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg>
+            </span>
+          </div>
+        </div>
+        <div class="col footer-col">
+          <p>@2015 Auxre Themes</p>
+        </div>
+      </div>
+    </footer>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
+</body>
+</html> 
diff --git a/week-10/js/script.js b/week-10/js/script.js