diff --git a/landing-page(Coffee Shop)/image.png b/landing-page(Coffee Shop)/image.png new file mode 100644 index 00000000..6ab7fab7 Binary files /dev/null and b/landing-page(Coffee Shop)/image.png differ diff --git a/landing-page(Coffee Shop)/index.html b/landing-page(Coffee Shop)/index.html new file mode 100644 index 00000000..e4dbbccd --- /dev/null +++ b/landing-page(Coffee Shop)/index.html @@ -0,0 +1,45 @@ + + + + + + + + Starbucks Coffee Website Landing Page + + +
+
+
+ + +
+
+
+

Its not just a Coffee
Its Starbucks

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor modi consequatur nulla, fugit odit rerum quaerat illo at! Nihil velit tempore debitis. Doloribus quasi perspiciatis fuga nulla aspernatur necessitatibus adipisci.

+ learn More +
+
+ +
+
+ + +
+ + + \ No newline at end of file diff --git a/landing-page(Coffee Shop)/readme.md b/landing-page(Coffee Shop)/readme.md new file mode 100644 index 00000000..06b8d2ab --- /dev/null +++ b/landing-page(Coffee Shop)/readme.md @@ -0,0 +1,57 @@ +# Starbucks Coffee Website Landing Page + +## Overview +This project is a responsive landing page for Starbucks Coffee, featuring a contemporary design with a focus on highlighting their offerings. The layout includes a header with navigation links, a promotional text section, an image showcase, thumbnail images for product selection, and social media links. + +## Features +- Responsive design that adapts to different screen sizes. +- Engaging hero section with a promotional message. +- Image slider functionality with thumbnail navigation. +- Social media integration for better brand engagement. + +## Technologies Used +- **HTML**: For the structure of the landing page. +- **CSS**: For styling the components using Flexbox and Grid for layout. +- **JavaScript**: For interactive functionality such as image slider and dynamic circle color changes. + +## Folder Structure +``` +/Starbucks_Landing_Page +│ +├── index.html // Main HTML file for the landing page +├── styles.css // CSS file for styling the page +├── script.js // JavaScript for interactivity +└── images/ // Optional: folder for storing any local images (if needed) +``` + +## Getting Started +1. **Clone the repository:** + ```bash + git clone + cd Starbucks_Landing_Page + ``` + +2. **Open the `index.html` file in a web browser to view the landing page.** + +## Instructions for Use +- The landing page features a header with links to various sections like Home, Menu, What's New, and Contact. +- The main content is organized into a text box and an image box showcasing Starbucks products. +- Users can click on thumbnail images to view larger versions of the corresponding product images. +- The design is optimized for both desktop and mobile viewing. + +## Notes +- The fonts are imported from Google Fonts for a modern look. +- Ensure you have an internet connection to load images and fonts from external sources. + +## Customization +To customize the landing page: +- Update the text content in the HTML file. +- Modify styles in the `styles.css` file for different designs or themes. +- Update the JavaScript in `script.js` for additional functionalities. + +## License +This project is open-source and available for modification and distribution. Enjoy building your own Starbucks-inspired landing page! + +--- + +For any further questions or issues, feel free to reach out! diff --git a/landing-page(Coffee Shop)/script.js b/landing-page(Coffee Shop)/script.js new file mode 100644 index 00000000..31a53084 --- /dev/null +++ b/landing-page(Coffee Shop)/script.js @@ -0,0 +1 @@ +function imgSlider(anything){ document.querySelector('.starbucks').src = anything; } \ No newline at end of file diff --git a/landing-page(Coffee Shop)/styles.css b/landing-page(Coffee Shop)/styles.css new file mode 100644 index 00000000..84540f46 --- /dev/null +++ b/landing-page(Coffee Shop)/styles.css @@ -0,0 +1,139 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,300;1,700&family=Poppins:wght@400;500;600;700;800;900&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +section{ + position: relative; + width: 100%; + min-width: 100vh; + padding: 100px; + display: flex; + justify-content: space-between; + align-items: center; + background: #fff; +} +header{ + position: absolute; + top: 0; + left: 0; + width: 100%; + padding: 20px 10px; + display: flex; + justify-content: space-between; + align-items: center; +} +header .logo{ + position: relative; + max-width: 80px; +} +header ul{ + position: relative; + display: flex; +} +header ul li{ + list-style: none; +} +header ul li a{ + display: inline-block; + color: #333; + font-weight: 800; + margin-left: 40px; + text-decoration: none; +} +.container{ + position: relative; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} +.container .text-box{ + position: relative; + max-width: 600px; +} +.container .text-box h2{ + color: #333; + font-size: 4em; + font-weight: 500px; +} +.container .text-box h2 span{ + color: #017143; + font-size: 1.2em; + font-weight: 900; +} +.container .text-box p{ + color: #333; +} +.container .text-box a{ + display: inline-block; + margin-top: 20px; + padding: 8px 20px; + background: #017143; + color: #fff; + border-radius: 40px; + font-weight: 500; + letter-spacing: 1px; + text-decoration: none; +} +.container .img-box{ + width: 600px; + display: flex; + justify-content: flex-end; + padding-right: 50px; + margin-top: 50px; +} +.container .img-box img{ + max-width: 340px; +} +.thumb{ + position: absolute; + left: 50%; + bottom: 20px; + transform: translateX(-50%); + display: flex; +} +.thumb li{ + list-style: none; + display: inline-block; + margin: 0 20px; + padding: 0; + cursor: pointer; + transition: 0.5s; +} +.thumb li:hover{ + transform: translateY(-15px); +} +.thumb li img{ + max-width: 600px; +} +.social{ + position: absolute; + top: 50%; + right: 30px; + transform: translateY(-50%); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.social li { + list-style: none; +} +.social li a{ + display: inline-block; + margin: 5px 0; + transform: scale(0.6); + filter: invert(1); +} +.circle{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #017143; + clip-path: circle(600px at right 800px); +} \ No newline at end of file