diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..daccdaaa Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index d59a798a..890e53dc 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,24 @@ -# Business Site +This project was developed to create a responsive business website for BlueWave Scuba, featuring a full-width header video and a sign-up form with various inputs. The site was supposed to adapt seamlessly across devices with screen widths ranging from 320px to 1600px. -Replace this readme with your own information about your project. +The main challenges were: -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +- Integrating a full-width video in the header that remains fixed and scales properly across different screen sizes. +- Building a responsive sign-up form that adapts to various device widths, from small mobile screens to large desktops. -## The problem +To address the first challenge, I used a video element within the header and applied CSS properties such as object-fit: cover and position: sticky to ensure the video maintained its size and stayed fixed in the header. + +For the second challenge, I employed a combination of flexible layout techniques and media queries to ensure the form's responsiveness. I started by building the form with a mobile-first approach, then added media queries to adjust the layout and styling for larger screens. + +Tools and Technologies Used +Google Fonts: To enhance the typography. +Responsive Design: Utilizing media queries for a seamless experience across devices. + +If I had more time, I would: +- Add a navigation bar and a logo to improve site structure and branding. +- Include additional information about what BlueWave Scuba offers to provide visitors with a clear understanding of the site's purpose. +- Add additional form validation. +- Incorporate animations to enhance user interaction. -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +Deployed project: https://bluewavescuba.netlify.app diff --git a/code/index.html b/code/index.html index 85fe8e53..212ec9fa 100644 --- a/code/index.html +++ b/code/index.html @@ -1,17 +1,68 @@ - - - - - Business Site - - - -

Business name 🌻

+ - + + + + + + Blue-wave-scuba + - + +
+
+ +
+

Welcome to the world of scuba!

+

Whether you're just starting out or are a seasoned Dive Master, BlueWave Scuba is here to make every dive an + unforgettable adventure!

+
+
+
+
+
+
+

Join the community!

+
+
+
- - + + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/code/media/logo b/code/media/logo new file mode 100644 index 00000000..927b9887 Binary files /dev/null and b/code/media/logo differ diff --git a/code/media/scuba.mp4 b/code/media/scuba.mp4 new file mode 100644 index 00000000..3007e962 Binary files /dev/null and b/code/media/scuba.mp4 differ diff --git a/code/media/under-water.jpg b/code/media/under-water.jpg new file mode 100644 index 00000000..61001078 Binary files /dev/null and b/code/media/under-water.jpg differ diff --git a/code/media/underwater.jpg b/code/media/underwater.jpg new file mode 100644 index 00000000..22e2432b Binary files /dev/null and b/code/media/underwater.jpg differ diff --git a/code/media/whale.png b/code/media/whale.png new file mode 100644 index 00000000..4baeb3d6 Binary files /dev/null and b/code/media/whale.png differ diff --git a/code/style.css b/code/style.css index 529ed755..ccc74aa7 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,293 @@ -/* After you've linked the CSS file in the HTML, -this should turn the background blue ;) */ body { - background: blue; + background-color: #000f12; + text-align: center; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + color: white; + margin: 0; +} + +.hero { + position: relative; + width: 100%; + height: 60vh; + background-position: center; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.hero::after { + width: 100%; + height: 100%; + content: ''; + top: 0; + left: 0; + position: absolute; + background: rgba(0, 0, 0, 0.4); + z-index: 7; +} + +.hero video { + position: sticky; + top: 0; + max-width: 100%; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 5; + transform: none; +} + +video::-webkit-media-controls { + display: none !important; +} + +video::-moz-media-controls { + display: none !important; +} + +video::-o-media-controls { + display: none !important; +} + +video::-ms-media-controls { + display: none !important; +} + +.hero-caption { + max-width: 700px; + width: 75%; + position: absolute; + z-index: 10; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.hero-caption h1 { + flex: 1; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); +} + +.hero-caption p { + font-family: 'Roboto Condensed', sans-serif; + flex: 1; + word-spacing: 0.3em; + opacity: 0.7; +} + +.form-caption { + padding-top: 50px; + margin: 20px 0 0 0 black; +} + +.form-caption h2 { + text-transform: uppercase; + margin: 0; + font-size: 15px; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); + opacity: 0.8; +} + +fieldset { + border: none; + display: flex; + justify-content: center; +} + +label { + margin: 5px; + display: flex; + justify-content: space-between; + padding: 5px; + box-sizing: border-box; +} + +span { + margin-right: 10px; + display: flex; + align-items: center; + font-size: 3.5vw; + opacity: 0.8; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); +} + +input { + height: 23px; + max-width: 60%; + border-radius: 10px; + border: none; + box-sizing: border-box; + width: 100%; + background-color: #000f12; + box-shadow: inset 0 0 0 1px var(--essential-subdued, #818181); + color: white; + font-size: 12px; + padding-left: 15px; +} + +input::placeholder { + color: white; + opacity: 0.5; + font-size: 10px; + padding-left: 5px; +} + +input:focus { + outline: none; + box-shadow: 0 0 1px 1px white; + border: 1px solid white; +} + +.select-container { + width: 61%; + height: 23px; + font-size: 12px; + padding-left: 10px; + color: white; + border: none; + box-shadow: inset 0 0 0 1px var(--essential-subdued, #818181); + box-sizing: border-box; + background-color: #000f12; + border-radius: 10px; +} + +.select-container:focus { + outline: none; + box-shadow: 0 0 1px 1px white; + border: 1px solid white; +} + +button { + width: 50%; + padding: 5px; + margin-top: 10px; + border-radius: 10px; + border: none; + background-color: #000f12; + color: white; + font-size: 3vw; + cursor: pointer; + box-shadow: 0 0 1px 1px white; + transition: box-shadow 0.5s ease, transform 0.5s ease; +} + +button:hover { + box-shadow: 0 0 1px 1px white; +} + +footer { + margin-top: auto; + padding: 20px; +} + +.byline { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 12px; +} + +.byline p { + margin: 0; +} + +.byline a { + color: inherit; + text-decoration: none; + font-weight: normal; +} + +.byline img { + width: 30px; + height: 30px; + padding: 0 10px; +} + +/* Media Queries */ +@media (min-width: 426px) { + .hero-caption { + width: 65%; + font-size: 1.1rem; + } + + .form-caption h2 { + font-size: 20px; + + } + + span { + font-size: 15px; + } + + .select-container { + font-size: 13px; + } + + button { + font-size: 13px; + } + +} + +@media (min-width: 668px) { + .hero-caption { + width: 60%; + font-size: 1.2rem; + } + +} + +@media (min-width: 1024px) { + .hero-caption { + width: 100%; + font-size: 1.5rem; + } + + .form-caption { + padding-top: 60px; + + } + + label { + width: 300px; + } + + input { + height: 30px; + font-size: 15px; + } + + input::placeholder { + font-size: 13px; + } + + .select-container { + height: 30px; + } + + button { + font-size: 15px; + } + +} + + +@media (min-width: 1200px) { + .form-caption { + padding-top: 70px; + + } + + .form-caption h2 { + font-size: 25px; + } + + label { + width: 350px; + } + } \ No newline at end of file