diff --git a/README.md b/README.md index 7ed589e..24b4ccb 100644 --- a/README.md +++ b/README.md @@ -1,107 +1,14 @@ -# AD - SBA - HTML/CSS/JavaScript - - +Access my website by navigating to the following link https://julwac9225.github.io/sba.javascript_3-page-website/ +# AD - SBA - HTML/CSS/JavaScript +Party Time 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 - - - - -## 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}` - - - - - +* The website created for the company Party Time that offers variety of party services and supplies. +The website style is user-friendly and includes 3 standard webpages: Home Page, Contact Us, and Our Services. -## How to Submit +### Technical specifications +* Home page includes 2 forms: Login and Registration; interactive top navigation bar; image; and short description of the services the company offers. -#### 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` +* Contact Us page includes interactive top navigation bar, images, company contact details, a gird container used for layout, a table used to create input form, a dropped down menu. -#### 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` +* Our Services page uses responsive grid to represent services. Each grid element has dropped down menu to view service options. diff --git a/contact_us.html b/contact_us.html new file mode 100644 index 0000000..185055a --- /dev/null +++ b/contact_us.html @@ -0,0 +1,82 @@ + + + + + + + + Party Time - Contact Us + + + + + + + + + + + + + + +
+

Party Time! We Bring Life to Your Party!

+
+ Home + Our Services + Contact Us + Search + + + +
+
+
+
+

Contact Us

+

Let's plan your event together! +
Stop by for a coffee or Leave us a message!

