Scribd
Upload
2 views

CSS FILE

The document is a CSS stylesheet that defines styles for a webpage, including layout, typography, and hover effects. It features a responsive header with navigation links, a parallax section with a background image, and styled text elements. The overall design emphasizes a modern aesthetic with a focus on user interaction through hover effects.

Uploaded by

SHIVAM SINGH
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
2 views

CSS FILE

The document is a CSS stylesheet that defines styles for a webpage, including layout, typography, and hover effects. It features a responsive header with navigation links, a parallax section with a background image, and styled text elements. The overall design emphasizes a modern aesthetic with a focus on user interaction through hover effects.

Uploaded by

SHIVAM SINGH
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

@import url('')

{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans;
}

body{
min-height: 100vh;
overflow-x: hidden;
}

header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}

.logo{
font-size: 2em;
color: #fff;
user-select: none;
}

.navigation a {
position: relative;
font-size: 1.1em;
color:#fff;
font-weight: 600;
text-decoration: none;
margin-left: 20px;
padding: 6px 15px;
transition: .5s;
}

.navigation a:hover,
.navigation a.active {
color: #333;

}
.navigation a span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 30px;
z-index: -1;
transform: scale(0);
opacity: 0;
transition: .5s;
}

.navigation a:hover span,


.navigation a.active span {
transform: scale(1);
opacity: 1;
}

.parallax{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url('background.png') no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}

#text{
position: absolute;
font-size: 5em;
color: #1b283a;
text-shadow: 2px 4px 5px #f9f9f9;
}

.parallax img{
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
}

.parallax img#gate-left {
position: fixed;
transform: translateX(-282px);
}

.parallax img#gate-right {
position: fixed;
transform: translateX(305px);
}

.sec {
position: relative;
background: #020912;
padding: 30px 100px;
}

.sec h2 {
font-size: 3em;
color: #fff;
margin-bottom: 10px;
}

.sec p {
font-size: 1em;
color: #fff;
font-weight: 300;
text-align: justify;
}

You might also like