platformps · alonsonina95 · Jul 9, 2020 · Jul 9, 2020 · Jul 9, 2020 · Jul 9, 2020
diff --git a/README.md b/README.md
@@ -1,27 +1,11 @@
-# AD - SBA - HTML/CSS/JavaScript
-
+# Website 
+Access to my website by clicking here -> https://alonsonina95.github.io/sba.javascript_3-page-website/homepage.html
 
 
 ### Description
-* In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly.
-
-* You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor.
-
-* Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements.
-
-* Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system.
-
-
-* Some resources for free content:
-  * Photos: `https://www.pexels.com/search/template/`
-  * Text: `https://www.lipsum.com/`
-  * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k`
+* A small website using vanilla javascript.
 
-* Useful API sites:
-  * https://rapidapi.com/ (Links to an external site.)
-  * https://any-api.com/ (Links to an external site.)
-  * https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.)
-  * https://apilist.fun/
+* Requirements for this website is to have 3 pages
 
 ### Deliverable:
 * A theme for your site that you feel comfortable with
@@ -33,8 +17,6 @@
   * Submit the project in a ZIP file
 
 
-
-
 ## Technical requirements
 
 * HTML
@@ -63,45 +45,3 @@
   * Use JSON or XML (Optional)
   * Use JQuery (Optional)
 
-
-
-## How to Download
-
-#### Part 1 - Forking the Project
-* To _fork_ the project, click the `Fork` button located at the top right of the project.
-
-
-#### Part 2 - Navigating to _forked_ Repository
-* Navigate to your github profile to find the _newly forked repository_.
-* Copy the URL of the project to the clipboard.
-
-#### Part 3 - Cloning _forked_ repository
-* Clone the repository from **your account** into the `~/dev` directory.
-  * if you do not have a `~/dev` directory, make one by executing the following command:
-  * * `mkdir ~/dev`
-  * navigate to the `~/dev` directory by executing the following command:
-  * * `cd ~/dev`
-  * clone the project by executing the following command:
-  * * `git clone https://github.com/${MYUSERNAME}/${NAMEOFPROJECT}`
-
-
-
-
-
-
-## How to Submit
-
-#### Part 1 -  _Pushing_ local changes to remote repository
-* from a _terminal_ navigate to the root directory of the _cloned_ project.
-* from the root directory of the project, execute the following commands:
-  * * add all changes
-  *   * `git add .`
-  * * commit changes to be pushed
-  *   * `git commit -m 'I have added changes'`
-  * * push changes to your repository
-  *   * `git push -u origin master`
-
-#### Part 2 - Submitting assignment
-* from the browser, navigate to the _forked_ project from **your** github account.
-* click the `Pull Requests` tab.
-* select `New Pull Request`
diff --git a/css/homepage.css b/css/homepage.css
@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
+
+body {
+    background-color: #C5CAE9;
+}
+
+#homepageText {
+    font-family: 'Bangers', cursive;
+}
diff --git a/css/loginForm.css b/css/loginForm.css
@@ -0,0 +1,86 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
+
+body {
+  background: #C5CAE9;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.container {
+  width: 420px;
+  margin: 16px auto;
+  font-size: 16px;
+}
+
+.container-header,
+.container p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.container-triangle {
+  width: 0;
+  margin-right: auto;
+  margin-left: auto;
+  border: 12px solid transparent;
+  border-bottom-color: #28d;
+}
+
+.container-header {
+  background: #28d;
+  padding: 20px;
+  font-size: 1.4em;
+  font-weight: normal;
+  text-align: center;
+  text-transform: uppercase;
+  color: #fff;
+}
+
+.login {
+  background: #ebebeb;
+  padding: 12px;
+}
+
+.login p {
+  padding: 12px;
+}
+
+.login input {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+  padding: 16px;
+  outline: 0;
+  font-family: inherit;
+  font-size: 0.95em;
+}
+
+#email, #password {
+  background: #fff;
+  border-color: #bbb;
+  color: #555;
+}
+
+#email:focus, #password:focus {
+  border-color: #888;
+}
+
+#submitButton {
+  background: #28d;
+  border-color: transparent;
+  color: #fff;
+  cursor: pointer;
+}
+
+#submitButton:hover {
+  background: #17c;
+}
+
+#submitButton:focus {
+  border-color: #05a;
+}
+
+#navImage {
+  cursor: pointer;
+}
diff --git a/css/signupForm.css b/css/signupForm.css
@@ -0,0 +1,86 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
+
+body {
+  background: #C5CAE9;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.container {
+  width: 420px;
+  margin: 16px auto;
+  font-size: 16px;
+}
+
+.container-header,
+.container p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.container-triangle {
+  width: 0;
+  margin-right: auto;
+  margin-left: auto;
+  border: 12px solid transparent;
+  border-bottom-color: #28d;
+}
+
+.container-header {
+  background: #28d;
+  padding: 20px;
+  font-size: 1.4em;
+  font-weight: normal;
+  text-align: center;
+  text-transform: uppercase;
+  color: #fff;
+}
+
+.login {
+  background: #ebebeb;
+  padding: 12px;
+}
+
+.login p {
+  padding: 12px;
+}
+
+.login input {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+  padding: 16px;
+  outline: 0;
+  font-family: inherit;
+  font-size: 0.95em;
+}
+
+#email, #password {
+  background: #fff;
+  border-color: #bbb;
+  color: #555;
+}
+
+#email:focus, #password:focus {
+  border-color: #888;
+}
+
+#submitButton {
+  background: #28d;
+  border-color: transparent;
+  color: #fff;
+  cursor: pointer;
+}
+
+#submitButton:hover {
+  background: #17c;
+}
+
+#submitButton:focus {
+  border-color: #05a;
+}
+
+#navImage {
+  cursor: pointer;
+}
diff --git a/css/style.css b/css/style.css
diff --git a/extensions/loginForm.html b/extensions/loginForm.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+  <link href="../css/loginForm.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="topContainer" style="width: 100%; height: 55px; background-color: white;">
+    <a class="navbar-brand" href="../homepage.html"><img id="navImage" style="width:50px;height:50px;" src="../img/platonic-icosahedron.gif"/></a>
+  </div>
+
+  <div class="container">
+    <div class="container-triangle"></div>
+    <h2 class="container-header">Log in</h2>
+    <form class="login">
+      <p><input id="email" type="email" placeholder="Email"></p>
+      <p><input id="password" type="password" placeholder="Password"></p>
+      <p><input id="submitButton" type="submit" value="Log in"></p>
+      <p><span>Don't have an account? Sign up <a href="./signupForm.html">here</a></span></p>
+    </form>
+  </div>
+  <footer>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+  </footer>
+</body>
+
+</html>
diff --git a/extensions/signupForm.html b/extensions/signupForm.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+  <link href="../css/signupForm.css" rel="stylesheet">
+</head> 
+<body>
+
+  <div class="topContainer" style="width: 100%; height: 55px; background-color: white;">
+    <a class="navbar-brand" href="../homepage.html"><img id="navImage" style="width:50px;height:50px;" src="../img/platonic-pyramid.gif"/></a>
+  </div>
+
+  <div class="container">
+    <div class="container-triangle"></div>
+    <h2 class="container-header">Sign Up Form</h2>
+    <form class="login">
+      <p><input id="name" type="name" placeholder="FirstName"></p>
+      <p><input id="lastName" type="lastname" placeholder="LastName"></p>
+      <p><input id="email" type="email" placeholder="Email"></p>
+      <p><input id="password" type="password" placeholder="Password"></p>
+      <p><input id="submitButton" type="submit" value="Sign up"></p>
+    </form>
+  </div>
+
+</body>
+</html>
+  <footer>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+  </footer>
+</body>
+
+</html>