├── pepsi.png
├── Path 1.png
├── Path 2.png
├── Nutrition.png
├── images
    ├── user1.jpg
    ├── user2.jpg
    ├── user3.jpg
    ├── image1.jpg
    ├── image2.jpg
    └── image3.jpg
├── Amann
├── Contributing.md
├── README.md
├── TusharHacktoberfest7
├── Responsive Calculator
├── Code_of_Conduct.md
├── index.html
└── style.css


/pepsi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/surajsharma14/Pepsi/HEAD/pepsi.png


--------------------------------------------------------------------------------
/Path 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/surajsharma14/Pepsi/HEAD/Path 1.png


--------------------------------------------------------------------------------
/Path 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/surajsharma14/Pepsi/HEAD/Path 2.png


--------------------------------------------------------------------------------
/Nutrition.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/surajsharma14/Pepsi/HEAD/Nutrition.png


--------------------------------------------------------------------------------
/images/user1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/surajsharma14/Pepsi/HEAD/images/user1.jpg


--------------------------------------------------------------------------------
/images/user2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/surajsharma14/Pepsi/HEAD/images/user2.jpg


--------------------------------------------------------------------------------
/images/user3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/surajsharma14/Pepsi/HEAD/images/user3.jpg


--------------------------------------------------------------------------------
/images/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/surajsharma14/Pepsi/HEAD/images/image1.jpg


--------------------------------------------------------------------------------
/images/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/surajsharma14/Pepsi/HEAD/images/image2.jpg


--------------------------------------------------------------------------------
/images/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/surajsharma14/Pepsi/HEAD/images/image3.jpg


