Scribd
Upload
10 views3 pages

Styles 9999

Uploaded by

stu.7816.aalekh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views3 pages

Styles 9999

Uploaded by

stu.7816.aalekh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

/* Reset Styles */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body, html {
height: 100%;
font-family: 'Arial', sans-serif;
}

/* Header Styles */
.header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 30px;
}

.logo img {
height: 50px;
}

.nav ul {
list-style: none;
display: flex;
}

.nav ul li {
margin-left: 20px;
}

.nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
transition: color 0.3s;
}

.nav ul li a:hover {
color: #4CAF50;
}

/* Hero Section with Video Background */


.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}

.video-background video {
width: 100%;
height: 100%;
object-fit: cover;
}

.title h1 {
font-size: 5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
animation: fadeIn 2s ease-out;
}

/* Fade Effect */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* Button Section */
.button-section {
padding: 50px;
background-color: #f5f5f5;
text-align: center;
animation: fadeUp 1.5s ease-in-out;
}

.buttons {
display: flex;
justify-content: center;
gap: 20px;
}

.btn {
text-decoration: none;
color: #333;
background-color: white;
padding: 20px;
width: 180px;
height: 180px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.btn-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
background-size: cover;
background-position: center;
transition: transform 0.3s ease;
}

.btn:hover .btn-img {
transform: scale(1.1);
}

.btn p {
margin-top: auto;
font-size: 18px;
z-index: 10;
}

/* Scroll Animation */
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

You might also like