Skip to content

Commit

Permalink
Merge pull request #273 from manikdamle/main
Browse files Browse the repository at this point in the history 
Solves Issue #268
  • Loading branch information
@vimistify
vimistify authored Oct 6, 2024
2 parents dfaed56 + 11e4148 commit d88d9a1
Show file tree
Hide file tree
Showing 3 changed files with 204 additions and 69 deletions.
86 changes: 65 additions & 21 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,7 @@
<link rel="stylesheet" href="src/css/index.css">
<link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <!--Updated to latest version-->
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|
Bree+Serif&display=swap" rel="stylesheet">
<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;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
Expand All @@ -41,8 +26,8 @@
}

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

.content {
Expand Down Expand Up @@ -123,6 +108,59 @@
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;
animation-delay: calc(var(--letter-index) * 0.1s);
}

.red {
color: red;
}
</style>
</head>
<body>
Expand All @@ -131,11 +169,17 @@
<div class="container">
<div class="logo">
<div class="brand-name">
<span class="ambu">Ambu</span>Flow
</div>
<img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width:50px; height:auto;">

</div>
<span class="letter red" style="--letter-index: 1;">A</span>
<span class="letter red" style="--letter-index: 2;">m</span>
<span class="letter red" style="--letter-index: 3;">b</span>
<span class="letter red" style="--letter-index: 4;">u</span>
<span class="letter" style="--letter-index: 5;">F</span>
<span class="letter" style="--letter-index: 6;">l</span>
<span class="letter" style="--letter-index: 7;">o</span>
<span class="letter" style="--letter-index: 8;">w</span>
</div>
<img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
</div>
<nav class="menu">
<ul>
<li><a href="index.html" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a></li>
Expand Down
97 changes: 70 additions & 27 deletions features.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,7 @@
<link rel="stylesheet" href="src/css/index.css">
<link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <!--Updated to latest version-->
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|
Bree+Serif&display=swap" rel="stylesheet">
<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;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
Expand All @@ -32,15 +16,15 @@
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensure the body takes at least the full height of the viewport */
min-height: 100vh;
}
.menu ul {
list-style-type: none;
padding: 0;
}
.menu ul li {
display: inline;
margin-right: 10px; /* Space between menu items */
margin-right: 10px;
}
.menu ul li a {
padding: 10px 15px;
Expand All @@ -49,19 +33,19 @@
transition: background-color 0.3s, color 0.3s;
}
.menu ul li a:hover {
background-color:#1d4ed8;
background-color: #000;
color: white;
}
.menu ul li a.active {
color: white;
background-color:#1d4ed8;
background-color: #000;
}
.content {
margin: 20px;
padding: 20px;
background-color: #e6eef3;
border-radius: 5px;
flex-grow: 1; /* Allows content area to expand */
flex-grow: 1;
}
h1 {
color: #2c3e50;
Expand All @@ -72,7 +56,7 @@
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
animation: fadeIn 1s ease-in-out; /* Animation for the grid */
animation: fadeIn 1s ease-in-out;
}
.feature-card {
background: #abd4fc;
Expand Down Expand Up @@ -106,6 +90,59 @@
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;
}

.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>
</head>
<body>
Expand All @@ -114,11 +151,17 @@
<div class="container">
<div class="logo">
<div class="brand-name">
<span class="ambu">Ambu</span>Flow
</div>
<img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width:50px; height:auto;">

</div>
<span class="letter red" style="--letter-index: 1;">A</span>
<span class="letter red" style="--letter-index: 2;">m</span>
<span class="letter red" style="--letter-index: 3;">b</span>
<span class="letter red" style="--letter-index: 4;">u</span>
<span class="letter" style="--letter-index: 5;">F</span>
<span class="letter" style="--letter-index: 6;">l</span>
<span class="letter" style="--letter-index: 7;">o</span>
<span class="letter" style="--letter-index: 8;">w</span>
</div>
<img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
</div>

<nav class="menu">
<ul>
Expand Down
Loading

0 comments on commit d88d9a1

Please sign in to comment.