-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
added a responsive coffee shop landing page #652
Open
daichianoop
wants to merge
2
commits into
you-dont-need:master
Choose a base branch
from
daichianoop:master
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
/image.png){kind=link}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| <title>Starbucks Coffee Website Landing Page</title> | ||
| </head> | ||
| <body> | ||
| <section> | ||
| <div class="circle"></div> | ||
| <header> | ||
| <a href="#"><img src="https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/logo.png" class="logo"></a> | ||
| <ul> | ||
| <li><a href="#">Home</a></li> | ||
| <li><a href="#">Menu</a></li> | ||
| <li><a href="#">What's New</a></li> | ||
| <li><a href="#">Contact</a></li> | ||
| </ul> | ||
| </header> | ||
| <div class="container"> | ||
| <div class="text-box"> | ||
| <h2>Its not just a Coffee <br>Its <span>Starbucks</span></h2> | ||
| <p>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.</p> | ||
| <a href="#">learn More</a> | ||
| </div> | ||
| <div class="img-box"> | ||
| <img src="https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/img1.png" class="starbucks" alt=""> | ||
| </div> | ||
| </div> | ||
| <ul class="thumb"> | ||
| <li><img src="https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/thumb1.png" onclick="imgSlider('https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/img1.png');changeCircleColor('#017143')"></li> | ||
| <li><img src="https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/thumb2.png" onclick="imgSlider('https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/img2.png');changeCircleColor('#0eb7495')"></li> | ||
| <li><img src="https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/thumb3.png" onclick="imgSlider('https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/img3.png');changeCircleColor('#d752b1')"></li> | ||
| </ul> | ||
| <ul class="social"> | ||
| <li><a href="#"><img src="https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/facebook.png"></a></li> | ||
| <li><a href="#"><img src="https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/instagram.png"></a></li> | ||
| <li><a href="#"><img src="https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/twitter.png"></a></li> | ||
| </ul> | ||
| </section> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <repository-url> | ||
| 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! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| function imgSlider(anything){ document.querySelector('.starbucks').src = anything; } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
JS is not allowed in this repo, only plain HTML and CSS is allowed.