platformps · fraryd · Jul 9, 2020 · Jul 9, 2020 · Jul 9, 2020 · Jul 10, 2020
diff --git a/Page2.html b/Page2.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lego Projects</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+<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://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/colors-external-javascript.js"></script>
+<link href="css/style.css" rel="stylesheet" type="text/css">
+
+
+<style>
+  p{
+  font-size: large;
+  color: black;
+}
+</style>
+
+
+
+</head>
+<body>
+
+
+
+<div class="row">
+
+  <!-- Left Columns -->
+  <div class="column1" >
+    <h3 style="color: black;"></h3>
+    <br>
+      <p>
+
+        <table border="4" bordercolor="black" align="center" max-width=720px;>
+          <tr>
+              <td>Color</td>
+              <td>Photo</th>
+              <td>Color</td>
+              <td>Photo</td>
+          </tr>
+          <tr>
+              <td>Red</td>
+              <td><img src="img\Red.png" alt="" border=3 class="Falcon" height=100 width=100></img></td>
+              <td>Blue</td>
+              <td><img src="img\Blue.png" alt="" border=3 class="Falcon" height=100 width=100></img></td>
+          </tr>
+          <tr>
+            <td>Green</td>
+            <td><img src="img\Green.png" alt="" border=3 class="Falcon" height=100 width=100></img></td>
+            <td>Black</td>
+            <td><img src="img\Black.png" alt="" border=3 class="Falcon" height=100 width=100></img></td>
+        </tr>
+        <tr>
+          <td>Light Gray</td>
+          <td><img src="img\LightGray.png" alt="" border=3 class="Falcon" height=100 width=100></img></td>
+          <td>Gray</td>
+          <td><img src="img\Gray.png" alt="" border=3 class="Falcon" height=100 width=100></img></td>
+      </tr>
+
+      </p>
+  </div>
+
+  <!-- Right Columns -->
+  <div class="column2">
+<p>
+<h2>Color</h2>
+<h2>Pallette</h2>
+
+<br>
+<img src="img/LegoThumb.png" alt="Colorful Legos" class="Falcon" width="100" height="100">
+</p>
+  </div>
+
+  <div class="column3">
+    <p>
+    </p>
+ <br>
+<nav>
+  <ul style="list-style-type:none;">
+  <li>
+    <h2><a href="javascript:homeAlert();">Home</a></h2>
+  </li>
+  <li>
+    <h2><a href="Page3.html">Contact</a></h2>
+  </li>
+</ul>
+</nav>
+
+  </div>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/Page3.html b/Page3.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lego Projects</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+<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://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/external-javascript.js"></script>
+<link href="css/style.css" rel="stylesheet" type="text/css">
+
+
+<style>
+  p{
+  font-size: large;
+  color: black;
+}
+</style>
+
+</head>
+<body>
+
+<div class="row">
+
+  <!-- Left Columns -->
+  <div class="column1" >
+    <h2 style="color: black;"></h2>
+    <br>
+    <p style="max-width:720px;">
+      <h3 align="center">Contact Form</h3>
+      <form action="" align="center">
+        <br><label for="name">First Name</label>
+        <input id="name" type="text" name="name" placeholder="Enter Your First Name">
+
+        <br><label for="name">Last Name</label>
+        <input id="name" type="text" name="name" placeholder="Enter Your Last Name">
+
+        <br><label for="email">Your Email</label>
+        <input id="email" type="text" name="email" placeholder="Enter your email address">
+
+        <br><label for="date">Date submitted</label>
+        <input id="date" type="date" name="date">
+
+        <br><label for="reason">Reasons your submission?</label>
+        <br>
+        <input id="reasons" type="checkbox" name="reasons" />Questions
+        <input id="reasons" type="checkbox" name="reasons" />Website problems
+        <input id="reasons" type="checkbox" name="reasons" />Comments
+
+        <br><textarea name="message" style="width:340px; height:200px;"></textarea>
+        <br>
+        <input type="submit">
+
+        </form> 
+    </p>
+    <br>
+  </div>
+
+  <!-- Right Columns -->
+  <div class="column2">
+<p>
+<h2>Contact Me</h2>
+<br>
+<img src="img/MailBox.png" alt="Lego Mail Box" class="Falcon" width="100" height="100">
+</p>
+  </div>
+
+  <div class="column3">
+ <br>
+<nav>
+  <ul style="list-style-type:none;">
+  <li>
+    <h2><a href="javascript:homeAlert();">Home</a></h2>
+  </li>
+  <li>
+    <h2><a href="Page2.html">Colors</a></h2>
+  </li>
+</ul>
+</nav>
+
+  </div>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/ReadMe2.md b/ReadMe2.md
@@ -0,0 +1,15 @@
+
+# This is my Lego Project site
+
+
+### Description
+* This site allows users to view Lego models, color options and contact support.
+* Page 1:  View the model and try the internal view dropdown option
+* Page 2:  Colors page takes you to the color palette.
+* Page 3:  Contact page shows a contact form.
+* The site is also mobile friendly. 
+
+
+* Source:
+  * https://fraryd.github.io/sba.javascript_3-page-website/ (View the page)
+  * https://github.com/fraryd (Links to an external site.)
diff --git a/css/style.css b/css/style.css
@@ -1,9 +1,98 @@
-body {
-    background-color: navy;
+html, body, div{
+  height: 100%;
+  margin: 0;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  overflow-x:hidden;
+  word-wrap:break-word;
 }
 
+table, th, td {
+  border: 1px solid black;
+  padding: 10px;
+}
+
+nav{
+  float: left;
+  display: block;
+  color: black;
+  text-align: left;
+  text-decoration: none;
+}
+
+a:link, a:visited {
+  background-color: lightblue;
+  color: black;
+  padding: 4px 4px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  border-radius: 4px;
+}
+
+a:hover, a:active {
+  background-color:  lightgray;
+}
+
+* {
+  box-sizing: border-box;
+}
 
-object {
-    height: 100vh;
-    width: 100vh;
+.Falcon {
+  width: 100%;
+  max-width: 160px;
+  height: auto;
 }
+
+/* columns */
+.column1 {
+  top: 0%;
+  left: 0%;
+  float: left;
+  width: 80%;
+  height: 100%;
+  text-align: left;
+  padding: 20px 10%;
+}
+
+.column2 {
+  top: 0%;
+  right: 0%;
+  position: fixed;
+  float: right;
+  background-color: lightgray;
+  width: 20%;
+  height: 55%;
+  text-align: left;
+  padding: 20px 2%;
+}
+
+.column3 {
+  top: 55%;
+  right: 0%;
+  position: fixed;
+  float: right;
+  background-color: gray;
+  width: 20%;
+  height: 100%;
+  text-align: left;
+  padding: 20px 2%;
+}
+
+/* clears floats after columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* mobile */
+@media only screen and (max-width:520px) {
+  .column1, .column2, .column3 {
+    top:0%;
+    left:0%; 
+    width:100%;
+    position: static;
+    padding: 5% 5%;
+    display: inline-table;
+  }
+}
diff --git a/img/Black.png b/img/Black.png
diff --git a/img/Blue.png b/img/Blue.png
diff --git a/img/Falcon.png b/img/Falcon.png
diff --git a/img/FalconInternal.png b/img/FalconInternal.png
diff --git a/img/Gray.png b/img/Gray.png
diff --git a/img/Green.png b/img/Green.png
diff --git a/img/LegoPile.png b/img/LegoPile.png
diff --git a/img/LegoThumb.png b/img/LegoThumb.png
diff --git a/img/LightGray.png b/img/LightGray.png
diff --git a/img/MailBox.png b/img/MailBox.png
diff --git a/img/Red.png b/img/Red.png
diff --git a/img/smFalcon.png b/img/smFalcon.png