platformps · LauraGodinez · Jul 9, 2020 · Jul 10, 2020 · Jul 10, 2020 · Jul 13, 2020
diff --git a/README.md b/README.md
@@ -1,4 +1,107 @@
 # AD - SBA - HTML/CSS/JavaScript
+https://lauragodinez.github.io/sba.javascript_3-page-website/
+
+
+-This website is a simple 3 paged HTML website that was built using the following:
+
+index.html: (HOME)
+
+- Used Bootstrap to create carousel. 
+   - Carousel has three image slides with text. 
+   - Slide 3 of Carousel text is within a table.
+- Used upsplash's free images for background. 
+- Used Google fonts for webpage font. 
+- Used Bootstap to create a navigation bar to link to other webpages. When size is minimized nav bar becomes a drop down.
+   - List used for nav bar.
+- grid system used.
+- HTML tags used.
+- Links used.
+- CSS selectors Used.
+
+
+profile.html (ABOUT ME)
+
+- Used bootstap for navbar
+- Used google fonts for webpage font.
+- Used upsplash's free images for background
+- Used bootstraps simple form template to create bestfriend% form. 
+- internal script used at footer for form function use.
+- grid system used. 
+- HTML tags used.
+- Internal Script Event at footer function.
+- Random number generator used for % of bestfriend.
+- Links Used.
+- CSS selectors used.
+
+contactMe.html (CONTACT ME )
+
+- Used bootstap for navbar
+- Used google fonts for webpage font.
+- Used upsplash's free images for background
+- Used bootstraps simple form template to contact form. 
+- internal script used at footer for form function use.
+- external script used.
+- grid system used. 
+- HTML tags used.
+- Internal Script Event at footer function.
+- Links Used.
+- CSS selectors used .
+
+
+
+REQUIREMENTS NEEDED:
+- [x] 3 html pages (3 pages used)
+- [x] Grid system (on all htmls)
+- [x] Html table(home.html slide 3)
+- [x] 1 form use (aboutme.html )
+- [ ] 2nd form use  (contactme.html)
+- [x] Drop down menu (nav bar when screen made smaller.)
+- [x] Web fonts (google fonts used )
+- [x] Use different types of content in forms ex txt img vid, gif (txt and img used)
+- [x] Regex validation (used for email on contactMe)
+
+
+CSS
+- [x] Inline styling (ON ALL 3 HTML PAGES)
+- [x] Internal styling 
+- [x] External styling 
+- [x] Css selector 1
+- [x] Css selector 2
+- [x] Css selector 3
+- [x] Css selector 4
+- [x] Css selector 5 (Can be found on css page used multiples ones)
+
+JavaScript
+
+- [x] External script ( .js file)
+- [x] Variables (.js file  and at footer function on contactme.html
+- [x] If statement (footer function at contactme.html)
+- [x] Loop(if and for loops used)
+- [x] 1 form of collections ()
+- [ ] Function/callback ()
+- [x] Events 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

diff --git a/contactMe.html b/contactMe.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- header begins here -->
+    <!-- header begins here -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link href="./css/style.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
+        crossorigin="anonymous">
+    <link href='https://fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'>
+
+    <!-- JS, Popper.js, and jQuery -->
+    <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>
+    <!-- <script type="text/javascript" src="./js/header-functions.js"></script> -->
+</head>
+
+<body>
+    </head>
+
+    <body id="contactMe-id" class="bg-id2">
+
+        <!-- nav bar -->
+        <nav class="navbar navbar-expand-lg navbar-light bg-light ">
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03"
+                aria-expanded="false" aria-label="Toggle navigation">
+                  <span class="navbar-toggler-icon"></span>
+                </button>
+            <a class="navbar-brand" href="#" style="font-family: 'Amatic SC';font-size: 25px;">Laura Godinez</a>
+
+            <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
+                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="./index.html">Home </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="./profile.html">About Me</a>
+                    </li>
+                    <li class="nav-item active">
+                        <a class="nav-link" href="./contactMe.html">Contact Me <span class="sr-only">(current)</span> </a>
+                    </li>
+                </ul>
+
+            </div>
+        </nav>
+        <!-- end nav bar -->
+        <div class="container-fluid ">
+            <div class="row ">
+                <div class="col col-cl ">
+                    <h1 style="font-size:90px; text-align:center">Contact Me </h1>
+                    <p style="text-align: center ;font-family: 'Amatic SC';font-size: 32px"> If you would like to send me an enquiry please feel free to get in touch by filling out this form and
+                        sending me a message. You can also contact me on <a href onclick="myLinkedIn()">LinkedIn</a> or find
+                        my work on <a href onclick="myGitHub()">GitHub</a>.</p>
+
+
+                </div>
+                <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12 ">
+
+                    <form onsubmit="return myfun(event)">
+                        <div class="form-group">
+                            <input type="text" class="form-control" id="name" placeholder="Your Name">
+
+                        </div>
+                        <div class="form-group">
+                            <input type="email" class="form-control" id="emailcheck" aria-describedby="emailHelp" placeholder="Enter email">
+                            <span id='showmsg' class='text-danger'></span>
+                        </div>
+                        <div class="form-group textarea-element">
+                            <textarea style="width:100%; height:128px" id="message" type="text" name="message" maxlength="1000" class="input-default"
+                                placeholder="Your Message"></textarea>
+
+                        </div>
+                        <div class="form-check">
+
+                        </div>
+                        <div class="form-group">
+                            <button class="btn btn-primary btn-md">Send</button>
+                        </div>
+                    </form>
+
+                </div>
+            </div>
+
+
+            <footer>
+                <script type="text/javascript">
+                    function myfun(event) {
+                        debugger;
+                        var emailcheck = document.getElementById('emailcheck').value;
+
+                        var pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+
+
+                        if (pattern.test(emailcheck)) {
+                            document.getElementById('showmsg').innerHTML = " Email Id correct";
+                            submit();
+
+                        }
+                        else { document.getElementById('showmsg').innerHTML = " Email Id is not correct"; }
+
+                        event.preventDefault();
+                    }
+                </script>
+                <script type="text/javascript " src="./js/myscript.js "></script>
+            </footer>
+
+
+    </body>
+
+
+</html>
diff --git a/css/style.css b/css/style.css
@@ -1,9 +1,71 @@
-body {
-    background-color: navy;
+#home-info {
+  border: 1px solid;
+  text-align: center;
+}
+#img-id {
+  width: 100%;
+  height: 200px;
+  border: 0px;
+  padding: 0px;
+  margin: 0px;
+}
+.centered {
+  position: absolute;
+  top: 23%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.car-text2 {
+  border: 01px solid rgba(255, 255, 255, 0.86);
+  background-color: white;
+  opacity: 0.6;
+}
+
+#bg-id {
+  background-image: url("../img/img5.jpg");
+  justify-content: center;
+  border: 3px;
+  font-family: "Amatic SC";
+  font-size: 25px;
+}
+
+th {
+  font-size: 90px;
+}
+
+tr {
+  font-size: 40px;
 }
 