+
+
+
+ +
Our Location: 2345 Party Ave, Charlotte NC
+
Phone number: (704) 567-7869
+ + +
+
+
+ + + + + + + + + +
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/css/contact_us.css b/css/contact_us.css new file mode 100644 index 0000000..383230f --- /dev/null +++ b/css/contact_us.css @@ -0,0 +1,97 @@ +html { + font-family: Cambria, serif; + color: midnightblue; + font-size: 20px; +} +header { + background-color: plum; +} +body { + background-color: plum; + background-position: center; + background-size: cover; + width: 980px; + margin-left: auto; + margin-right: 30px; + padding: 10px; + padding-top: 0px; +} +.topNavBar { + background-color: grey; + overflow: hidden; +} + +.topNavBar a { + float: left; + display: block; + color: midnightblue; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +.topNavBar a:hover { + background-color:whitesmoke; + color: blue; +} + +.topNavBar a.active { + background-color:darkslategray; + color: white; +} + +.topNavBar .icon { + display: none; +} + +* { + box-sizing: border-box; + } + + input[type=text], select, textarea { + width: 100%; + padding: 12px; + border: 1px solid gainsboro; + margin-top: 6px; + margin-bottom: 16px; + resize: vertical; + } + + input[type=submit] { + background-color: gray; + color: white; + padding: 12px 20px; + border: none; + cursor: pointer; + } + + input[type=submit]:hover { + background-color: gray; + } + + .container { + border-radius: 5px; + background-color: pink; + padding: 10px; + } + + .column { + float: left; + width: 50%; + margin-top: 6px; + padding: 20px; + } + + .row:after { + content: ""; + display: table; + clear: both; + } + + @media screen and (max-width: 600px) { + .column, input[type=submit] { + width: 100%; + margin-top: 0; + } + } \ No newline at end of file diff --git a/css/home_page.css b/css/home_page.css new file mode 100644 index 0000000..8e35d11 --- /dev/null +++ b/css/home_page.css @@ -0,0 +1,74 @@ +html { + font-family: Cambria, serif; + color: midnightblue; + font-size: 15px; +} +header { + background-color: plum; +} +body { + background-color: plum; + background-position: center; + background-size: cover; + width: 980px; + margin-left: auto; + margin-right: 30px; + padding: 10px; + padding-top: 0px; +} +img { + float: right; +} +.topNavBar { + background-color: grey; + overflow: hidden; + } + + .topNavBar a { + float: left; + display: block; + color: midnightblue; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + } + + .topNavBar a:hover { + background-color:whitesmoke; + color: blue; + } + + .topNavBar a.active { + background-color:darkslategray; + color: white; + } + + .topNavBar .icon { + display: none; + } +aside { + float : left; + width : 320px; + height: 800px; + margin-right: 15px; + margin-bottom: 15px; + padding-left: 15px; + padding-right: 15px; + background-color: pink; + border : 1px solid lavenderblush; +} +aside form { + display:inline-block; + line-height: 2em; + margin-bottom: 100px; + text-align: right; +} +aside form { + display:inline-block; + line-height: 2em; + margin-top: 50px; + margin-bottom: 0px; + text-align: right; +} + \ No newline at end of file diff --git a/css/services.css b/css/services.css new file mode 100644 index 0000000..cf38551 --- /dev/null +++ b/css/services.css @@ -0,0 +1,96 @@ +html { + font-family: Cambria, serif; + color: midnightblue; + font-size: 20px; +} +header { + background-color: plum; +} +body { + background-color: plum; + background-position: center; + background-size: cover; + width: 980px; + margin: 40px; + padding: 10px; + padding-top: 0px; +} +.topNavBar { + background-color: grey; + overflow: hidden; +} + +.topNavBar a { + float: left; + display: block; + color: midnightblue; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +.topNavBar a:hover { + background-color:whitesmoke; + color: blue; +} + +.topNavBar a.active { + background-color:darkslategray; + color: white; +} + +.topNavBar .icon { + display: none; +} + +.wrapper { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(4, [col] 170px ) ; + grid-template-rows: repeat(3, [row] auto ); + background-color: plum; + color: grey; +} +.wrapper img { + float: center; +} +.container > div { + display: inline; +} +.container img { + max-width: 100%; + vertical-align: right; +} +.box { + color: white; + border-radius: 5px; + padding: 20px; + font-size: 150%; +} +.a { + grid-column: col / span 2; + grid-row: row ; + background-color: grey; +} +.b { + grid-column: col 3 / span 2 ; + grid-row: row ; + background-color: purple; +} +.c { + grid-column: col ; + grid-row: row 2 ; + background-color: teal; +} +.d { + grid-column: col 2 / span 3 ; + grid-row: row 2 ; + background-color: tomato; +} + +.e { + grid-column: col / span 4; + grid-row: row 3; + background-color: turquoise; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css deleted file mode 100644 index d17d83a..0000000 --- a/css/style.css +++ /dev/null @@ -1,9 +0,0 @@ -body { - background-color: navy; -} - - -object { - height: 100vh; - width: 100vh; -} diff --git a/img/Party-Background.jpg b/img/Party-Background.jpg new file mode 100644 index 0000000..20d5748 Binary files /dev/null and b/img/Party-Background.jpg differ diff --git a/img/Party-Time.jpg b/img/Party-Time.jpg new file mode 100644 index 0000000..898fdb1 Binary files /dev/null and b/img/Party-Time.jpg differ diff --git a/img/baloons.jpeg b/img/baloons.jpeg new file mode 100644 index 0000000..ef0aa77 Binary files /dev/null and b/img/baloons.jpeg differ diff --git a/img/baloons.png b/img/baloons.png new file mode 100644 index 0000000..f716fc9 Binary files /dev/null and b/img/baloons.png differ diff --git a/img/birthday.jpeg b/img/birthday.jpeg new file mode 100644 index 0000000..9d7f781 Binary files /dev/null and b/img/birthday.jpeg differ diff --git a/img/birthday.jpg b/img/birthday.jpg new file mode 100644 index 0000000..df0ad2b Binary files /dev/null and b/img/birthday.jpg differ diff --git a/img/catering.jpeg b/img/catering.jpeg new file mode 100644 index 0000000..21d7e26 Binary files /dev/null and b/img/catering.jpeg differ diff --git a/img/coffee_plan.jpg b/img/coffee_plan.jpg new file mode 100644 index 0000000..a1f5297 Binary files /dev/null and b/img/coffee_plan.jpg differ diff --git a/img/decoration.jpeg b/img/decoration.jpeg new file mode 100644 index 0000000..8d8f4cd Binary files /dev/null and b/img/decoration.jpeg differ diff --git a/img/fireworks.jpeg b/img/fireworks.jpeg new file mode 100644 index 0000000..551c58b Binary files /dev/null and b/img/fireworks.jpeg differ diff --git a/img/flowers.jpeg b/img/flowers.jpeg new file mode 100644 index 0000000..15fb735 Binary files /dev/null and b/img/flowers.jpeg differ diff --git a/img/gifts.jpeg b/img/gifts.jpeg new file mode 100644 index 0000000..4df34f4 Binary files /dev/null and b/img/gifts.jpeg differ diff --git a/img/gifts.jpg b/img/gifts.jpg new file mode 100644 index 0000000..28e8a67 Binary files /dev/null and b/img/gifts.jpg differ diff --git a/img/heart-balloon.jpg b/img/heart-balloon.jpg new file mode 100644 index 0000000..97656be Binary files /dev/null and b/img/heart-balloon.jpg differ diff --git a/img/location.jpg b/img/location.jpg new file mode 100644 index 0000000..5036a10 Binary files /dev/null and b/img/location.jpg differ diff --git a/img/myparty.jpeg b/img/myparty.jpeg new file mode 100644 index 0000000..741a80a Binary files /dev/null and b/img/myparty.jpeg differ diff --git a/img/party-organiser.jpeg b/img/party-organiser.jpeg new file mode 100644 index 0000000..dce7138 Binary files /dev/null and b/img/party-organiser.jpeg differ diff --git a/img/party.jpg b/img/party.jpg new file mode 100644 index 0000000..c3818bf Binary files /dev/null and b/img/party.jpg differ diff --git a/img/pool party.jpg b/img/pool party.jpg new file mode 100644 index 0000000..13efd96 Binary files /dev/null and b/img/pool party.jpg differ diff --git a/index.html b/index.html index 4dc0c72..04f6834 100644 --- a/index.html +++ b/index.html @@ -6,52 +6,70 @@ + Party Time - Home - - + + - + + + - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. - - - - - - + +
+

Party Time! We Bring Life to Your Party!

+
+ Home + Our Services + Contact Us + Search + + + +
+
+ + +

About Us

+ +

The Party Time Company offers services to make your family event unforgettable! We offer party supplies and rentals, assistance in your family event planning. Just anything you may need to make your event the best it can be! Whether it is a wedding, a child’s birthday, or a corporate event, we are here to offer you our superior service.

+ - - + - \ No newline at end of file diff --git a/js/contact_us.js b/js/contact_us.js new file mode 100644 index 0000000..31a8ec8 --- /dev/null +++ b/js/contact_us.js @@ -0,0 +1,8 @@ +function myFunction() { + var i = document.getElementById("myTopnav"); + if (i.className === "topNavBar") { + i.className += " responsive"; + } else { + i.className = "topNavBar"; + } + } \ No newline at end of file diff --git a/js/home_page.js b/js/home_page.js new file mode 100644 index 0000000..31a8ec8 --- /dev/null +++ b/js/home_page.js @@ -0,0 +1,8 @@ +function myFunction() { + var i = document.getElementById("myTopnav"); + if (i.className === "topNavBar") { + i.className += " responsive"; + } else { + i.className = "topNavBar"; + } + } \ No newline at end of file diff --git a/js/services.js b/js/services.js new file mode 100644 index 0000000..ec6b83e --- /dev/null +++ b/js/services.js @@ -0,0 +1,28 @@ +function myFunction() { + var i = document.getElementById("myTopnav"); + if (i.className === "topNavBar") { + i.className += " responsive"; + } else { + i.className = "topNavBar"; + } + } + +function renderGrid() { + var blocks = document.getElementById("wrapper").children; + var cols = 4, newleft, newtop; + for(var i = 1; i < blocks.length; i++){ + if (i % cols == 0) { + newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight); + blocks[i].style.top = newtop+"px"; + } else { + if(blocks[i-cols]){ + newleft = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight); + blocks[i].style.top = newleft+"px"; + } + newleft = (blocks[i-1].offsetLeft + blocks[i-1].offsetWidth); + blocks[i].style.left = newleft+"px"; + } + } +} +window.addEventListener("load", renderGrid, false); +window.addEventListener("resize", renderGrid, false); \ No newline at end of file diff --git a/services.html b/services.html new file mode 100644 index 0000000..4449995 --- /dev/null +++ b/services.html @@ -0,0 +1,101 @@ + + + + + + + + Party Time - Our Services + + + + + + + + + + + + + + +
+

Party Time! We Bring Life to Your Party!

+
+ Home + Our Services + Contact Us + Search + + + +
+
+

Our Services

+

We can make your event happen!

+
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + + + + + + \ No newline at end of file