Skip to content

Commit

Permalink
Merge pull request vimistify#303 from mansiruhil13/mansiruhil13-patch-6
Browse files Browse the repository at this point in the history 
Update index.html
  • Loading branch information
@vimistify
vimistify authored Oct 6, 2024
2 parents 0247307 + 022b14e commit 3d5b9b0
Showing 1 changed file with 136 additions and 196 deletions.
332 changes: 136 additions & 196 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,203 +17,143 @@

<style>

/* .logo span {
font-size: 28px;
font-weight: bold;
background: linear-gradient(45deg, #ff5733, #33ff57, #3357ff);
-webkit-background-clip: text;
color: transparent;
letter-spacing: 2px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
font-family: 'Arial', sans-serif;
} */
*{
font-family: 'Baloo Bhai', cursive;
margin:0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh;
}

.menu ul li a {
padding: 10px 15px;
color: black;
text-decoration: none;
border-radius: 10px;
}

.menu ul li a.active {
color: white;
background-color:#1d4ed8;
}

.content {
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
flex-grow: 1;
}

h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-template-rows: auto auto;
gap: 20px;
animation: fadeIn 1s ease-in-out;
}

.feature {
background-color: #e7f3fe;
border-radius: 10px;
padding: 15px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.feature:hover {
transform: translateY(-5px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.feature img {
width: 100px;
height: 100px;
object-fit: cover;
margin-bottom: 10px;
border-radius: 50%;
}

.feature h2 {
color: #2980b9;
margin-bottom: 10px;
}

.feature p {
color: #555;
}


.team-feature,
.team-feature,
.contact-feature {
padding: 20px;
display: flex;
align-items: center;
text-align: left;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
grid-column: 1 / -1;
}

.team-feature {
background-color: #e7ffe7;
}

.contact-feature {
background-color: #f2e4aa;

}



.team-feature img,
.contact-feature img {
width: 150px;
height: auto;
margin-right: 20px;
border-radius: 10px;
}

footer {
background-color: #000;
color: white;
text-align: center;
padding: 10px 0;
width: 100%;
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

/* Logo Animation */
@keyframes logoAnimation {
0% {
opacity: 0;
transform: translateX(-100px); /* Start from the left */
}
50% {
transform: translateX(10px); /* Move slightly to the right */
}
100% {
opacity: 1;
transform: translateX(0); /* End at original position */
}
}

/* Letter Drop Animation */
@keyframes letterDrop {
0% {
transform: translateY(-100%);
opacity: 0;
}
50% {
transform: translateY(10px); /* Slight bounce */
opacity: 1;
}
100% {
transform: translateY(0);
}
}

.logo {
display: flex;
align-items: center;
animation: logoAnimation 1s ease forwards;
}

.brand-name {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 10px; /* Space between the text and the logo image */
}

.letter {
display: inline-block;
font-size: 2rem;
animation: letterDrop 0.5s ease forwards;
}

.red {
color: red; /* Change the color of letters in this class to red */
}
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.menu ul {
list-style-type: none;
padding: 0;
}
.menu ul li {
display: inline;
margin-right: 10px;
}
.menu ul li a {
padding: 10px 15px;
color: black;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.menu ul li a:hover {
background-color: #000;
color: white;
}
.menu ul li a.active {
color: white;
background-color: #000;
}
.content {
margin: 20px;
padding: 20px;
background-color: #e6eef3;
border-radius: 5px;
flex-grow: 1;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
animation: fadeIn 1s ease-in-out;
}
.feature-card {
background: #abd4fc;
padding: 15px;
border-radius: 5px;
text-align: center;
transition: transform 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 40px;
color: #0560c2; /* Bootstrap primary color */
margin-bottom: 10px;
}
footer {
background-color: #000;
color: white;
text-align: center;
padding: 10px 0; /* Padding for the footer */
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Logo Animation */
@keyframes logoAnimation {
0% {
opacity: 0;
transform: translateX(-100px); /* Start from the left */
}
50% {
transform: translateX(10px); /* Move slightly to the right */
}
100% {
opacity: 1;
transform: translateX(0); /* End at original position */
}
}

/* Letter Drop Animation */
@keyframes letterDrop {
0% {
transform: translateY(-100%);
opacity: 0;
}
50% {
transform: translateY(10px); /* Slight bounce */
opacity: 1;
}
100% {
transform: translateY(0);
}
}

.logo {
display: flex;
align-items: center;
animation: logoAnimation 1s ease forwards;
}

</style>
.brand-name {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 10px; /* Space between the text and the logo image */
}

.letter {
display: inline-block;
font-size: 2rem;
animation: letterDrop 0.5s ease forwards;
animation-delay: calc(var(--letter-index) * 0.1s);
}

.red {
color: red;
}
</style>

<link rel="icon" href="./ambulance.png" type="image/png">
<!--<a href="https://www.flaticon.com/free-icons/ambulance" title="ambulance icons">Ambulance icons created by Freepik - Flaticon</a>-->
</head>
Expand Down Expand Up @@ -485,4 +425,4 @@ <h3 style="color: #ffffff;">Follow Us</h3>
});
</script>
</body>
</html>
</html>

0 comments on commit 3d5b9b0

Please sign in to comment.