platformps · bwcsemaj · Jul 9, 2020 · Jul 9, 2020 · Jul 9, 2020 · Jul 9, 2020
diff --git a/README.md b/README.md
@@ -1,107 +1,50 @@
-# AD - SBA - HTML/CSS/JavaScript
+#JAMES COVINGTON SBA
 
+# Vacation State Picker
+Purpose of the website is to pick a random state for the user to vacation to that has a destination worth going to. Photos selected are random stock photos which may not correlate to the state they represent at this time. In order to provide feedback there is a Contact page where you can enter various information about yourself and expect to be able to receive a response. Finally the About page is meant to give more information about the project/team/whatever behind. As this moment it doesn't reflect anything but nonsense.
 
+- Access my site by navigating to the following link https://bwcsemaj.github.io/sba.javascript_3-page-website/
 
-### 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`
-
-* 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/
-
-### Deliverable:
-* A theme for your site that you feel comfortable with
-  * Complete all technical requirements for HTML, CSS, and Javascript
-  * Have markups of your pages
-  * Research for a public API that can provide you with content (Optional)
-  * Include a README file. The file should include technical specifications and description of your website.
-  * Host on GitHub,  include the link to your GitHub account in the README file(optional)
-  * Submit the project in a ZIP file
-
+## Languages:
+- JavaScript
+- HTML
+- CSS
 
+## Frameworks: 
+- Bootstrap
 
+## Features 
+- Able to randomly pick a state within the selected locations and display this information to the user.
 
 ## Technical requirements
 
 * HTML
-  * Have at least 3 pages, keep the grid system consistent as much as possible
-  * Use at least 10 different HTML tags
-  * Use HTML tables
-  * Implement at least two uses for forms
-  * Dropped Down Menu 
-  * Use web fonts
-  * Use different types of content in the form of text, images, videos, and GIFs
-  * Use regex validation
+  * ~~Have at least 3 pages, keep the grid system consistent as much as possible~~
+  * ~~Use at least 10 different HTML tags~~
+  * ~~Use HTML tables~~
+  * ~~Implement at least two uses for forms~~
+  * ~~Dropped Down Menu~~ 
+  * ~~Use web fonts~~
+  * ~~Use different types of content in the form of text, images, videos, and GIFs~~
+  * ~~Use regex validation~~
 
 * CSS
-  * Inline, internal, and external styling
-  * Use five different CSS selectors
-  * Don’t use too many fonts
-  * Use colors that complement each other
+  * ~~Inline, internal, and external styling~~
+  * ~~Use five different CSS selectors~~
+  * ~~Don’t use too many fonts~~
+  * ~~Use colors that complement each other~~
   * Use Flexbox (Optional)
   * Use SASS/SCSS (Optional)
-  * Use animations (Optional)
+  * ~~Use animations (Optional)~~
 
 * Javascript
