Style.css
HTML{
Scroll-behavior:smooth;
}
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
box-sizing: border-box;
}
html{
Scroll-behavior:smooth;
}
body {
font-family:montserrat;
}
nav{
position:fixed;
width:100%;
height:45px;
background:#e9ecef;
display:flex;
justify-content: space-between;
border-bottom: 1px solid rgba(0,0,0,0.8);
z-index:5;
box-shadow:0px 1px 8px rgba(0,0,0,0.8);
}
label.logo {
position: relative;
background:url("./images/images (12).jpg");
background-size:100% 100%;
color:transparent;
-webkit-background-clip:text;
background-clip:text;
font-weight:900;
font-size:24px;
padding:0px 20px;
-webkit-text-stroke:.5px cyan;
line-height:45px;
background-size:100% 100%;
}
span {
color:red;
font-size:28px;
margin-left:2px;
font-weight: 900;
font-family:sans-serif;
}
.btn2{
border: 1px solid antiquewhite;
background:#17a2b8;
border-radius:3px;
}
//label.logo:before{
content: "";
position: absolute;
background: linear-gradient(ghostwhite,#1E2AB1,ghostwhite);
width:100px;
top:0;
height:100px;
left:0;
margin-left:8px;
margin-top: -25px;
transform:rotateX(77deg);
z-index:-1;
border-top-left-radius:100%;
border-top-right-radius:10%;
border-bottom-left-radius:10%;
border-bottom-right-radius:100%;
}
nav ul {
float:right;
margin-right:20px;
}
nav ul li {
display:inline-block;
margin:0px 3px;
line-height:45px;
font-size:16px;
}
.links{
color: #ee5353;
text-decoration: none;
font-weight: 900;
position: relative;
text-align: center;
text-transform: uppercase;
}
.links::after{
content: "";
position: absolute;
left: 0;
height: 2px;
width:100%;
bottom:0;
background: #ee5352;
transform: scaleX(0);
transform-origin: right;
transition: transform 520ms ease-in;
}
.links:hover::after{
transform-origin: left;
transform: scaleX(1);
}
//a.active,a:hover {
border:1px solid white;
transition:all .6s;
background: #17a2b8;
}
#icon {
display:none;
position:fixed;
top:3px;
line-height: 45px;
right:10px;
}
.line{
color:white;
font-size:30px;
width:26px;
height:3px;
background:#000;
line-height:60px;
margin-top:3px;
}
h2 {
background:url("Bo.jpg");
font-weight:bold;
color:transparent;
background-size:100% 100%;
-webkit-background-clip:text;
background-clip:text;
}
section:bfore{
content:"";
position:absolute;
width:100%;
height: 100vh;
background:url("about.png");
font-weight:bold;
color:transparent;
background-size:100% 100%;
z-index:-1;
}
@media screen and (max-width:1080px){
label.logo {
font-size:25px;
padding-left:20px;
}
nav ul {
margin-right:20px;
}
nav a {
font-size:10px;
color: #292929;
background:transparent;
box-shadow:1px 2px 3px rgba(0,0,0,0.3);
}
}
@media screen and (max-width:480px){
nav ul {
position:fixed;
top:46px;
width:100%;
height:100vh;
left:-100%;
background:#D9DBEF;
text-align:center;
transition:all ease .5s;
}
nav ul li {
display:block;
margin:auto;
line-height:70px;
}
//nav a.active,a:hover
{
font-size:12px;
border:none;
color:#fff;
transition:.5s;
background: blue;
}
#icon{
display:block;
position:fixed;
top:15px;
right:10px;
}
}
.open{
left:0;
}
/*home sectiion styling*/
.home{
display: flex;
align-items: center;
justify-content:center;
width: 100%;
position: relative;
top:0px;
left: 0;
height:calc(100% - 6rem) ;
background-image: url("images (16).jpg");
background-color: #aaa;
background-size: 100% 100%;
background-blend-mode: multiply;
color: white;
}
.home .min-width {
margin: 80px 10px auto 10px;
}
.home .home-content{
width: 100%;
height:auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
margin-top: -20px;
}
.home .home-content .text1{
color:#fff;
font-size: 15px;
font-weight: 500;
-webkit-text-stroke: 1px black;
}
.home .home-content .text2 {
color: #fff;
-webkit-text-stroke: .5px #C9CAD7;
font-size: 34px;
font-weight: 900;
margin-left: 0px;
}
.home .home-content .text3 {
color:white;
font-size: 20px;
font-weight: 500;
-webkit-text-stroke: .1px rgba(0,0,0,0.5);
}
.home .home-content .text3 span{
color: crimson;
}
.button {
margin-top: 20px;
}
.btn {
color:#fff;
background: #34495e;
font-weight: bold;
border: 1px solid darkcyan;
padding: 8px;
margin-top: 10px;
border-radius: 6px;
}
.images{
width:20%;
overflow: hidden;
}
.images img {
width:90%;
height: 40vh;
margin-right: 20px;
border-radius: 20px;
overflow: hidden;
}
.images span{
width:80%;
height:20vh;
background: gray;
}
.min-width {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width:480px){
.home{
height: 90vh;
}
.min-width{
flex-direction:column;
}
.images{
width: 98%;
}
.images img{
margin-top: 30px;
width: 50vh;
border-radius: 20px;
width: 96%;
}
home .home-content{
width: 100%;
background: mediumblue;
}
}
.card{
padding: 2rem;
background-image: url("images (16).jpg");
background-color: #888;
background-size: cover;
background-blend-mode: multiply;
color: white;
}
.content{
width: auto;
height: auto;
background: #fff;
padding: 0.666rem;
position: relative;
margin-top: 40px;
}
.btn6{
position: absolute;
bottom: 0;
right: 0;
margin: 10px;
}
.card__title{
position: relative;
z-index: 1;
display: inline-block;
color: #fff;
}
.card__title::after{
content: "";
position: absolute;
width: calc(100% + 4rem);
background: #ee6352;
left:-2rem;
top: -0.25rem;
bottom: -0.25rem;
z-index: -1;
transform-origin: left;
transform: scalex(.1);
transition: transform .2s ease-in;
}
.card:hover .card__title::after{
transform: scalex(1);
}
.card__body{
position: relative;
z-index: 1;
color: red;
-webkit-text-stroke: 1px solid darkmagenta;
padding: 10px;
font-weight: 900;
margin-top:18px;
}
.card__body::after{
content: "";
position: absolute;
left:0;
top: -0.72rem;
right: -0.75rem;
bottom: 0;
width: 100%;
color: #000;
background: ghostwhite;
z-index: -1;
transform: scaleY(0);
transition: transform .2s ease-in ;
transition-delay: .2s;
transform-origin:top;
}
.card:hover .card__body::after{
transform: scaleY(1);
}
/*about section*/
section{
padding:20px 0;
}
.about{
width: 100%;
height:100vh;
background: #E4E6FA;
z-index:1;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
h2{
color:#292929;
text-align: center;
}
.about .about-content {
display: flex;
align-items: center;
justify-content: center;
}
.col-left{
width: 40%;
align-items: center;
}
.col-left img{
width:200px;
flex-basis: 50%;
height:200px;
margin-left:0px;
object-fit: cover;
}
.col-right {
flex-basis: 50%;
width :60%;
margin-top: 40px;
}
.col-right p {
color:#34495e;
font-size:12px;
font-weight: bold;
}
.about .title{
position: relative;
color: #34495e;
}
.about title::before{
content: "";
position: absolute;
width: 180px;
background:crimson;
top:0;
left:50%;
transform: translateX(-50%);
}
button{
margin-top: 10px;
background: crimson;
color:#fff;
border-radius: 5px;
padding:5px;
}
.btn2 {
margin: 10px;
padding:4px;
color:#fff;
}
@media screen and (max-width:480px){
.about-content{
flex-direction: column;
text-align: justify;
padding:10px;
}
.col-left p {
font-size:18px;
}
.col-left img{
margin-left: -30px;
}
.about .about-content .col-right{
margin-top: 30px;
}
}
/*contact setion*/
.services{
width:100%;
height:100vh;
background:#111;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
}
.services .title {
color:#FFFFFF;
margin-top: 20px;
position: relative;
}
.services .title::before{
content: "";
position: absolute;
top: 0;
left:0;
background: black;
}
.txt {
text-align: center;
color: #8D93D1;
}
p {
color:#fff;
font-size: 10px;
}
.serv-content {
display: flex;
align-content: center;
justify-content: space-between;
margin-top: 0px;
}
.services .serv-content .card{
width:30%;
min-height: 20vh;
border:1px solid white;
padding: 10px;
transition: .5s;
}
.services .max-width .serv-content .card:hover{
background: #8F96E5
}
.box img {
width:50px;
height: 50px;
background: white;
border-radius: 100%;
align-items: center;
display: block;
margin: 3px auto;
}
@media screen and (max-width:480px){
.serv-content{
flex-direction: column;
}
.services .serv-content .card{
width:100%;
height:20vh;
margin-top:10px;
transition: .5s;
}
}
.services .serv-content .card{
color: #fff;
background:#111 ;
transition: .5s;
}
/*skills design styling*/
.skills .max-width .skills-content{
width: 100%;
display: flex;
justify-content: space-between;
}
.skills {
position: relative;
width:100%;
height:100vh;
background:#FFFFFf;
display: flex;
align-items: center;
}
.skills .max-width h2{
margin-bottom: 30px
}
.text3{
color:green;
font-size: 15px;
margin-bottom:10px;
}
.skills .skills-content .col-left{
margin-left: 10px;
}
.skills .skills-content .col-right{
margin: 20px;
}
.col-left p{
color: #000;
font-size: 10px;
margin-top: 20px;
}
.bar .info span{
font-size: 14px;
color:#000;
}
.skills .skills-content .bar{
margin-bottom: 13px;
}
.skills .skills-content .info{
display: flex;
align-items: cover;
justify-content: space-between;
margin-right: 5px;
}
.skills .skills-content .col-right .line{
height: 3.2px;
background: green;
width: 100%;
border-radius:100px;
position: relative;
}
.skills .skills-content .col-right .line::before {
content: "";
position: absolute;
height: 100%;
background: lightgreen;
top: 0;
left: 0;
}
.skills .skills-content .col-right .html::before{
width: 70%;
}
.skills .skills-content .col-right .Css::before{
width: 90%;
}
.skills .skills-content .col-right .Javascript::before{
width: 70%;
}
.skills .skills-content .col-right .php::before{
width: 60%;
}
@media screen and (max-width:480px){
.skills-content{
flex-direction: column;
}
.skills .skills-content .col-left{
width: 90%;
}
.skills .skills-content .col-right {
margin:20px;
width: 90%;
}
}
/*team*/
.team{
width: 100%;
height:100vh;
background:#34495e;
position: relative;
}
.text{
color: ghostwhite;
text-align: center;
}
.team .title{
color: #fff;
}
.team .carousel {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px;
}
.team .carousel .card{
width: 30%;
margin-top: 30px;
border-radius: 10px;
margin: 2px;
border: 1px solid white;
padding: 10px;
transition: all .5s;
}
.card:hover{
background: linear-gradient(67deg,#C0C5F7,#5765FF);
box-shadow: 1px 3px 6px rgba(0,0,0,0.5);
color: white;
transform: scale(1.03);
transition: .6s;
}
@media screen and (max-width:480px){
.carousel{
flex-direction: column;
}
.team .carousel .card{
width:90%;
transition: .5s;
}
}
/*contact styling*/
.contact{
width:100%;
height:100vh;
background: #e9ecef;
display:flex;
flex-direction: column;
align-items: center;
position: relative;
}
.contact .max-width .contact-content{
display: flex;
align-items: center;
justify-content:center;
}
.contact .contact-content .column-left{
width:45%;
margin:20px;
}
.contact .contact-content .column-right{
width:55%;
margin-top:10px;
}
@media screen and (max-width:480px){
.contact-content{
display:flex;
flex-direction: column;
align-items:center;
justify-content:space-between;
}
.contact .contact-content .column-right {
width:100%;
display:flex;
align-items:center;
justify-content:center;
margin-top:50px;
}
.contact .contact-content .column-left {
width:100%;
}
.text p {
margin:10px;
font-size:13px;
text-align:center;
}
fieldset {
display:flex;
align-items:center;
border:none;
}
.column-right input{
width:95%;
}
legendh h2{
display:block;
margin: 0 auto;
text-align: center;
}
}
fieldset{
border:none;
}
.text4 {
margin:10px;
font-size:20px;
text-align:center;
color:#34495e;
}
.column-right .title{
text-align:center;
}
.column-right input{
width:95%;
border-radius:22px;
padding:5px;
border:none;
outline:none;
}
form {
text-align:center;
}
label{
color: #34495e;
}
label.con{
margin:10px;
padding:10px;
color:#34495e;
}
legend h2 {
font-size:17px;
text-align:center;
color:#34495e;
display:block;
margin: 0px auto;
}
footer{
width:100%;
height:20vh;
background:#111;
display:flex;
align-items:center;
justify-content:center;
position: relative;
}
.footer {
text-align:center;
font-size:10px;
padding:5px;
color:#fff;
z-index: 2;
}
h4{
color:#fff;
font-size: 18px;
}
/*overlay hover section*/
.overlay-text{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background: linear-gradient(67deg,#C0C5F7,#5765FF);
opacity:.95;
transition:all ease .6s;
display:none;
}
.card:hover .overlay-text{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border-radius: 8px;
display:flex;
justify-content:center;
align-items:center;
//filter: contrast(1%
display:block;
}
.scrolling-active
{
background: red;
color: #fff;
}
Comments
Post a Comment