--------------------------------------------------------------------------------
/Amann:
--------------------------------------------------------------------------------
 1 | public class BinarySearch {
 2 | 
 3 |     // Function to perform binary search on a sorted array
 4 |     public static int binarySearch(int[] arr, int target) {
 5 |         int left = 0;
 6 |         int right = arr.length - 1;
 7 | 
 8 |         while (left <= right) {
 9 |             int mid = left + (right - left) / 2;
10 | 
11 |             if (arr[mid] == target) {
12 |                 return mid; // Element found, return its index
13 |             }
14 | 
15 |             if (arr[mid] < target) {
16 |                 left = mid + 1; // Search the right half
17 |             } else {
18 |                 right = mid - 1; // Search the left half
19 |             }
20 |         }
21 | 
22 |         return -1; // Element not found
23 |     }
24 | 
25 |     public static void main(String[] args) {
26 |         int[] sortedArray = {2, 4, 6, 8, 10, 12, 14, 16, 18, 20};
27 |         int target = 12;
28 | 
29 |         int result = binarySearch(sortedArray, target);
30 | 
31 |         if (result != -1) {
32 |             System.out.println("Element " + target + " found at index " + result);
33 |         } else {
34 |             System.out.println("Element " + target + " not found in the array.");
35 |         }
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/Contributing.md:
--------------------------------------------------------------------------------
 1 | # Contributing Guidelines
 2 | 
 3 | - The contributors will be allowed to work on the issue ONLY after it has been assigned to them.
 4 | - The contributions will be counted only for the time period of the event, after the time period ends contributions can be taken in but wont be counted for the final evaluation.
 5 | - Tampering or any unethical behaviour to the files or other participants will result in immediate disqualification.
 6 | - Each PR must be associated with only ONE issue.
 7 | - Don't open pull requests with minor text edits on other people's repositories.
 8 | - Don't create multiple issue request for one issue.
 9 | 
10 | - ## INSTRUCTIONS-
11 | 
12 | - Fork this Repository using the button at the top on right corner.
13 | - Clone your forked repository to your pc ( git clone "url from clone option.)
14 | - Create a new branch for your modifications (ie. `git branch new-user` and check it out `git checkout new-user` or simply do `git checkout -b new-user`)
15 | - Add your files (`git add -A`), commit (`git commit -m "added myself"`) and push (`git push origin new-user`)
16 | - Create a pull request
17 | - Star this repository
18 | 
19 | ##  Wait for Pull Request to merge
20 | 
21 | ### Happy Contributing !!
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | 
  3 | # Pepsi Website HTML Code
  4 | 
  5 | This is a sample HTML code for a webpage that represents a Pepsi product website. The code creates a webpage layout including navigation, hero section, product details, and special offers.
  6 | 
  7 | 
  8 | ## Introduction
  9 | 
 10 | This HTML code is a simple representation of a webpage for promoting Pepsi products. It includes various components like navigation, a hero section with product information, and details about special offers.
 11 | 
 12 | ## Components
 13 | 
 14 | ### 1. Navigation
 15 | 
 16 | - Navigation bar with three sections: left, center, and right.
 17 | - Categories: Category, Lifestyle, Books.
 18 | - Icons: Heart, Shopping Cart, Account.
 19 | 
 20 | ### 2. Hero Section
 21 | 
 22 | - Divided into left, center, and right sections.
 23 | - Promotes the freshness and features of the Pepsi product.
 24 | - Contains images, text, and icons.
 25 | 
 26 | ### 3. Right Hero Section
 27 | 
 28 | - Contains expandable sections for Description, Nutrition, and Ingredients.
 29 | - Provides additional details about the product.
 30 | 
 31 | ### 4. Special Offers
 32 | 
 33 | - Lists various special offers for Pepsi products.
 34 | 
 35 | ## Special Offers
 36 | 
 37 | Check out our special offers on Pepsi products:
 38 | 
 39 | - Buy 1 Get 1 Free
 40 | - 25% off on 2nd purchase
 41 | - Combo offers available
 42 | 
 43 | ## Usage
 44 | 
 45 | You can use this HTML code as a template or starting point for creating a webpage promoting Pepsi products. Customize the content, styles, and images according to your requirements and branding.
 46 | 
 47 | ---
 48 | 
 49 | ## Steps to Contribute
 50 | 
 51 | <p>
 52 | Step 1: Fork the repo and Go to your Git terminal and clone it on your machine.
 53 | </p>
 54 | 
 55 | `git clone https://github.com/<your_github_username>/Pepsi.git`
 56 | 
 57 | `cd Pepsi`
 58 | 
 59 | <p>
 60 | Step 2: Add an upstream link to the main branch in your cloned repo
 61 |  </p>
 62 | 
 63 | `git remote add upstream https://github.com/<your_github_username>/Pepsi.git`
 64 | 
 65 | <p>
 66 | Step 3: Keep your cloned repo up to date by pulling from upstream (this will also avoid any merge conflicts while committing new changes)
 67 | </p>
 68 | 
 69 | `git pull upstream main`
 70 | 
 71 | <p>
 72 | Step 4: Create your feature branch (This is a necessary step, so don't skip it)
 73 | </p>
 74 | 
 75 | `git checkout -b <branch-name>`
 76 | 
 77 | <p>
 78 | Step 5: Track and stage your changes.
 79 | </p>
 80 | 
 81 | `git status`
 82 | 
 83 | <p>
 84 |  Step 6: Add all the required changes
 85 | </p>
 86 |  
 87 | ```git add .```
 88 | 
 89 | <p>
 90 | Step 7: Commit all the changes (Write commit message as "Small Message")
 91 | </p>
 92 | 
 93 | `git commit -m "<your-commit-message>"`
 94 | 
 95 | <p>
 96 | Step 8: Push the changes for review
 97 | </p>
 98 | 
 99 | `git push origin <branch-name>`
100 | 
101 | <p>
102 | Step 9: Create a PR on Github. (Don't just hit the create a pull request button, you must write a PR message to clarify why and what are you contributing)
103 | </p>
104 | 


--------------------------------------------------------------------------------
/TusharHacktoberfest7:
--------------------------------------------------------------------------------
 1 | Certainly! Here's a simple Java program for a classic game called "Hangman." In this game, the computer selects a random word, and the player has to guess it by suggesting letters one at a time. The player has a limited number of attempts to guess the word correctly.
 2 | 
 3 | import java.util.Scanner;
 4 | import java.util.Random;
 5 | 
 6 | public class HangmanGame {
 7 |     public static void main(String[] args) {
 8 |         Scanner scanner = new Scanner(System.in);
 9 |         Random random = new Random();
10 | 
11 |         String[] words = { "java", "programming", "hangman", "computer", "code", "gaming" };
12 |         String wordToGuess = words[random.nextInt(words.length)];
13 |         int maxAttempts = 6;
14 |         int attempts = 0;
15 |         boolean[] guessedLetters = new boolean[wordToGuess.length()];
16 | 
17 |         System.out.println("Welcome to Hangman!");
18 |         System.out.println("Try to guess the word.");
19 | 
20 |         while (attempts < maxAttempts) {
21 |             displayWordStatus(wordToGuess, guessedLetters);
22 |             System.out.print("Enter a letter: ");
23 |             char guess = scanner.next().charAt(0);
24 | 
25 |             if (isGuessCorrect(wordToGuess, guessedLetters, guess)) {
26 |                 System.out.println("Correct guess!");
27 |             } else {
28 |                 attempts++;
29 |                 System.out.println("Incorrect guess. Attempts left: " + (maxAttempts - attempts));
30 |             }
31 | 
32 |             if (isWordGuessed(guessedLetters)) {
33 |                 System.out.println("Congratulations! You guessed the word: " + wordToGuess);
34 |                 break;
35 |             }
36 |         }
37 | 
38 |         if (attempts == maxAttempts) {
39 |             System.out.println("You ran out of attempts. The word was: " + wordToGuess);
40 |         }
41 | 
42 |         scanner.close();
43 |     }
44 | 
45 |     public static void displayWordStatus(String word, boolean[] guessedLetters) {
46 |         System.out.print("Word: ");
47 |         for (int i = 0; i < word.length(); i++) {
48 |             if (guessedLetters[i]) {
49 |                 System.out.print(word.charAt(i));
50 |             } else {
51 |                 System.out.print("_");
52 |             }
53 |             System.out.print(" ");
54 |         }
55 |         System.out.println();
56 |     }
57 | 
58 |     public static boolean isGuessCorrect(String word, boolean[] guessedLetters, char guess) {
59 |         boolean correctGuess = false;
60 |         for (int i = 0; i < word.length(); i++) {
61 |             if (word.charAt(i) == guess) {
62 |                 guessedLetters[i] = true;
63 |                 correctGuess = true;
64 |             }
65 |         }
66 |         return correctGuess;
67 |     }
68 | 
69 |     public static boolean isWordGuessed(boolean[] guessedLetters) {
70 |         for (boolean letterGuessed : guessedLetters) {
71 |             if (!letterGuessed) {
72 |                 return false;
73 |             }
74 |         }
75 |         return true;
76 |     }
77 | }
78 | 


--------------------------------------------------------------------------------
/Responsive Calculator:
--------------------------------------------------------------------------------
  1 | -------------------------------------------------------------------index.html----------------------------------------------------------------------------------------------
  2 | 
  3 | <!DOCTYPE html>
  4 | <html lang="en">
  5 | <head>
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Calculator</title>
  9 |     <link rel="stylesheet" type="text/css" href="style.css">
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |     <div class="calculator">
 15 |         <div class="display">
 16 |             <input type="text" id="result" value="" readonly>
 17 |         </div>
 18 |         <div class="buttons">
 19 |             <div class="row">
 20 |                 <button onclick="clearInput()">C</button>
 21 |                 <button onclick="appendToInput('7')">7</button>
 22 |                 <button onclick="appendToInput('8')">8</button>
 23 |                 <button onclick="appendToInput('9')">9</button>
 24 |                 <button onclick="appendToInput('/')">/</button>
 25 |             </div>
 26 |             <div class="row">
 27 |                 <button onclick="appendToInput('4')">4</button>
 28 |                 <button onclick="appendToInput('5')">5</button>
 29 |                 <button onclick="appendToInput('6')">6</button>
 30 |                 <button onclick="appendToInput('*')">*</button>
 31 |             </div>
 32 |             <div class="row">
 33 |                 <button onclick="appendToInput('1')">1</button>
 34 |                 <button onclick="appendToInput('2')">2</button>
 35 |                 <button onclick="appendToInput('3')">3</button>
 36 |                 <button onclick="appendToInput('-')">-</button>
 37 |             </div>
 38 |             <div class="row">
 39 |                 <button onclick="appendToInput('0')">0</button>
 40 |                 <button onclick="appendToInput('.')">.</button>
 41 |                 <button onclick="calculateResult()">=</button>
 42 |                 <button onclick="appendToInput('+')">+</button>
 43 |             </div>
 44 |         </div>
 45 |     </div>
 46 |     <script src="script.js"></script>
 47 | </body>
 48 | </html>
 49 | 
 50 | 
 51 | -------------------------------------------------------------------style.css----------------------------------------------------------------------------------------------
 52 | 
 53 | body{
 54 |     background: url("calci_bg.jpg");
 55 |     background-size: cover;
 56 |     background-repeat: no-repeat;
 57 |     background-attachment: fixed;
 58 |     overflow: hidden;
 59 |     font-family: Arial, sans-serif;
 60 |     display: flex;
 61 |     justify-content: center;
 62 |     align-items: center;
 63 |     height: 100vh;
 64 |     margin: 0;
 65 | }
 66 | 
 67 | .calculator {
 68 |     background-color: #e3e3e3;
 69 |     border-radius: 5px;
 70 |     width: 400px;
 71 |     padding: 10px;
 72 |     text-align: center;
 73 | }
 74 | 
 75 | .display input {
 76 |     width: 90%;
 77 |     padding: 10px;
 78 |     font-size: 20px;
 79 |     margin-bottom: 10px;
 80 | }
 81 | 
 82 | .buttons .row {
 83 |     display: flex;
 84 |     justify-content: space-between;
 85 | }
 86 | 
 87 | .buttons button {
 88 |     width: 23%;
 89 |     height: 70px;
 90 |     font-size: 24px;
 91 |     margin: 5px;
 92 |     border: none;
 93 |     border-radius: 5px;
 94 |     background-color: #212121;
 95 |     color: white;
 96 |     cursor: pointer;
 97 | }
 98 | 
 99 | .buttons button:hover {
100 |     background-color: #555;
101 | }
102 | 
103 | 
104 | 
105 | -------------------------------------------------------------------script.js----------------------------------------------------------------------------------------------
106 | 
107 | 
108 | let input = document.getElementById('result');
109 | 
110 | function appendToInput(value) {
111 |     input.value += value;
112 | }
113 | 
114 | function clearInput() {
115 |     input.value = '';
116 | }
117 | 
118 | function calculateResult() {
119 |     try {
120 |         input.value = eval(input.value);
121 |     } catch (error) {
122 |         input.value = 'Error';
123 |     }
124 | }
125 | 


--------------------------------------------------------------------------------
/Code_of_Conduct.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement.
 63 | All complaints will be reviewed and investigated promptly and fairly.
 64 | 
 65 | All community leaders are obligated to respect the privacy and security of the
 66 | reporter of any incident.
 67 | 
 68 | ## Enforcement Guidelines
 69 | 
 70 | Community leaders will follow these Community Impact Guidelines in determining
 71 | the consequences for any action they deem in violation of this Code of Conduct:
 72 | 
 73 | ### 1. Correction
 74 | 
 75 | **Community Impact**: Use of inappropriate language or other behavior deemed
 76 | unprofessional or unwelcome in the community.
 77 | 
 78 | **Consequence**: A private, written warning from community leaders, providing
 79 | clarity around the nature of the violation and an explanation of why the
 80 | behavior was inappropriate. A public apology may be requested.
 81 | 
 82 | ### 2. Warning
 83 | 
 84 | **Community Impact**: A violation through a single incident or series
 85 | of actions.
 86 | 
 87 | **Consequence**: A warning with consequences for continued behavior. No
 88 | interaction with the people involved, including unsolicited interaction with
 89 | those enforcing the Code of Conduct, for a specified period of time. This
 90 | includes avoiding interactions in community spaces as well as external channels
 91 | like social media. Violating these terms may lead to a temporary or
 92 | permanent ban.
 93 | 
 94 | ### 3. Temporary Ban
 95 | 
 96 | **Community Impact**: A serious violation of community standards, including
 97 | sustained inappropriate behavior.
 98 | 
 99 | **Consequence**: A temporary ban from any sort of interaction or public
100 | communication with the community for a specified period of time. No public or
101 | private interaction with the people involved, including unsolicited interaction
102 | with those enforcing the Code of Conduct, is allowed during this period.
103 | Violating these terms may lead to a permanent ban.
104 | 
105 | ### 4. Permanent Ban
106 | 
107 | **Community Impact**: Demonstrating a pattern of violation of community
108 | standards, including sustained inappropriate behavior,  harassment of an
109 | individual, or aggression toward or disparagement of classes of individuals.
110 | 
111 | **Consequence**: A permanent ban from any sort of public interaction within
112 | the community.
113 | 
114 | ## Attribution
115 | 
116 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
117 | version 2.0, available at
118 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
119 | 
120 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
121 | enforcement ladder](https://github.com/mozilla/diversity).
122 | 
123 | [homepage]: https://www.contributor-covenant.org
124 | 
125 | For answers to common questions about this code of conduct, see the FAQ at
126 | https://www.contributor-covenant.org/faq. Translations are available at
127 | https://www.contributor-covenant.org/translations.
128 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  7 | 
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9 |     <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
 10 | 
 11 |     <!-- BOOTSTRAP -->
 12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
 13 |         integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 14 | 
 15 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
 16 |         integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
 17 |         crossorigin="anonymous"></script>
 18 | 
 19 |     <link rel="stylesheet" href="style.css">
 20 |     <title>Pepsi</title>
 21 | </head>
 22 | 
 23 | <body>
 24 |     <div id="main">
 25 |         <div id="nav">
 26 |             <div id="nav-left">
 27 |                 <a href="#" class="animation-nav">Category</a>
 28 |                 <a href="#" class="animation-nav">Lifestyle</a>
 29 |                 <a href="#contact-us" class="animation-nav">Contact Us</a>
 30 |                 <a href="#testimonials" class="animation-nav">Users</a>
 31 |                 <a href="#gallery" class="animation-nav">Gallery</a>
 32 |               <a href="#" class="animation-nav">Books</a>
 33 |             </div>
 34 |             <div id="nav-center">
 35 |                 <div id="day"></div>
 36 |                 <div id="night"></div>
 37 |                 <div id="cntr-circle"></div>
 38 |             </div>
 39 |             <div id="nav-right">
 40 |                 <i class="ri-heart-line"></i>
 41 |                 <div id="cart">
 42 |                     <i class="ri-shopping-cart-2-line"></i>
 43 |                     <div id="cart-number">
 44 |                         <h6>2</h6>
 45 |                     </div>
 46 |                 </div>
 47 |                 <div id="account"></div>
 48 |             </div>
 49 |         </div>
 50 |     </div>
 51 |     <div id="hero" class="container">
 52 |         <div id="left-hero">
 53 |             <div class="offer">
 54 |                 <h1>Freshness</h1>
 55 |                 <h1>start's</h1>
 56 |                 <div id="here">
 57 |                     <h1>here</h1>
 58 |                     <div id="energy">
 59 |                         <i class="ri-flashlight-line"></i>
 60 |                     </div>
 61 |                 </div>
 62 |                 <h2>$9.99</h2>
 63 |                 <p>Fresh, tangy and tasty cold drink <br>with refreshing minty notes</p>
 64 |                 <div id="add-to-cart">
 65 |                     <div id="cart-btn">
 66 |                         <i class="ri-shopping-bag-line"></i>
 67 |                         <h3>Add to cart</h3>
 68 |                     </div>
 69 |                     <i id="wish" class="ri-heart-line"></i>
 70 |                 </div>
 71 |                 <img id="imgone" src="Path 1.png" alt="pic"
 72 |                 <i id="right-arrow" class="ri-arrow-right-line"></i>
 73 |             </div>
 74 |             <div id="special-offers">
 75 |                 <h2>Special Offers</h2>
 76 |                 <p>Check out our special offers on Pepsi products!</p>
 77 |                 <ul>
 78 |                     <li>Buy 1 Get 1 Free</li>
 79 |                     <li>25% off on 2nd purchase</li>
 80 |                     <li>Combo offers available</li>
 81 |                 </ul>
 82 |             </div>
 83 |         </div>
 84 |         <div id="center-hero">
 85 |             <div id="can-back">
 86 |                 <img id="pepsi" src="pepsi.png" alt="pepsi">
 87 |                 <img id="path2" src="Path 2.png" alt="pic">
 88 |                 <div id="small-ball">
 89 |                     <div id="ball1"></div>
 90 |                     <div id="ball2"></div>
 91 |                     <div id="ball3"></div>
 92 |                 </div>
 93 |                 <a id="scroll" href="#gallery">
 94 |                     <i class="ri-arrow-down-line"></i>
 95 |                 </a>
 96 |                 <div id="lft-float" class="float-comment">
 97 |                     <div class="pixone" id="pic"></div>
 98 |                     <h1><span>Moyo Shiro </span>has <br>just purchased</h1>
 99 |                     <div id="lock">
100 |                         <i class="ri-lock-line"></i>
101 |                     </div>
102 |                 </div>
103 |                 <div id="rght-float" class="float-comment">
104 |                     <div class="pixtwo" id="pic"></div>
105 |                     <h1><span>Kohaku</span>has liked<br>this item</h1>
106 |                     <div id="lock">
107 |                         <i class="ri-heart-fill"></i>
108 |                     </div>
109 |                 </div>
110 |             </div>
111 |         </div>
112 |         <div id="right-hero">
113 |             <div id="lft-rght">
114 |                 <i class="ri-arrow-left-line"></i>
115 |                 <i class="ri-arrow-right-line"></i>
116 |             </div>
117 |             <div id="expand-one" class="expand">
118 |                 <h1>Description</h1>
119 |                 <i class="ri-add-line"></i>
120 |             </div>
121 |             <p>A carbonated soft drink manufactured by PepsiCo. Originally
122 |                 created and developed in 1893 by Caleb Bradham and introduced
123 |                 as Brad's Drink, it was renamed as Pepsi-Cola in 1898, and
124 |                 then shortened to Pepsi in 1961. In 2022, it was the second
125 |                 most valuable soft drink brand worldwide, behind Coca-Cola.</p>
126 |             <hr>
127 |             <div class="expand">
128 |                 <h1>Nutrition</h1>
129 |                 <i class="ri-add-line"></i>
130 |             </div>
131 |             <img id="nutrition_pic" src="Nutrition.png" alt="image not found" height="130px" width="280px">
132 |             <hr>
133 |             <div class="expand">
134 |                 <h1 id="int">Ingredients</h1>
135 |                 <i class="ri-subtract-line"></i>
136 |             </div>
137 |             <p>Carbonated Water, Sugar, Colour (Caramel E150d),
138 |                 Acid (Phosphoric Acid), Flavourings (including Caffeine),
139 |                 Sweeteners (Acesulfame K, Sucralose).</p>
140 |         </div>
141 |     </div>
142 |     
143 | 
144 |     <div class="contact">
145 |         <section id="contact-us">
146 |             <div class="contact-con">
147 |                 <h2 id="ch2">Contact Us</h2>
148 |                 <p>If you have any questions or feedback, feel free to get in touch with us.</p>
149 |                 <form>
150 |                     <label for="name">Name:</label>
151 |                     <input type="text" id="name" name="name" required><br><br>
152 | 
153 |                     <label for="email">Email:</label>
154 |                     <input type="email" id="email" name="email" required><br><br>
155 | 
156 |                     <label for="message">Message:</label><br>
157 |                     <textarea id="message" name="message" rows="4" required></textarea><br><br>
158 | 
159 |                     <input type="submit" value="Submit">
160 |                 </form>
161 |             </div>
162 |         </section>
163 |     </div>
164 | 
165 |     <!-- Testimonials Section -->
166 |     <section id="testimonials">
167 |         <div class="container ">
168 |             <h1 class="text-center">Meet Our users</h1>
169 |             <p class="text-center space-b"><small>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</small></p>
170 |             <div class="row">
171 |                 <div data-aos="fade-right" data-aos-delay="100" class="col-md-4 ">
172 |                     <p class="review">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora eveniet
173 |                         ipsum hic ex ea repellat ullam. Placeat, asperiores unde. <br> <i
174 |                             class="fa fa-solid fa-twitter"></i><span>@username</span></p>
175 |                     <img src="images/user1.jpg" alt="">
176 |                 </div>
177 |                 <div data-aos="fade-down" class="col-md-4 middle ">
178 |                     <p class="review">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora eveniet
179 |                         ipsum hic ex ea repellat ullam. Placeat, asperiores unde. <br> <i
180 |                             class="fa fa-solid fa-twitter"></i><span>@username</span></p>
181 |                     <img src="images/user2.jpg" alt="">
182 |                 </div>
183 |                 <div data-aos="fade-left" data-aos-delay="100" class="col-md-4 ">
184 |                     <p class="review">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora eveniet
185 |                         ipsum hic ex ea repellat ullam. Placeat, asperiores unde. <br> <i
186 |                             class="fa fa-solid fa-twitter"></i><span>@username</span></p>
187 |                     <img src="images/user3.jpg" alt="">
188 |                 </div>
189 |             </div>
190 |         </div>
191 |     </section>
192 |     <!-- GALLERY -->
193 |     <section id="gallery">
194 |         <div class="container">
195 |             <h1 class="text-center">Gallery</h1>
196 |             <p class="text-center space-b"><small>Explore images related to Pepsi.</small></p>
197 |             <div class="row">
198 |                 <div class="col-md-4">
199 |                     <img src="images/image1.jpg" class="galimg" alt="Pepsi Image 1">
200 |                 </div>
201 |                 <div class="col-md-4">
202 |                     <img src="images/image2.jpg" class="galimg" alt="Pepsi Image 2">
203 |                 </div>
204 |                 <div class="col-md-4">
205 |                     <img src="images/image3.jpg" class="galimg" alt="Pepsi Image 3">
206 |                 </div>
207 |             </div>
208 |         </div>
209 |     </section>
210 | 
211 |     <!-- FAQ Section -->
212 |     <section id="faq">
213 |         <div class="container">
214 |             <h1 class="text-center">Frequently Asked Questions</h1>
215 |             <p class="text-center space-b"><small>Find answers to common questions about Pepsi.</small></p>
216 |             <div class="accordion" id="faqAccordion">
217 | 
218 |                 <!-- FAQ item 1 -->
219 |                 <div class="accordion-item">
220 |                     <h2 class="accordion-header" id="faqHeading1">
221 |                         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
222 |                             data-bs-target="#faqCollapse1" aria-expanded="false" aria-controls="faqCollapse1">
223 |                             Question 1: What are the different Pepsi flavors available?
224 |                         </button>
225 |                     </h2>
226 |                     <div id="faqCollapse1" class="accordion-collapse collapse" aria-labelledby="faqHeading1"
227 |                         data-bs-parent="#faqAccordion">
228 |                         <div class="accordion-body">
229 |                             Answer 1: Pepsi offers a variety of flavors including Original, Diet Pepsi, Pepsi Zero Sugar, and more.
230 |                         </div>
231 |                     </div>
232 |                 </div>
233 |             
234 |                 <!-- FAQ item 2 -->
235 |                 <div class="accordion-item">
236 |                     <h2 class="accordion-header" id="faqHeading2">
237 |                         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
238 |                             data-bs-target="#faqCollapse2" aria-expanded="false" aria-controls="faqCollapse2">
239 |                             Question 2: Can I purchase Pepsi products online?
240 |                         </button>
241 |                     </h2>
242 |                     <div id="faqCollapse2" class="accordion-collapse collapse" aria-labelledby="faqHeading2"
243 |                         data-bs-parent="#faqAccordion">
244 |                         <div class="accordion-body">
245 |                             Answer 2: Yes, you can purchase Pepsi products online through our official website or authorized retailers.
246 |                         </div>
247 |                     </div>
248 |                 </div>
249 |             
250 |                 <!-- Add more FAQ items as needed -->
251 |                 
252 |                 <!-- FAQ item 3 -->
253 |                 <div class="accordion-item">
254 |                     <h2 class="accordion-header" id="faqHeading3">
255 |                         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
256 |                             data-bs-target="#faqCollapse3" aria-expanded="false" aria-controls="faqCollapse3">
257 |                             Question 3: Are Pepsi products suitable for a vegetarian diet?
258 |                         </button>
259 |                     </h2>
260 |                     <div id="faqCollapse3" class="accordion-collapse collapse" aria-labelledby="faqHeading3"
261 |                         data-bs-parent="#faqAccordion">
262 |                         <div class="accordion-body">
263 |                             Answer 3: Yes, Pepsi products are suitable for a vegetarian diet. They do not contain any non-vegetarian ingredients.
264 |                         </div>
265 |                     </div>
266 |                 </div>
267 |             
268 |                 <!-- Add more FAQ items as needed -->
269 |             
270 |             </div>
271 |         </div>
272 |     </section>
273 | </body>
274 | 
275 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 |     font-family: "gilroy";
  6 | 
  7 | }
  8 | 
  9 | a{
 10 |     text-decoration: none;
 11 |     color: #333;
 12 | }
 13 | 
 14 | html, body{
 15 |     width: 100%;
 16 |     height: 100%;
 17 |     scroll-behavior: smooth;
 18 | }
 19 | 
 20 | #main{
 21 |     width: 100%;
 22 |     height: 10%;
 23 |     background-color: aliceblue;
 24 | }
 25 | 
 26 | #nav{
 27 |     width: 100%;
 28 |     height: 100%;
 29 |     display: flex;
 30 |     justify-content: space-between;
 31 |     align-items: center;
 32 | }
 33 | 
 34 | 
 35 | #nav-left{
 36 |     width: calc(100%/3);
 37 |     height: 100%;
 38 |     display: flex;
 39 |     justify-content: space-evenly;
 40 |     align-items: center;
 41 |     font-family: "product san";
 42 |     font-weight: 500;
 43 |     /* letter-spacing: 1px; */
 44 |     transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
 45 | }
 46 | 
 47 | #nav-left a:hover {
 48 |     color: #2BAE68;
 49 |     transform: scale(1.05);
 50 |     text-decoration: underline;
 51 |     text-underline-offset: 5px;
 52 | }
 53 | 
 54 | 
 55 | #nav-center{
 56 |     width: calc(100%/3);
 57 |     height: 100%;
 58 |     display: flex;
 59 |     justify-content: center;
 60 |     align-items: center;
 61 | }
 62 | 
 63 | #day{
 64 |     width: 20px;
 65 |     height: 20px;
 66 |     background-color: rgb(204, 204, 204);
 67 |     border-radius: 50%;
 68 | }
 69 | 
 70 | #night{
 71 |     width: 20px;
 72 |     height: 20px;
 73 |     background-color: rgb(37, 37, 37);
 74 |     border-radius: 50%;
 75 | }
 76 | 
 77 | #cntr-circle{
 78 |     position: absolute;
 79 |     margin-top: -50px;
 80 |     width: 250px;
 81 |     height: 250px;
 82 |     border-radius: 50%;
 83 |     border: 1px solid rgb(175, 175, 175);
 84 | }
 85 | 
 86 | #nav-right{
 87 |     width: calc(100%/3);
 88 |     height: 100%;
 89 |     display: flex;
 90 |     align-items: center;
 91 |     justify-content: space-evenly;
 92 | }
 93 | 
 94 | 
 95 | #nav-right i{
 96 |     font-size: 22px;
 97 | }
 98 | 
 99 | #cart{
