@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@keyframes anim{
from{
opacity: 0;
scale: 0.5;
/* clip-path: inset(100% 100% 0); */
}
to{
opacity: 1;
scale: 1;
/* clip-path: inset(0 0 0 0); */
}
}
body{overflow-x: hidden;
padding: 0;
margin: 0;
width: 100vh;
align-items: center;
justify-content: center;
height: auto;
box-sizing: border-box;
}
nav{
justify-content: space-between;
position:fixed;
display: flex;
height: 5rem;
width: 100vw;
align-items: center;
background: rgba(0,0,0,0.1);
z-index: 1000;
}
.nav-2{
display:flex;
width:200vw;
}
.nav-2 h4{
display: flex;
position: relative;
align-items: center;
border: 1px solid black;
border-radius: 50px;
transform: translateX(18.5rem);
padding: 10px 20px;
margin-right: 1.7rem;
transition: all ease 0.4s;
overflow: hidden;
}
.nav-2 h4 a{
color:black;
text-decoration: none;
list-style: none;
height: 100%;
font-size: 18px;
font-weight:500;
z-index: 9;
position: relative;
}
.nav-2 h4::after{
content: "";
background-color: black;
height: 100%;
width: 100%;
border-radius: 50%;
position:absolute;
left: 0;
bottom: -100%;
transition: all ease 0.4s;
}
.nav-2 h4:hover::after{
bottom: 0%;
border-radius: 0;
transition: all ease 0.4s;
}
.nav-2 h4:hover a{
color: white;
}
.logo img{
height: 3.3rem;
border-radius:.5rem;
margin:5rem;
width: 5rem;
}
.icon-menu{
border-radius: 5px;
background-color: red;
list-style: none;
text-decoration: none;
align-items: center;
justify-content: center;
transform: translate(-250%);
font-size: 2.5rem;
display: none;
}
/* nav over */
#slider-container h2{
align-items: center;
justify-content: center;
text-align: center;
color: ffcfcf;
background: rgba(0,0,0,0.1);
z-index: 1000;
}
#slider-container {
position: relative;
width: 92rem;
height: 100vh;
overflow: hidden;
}
#slider-container img{
object-fit: cover;
background-size: cover;
}
.slide {
display: none;
width: 100%;
height: 100%;
object-fit: cover;
}
#prev, #next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
cursor: pointer;
background: rgba(255, 255, 255, 0.7);
padding: 10px;
border: none;
outline: none;
}
#prev { left: 10px; }
#next { right: 10px; }
#radio-buttons {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.radio-btn {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
background-color: #bbb;
cursor: pointer;
}
.radio-btn:checked {
background-color: #555;
}
/* header close */
@keyframes slide{
0%{ width: 0%;}
50%{ width: 60%;}
100%{ width: 0%; }
}
#abouth1{
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
margin-top: 6rem;
height: 3rem;
width: 100%;
font-size: 1.8rem;
justify-content: center;
align-items:center;
transform: translate(68%,0%);
position: relative;
font-family: "PT Serif", serif;
font-weight: 700;
font-style: normal;
overflow: hidden;
left: 0;
top: 0;
}
#abouth1::after{
content: "ABOUT_LEASPIN_TEXTILE";
width: 100%;
height: 2.3rem;
color: #5510ea;
position: absolute;
top: 0%;
left:0%;
border-right: .2rem solid #5510ea;
animation: slide 5s linear infinite;
-webkit-animation: slide 5s linear infinite;
overflow: hidden;
}
.about{
display: flex;
height: 15rem;
width:1300px;
padding: 2rem;
margin-left: 5rem;
}
.about p{
/* animation: anim 1s linear; */
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
width:1300px;
font-size: 1.2rem;
margin-top: -2rem;
font-family: "Poppins", sans-serif;
font-weight:200;
font-style: normal;
text-align:center;
}
.about p b{
font-weight: 350;
}
#mein{
width: 92rem;
height: 90vh;
background-color: #fff;
}
/* contact form start */
.containor{
width:200%;
height:150vh;
background: url("lea\ office.jpg");
background-size: cover;
background-attachment: fixed;
}
.containor table{
transform: translate(55%,40%);
}
.containor input{
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
font-size: 1.5rem;
margin: 1rem;
}
caption{
position: relative;
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
font-size: 2rem;
color: #fff;
top: 0;
left: 0;
overflow: hidden;
align-items: center;
justify-content: center;
}
.containor tfoot button{
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
padding: 10px;
font-size:1rem;
margin: 10px;
margin-left: -11%;
border-radius: 5px;
background-color: greenyellow;
}
.containor textarea{
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
width: 200%;
}
.containor input::placeholder{
font-size: 1rem;
text-align: center;
}
.address{
color: #fdf90e;
width: 40%;
background-color: rgba(23, 18, 18,0.7);
transform: translateX(25%);
margin-top: 20rem;
}
.location{
display: flex;
margin-top: 15rem;
}
.location iframe{
transform: translate(10%);
width: 35rem;
}
.location h2{margin-top: 2rem;
align-items: center;
justify-content: center;
color: rgb(0, 252, 46);
transform: translate(55%);
background-color: #fff;
width: 50%;
}
.location p{
font-size: 1.5rem;
width: 35rem;
transform: translate(40%);
color: #000;
background-color: rgba(255, 255, 255, 0.1);
}
/* contact form over */
#main{
display: flex;
width: 90vw;
}
#mein img{
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 10%;
align-items: center;
justify-content: center;
height: 30rem;
width:25rem;
position: relative;
margin: 2.6rem;
box-shadow: .0rem .0rem .2rem .1rem gray;
}
.swiper {
width:200%;
height: 40vh;
}
.swiper-slide {
text-align: left;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
/* footer start */
footer{
margin-top: 8rem;
position: relative;
width: 100vw;
background: #3586ff;
min-height: 100px;
padding: 20px 50px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
footer .social-icon,
footer .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin:10px 0px ;
flex-wrap: wrap;
}
footer .social-icon li,
footer .menu li{
list-style: none;
}
footer .social-icon li a,
footer .menu li a{
font-size: 2em;
color: white;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
text-decoration: none;
}
footer .social-icon li a:hover
{
transform: translateY(-10px);
}
footer .menu li a{
font-size: 1.2em;
color: white;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
text-decoration: none;
opacity: 0.7;
}
footer .menu li a:hover{
opacity: 1;
}
footer .wave{
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background:url(wave.png);
background-size: 1000px 100px;
}
footer .wave#wave1{
z-index: 1000;
opacity: 1;
bottom: 0;
animation: animatewave 4s linear infinite;
}
footer .wave#wave2{
z-index: 999;
opacity: 0.2;
bottom: 10px;
animation: animatewave_02 4s linear infinite;
}
footer .wave#wave3{
z-index: 1000;
opacity: 7;
bottom: 15px;
animation: animatewave 3s linear infinite;
}
footer .wave#wave4{
z-index: 999;
opacity: 0.5;
bottom: 20px;
animation: animatewave_02 3s linear infinite;
}
@keyframes animatewave{
0%{
background-position-x: 1000px;
}
100%{
background-position-x: 0px;
}
}
@keyframes animatewave_02{
0%{
background-position-x: 0px;
}
100%{
background-position-x: 1000px;
}
}
/* spining process*/
.fullprs{
height:450%;
width: 100%;
}
.fullprs .frsp{
display: flex;
align-items: center;
justify-content: center;
transform: translate(35%, 20%);
width: 100%;
height: 50vh;
background-color: #fff;
}
.fullprs .frsp img{
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
height: 17rem;
width: 29rem;
border-radius: .5rem;
}
.fullprs .frsp .data h1{
transform: translate(10%);
color: green;
margin-top: -1rem;
width: 110%;
border-bottom: 0.3rem solid;
}
.fullprs .frsp .data p{
margin: 1rem;
font-size: 1.5rem;
width: 200%;
text-align: justify;
}
.frsp .img{
transform: translate(75%);
}
.frsp .sdata{
align-items: center;
justify-content: center;
position:sticky;
}
.frsp .sdata h1{
transform: translate(45%);
color: rgb(214, 23, 186);
margin-top: -2rem;
width: 80%;
border-bottom: 0.3rem solid;
}
.frsp .sdata p{
margin: 1rem;
font-size: 1.7rem;
width: 200%;
text-align: justify;
}
.frsp .data .three{
color: blue;
}
/* gallery */
.gallery .table{
align-items: center;
justify-content: center;
align-content: center;
padding-top: 8rem;
position: relative;
height: 100%;
width: 100vw;
}
.gallery .table table{
height: 100%;
width: 80vw;
border: 1px solid black;
margin-top: 5rem;
transform: translateX(4%);
}
.gallery table img{
height: 21rem;
width: 21rem;
border-radius: 20px;
margin-top: .2rem;
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
.gallery table th{
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
color: red;
font-size: 2rem;
}
/* product */
.box{
display: flex;
justify-content: center;
align-items: center;
transform: translate(30%);
width: 100%;
}
.box h2{
align-items: center;
text-align: center;
border-bottom: 5px solid purple;
}
.box p{
font-size: 1.6rem;
margin-top: -1rem;
width: 160%;
text-align: justify;
transform: translateX(-2rem);
}
.box img{
height: 25rem;
transform: translate(40%);
border-radius: 5px;
box-shadow: .0rem .0rem .1rem .1rem gray;
}
.box img:hover{
outline: 9px solid red;
}
.detail{
display: flex;
border-bottom: .1rem solid rgb(114, 160, 179);
}
.detail img{
margin-top: 5rem;
animation: anim linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
/* product over */
@media only screen and (max-width: 480px) {
nav{
margin-top: -6rem;
display:flex;
transform: translateX(-11rem);
}
.nav-2 h4{
/* display: none; */
width:11rem;
align-items: center;
justify-content: center;
}
.nav-2{
display: grid;
margin-top: 50rem;
}
.logo{
display: none;
}
.icon-menu{
display: block;
color: black;
transform: translateX(-13rem);
margin-top: 18rem;
}
.icon-menu:hover{
background-color: green;
}
#slider-container{
height: 40vh;
width: 99vw;
overflow-x: hidden;
}
#abouth1{
font-size: 1.5rem;
transform: translate(10%);
overflow-x: hidden;
}
.about p{
animation: none;
font-size: 1rem;
height: 30vh;
width: 80vw;
overflow-y: scroll;
transform: translateX(-15%);
font-weight: 540;
overflow-x: hidden;
}
.containor{
background: url("lea\ office.jpg");
background-attachment: fixed;
overflow-x: hidden;
}
.containor table{
margin-left: -15rem;
overflow-x: hidden;
}
.containor input{
font-size: 1.3rem;
width: 35vw;
}
caption{
font-size: 1.7rem;
overflow-x: hidden;
}
#main{
display:grid;
height: 77vh;
animation: normal;
animation: none;
overflow-x: hidden;
}
#mein img{
display: grid;
font-size: 70%;
overflow-x: hidden;
}
.swiper{
margin-top: 50rem;
overflow-x: hidden;
}
.swiper-slide img{
object-fit: cover;
width: 100vw;
overflow-x: hidden;
}
footer{
bottom: 0;
margin-bottom: 0;
width: 100vw;
}
footer .social-icon,
footer .menu{
margin-left: -5.5rem;
}
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
body{overflow-x: hidden;
padding: 0;
margin: 0;
width: 100vh;
align-items: center;
justify-content: center;
height: auto;
box-sizing: border-box;
}
nav{
display: flex;
width:100vw;
}
.nav-2 h4{
/* display: none; */
display: block;
align-items: center;
justify-content: center;
}
.nav-2{
margin-top: 25rem;
display: grid;
width: 20rem;
transform: translateX(-4rem);
}
.logo{
display: none;
}
.icon-menu{
display: block;
color: black;
}
.icon-menu:hover{
background-color: green;
}
#slider-container{
height: 50vh;
width: 99vw;
overflow-x: hidden;
}
#abouth1{
font-size: 1.5rem;
transform: translate(18%);
overflow-x: hidden;
}
.about p{
animation: none;
font-size: 1rem;
height: 30vh;
width: 85vw;
overflow-y: scroll;
transform: translateX(-15%);
font-weight: 540;
overflow-x: hidden;
}
.containor{
background: url("lea\ office.jpg");
background-attachment: fixed;
overflow-x: hidden;
}
.containor table{
margin-left: -20rem;
overflow-x: hidden;
}
.containor input{
font-size: 1.3rem;
width: 35vw;
}
caption{
font-size: 1.7rem;
overflow-x: hidden;
}
#main{
display:grid;
height: 77vh;
animation: normal;
animation: none;
overflow-x: hidden;
}
#mein img{
display: grid;
width: 75vw;
font-size: 80%;
overflow-x: hidden;
}
.swiper{
margin-top: 50rem;
overflow-x: hidden;
}
.swiper-slide img{
object-fit: cover;
width: 70vw;
overflow-x: hidden;
}
footer{
bottom: 0;
margin-bottom: 0;
width: 100vw;
}
footer .social-icon,
footer .menu{
margin-left: -5.7rem;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
body{overflow-x: hidden;
padding: 0;
margin: 0;
width: 100vh;
align-items: center;
justify-content: center;
height: auto;
box-sizing: border-box;
}
nav{
display: flex;
width:100vw;
transform: translateX(-5rem);
}
.nav-2 h4{
display: block;
align-items: center;
justify-content: center;
font-size: .4rem;
transform: translateX(9rem);
}
.nav-2{
font-size: .4rem;
display: flex;
}
.logo{
display: none;
margin: 0;
padding: 0;
}
#slider-container{
height: 50vh;
width: 99vw;
overflow-x: hidden;
}
#abouth1{
left: -35%;
font-size: 2rem;
overflow-x: hidden;
}
.about p{
animation: none;
font-size: 1.5rem;
height: 30vh;
width: 95vw;
overflow-y: scroll;
transform: translateX(-10%);
font-weight: 540;
overflow-x: hidden;
}
.containor{
background: url("lea\ office.jpg");
background-attachment: fixed;
overflow-x: hidden;
}
.containor table{
margin-left: -20rem;
overflow-x: hidden;
}
.containor input{
font-size: 1.8rem;
margin-top: 1rem;
width: 35vw;
}
caption{
font-size: 2rem;
overflow-x: hidden;
}
#main{
display: flex;
width: 80vw;
}
#mein img{
align-items: center;
justify-content: center;
height: 30rem;
width:20rem;
position: relative;
margin: 4rem 0 0 0.7rem ;
box-shadow: .0rem .0rem .2rem .1rem gray;
}
.swiper{
width:200%;
height: 40vh;
}
.swiper-slide img{
object-fit: cover;
width: 100%;
height: 100%;
overflow-x: hidden;
}
footer{
bottom: 0;
margin-bottom: 0;
width: 100vw;
}
footer .social-icon,
footer .menu{
margin-left: -5.7rem;
}
}
Comments
Post a Comment