Scribd
Upload
25 views9 pages

Cascading Stylesheet

The document contains CSS code for styling various elements of a website layout including the header, navigation menu, content sections, footer, and other elements. It defines styles for text formatting, colors, positioning of elements, buttons, links and other interactive elements. The CSS is used to create a multi-section website with a nav bar, images, text content, buttons and consistent branding across sections.

Uploaded by

2083nikhil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views9 pages

Cascading Stylesheet

The document contains CSS code for styling various elements of a website layout including the header, navigation menu, content sections, footer, and other elements. It defines styles for text formatting, colors, positioning of elements, buttons, links and other interactive elements. The CSS is used to create a multi-section website with a nav bar, images, text content, buttons and consistent branding across sections.

Uploaded by

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

@import url('https://fonts.googleapis.com/css2?

family=Poppins&display=swap');

* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}

header {
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 70px;
background-color: black;

.main-nav ul {
display: flex;
}

.logo {
display: flex;
}

.logo a {
color: white;
font-size: 24px;
margin-right: 5px;
}

.main-nav ul li {
display: flex;
cursor: pointer;
align-items: center;
padding: 10px 20px;
font: 14px;
transition: transform 0.5s ease, border-radius 0.3s ease, background-color
0.5s ease;
margin: 0 5px;
}

.left-nav {
display: flex;
align-items: center;
}

.right-nav {
display: flex;
align-items: center;
}

.btn {
padding: 10px 12px;
border-radius: 30px;
background-color: #fff;
font-weight: bolder;
cursor: pointer;
transition: transform 0.10s;
}

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

.main-nav ul li:hover {
border-radius: 30px;
background-color: #ffffff70;
}

.container {
background-color: black;
color: #fff;
}

.con {
background-color: black;
padding: 40px 30px;
display: flex;
justify-content: center;
align-items: center;
gap: 100px;

.leftside {
display: flex;
flex-direction: column;
}

.leftside h1 {
font-size: 45px;
font-weight: bold;
padding-bottom: 10px;
}

.leftside p {
font-size: 20px;
}

.leftside input {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 36px;
font-weight: bold;
padding-right: 0;
border-radius: 10px;
margin: 10px 0;
border: transparent;

.leftside-btn {
margin-top: 20px;
width: 9em;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 36px;
text-align: start;
cursor: pointer;
border-radius: 20px;
font-weight: bold;
border: transparent;

.con .rightside img {


width: 90%;
height: auto;

.info-1 {
width: 100%;
margin: 0 auto;
padding: 60px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
}

.image-field {
align-content: center;
padding: 0 10px;

.image-field img {
width: 100%;
}

.text-field {
align-content: center;
padding: 0 10px;
}

.text-field>h1 {
font-weight: bolder;
font-size: 3em;
}

.text-field-part2 {
margin-top: 15px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

.main-body-btn {
padding: 10px;
background-color: black;
color: #fff;
border-radius: 5px;
font-size: 1.2em;
}

.text-field-part2 a {
position: relative;
text-decoration: none;
color: black;
font-weight: lighter;
border-bottom: 3px solid rgb(235, 241, 243);

.text-field-part2 a:after {
position: absolute;
transition: all ease-in-out .2s;
background: none repeat scroll 0 0 #000000;
content: "";
display: block;
height: 3px;
width: 0;
}

.text-field-part2 a:hover:after {
width: 100%;
}

.info-2 {
display: flex;
flex-direction: row-reverse;
}

.last-page {
/* width: 100%; */
background-color: #f1efef;
display: flex;
justify-content: center;
}

.last-page-inner{
/* margin: 20px; */
padding: 50px 10px;
}

.last-page-inner h1{
padding: 20px 0;
}
.main-block{
display: flex;
gap: 20px;
margin: 0 10px;
}
.inner-block {
display: flex;
background-color: #fff;
justify-content: center;
align-items: center;
padding: 20px;
gap: 20px;
}

.inner-text{
cursor: pointer;
}

.inner-arrow{
cursor: pointer;
transition: all ease 0.2s;
}
.inner-arrow:hover{
transform: translateX(10px);
}

footer{
display: flex;
width: 100%;
color: #fff;
background-color: #000000;
}

.footer-page{
color: #fff;
background-color: #000000;
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 40px;
}

.footer-page-1 p{
padding: 20px 0;
font-size: 1.5em;
}
.section-1_2 p{
position: relative;
cursor: pointer;
display: inline-block;
}

.section-1_2 p::before{
transition: width ease-in-out .5s;
content: "";
position: absolute;
width: 0;
height: 3px;
background-color: #fff;
bottom: 0;
}

.section-1_2 p:hover:before{
width: 100%;
}

.section-2{
display: flex;
gap: 100px;
flex-direction: row;
padding-top: 40px;
}
.section-2 li{
cursor: pointer;
}

.section-2 li:hover{
color: #ffffffb4;
}

.section-3{
color: #fff;
}

.icons-right{
display: flex;
justify-content: center;
}

.section-3{
width: 100%;
display: flex;
justify-content: space-between;
margin: 40px 0;
}

.icons-left i {
gap: 20px;
padding-left: 0px;
padding-right: 20px;
cursor: pointer;
}

.icons-right{
gap: 20px;
cursor: pointer;
}

.section-4{
width: 100%;
}

.section-4 .image{
width: 160px;
display: flex;
gap: 10px;
cursor: pointer;
}

.section-5{
display: flex;
justify-content: space-between;
padding: 30px 0;
color: #AFAFAF;
font-weight: normal;
font-size: 12px;
}

.section-5-right ul{
display: flex;
flex-direction: row;
gap: 30px;
cursor: pointer;
}
.section-5-right ul li:hover{
color: #afafafa6;
}

You might also like