100 |     position: relative;
101 |     
102 | }
103 | 
104 | #cart:hover{
105 |     color:#2BAE68;
106 | }
107 | 
108 | .ri-heart-line:hover{
109 |     color:#2BAE68;
110 | }
111 | 
112 | #cart-number{
113 |     position: absolute;
114 |     top: -30%;
115 |     margin-left: 10px;
116 |     width: 15px;
117 |     height: 15px;
118 |     background-color: red;
119 |     border-radius: 50%;
120 |     display: flex;
121 |     align-items: center;
122 |     justify-content: center;
123 |     color: #fff;
124 |     font-weight: 400;
125 | }
126 | 
127 | 
128 | #account{
129 |     width: 40px;
130 |     height: 40px;
131 |     border-radius: 50%;
132 |     background-image: url(https://images.unsplash.com/photo-1583336191538-a1beaefd3ad4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80);
133 |     background-size: cover;
134 |     background-position: center;
135 | }
136 | 
137 | #hero{
138 |     width: 100%;
139 |     height: 950px;
140 |     display: flex;
141 |     align-items: center;
142 |     justify-content: space-between;
143 |     flex-wrap: wrap;
144 | }
145 | 
146 | #left-hero{
147 |     width: calc(100%/3);
148 |     height: 100%;
149 |     display: flex;
150 |     flex-direction: column;
151 |     padding-left: 65px;
152 |     justify-content: center;
153 | }
154 | 
155 | #left-hero h1{
156 |     font-family: "product sans";
157 |     font-size: 4vw;
158 | }
159 | 
160 | #here{
161 |     display: flex;
162 |     align-items: center;
163 | }
164 | 
165 | #energy{
166 |     display: flex;
167 |     align-items: center;
168 |     justify-content: center;
169 |     margin-left: 5px;
170 |     width: 30px;
171 |     height: 30px;
172 |     border-radius: 50%;
173 |     background-color: rgb(233, 51, 51);
174 |     color: #fff;
175 | }
176 | 
177 | #left-hero h2{
178 |     margin-top: 5px;
179 |     font-size: 2.5vw;
180 |     font-weight: 500;
181 | }
182 | 
183 | #left-hero p{
184 |     font-family: "product sans";
185 |     font-size: 15px;
186 |     letter-spacing: .5px;
187 |     margin-top: 25px;
188 | }
189 | 
190 | #add-to-cart{
191 |     position: relative;
192 |     display: flex;
193 |     align-items: center;
194 |     justify-content: center;
195 | }
196 | 
197 | #cart-btn{
198 |     position: absolute;
199 |     margin-top: 100px;
200 |     left: 0%;
201 |     display: flex;
202 |     justify-content: center;
203 |     align-items: center;
204 |     width: 140px;
205 |     height: 44px;
206 |     border-radius: 50px;
207 |     background-color: rgb(0, 0, 0);
208 |     color: #fff;
209 |     transition: all 0.5s ease;
210 | }
211 | 
212 | #cart-btn:hover {
213 |     width: 144px;
214 |     height: 47px;
215 |     background-color: #2BAE68;
216 | 
217 | }
218 | 
219 | #cart-btn h3{
220 |     font-family: "product sans";
221 |     font-size: 12px;
222 |     padding-top: 5px;
223 | }
224 | 
225 | #cart-btn i{
226 |     margin-right: 12px;
227 | }
228 | 
229 | #wish{
230 |     position: absolute;
231 |     margin-top: 100px;
232 |     font-size: 18px;
233 | }
234 | 
235 | #imgone{
236 |     top: 25%;
237 |     transform: rotate(7deg);
238 |     width: 270px;
239 |     position: absolute;
240 |     left: 95px;
241 | }
242 | 
243 | #right-arrow{
244 |     margin-top: -80px;
245 |     left: 205px;
246 |     position: absolute;
247 |     color: #2BAE68;
248 |     font-size: 50px;
249 | }
250 | 
251 | #center-hero{
252 |     position: relative;
253 |     display: flex;
254 |     justify-content: center;
255 |     align-items: center;
256 |     width: calc(100%/3);
257 |     height: 100%;
258 | }
259 | 
260 | #can-back{
261 |     display: flex;
262 |     justify-content: center;
263 |     align-items: center;
264 |     width: 80%;
265 |     height: 77.5%;
266 |     border-radius: 50% 50% 0% 0%;
267 |     background-color: #5a7265;
268 | }
269 | 
270 | #pepsi{
271 |     position: absolute;
272 |     margin-top: 180px;
273 |     width: 350px;
274 |     z-index: 2;
275 |     animation:updown 2s ease-in-out alternate infinite;
276 | }
277 | 
278 | #path2{
279 |     position: absolute;
280 |     width: 370px;
281 | }
282 | 
283 | 
284 | #ball1{
285 |     position: absolute;
286 |     bottom: 20%;
287 |     right: 25%;
288 |     width: 40px;
289 |     height: 40px;
290 |     background-color: #fff;
291 |     border-radius: 50px;
292 |     z-index: 3;
293 |     box-shadow: rgba(105, 105, 105, 0.35) 0px 5px 15px;
294 |     filter: blur(8px);
295 |   -webkit-filter: blur(3px); /* animation:circle 2s ease-in-out alternate infinite*/
296 | }
297 | 
298 | 
299 | #ball2{
300 |     position: absolute;
301 |     top: 40%;
302 |     left: 20%;
303 |     width: 30px;
304 |     height: 30px;
305 |     background-color: #fff;
306 |     border-radius: 50px;
307 |     box-shadow: rgba(105, 105, 105,0.35) 0px 5px 15px;
308 |     background-image: radial-gradient(rgb(163, 163, 163), rgb(233, 233, 233), rgb(250,250,250), rgb(255, 255, 255));
309 |     filter: blur(0.8px);
310 |     -webkit-filter: blur(0.8px);
311 | }
312 | #ball3{
313 |     position: absolute;
314 |     top: 30%;
315 |     right: 25%;
316 |     width: 18px;
317 |     height: 18px;
318 |     background-color: #fff;
319 |     border-radius: 50px;
320 |     box-shadow: rgba(105, 105, 105, 0.35) 0px 5px 15px;
321 |     background-image: radial-gradient(rgb(163, 163, 163), rgb(233, 233, 233),rgb(250, 250, 250),rgb(255, 255, 255));
322 |     filter: blur(0.5px);
323 |     -webkit-filter: blur(0.5px);
324 | }
325 | 
326 | #scroll{
327 |     position: absolute;
328 |     bottom: 10%;
329 |     display: flex;
330 |     align-items: center;
331 |     justify-content: center;
332 |     color: #fff;
333 |     width: 50px;
334 |     height: 50px;
335 |     border: 2px solid #fff;
336 |     border-radius: 50%;
337 |     z-index: 4;
338 |     transition: all cubic-bezier(0.19, 1, 0.22, 1)0.2s;
339 | }
340 | 
341 | #scroll:hover{
342 |     background-color: #f5403a;
343 |     border: none;
344 |     cursor: pointer;
345 | }
346 | 
347 | .float-comment{
348 |     position: absolute;
349 |     width: 180px;
350 |     height: 50px;
351 |     display: flex;
352 |     justify-content: space-evenly;
353 |     align-items: center;
354 |     border-radius: 50px;
355 |     background-color: #ffffff;
356 |     z-index: 150;
357 |     box-shadow: rgba(131, 131, 131, 0.35) 0px 5px 15px;
358 | }
359 | 
360 | #pic{
361 |     width: 40px;
362 |     height: 40px;
363 |     background-color: #f5403a;
364 |     border-radius: 50%;
365 |     margin-left: -18px;
366 | }
367 | 
368 | .pixone{
369 |     background-image: url(https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80);
370 |     background-position: center;
371 |     background-size: cover;
372 | }
373 | 
374 | .pixtwo{
375 |     background-image: url(https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80);
376 |     background-position: center;
377 |     background-size: cover;
378 | }
379 | 
380 | .float-comment h1{
381 |     font-family: "product sans";
382 |     font-size: 0.7vw;
383 |     color: rgb(121, 121, 121);
384 |     font-weight: 500;
385 |     letter-spacing: 0.7px;
386 | }
387 | 
388 | 
389 | .float-comment h1 span{
390 |     font-weight: 600;
391 |     color: #333;
392 | }
393 | 
394 | 
395 | #lock{
396 |     position: absolute;
397 |     top: -20px;
398 |     right: 0;
399 |     display: flex;
400 |     justify-content: center;
401 |     align-items: center;
402 |     width: 25px;
403 |     height: 25px;
404 |     background-color: #fff;
405 |     color: #f5403a;
406 |     font-size: 13px;
407 |     border-radius: 50%;
408 |     box-shadow: rgba(0, 0, 0, 0.35)0px 5px 15px;
409 | }
410 | 
411 | 
412 | #lft-float{
413 |     position: absolute;
414 |     bottom: 20%;
415 |     left: -10px;
416 | }
417 | 
418 | #rght-float{
419 |     position: absolute;
420 |     top: 40%;
421 |     right: -80px;
422 | }
423 | 
424 | #right-hero{
425 |     width: calc(100%/3);
426 |     height: 100%;
427 |     padding: 50px;
428 |     padding-right: 100px;
429 | }
430 | 
431 | .expand{
432 |     display: flex;
433 |     justify-content: space-between;
434 |     align-items: center;
435 |     font-family: "gilroy";
436 |     margin-bottom: 20px;
437 |     margin-top: 20px;
438 | }
439 | 
440 | .expand h1{
441 |     font-size: 18px;
442 |     font-weight: 600;
443 |     color: rgba(121, 121, 121, 0.76);
444 | }
445 | 
446 | #expand-one{
447 |     margin-top: 20px;
448 | }
449 | 
450 | #int{
451 |     color: #333;
452 | }
453 | 
454 | #right-hero p{
455 |     font-size: 14px;
456 |     color: #5a7265;
457 | }
458 | 
459 | #lft-rght{
460 |     margin-top: 50px;
461 |     font-size: 30px;
462 | }
463 | 
464 | .ri-arrow-left-line{
465 |     color: #c4c4c4;
466 |     margin-right: 25px;
467 | }
468 | 
469 | 
470 | 
471 | 
472 | @keyframes updown{
473 |     from {
474 |         top:-55px;
475 |     }
476 | 
477 |     to {
478 |         top:-100px
479 |     }
480 | }
481 | .contact {
482 |     width: 100%;
483 |     height: auto;
484 |     background-color: aliceblue;
485 |     text-align: center;
486 |     display: flex;
487 |     justify-content: center;
488 |     align-items: center;
489 |     flex-direction: column;
490 |     padding: 20px;
491 |   }
492 |   
493 |   .contact-con {
494 |     font-family:sans-serif;
495 |     background-color: white;
496 |     border: 1px solid #ccc;
497 |     border-radius: 8px;
498 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
499 |     padding: 20px;
500 |     max-width: 400px;
501 |     width: 100%;
502 |   }
503 |   
504 |   h2#ch2 {
505 |     font-size: 24px;
506 |     color: #333;
507 |   }
508 |   
509 |   form {
510 |     text-align: left;
511 |     font-family: sans-serif;
512 |   }
513 |   
514 |   label {
515 |     display: block;
516 |     margin-top: 10px;
517 |     font-weight: bold;
518 |     font-size: 16px;
519 |   }
520 |   
521 |   input[type="text"],
522 |   input[type="email"],
523 |   textarea {
524 |     width: 100%;
525 |     padding: 10px;
526 |     margin-top: 5px;
527 |     border: 1px solid #ccc;
528 |     border-radius: 4px;
529 |   }
530 |   
531 |   textarea {
532 |     resize: none;
533 |   }
534 |   
535 |   input[type="submit"] {
536 |     background-color: #007bff;
537 |     color: white;
538 |     padding: 7px 26px;
539 |     border: none;
540 |     border-radius: 4px;
541 |     cursor: pointer;
542 |     margin-top: 20px;
543 |     font-size: 16px;
544 |     transition: background-color 0.3s;
545 |   }
546 |   
547 |   input[type="submit"]:hover {
548 |     background-color: #0056b3;
549 |   }
550 | 
551 |   /* //////////////TESTIMONIALS///////////////////// */
552 | #testimonials{
553 |     padding:100px 0px;
554 | 
555 | }
556 | #testimonials .col-md-4{
557 |     padding: 10px 30px;
558 | }
559 | #testimonials img{
560 |     width: 60px;
561 |     height: 60px;
562 |     border-radius: 50%;
563 |     margin-left: -30px;
564 |     margin-top: -40px;
565 |     /* box-shadow: 0 0 5px 10px rgba(0,0,0,0,5); */
566 | }
567 | .review{
568 |     font-size: 16px;
569 |     padding: 10px 10px 10px 30px;
570 |     border-radius: 10px;
571 |     box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.2);
572 |     cursor: pointer;
573 |     transition: all 0.5s ease;
574 | }
575 | .review:hover {
576 |     background-color: #a9c1b4;
577 | }
578 | .review .fa-twitter{
579 |     color: #013f7e;
580 | }
581 | #testimonials span{
582 |     color: #000000;
583 |     font-size: 18px;
584 |     font-weight: 600;   
585 | 
586 | }
587 | #testimonials h1{
588 |     margin-bottom: 20px;
589 |     color: #000000;
590 |     letter-spacing: 5px;
591 | }
592 | #testimonials .middle{
593 |     /* margin-bottom:-30px ; */
594 |     margin-top: -24px;
595 |     /* border: 2px solid red; */
596 | }
597 | /* .container{
598 |     display: flex;
599 | } */
600 | .space-b{
601 |     margin-bottom: 3rem;
602 | }
603 | .offer{
604 |     margin-bottom: 12rem;
605 | }
606 | /* Gallery Section Styles */
607 | #gallery {
608 |     background-color: #f8f9fa;
609 |     padding: 80px 0;
610 | }
611 | 
612 | #gallery h1 {
613 |     color: #000000;
614 |     font-size: 2.5rem;
615 |     margin-bottom: 30px;
616 | }
617 | 
618 | #gallery p {
619 |     color: #495057;
620 |     font-size: 1.2rem;
621 |     margin-bottom: 50px;
622 | }
623 | 
624 | #gallery img {
625 |     max-width: 100%;
626 |     height: auto;
627 |     border-radius: 8px;
628 |     transition: transform 0.3s ease-in-out;
629 | }
630 | 
631 | #gallery img:hover {
632 |     transform: scale(1.05);
633 | }
634 | 
635 | /* FAQ Section Styles */
636 | #faq {
637 |     background-color: #f8f9fa;
638 |     padding: 80px 0;
639 | }
640 | 
641 | #faq h1 {
642 |     color: #000000;
643 |     font-size: 2.5rem;
644 |     margin-bottom: 30px;
645 | }
646 | 
647 | #faq p {
648 |     color: #495057;
649 |     font-size: 1.2rem;
650 |     margin-bottom: 50px;
651 | }
652 | .accordion-button {
653 |     background-color: #007bff;
654 |     color: #fff;
655 |     font-size: 1.2rem;
656 | }
657 | 
658 | .accordion-button:hover {
659 |     background-color: #0056b3;
660 | }
661 | 
662 | .accordion-body {
663 |     color: #495057;
664 |     font-size: 1rem;
665 | }
666 | .galimg {
667 |     max-width: 100%;
668 |     height: 200px; /* Set the fixed height as needed */
669 |     border-radius: 8px;
670 |     transition: transform 0.3s ease-in-out;
671 | }
672 | 
673 | .galimg:hover {
674 |     transform: scale(1.05);
675 | }
676 |  


--------------------------------------------------------------------------------