-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #40 from msv6264/adding-navbar-all-pages
Adding navbar all pages
- Loading branch information
Showing
13 changed files
with
2,418 additions
and
2,147 deletions.
There are no files selected for viewing
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,337 @@ | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: antiquewhite; | ||
| } | ||
|
|
||
| .navbar .logo h2{ | ||
| margin-left: 150%; | ||
| } | ||
|
|
||
| #google_translate_element { | ||
| position: fixed; | ||
| top: 90px; | ||
| left: 20px; | ||
| z-index: 1000; | ||
| display: none; | ||
| background-color: white; | ||
| border: 1px solid #ddd; | ||
| padding: 10px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| } | ||
|
|
||
| .slideshow-container { | ||
| position: relative; | ||
| max-width: 100%; | ||
| margin: auto; | ||
| overflow: hidden; | ||
| color: #ffd465; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| .mySlides { | ||
| display: none; | ||
| position: relative; | ||
| } | ||
|
|
||
| .fade { | ||
| animation-name: fade; | ||
| animation-duration: 1.5s; | ||
| } | ||
|
|
||
| @keyframes fade { | ||
| from { | ||
| opacity: 0.4; | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| .text { | ||
| color: #fff; | ||
| font-size: 24px; | ||
| padding: 8px 12px; | ||
| position: absolute; | ||
| bottom: 8px; | ||
| width: 100%; | ||
| text-align: center; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| } | ||
|
|
||
| .prev, | ||
| .next { | ||
| cursor: pointer; | ||
| position: absolute; | ||
| top: 50%; | ||
| width: auto; | ||
| padding: 16px; | ||
| margin-top: -22px; | ||
| color: white; | ||
| font-weight: bold; | ||
| font-size: 18px; | ||
| transition: 0.6s ease; | ||
| border-radius: 0 3px 3px 0; | ||
| user-select: none; | ||
| } | ||
|
|
||
| .banner-image { | ||
| width: 100%; | ||
| height: 300px; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| .prev { | ||
| left: 0; | ||
| border-radius: 3px 0 0 3px; | ||
| } | ||
|
|
||
| .next { | ||
| right: 0; | ||
| border-radius: 3px 0 0 3px; | ||
| } | ||
|
|
||
| .prev:hover, | ||
| .next:hover { | ||
| background-color: rgba(0, 0, 0, 0.8); | ||
| } | ||
|
|
||
| .dot { | ||
| cursor: pointer; | ||
| height: 15px; | ||
| width: 15px; | ||
| margin: 0 2px; | ||
| background-color: #ffd465; | ||
| color: #ffd465; | ||
| border-radius: 50%; | ||
| display: inline-block; | ||
| transition: background-color 0.6s ease; | ||
| } | ||
|
|
||
| .active, | ||
| .dot:hover { | ||
| background-color: #717171; | ||
| } | ||
|
|
||
| .options-section { | ||
| text-align: center; | ||
| padding: 40px 20px; | ||
| } | ||
|
|
||
| .options-section h2 { | ||
| color: #4a4a4a; | ||
| font-size: 28px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .options-section p { | ||
| color: #6f6f6f; | ||
| font-size: 18px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .options-container { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| flex-wrap: wrap; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .option { | ||
| text-align: center; | ||
| background-color: #f7f7f7; | ||
| border-radius: 8px; | ||
| padding: 20px; | ||
| width: 150px; | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| .option img { | ||
| width: 60px; | ||
| height: 60px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .option p { | ||
| font-size: 16px; | ||
| color: #333; | ||
| } | ||
| .options-container:hover { | ||
| color: #ffd465; | ||
| } | ||
| .option:hover { | ||
| transform: translateY(-10px); | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| } | ||
| .option a { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .orange { | ||
| color: #d6a52b; | ||
| } | ||
|
|
||
| section h2 { | ||
| color: #000; | ||
| font-size: 30px; | ||
| margin-bottom: 20px; | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| /* Styles for floating chat button */ | ||
| .chat-button { | ||
| position: fixed; | ||
| bottom: 20px; | ||
| right: 20px; | ||
| background-color: #d6a52b; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 50%; | ||
| padding: 15px; | ||
| font-size: 24px; | ||
| cursor: pointer; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| .chat-button:hover { | ||
| transform: scale(1.1); | ||
| background-color: #000; | ||
| } | ||
|
|
||
| /* Styles for floating image button */ | ||
| .image-button { | ||
| position: fixed; | ||
| bottom: 20px; | ||
| left: 20px; /* Aligns the button to the left side */ | ||
| background-color: transparent; /* Transparent background */ | ||
| border: none; | ||
| border-radius: 50%; | ||
| padding: 0; /* No padding for image button */ | ||
| cursor: pointer; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| transition: transform 0.3s ease; | ||
| z-index: 9999; | ||
| } | ||
|
|
||
| .image-button:hover { | ||
| transform: scale(1.1); | ||
| } | ||
| .about-box { | ||
| background-color: #f9f9f9; | ||
| border: 2px solid #d6a52b; | ||
| border-radius: 10px; | ||
| padding: 20px; | ||
| margin: 20px auto; /* Auto margin centers the box horizontally */ | ||
| width: 80%; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| display: block; /* Ensures it behaves like a block-level element */ | ||
| text-align: left; /* Adjusts text alignment, optional */ | ||
| } | ||
|
|
||
| .image-icon { | ||
| width: 120px; | ||
| height: 120px; | ||
| border-radius: 50%; | ||
| border: 3px solid white; | ||
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | ||
| z-index: 2; | ||
| position: relative; | ||
| } | ||
|
|
||
| .back-button { | ||
| position: absolute; | ||
| top: 100px; | ||
| left: 20px; | ||
| background-color: transparent; | ||
| border: none; | ||
| color: #333; | ||
| font-size: 24px; | ||
| cursor: pointer; | ||
| z-index: 999; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .back-button:hover { | ||
| color: #d6a52b; | ||
| } | ||
| .about-section h1 { | ||
| text-align: center; | ||
| color: #8b4513; | ||
| } | ||
| .about-section h2 { | ||
| color: #8b4513; | ||
| } | ||
| .about-section li { | ||
| color: #191970; | ||
| } | ||
| h1 { | ||
| font-size: 2.5em; | ||
| } | ||
| .about-section p { | ||
| margin: 10px 0; | ||
| text-align: center; | ||
| color: #191970; | ||
| } | ||
| .features { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| gap: 20px; | ||
| margin-top: 30px; | ||
| } | ||
|
|
||
| .feature-card { | ||
| background: #fdf4dc; | ||
| border: 2px solid #ffd465; | ||
| border-radius: 8px; | ||
| padding: 20px; | ||
| width: 250px; | ||
| text-align: center; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| .feature-card:hover { | ||
| transform: translateY(-10px); | ||
| } | ||
|
|
||
| .feature-card i { | ||
| font-size: 40px; | ||
| color: #d6a52b; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .feature-card h3 { | ||
| color: #8b4513; | ||
| margin-bottom: 10px; | ||
| } | ||
| .image-button1 { | ||
| position: fixed; | ||
| top: 5px; | ||
| left: 10px; /* Aligns the button to the left side */ | ||
| background-color: transparent; /* Transparent background */ | ||
| border: none; | ||
| border-radius: 50%; | ||
| padding: 0; /* No padding for image button */ | ||
| cursor: pointer; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| .image-button1:hover { | ||
| transform: scale(1.1); | ||
| } | ||
|
|
||
| .image-icon1 { | ||
| width: 68px; | ||
| height: 68px; | ||
| border-radius: 50%; | ||
| border: 3px solid white; | ||
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | ||
| z-index: 2; | ||
| position: relative; | ||
| } |
Oops, something went wrong.