diff --git a/Join-Us.html b/Join-Us.html new file mode 100644 index 0000000..f5b4405 --- /dev/null +++ b/Join-Us.html @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + Join Us + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Check Out Some Verified Purchases

+ + + + + + + + + + + + MarkOtto@mdo
+ + + + + + + + + + + + + + + JacobThornton@fat
+ + + + + + + + + + + + + + + + Larry the Bird@twitter
+
+ + + +
+
+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ + +
+ +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Products.html b/Products.html new file mode 100644 index 0000000..e233559 --- /dev/null +++ b/Products.html @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + Products + + + +
+
+ Featured +
+
+
Make Up Products
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit,.

+ Join Us! +
+
+ 2 days ago +
+
+ +
+
+ makeup +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+ makeup +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua..

+
+
+
+
+
+ makeup +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua.

+
+
+ +
+ + \ No newline at end of file diff --git a/README.md b/README.md index ba2a07f..cb5bb6e 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,11 @@ # AD - SBA - HTML/CSS/JavaScript - +Link to site: https://stephsteve.github.io/sba.javascript_3-page-website/ ### Description +<<<<<<< master +* In this Skill-based Assessment, I have completed teh folowwing deliverables: +======= * 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. @@ -35,72 +38,53 @@ ## Technical requirements +>>>>>>> master -* 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 -* CSS - * 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) +*A theme for your site that you feel comfortable with +*Completed 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. +*Submit the project in a ZIP file -* Javascript - * 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) +*Index.html is the home page of the website where you see that the theme is a Make-up shop. +It includes: +-Dropped Down Menu +-Use of web fonts +- Different types of content in the form of text, images +-A form +-Inline and Internal CSS +*Products.html is where products and featued info are displayed. +It includes: +-Different types of content in the form of text, images +*Join-Us.html is where the company would ask customers to join their audience and provide reviews. +It includes: +-HTML table +-A form +-Different types of content in the form of Bootstrap Icons -## How to Download +*SBA.js includes javascript that is supposed to change some of the text in the jumbotron on the home page. +It includes: +-variables +-A functions +-A loop -#### Part 1 - Forking the Project -* To _fork_ the project, click the `Fork` button located at the top right of the project. +*Style.css is the style sheet where most of the css is located. +It includes: +-External CSS +-Multiple CSS selectors +-Web fonts -#### 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/style.css b/css/style.css index d17d83a..38af22d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,72 @@ -body { - background-color: navy; + + +.card-text-center { + + clear: both; + +} + +.card { + float: left; + margin: 50px; + margin-left: 125px; + +} + +.card-body { + + margin: 50px; + clear: both; + +} + +.form-container { +border: 25px outset lightcoral; +text-align: center; +margin: 550px; +margin-top: 25px; +padding: 25px; +padding-top: 100px; +width: 600px; +height: 800px; + } +.reviews-table { + margin: 50px; +} + +.figure { + height:250px; + width: 250px; + float: left; + margin: 150px; +} + +.home-page-form-container { +border: 25px outset lightcoral; +text-align: center; +margin: 550px; +margin-top: 50px; +padding: 25px; +padding-top: 100px; +width: 800px; +height: 500px; +clear: both; +} + +h1 { + color: lightcoral; +} -object { - height: 100vh; - width: 100vh; +#joinbtn:hover { + background-color: lightcoral; } + +.display-4 { + + font-family: 'Bungee Inline', cursive; +} + + + diff --git a/index.html b/index.html index 4dc0c72..a7a4a47 100644 --- a/index.html +++ b/index.html @@ -4,54 +4,141 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. - - - - - - - - - - - - - - + + + + + + + + + + + + + Home + + + + + + + + + + + +
+
+
+

The Make-Up Shop

+

Check out all of our great products and news! Free shipping on orders $35+

+
+
+ +
+
+ makeup +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+
+
+ makeup +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+
+
+ makeup +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+
+
+ + +
+ + +
+
+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ + +
+ +
+ +
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/SBA.js b/js/SBA.js new file mode 100644 index 0000000..80090cc --- /dev/null +++ b/js/SBA.js @@ -0,0 +1,13 @@ + + + + //let joinbtn = document.getElementById("joinbtn"); +//document.getElementById("newMessage").innerHTML = "Thank You!"; + +let p1 = document.getElementById("p1"); +var i; +for (let i = 0; i = p1.innerHTML.length; i++ ) { + document.getElementById(p1); + Element.innerHTML = "Click on the Products link in the menu so see more!"; + +} \ No newline at end of file