From dff7906617e98866d4db33b5a56a778647f085b7 Mon Sep 17 00:00:00 2001 From: StephSteve Date: Thu, 9 Jul 2020 09:32:33 -0400 Subject: [PATCH 01/10] SBA updates --- index.html | 131 +++++++++++++++++++++++++++++++++-------------------- page2.html | 0 page3.html | 0 3 files changed, 83 insertions(+), 48 deletions(-) create mode 100644 page2.html create mode 100644 page3.html diff --git a/index.html b/index.html index 4dc0c72..ec85d5a 100644 --- a/index.html +++ b/index.html @@ -4,54 +4,89 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/page2.html b/page2.html new file mode 100644 index 0000000..e69de29 diff --git a/page3.html b/page3.html new file mode 100644 index 0000000..e69de29 From 9f6162569cd7c82e7daf9d9492fafdb7bb82dd6c Mon Sep 17 00:00:00 2001 From: StephSteve Date: Thu, 9 Jul 2020 10:43:55 -0400 Subject: [PATCH 02/10] SBA updates --- Join-Us.html | 28 ++++++++++++++++++ Products.html | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 15 ++++++---- index.html | 4 +-- page2.html | 0 page3.html | 0 6 files changed, 118 insertions(+), 7 deletions(-) create mode 100644 Join-Us.html create mode 100644 Products.html delete mode 100644 page2.html delete mode 100644 page3.html diff --git a/Join-Us.html b/Join-Us.html new file mode 100644 index 0000000..9082e5e --- /dev/null +++ b/Join-Us.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + Join Us + \ No newline at end of file diff --git a/Products.html b/Products.html new file mode 100644 index 0000000..1c6d459 --- /dev/null +++ b/Products.html @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + Products + + + +
+
+ Featured +
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+ 2 days ago +
+
+ +
+
+ ... +
+

Some quick example text to build on the card title and make up the bulk of the card's + content.

+
+
+
+ ... +
+

Some quick example text to build on the card title and make up the bulk of the card's + content.

+
+
+
+
+
+ ... +
+

Some quick example text to build on the card title and make up the bulk of the card's + content.

+
+
+
+ ... +
+

Some quick example text to build on the card title and make up the bulk of the card's + content.

