diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..f673a71b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/README.md b/README.md index 0fd49a4b..f36dd52f 100755 --- a/README.md +++ b/README.md @@ -1,9 +1,50 @@ # Landing Page Project -## Instructions +# Project Name -The starter project has some HTML and CSS styling to display a static version of the Landing Page project. You'll need to convert this project from a static project to an interactive one. This will require modifying the HTML and CSS files, but primarily the JavaScript file. +This project is a website landing page that began as a static HTML page, with some pre-styed CSS. Assignment was to manipulate the landing page and add functionality to the user experience using the Document Object Model and JavaScript. DOM manipulation is the process of interacting with the DOM API to change or modify the HTML document that is displayed in the browser. The document can be changed to add or remove elements, update existing elements, rearrange existing elements, update the data in a web page without refreshing the page, change the overall layout of the page and respond to the user based on their behavior. Examples of DOM Manipulation in this project include: -To get started, open `js/app.js` and start building out the app's functionality +## Features +- [Feature 1]: Website features a beautiful hot air balloon animation that is triggered by the user scrolling down the page. As the user scrolls past four main sections, each section is highlighted by the continuing parallax animation occuring in the background. +- [Feature 2]: Navigation is built dynamically using JavaScript and DOM manipulation commands (append, appendChild, innerHTML) +- [Feature 3]: Section Active State based on the viewport, section and event. +- [Feature 4]: Scroll to anchor utilizing appropriate event Listener functionality and javascript methods +- ... -For specific, detailed instructions, look at the project instructions in the Udacity Classroom. +## Installation + +To get started with this project, follow these steps: + +1. Clone the repository: `git clone https://github.com/colorCodedDev/JS-DOM-landing-page-Project.git` +2. Open the project directory: `cd JS-DOM-landing-page-Project` +3. Open `index.html` in your preferred web browser. + +## Usage + +1. Personalized content can be added via the HTML pagwe. Each section can be updated to reflect the appropriate information and content reequired. +2. Advanced users can make changes to the animations, event listners, links, etc in the script.js file + +## Dependencies + +This project does not have any external dependencies. + +## Contributing + +Contributions are welcome! If you found a bug or have a suggestion, please open an issue or submit a pull request. + +## License + +- Licensed under © Udacity All Rights Reserved 2023 +- © colorCodedDev All Rights Reserved 2023 +-see the LICENSE.txt file in the directory for more information. + +## Acknowledgements + +- This is the final project submitted by Tomeka Durling to complete the OneTen 2023 Frontend Nano Degree Program. +- ... + +## Contact + +If you have any questions or need further assistance, feel free to contact the project maintainer at colorcodeddev@gmail.com. + +--- diff --git a/css/styles.css b/css/styles.css index 16145e98..891d67bc 100755 --- a/css/styles.css +++ b/css/styles.css @@ -10,28 +10,87 @@ /* ---- Base Rules ---- */ + +* { + padding: 0; + margin: 0; + font-family: 'Poppins', sans-serif; +} + body { background: rgb(136,203,171); - background: linear-gradient(0deg, rgba(136,203,171,1) 0%, rgba(0,13,60,1) 100%); - margin: 0; - font-family: 'Merriweather', serif; + background: linear-gradient(0deg, rgba(136,203,171,1) 0%, #003C49 100%); color: #fff; + padding-top: 5em; +} + +section.parallax { + position: relative; + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + z-index: -1; +} + +.parallax::before { + content: ''; + position: absolute; + bottom: 0; + width: 100%; + background: linear-gradient(to top, #06404B, transparent); + z-index: 100000; + } +.parallax img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 1000px; + object-fit: cover; + pointer-events: none; +} + +.parallax::after { + content: ''; + position: absolute; + bottom: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, #06404B, transparent); + z-index: 100000; + object-fit: contain; + pointer-events: none; +} + +.active { + border: 1px solid #051D19; +} + + + /* Typeography General*/ +/* #places-heading { + position: relative; + color: #fff; + font-size: 5em; + font-family: Sriracha; + text-align: center; + width: 30%; + z-index: 10; +} */ + h1 { font-family: 'Fira Sans', sans-serif; font-size: 3em; - margin: 2em 1rem; + margin-top: -8%; + opacity: .50; } -@media only screen and (min-width: 35em){ - h1 { - font-size: 7em; - margin: 2em 4rem 1em; - } -} h2 { border-bottom: 1px solid #cc1; @@ -40,6 +99,18 @@ h2 { color: #fff; } +h2:hover { + color: #06404B; +} + +h2::selection { + color: #06404B; +} + +h2.active { + color: #06404B; +} + p { line-height: 1.6em; color: #eee; @@ -47,31 +118,100 @@ p { /* ---- Layout Rules ---- */ main { - margin: 10vh 1em 10vh; + width: 100%; } .main-hero { - min-height: 40vh; - padding-top: 3em; + min-height: 80vh; + padding-top: 1em; } section { position: relative; - min-height: 80vh; + min-height: 50vh; + padding-top: 10%; + padding-bottom: 10%; +} + +section.active { + border: 1px solid #051D19; +} + + + +/* ---- Animation Rules ---- */ + +#sky-background { + --animate-duration: 10s; } +.selector { + z-index: 1; + --animate-duration: 30s; +} /* ---- Module Rules ---- */ /* Navigation Styles*/ -.navbar__menu ul { - padding-left: 0; + +nav { + background-color: transparent; + width: 100%; + height: 100px; + display: flex; + justify-content: space-evenly; + top: 0; + align-items: center; + position: sticky; +} + +.nav-logo-container { + width: 30%; +} + +.logo { + z-index: 0; + margin: 10%; + padding: 10%; + display: flex; + color: white; + font-size: 60px; + text-decoration: none; +} + +.nav-menu-container { + width: 70%; + position: sticky; +} + +nav ul { + list-style: none; margin: 0; - text-align: right; + padding: 0; + display: flex; + flex-direction: row; + justify-content: space-evenly } -.navbar__menu li { - display: inline-block; +nav ul li { + padding: 3%; +} + +.nav-menu-container { + margin-top: 4%; + position: sticky; +} + +nav ul li a{ + z-index: 0; + color: white; + text-decoration: none; + } + +.navbar__menu ul { + padding-left: 0; + margin: 0; + text-align: center; } .navbar__menu .menu__link { @@ -89,17 +229,35 @@ section { } /* Header Styles */ -.page__header { - background: #fff; - position: fixed; +header { top: 0; - width: 100%; - z-index: 5; + /* width: 100%; */ + height: 5em; + display: flex; + background: transparent; + align-items: center; + position: sticky; + transition: background-color 0.4s ease-in-out; +} + +header.scrolled { + background-color: #06404B; + z-index: 100000; + /* opacity: 0.9; */ +} + +header nav a { + transition: color 0.4s ease-in-out; +} + +header.scrolled nav a { + color: white; + z-index: 100001; } /* Footer Styles */ .page__footer { - background: #000; + background: #06404B; padding: 3em; color: #fff; } @@ -115,6 +273,12 @@ section { padding: 1em; text-align: left; } +@media only screen and (min-width: 35em){ + h1 { + font-size: 7em; + margin: 2em 4rem 1em; + } +} @media only screen and (min-width: 35em){ .landing__container { @@ -193,9 +357,10 @@ section:nth-of-type(3n + 1) .landing__container::after { /* ---- Theme State Rules ---- */ /* Section Active Styles */ /* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file. */ -section.your-active-class { - background: rgb(0, 0, 0); - background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%); +section.active { + border: 1px solid #051D19; + background: rgb(5, 29, 25); + background: linear-gradient(90deg, rgba(5, 29, 25, 0.1) 0%, rgba(6, 64, 75, 0.1) 100%); } section.your-active-class .landing__container::before { diff --git a/images/balloons.png b/images/balloons.png new file mode 100644 index 00000000..937c2800 Binary files /dev/null and b/images/balloons.png differ diff --git a/images/balloons2.png b/images/balloons2.png new file mode 100644 index 00000000..cfad9796 Binary files /dev/null and b/images/balloons2.png differ diff --git a/images/balloons3.png b/images/balloons3.png new file mode 100644 index 00000000..fe3457f1 Binary files /dev/null and b/images/balloons3.png differ diff --git a/images/pexels-no-name-66997.jpg b/images/pexels-no-name-66997.jpg new file mode 100644 index 00000000..b7e0da46 Binary files /dev/null and b/images/pexels-no-name-66997.jpg differ diff --git a/index.html b/index.html index baadb068..91828096 100755 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -6,54 +6,83 @@ Manipulating the DOM - - + + + + + + + + + + -
-