Skip to content
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.

Sign up for GitHub

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

Adding navbar all pages #40

Merged
merged 4 commits into from
Jan 6, 2025
+2,418 −2,147
Merged

Adding navbar all pages #40

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
52c553c
Added navbar for all pages.
msv6264 Jan 4, 2025
bb4dbd7
final navbar changes
msv6264 Jan 4, 2025
80b3809
added navbar in resume page
msv6264 Jan 5, 2025
fd6f8b7
Merge branch 'main' into adding-navbar-all-pages
msv6264 Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
337 changes: 337 additions & 0 deletions about.css
View file
Open in desktop
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;
}
Loading