-  * External scripts
-  * Use variables, if statements, loops, at least one form of collections, functions/call back, and events
+  * ~~External scripts~~
+  * ~~Use variables, if statements, loops, at least one form of collections, functions/call back, and events~~
   * Use AJAX (Optional) 
   * 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/about.html b/about.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!-- -------------------------START HEADER---------------------------- -->
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="James Covington">
+
+    <link href="./css/bootstrap.css" rel="stylesheet">
+    <link href="./css/style.css" rel="stylesheet">
+    <link href="./css/about.css" rel="stylesheet">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+    <script type="text/javascript" src="./js/header-functions.js"></script>
+
+</head>
+<!-- ----------------------END HEADER -------------------------------- -->
+
+<!-- ----------------------------------START BODY------------------------------ -->
+
+<body>
+    <!-- body begins here -->
+
+    <!-- START NAVIGATION -->
+    <!-- |LOGO|NAME|CONTACT|ABOUT -->
+    <nav class="navbar navbar-expand-xl navbar-dark bg-dark"
+        style="background-image: url(https://images.pexels.com/photos/7321/sea-water-ocean-horizon.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);">
+        <a class="navbar-brand" href="/">
+            <img id="logo"
+                src="https://purepng.com/public/uploads/large/purepng.com-earthearthplanetglobethird-planet-from-the-sun-1411526987450icb4m.png"
+                style="background: transparent;">
+        </a>
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="index.html">VACATION STATE PICKER</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="contact.html">CONTACT</a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" href="about.html">ABOUT</a>
+            </li>
+        </ul>
+        <form class="form-inline ml-auto">
+            <input class="form-control" type="search" placeholder="Search">
+            <button class="btn btn-outline-success" type="submit">Search</button>
+        </form>
+    </nav>
+    <!-- END NAVIGATION -->
+
+    <!-- START CENTER CONTENT -->
+    <div id="center-holder" class="container-fluid">
+        <div id="center-container" class="container-fluid col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+            <div class="row height-full">
+                <div class="container-fluid col-xs-12 col-sm-12 col-md-12 col-lg-3"
+                    style="color:white;background: rgba(7, 97, 201, 0.1);">
+                    <img src="https://images.pexels.com/photos/4701633/pexels-photo-4701633.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
+                        alt="Could not find image" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ml-0 p-1"
+                        style="opacity: .7;">
+                    <p>Day one the what walk then she. Demesne mention promise you justice arrived way. Or increasing
+                        to in <a href="http://google.com">especially</a> inquietude companions acceptance admiration.
+                        Outweigh it families distance
+                        wandered ye an. Mr unsatiable at literature connection favourable. We neglected mr perfectly
+                        continual dependent.</p>
+                </div>
+                <div id="paragraphs" class="col-xs-12 col-sm-12 col-md-12 col-lg-6"
+                    style="color:white;background: rgba(97, 158, 228, 0.1);">
+                    <h1 style="text-align: center;"><strong>About Vacation State Picker</strong></h1>
+                    <p><strong>Started</strong> is simply dummy text of the printing and typesetting industry. Lorem
+                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
+                        took a galley of type and scrambled it to make a type specimen book. It has survived not only
+                        five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
+                        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
+                        passages, and more recently with desktop publishing software like Aldus PageMaker including
+                        versions of Lorem Ipsum. </p>
+                    <p style="color:rgba(97, 158, 228, .8)"> Now eldest new tastes plenty mother called misery get.
+                        Longer excuse for county nor except met
+                        its things. Narrow enough sex moment <u>desire</u> are. Hold who what come that seen read age
+                        its.
+                        Contained or estimable earnestly so perceived. Imprudence he in sufficient cultivated. Delighted
+                        promotion improving acuteness an newspaper offending he. Misery in am secure theirs giving an.
+                        Design on longer thrown oppose am.</p>
+
+
+                    <div class="container-fluid col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                        <div class="row">
+                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"
+                                style="background: rgba(31, 108, 196, 0.1);">
+                                <h3 style="text-align: center;"><strong>What is Lorem Ipsum?</strong></h3>
+
+                                <p> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a
+                                    piece
+                                    of
+                                    classical Latin literature from 45 BC, making it over 2000 years old. Richard
+                                    McClintock, a
+                                    Latin professor at Hampden-Sydney College in Virginia, looked up one of the more
+                                    obscure
+                                    Latin
+                                    words, consectetur, from a Lorem Ipsum passage, and going through the cites of the
+                                    word in
+                                    classical literature, discovered the undoubtable source. Lorem Ipsum comes from
+                                    sections
+                                    1.10.32
+                                    and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
+                                    Cicero,
+                                    written in 45 BC. This book is a treatise on the theory of ethics, very popular
+                                    during the
+                                    Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
+                                    from a
+                                    line in
+                                    section 1.10.32.</p>
+                                <p>Day one the what walk then she. Demesne mention promise you justice arrived way. Or
+                                    increasing
+                                    to in especially inquietude companions acceptance admiration. Outweigh it families
+                                    distance
+                                    wandered ye an. Mr unsatiable at literature connection favourable. We neglected mr
+                                    perfectly
+                                    continual dependent.</p>
+                            </div>
+                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"
+                                style="background: rgba(118, 154, 196, .1);">
+                                <h3 style="text-align: center;"><strong>What is Lorem Ipsum?</strong></h3>
+
+                                <p> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a
+                                    piece
+                                    of
+                                    classical Latin literature from 45 BC, making it over 2000 years old. Richard
+                                    McClintock, a
+                                    Latin professor at Hampden-Sydney College in Virginia, looked up one of the more
+                                    obscure
+                                    Latin
+                                    words, consectetur, from a Lorem Ipsum passage, and going through the cites of the
+                                    word in
+                                    classical literature, discovered the undoubtable source. Lorem Ipsum comes from
+                                    sections
+                                    1.10.32
+                                    and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
+                                    Cicero,
+                                    written in 45 BC. This book is a treatise on the theory of ethics, very popular
+                                    during the
+                                    Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
+                                    from a
+                                    line in
+                                    section 1.10.32.</p>
+                                <p>Day one the what walk then she. Demesne mention promise you justice arrived way. Or
+                                    increasing
+                                    to in especially inquietude companions acceptance admiration. Outweigh it families
+                                    distance
+                                    wandered ye an. Mr unsatiable at literature connection favourable. We neglected mr
+                                    perfectly
+                                    continual dependent.</p>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="container-fluid col-xs-12 col-sm-12 col-md-12 col-lg-3"
+                    style="color:white;background: rgba(7, 47, 94, 0.1);">
+                    <img src="https://images.pexels.com/photos/2873541/pexels-photo-2873541.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
+                        alt="Could not find image" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ml-0 p-1"
+                        style="opacity: .7;">
+                    <p>Day one the what walk then she. Demesne mention promise you justice arrived way. Or increasing
+                        to in especially inquietude companions acceptance admiration. Outweigh it families distance
+                        wandered ye an. Mr unsatiable at literature connection favourable. We neglected mr perfectly
+                        continual dependent.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- END CENTER CONTENT -->
+
+    <!-- =================END FOOTER--========================= -->
+    <footer>
+        <script type="text/javascript" src="./js/footer-functions.js"></script>
+    </footer>
+    <!-- ==================START FOOTER ======================= -->
+
+</body>
+<!-- ------------------------END BODY ------------------------------------------------- -->
+
+</html>