+
+
+
+ + \ No newline at end of file diff --git a/css/style.css b/css/style.css index d17d83a..68439bd 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,14 @@ -body { - background-color: navy; + + +.card-text-center { + clear: both; + } +.card { + float: left; + margin: 50px; -object { - height: 100vh; - width: 100vh; } + + diff --git a/index.html b/index.html index ec85d5a..2140475 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ crossorigin="anonymous"> - + Home @@ -34,7 +34,7 @@ +
+
+ + +
+ + +
+ + + From a9b26a2d7c361a11a38cd06bddb747aa2331b0a0 Mon Sep 17 00:00:00 2001 From: StephSteve Date: Thu, 9 Jul 2020 15:40:57 -0400 Subject: [PATCH 05/10] SBA Updates --- Join-Us.html | 90 +++++++++++++++++++++++++++++++++------------------ Products.html | 2 +- css/style.css | 9 ++++++ index.html | 27 ++++++++++++++-- js/SBA.js | 5 +++ 5 files changed, 98 insertions(+), 35 deletions(-) create mode 100644 js/SBA.js diff --git a/Join-Us.html b/Join-Us.html index fed7dba..f5b4405 100644 --- a/Join-Us.html +++ b/Join-Us.html @@ -23,7 +23,7 @@ integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"> - + Join Us @@ -32,27 +32,68 @@ - - - - + + - + - + - + @@ -65,34 +106,21 @@
- - + + + We'll never share your email with anyone else.
- - + +
-
- - -
-
- - +
+ +
+ + diff --git a/Products.html b/Products.html index 1c6d459..318bb5e 100644 --- a/Products.html +++ b/Products.html @@ -23,7 +23,7 @@ integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"> - + Products diff --git a/css/style.css b/css/style.css index 20df3fa..8b2c855 100644 --- a/css/style.css +++ b/css/style.css @@ -23,4 +23,13 @@ height: 800px; } +.reviews-table { + margin: 50px; +} + +.img-row { + float: left; + margin: 50px; +} + diff --git a/index.html b/index.html index 2c236a9..272059e 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@ integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"> - + Home @@ -70,8 +70,29 @@ -
- +
+
+
+

The Make-Up Shop

+

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

+
+
+ +
+
+ ... +
A caption for the above image.
+
+
+ ... +
A caption for the above image.
+
+
+ ... +
A caption for the above image.
+
+
+
diff --git a/js/SBA.js b/js/SBA.js new file mode 100644 index 0000000..3bf423f --- /dev/null +++ b/js/SBA.js @@ -0,0 +1,5 @@ +document.getElementById("joinbtn").addEventListener("click", function(){ + document.getElementById("newMessage").innerHTML = "Thank You!"; +}); + +if() \ No newline at end of file From 9b64fc32dcd6f7115c60d1b0634e0bdd6b7778c5 Mon Sep 17 00:00:00 2001 From: StephSteve Date: Thu, 9 Jul 2020 16:15:07 -0400 Subject: [PATCH 06/10] SBA Updates --- css/style.css | 21 +++++++++++++++++++-- index.html | 29 ++++++++++++++++++++++------- 2 files changed, 41 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index 8b2c855..511cbfb 100644 --- a/css/style.css +++ b/css/style.css @@ -8,6 +8,7 @@ .card { float: left; margin: 50px; + clear: both; } @@ -27,9 +28,25 @@ height: 800px; margin: 50px; } -.img-row { +.figure { + height:250px; + width: 250px; float: left; - margin: 50px; + margin: 150px; +} + +.home-page-form-container { +border: 25px outset rgb(23, 155, 73); +text-align: center; +margin: 550px; +margin-top: 50px; +padding: 25px; +padding-top: 100px; +width: 800px; +height: 500px; +clear: both; } + + diff --git a/index.html b/index.html index 272059e..a569e3e 100644 --- a/index.html +++ b/index.html @@ -80,16 +80,16 @@

The Make-Up Shop

- ... -
A caption for the above image.
+ makeup +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- ... -
A caption for the above image.
+ makeup +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- ... -
A caption for the above image.
+ makeup +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -98,7 +98,22 @@

The Make-Up Shop

- +
+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ + +
+ +
From c0f7473efc89136659eeb977b8f43ad80e26b5a8 Mon Sep 17 00:00:00 2001 From: StephSteve Date: Thu, 9 Jul 2020 16:53:48 -0400 Subject: [PATCH 07/10] SBA Updates --- Products.html | 8 +------- css/style.css | 9 +++++++++ js/SBA.js | 5 ++++- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/Products.html b/Products.html index 318bb5e..ad81e2b 100644 --- a/Products.html +++ b/Products.html @@ -66,13 +66,7 @@
Special title treatment
content.

-
- ... -
-

Some quick example text to build on the card title and make up the bulk of the card's - content.

-
-
+
\ No newline at end of file diff --git a/css/style.css b/css/style.css index 511cbfb..5f78fb4 100644 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,13 @@ .card-text-center { + clear: both; } .card { + display: block; float: left; margin: 50px; clear: both; @@ -47,6 +49,13 @@ height: 500px; clear: both; } +h1 { + color: lightcoral; +} + +#joinbtn:hover { + background-color: lightcoral; +} diff --git a/js/SBA.js b/js/SBA.js index 3bf423f..db0870d 100644 --- a/js/SBA.js +++ b/js/SBA.js @@ -2,4 +2,7 @@ document.getElementById("joinbtn").addEventListener("click", function(){ document.getElementById("newMessage").innerHTML = "Thank You!"; }); -if() \ No newline at end of file +if() { + + +} \ No newline at end of file From 169beb25ea3124c2040ddda7b761a6e6e3e3984e Mon Sep 17 00:00:00 2001 From: StephSteve Date: Fri, 10 Jul 2020 13:15:15 -0400 Subject: [PATCH 08/10] SBA Updates --- index.html | 2 +- js/SBA.js | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index a569e3e..7a9b48e 100644 --- a/index.html +++ b/index.html @@ -74,7 +74,7 @@

The Make-Up Shop

-

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

+

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

diff --git a/js/SBA.js b/js/SBA.js index db0870d..60f6393 100644 --- a/js/SBA.js +++ b/js/SBA.js @@ -1,8 +1,9 @@ -document.getElementById("joinbtn").addEventListener("click", function(){ +.addEventListener("click", function(){ + let joinbtn = document.getElementById("joinbtn"); document.getElementById("newMessage").innerHTML = "Thank You!"; }); - -if() { - +let p1 = document.getElementById("p1"); +while (p1.innerHTML.length < 74 ) { + let p1 = document.getElementById("p1"); } \ No newline at end of file From 435928fac3e8ef810bf4537dc2a7632a021f4d85 Mon Sep 17 00:00:00 2001 From: StephSteve Date: Fri, 10 Jul 2020 15:33:23 -0400 Subject: [PATCH 09/10] SBA last update --- Products.html | 24 +++++------ README.md | 116 ++++++++++++++------------------------------------ css/style.css | 19 +++++++-- index.html | 25 ++++++----- js/SBA.js | 16 ++++--- 5 files changed, 84 insertions(+), 116 deletions(-) diff --git a/Products.html b/Products.html index ad81e2b..e233559 100644 --- a/Products.html +++ b/Products.html @@ -33,9 +33,9 @@ Featured
-
Special title treatment
-

With supporting text below as a natural lead-in to additional content.

- Go somewhere +
Make Up Products
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit,.

+ Join Us!
2 days ago @@ -44,26 +44,26 @@
Special title treatment
- ... + makeup
-

Some quick example text to build on the card title and make up the bulk of the card's - content.

+

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

- ... + makeup
-

Some quick example text to build on the card title and make up the bulk of the card's - content.

+

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

- ... + makeup
-

Some quick example text to build on the card title and make up the bulk of the card's - content.

+

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

diff --git a/README.md b/README.md index 7ed589e..6a4991b 100644 --- a/README.md +++ b/README.md @@ -3,105 +3,53 @@ ### 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. +* In this Skill-based Assessment, I have completed teh folowwing deliverables: -* 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. +*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 -* 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. +*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 -* 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` +*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 -* 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/ +*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 -### 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 +*Style.css is the style sheet where most of the css is located. +It includes: +-External CSS +-Multiple CSS selectors +-Web fonts -## 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 -* 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) -* 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) -## 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/style.css b/css/style.css index 5f78fb4..38af22d 100644 --- a/css/style.css +++ b/css/style.css @@ -7,15 +7,21 @@ } .card { - display: block; - float: left; + float: left; + margin: 50px; + margin-left: 125px; + +} + +.card-body { + margin: 50px; clear: both; } .form-container { -border: 25px outset rgb(23, 155, 73); +border: 25px outset lightcoral; text-align: center; margin: 550px; margin-top: 25px; @@ -38,7 +44,7 @@ height: 800px; } .home-page-form-container { -border: 25px outset rgb(23, 155, 73); +border: 25px outset lightcoral; text-align: center; margin: 550px; margin-top: 50px; @@ -57,5 +63,10 @@ h1 { background-color: lightcoral; } +.display-4 { + + font-family: 'Bungee Inline', cursive; +} + diff --git a/index.html b/index.html index 7a9b48e..a7a4a47 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,14 @@ Home + + @@ -34,7 +42,7 @@
#FirstLastHandle

Check Out Some Verified Purchases
1 + + + + + + + + + + + + Mark Otto @mdo
2 + + + + + + + + + + + + + + + Jacob Thornton @fat
3 + + + + + + + + + + + + + + + + Larry the Bird @twitter