+h1 {
+  font-size: 50px;
+}
+
+.form-group {
+  margin: 10px;
+  padding: 10px;
+  border: 5px;
+}
+button {
+  align-self: right;
+}
+
+#contactMe-id {
+  background: url(../img/img6.jpg);
+}
+.col-cl {
+  color: white;
+}
+.form-cl {
+  border: 01px solid rgba(255, 255, 255, 0.86);
+  padding: 50px 60px;
+  margin-top: 20vh;
+  -webkit-box-shadow: -1px 4px 26px 11px rgba(94, 94, 94, 1);
+  -moz-box-shadow: -1px 4px 26px 11px rgba(94, 94, 94, 1);
+  box-shadow: -1px 4px 26px 11px rgba(94, 94, 94, 1);
+}
 
-object {
-    height: 100vh;
-    width: 100vh;
+.bg-id2 {
+  font-family: "Amatic SC";
+  font-size: 25px;
 }
diff --git a/img/img.jpg b/img/img.jpg
diff --git a/img/img1.jpg b/img/img1.jpg
diff --git a/img/img2.jpg b/img/img2.jpg
diff --git a/img/img3.jpg b/img/img3.jpg
diff --git a/img/img4.jpg b/img/img4.jpg
diff --git a/img/img5.jpg b/img/img5.jpg
diff --git a/img/img6.jpg b/img/img6.jpg
diff --git a/img/platonic-icosahedron.gif b/img/platonic-icosahedron.gif
diff --git a/img/platonic-octahedron.gif b/img/platonic-octahedron.gif
diff --git a/img/platonic-pyramid.gif b/img/platonic-pyramid.gif