Scribd
Upload
1 views

css

Uploaded by

Ayesha Kashif
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
1 views

css

Uploaded by

Ayesha Kashif
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

body{

margin: 0;
font-family: 'Roboto', sans-serif;

}
.navbar{
padding-top: 40px !important;

.navbar .nav-link{
font-weight: 500;
}
header{
background-image: url("../media/banner.jpg") ;
background-size: cover;
position: relative;
z-index: 1;
}
header::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--themeBlack);
opacity: 0.4;
z-index: -1;
}
.theme-btn{
background-color: var(--themeGreen);
padding: 10px 30px;
border-radius: 4px;
text-decoration: none;
border: none;
color: white;
font-weight: 500;
}

/*-------------------- banner css ----------------*/

.banner{
padding: 130px 0px;
}
.social-link li a{
width: 30px;
height: 30px;
background-color: var(--themeGray);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
margin-right: 20px;
}

#name{
height: 50px;
}

/*-------------------- about css ----------------*/


.about{
background-color: var(--themelight);
}
.aboutImage{
max-width: 400px;
max-height: 400px;
border-radius: 50%;
background-color: var(--themeBlack);
display: flex;
justify-content: center;
align-items: center;
overflow:hidden;
box-shadow: var(--themeGreen) 0px 7px 29px 0px;
}

/*------------ Services Css -------------*/


.services{
background: var(--themelight);
}
.line{
width: 100px;
height: 4px;
background-color: var(--themeGreen);
border-radius: 10px;
}
.servicesIcon-box{
width: 50px;
height: 50px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--themeGreen);
margin-bottom: 10px;
}
.servicesIcon-box i{
font-size: 30px;
}

/*------------ Skills Css -------------*/

.skills{
background-color: var(--themelight);
}
.progress{
height: 8px !important;
}
.progress .progress-bar{
background-color: var(--themeGreen);
border-radius: 8px;
}
/*------------ Portfolio Css -------------*/

.portfolio{
background-color: var(--themelight);

.portfolio .card{
background-color: var(--themeLightGrey);
box-shadow: var(--themeGreen) 0px 4px 10px 0px;
}
.portfolioCard-link{
text-decoration: none;
}

/*------------ Portfolio Css -------------*/

.contact{
background-color: var(--themelight);
}
.contactBox{
background-color: var(--themeLightGrey);
padding: 20px;
border-radius: 4px;
display: flex;
align-items: center;
}
.contactIconBox{
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: var(--themeBlack);
}
.contactIconBox i{
font-size: 25px;
color: var(--themeGreen);
}
.contactBoxLink{
text-decoration: none;
}

/*------------ footer Css -------------*/


footer{
background-color: var(--themeLightGrey);
padding: 50px 0px;

}
.footerLink a{
text-decoration: none;
font-weight: 500;
margin: 0 5px;
}
.footerSocialIcon li a{
background-color: var(--themeBlack);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0px 5px;
text-decoration: none;

}
.footerSocialIcon li a i{
color: var(--themeGreen);
font-size: 25px;
}

You might also like