You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
410 lines
6.0 KiB
410 lines
6.0 KiB
1 year ago
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
|
||
|
html{
|
||
|
font-size:62.5%;
|
||
|
}
|
||
|
*{
|
||
|
margin:0;
|
||
|
padding:0;
|
||
|
box-sizing:border-box;
|
||
|
}
|
||
|
header{
|
||
|
position:fixed;
|
||
|
display:flex;
|
||
|
justify-content:center;
|
||
|
align-items:center;
|
||
|
padding:0.3vw;
|
||
|
margin-top:0;
|
||
|
background-color:pink;
|
||
|
width:100vw;
|
||
|
z-index:3;
|
||
|
}
|
||
|
|
||
|
.menu{
|
||
|
list-style:none;
|
||
|
display:flex;
|
||
|
margin-left:45vw;
|
||
|
font-size:1.5rem;
|
||
|
}
|
||
|
.list{
|
||
|
position:relative;
|
||
|
text-decoration:none;
|
||
|
margin-left:100px;
|
||
|
display:flex;
|
||
|
align-items:center;
|
||
|
color:black;
|
||
|
padding:10px;
|
||
|
border-radius:20%;
|
||
|
}
|
||
|
.list:hover{
|
||
|
background-color:#FF9EAA;
|
||
|
}
|
||
|
img{
|
||
|
width:40px;
|
||
|
height:auto;
|
||
|
max-width:100%;
|
||
|
}
|
||
|
.logo{
|
||
|
font-size:2rem;
|
||
|
}
|
||
|
.logoimg{
|
||
|
display:flex;
|
||
|
justify-content:center;
|
||
|
align-items:center;
|
||
|
}
|
||
|
|
||
|
|
||
|
.header{
|
||
|
position:relative;
|
||
|
background-image:linear-gradient( transparent, pink);
|
||
|
max-width:100%;
|
||
|
height:50vh;
|
||
|
background-size: cover;
|
||
|
background-position: center;
|
||
|
margin-bottom:5vh;
|
||
|
display:flex;
|
||
|
overflow:hidden;
|
||
|
justify-content:center;
|
||
|
|
||
|
}
|
||
|
|
||
|
.mySlides {
|
||
|
display: none;
|
||
|
z-index:-1;
|
||
|
position:absolute;
|
||
|
width:100%;
|
||
|
height:100%;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
#slideshow-container {
|
||
|
width: 100%;
|
||
|
position: absolute;
|
||
|
height: 100%;
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
.prev,
|
||
|
.next {
|
||
|
cursor: pointer;
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
|
||
|
padding: 16px;
|
||
|
margin-top: -22px;
|
||
|
color: white;
|
||
|
font-weight: bold;
|
||
|
font-size: 18px;
|
||
|
|
||
|
border-radius: 0 3px 3px 0;
|
||
|
|
||
|
}
|
||
|
.next {
|
||
|
right: 0;
|
||
|
border-radius: 3px 0 0 3px;
|
||
|
}
|
||
|
.prev:hover,
|
||
|
.next:hover {
|
||
|
background-color: rgba(0, 0, 0, 0.8);
|
||
|
}
|
||
|
.dot {
|
||
|
width:1.5rem;
|
||
|
height:1.5rem;
|
||
|
cursor: pointer;
|
||
|
font-size:5rem;
|
||
|
display:flex;
|
||
|
background-color: #bbb;
|
||
|
border-radius: 50%;
|
||
|
z-index:3
|
||
|
|
||
|
}
|
||
|
.doot{
|
||
|
margin-top:10vh;
|
||
|
display:flex;
|
||
|
}
|
||
|
.prev{
|
||
|
left:10px;
|
||
|
}
|
||
|
.next{
|
||
|
right:10px
|
||
|
}
|
||
|
.active,
|
||
|
.dot:hover {
|
||
|
background-color: #717171;
|
||
|
}
|
||
|
|
||
|
@media only screen and (max-width: 300px) {
|
||
|
|
||
|
.prev,
|
||
|
.next,
|
||
|
.text {
|
||
|
font-size: 11px
|
||
|
}
|
||
|
}
|
||
|
.hair{
|
||
|
position:absolute;
|
||
|
display:flex;
|
||
|
flex-direction: column;
|
||
|
justify-content:center;
|
||
|
align-items:center;
|
||
|
margin-top:0;
|
||
|
padding-top:10vh;
|
||
|
z-index:3;
|
||
|
|
||
|
}
|
||
|
.hair p{
|
||
|
font-size:2rem;
|
||
|
margin-bottom:2vh;
|
||
|
}
|
||
|
.stu{
|
||
|
font-size:6rem;
|
||
|
font-family:cursive;
|
||
|
margin-bottom:3vh;
|
||
|
}
|
||
|
.btn{
|
||
|
background:none;
|
||
|
padding-right:2vw;
|
||
|
padding-left:2vw;
|
||
|
padding-top:0.5vh;
|
||
|
padding-bottom:0.5vh;
|
||
|
margin:0.2vw;
|
||
|
}
|
||
|
.btn:hover{
|
||
|
background-color:#FF9EAA;
|
||
|
}
|
||
|
.logomain{
|
||
|
display:flex;
|
||
|
flex-direction:column;
|
||
|
align-items:center;
|
||
|
padding-top:2vw;
|
||
|
}
|
||
|
.choose{
|
||
|
margin-top:0.5rem;
|
||
|
font-size:3rem;
|
||
|
margin-bottom:5vw;
|
||
|
}
|
||
|
.divmain{
|
||
|
display:flex;
|
||
|
align-items:center;
|
||
|
flex-wrap:wrap;
|
||
|
justify-content:space-around;
|
||
|
margin-bottom:5vw;
|
||
|
|
||
|
}
|
||
|
.imgmain{
|
||
|
width:20rem;
|
||
|
height:25rem;
|
||
|
border-radius:20px;
|
||
|
background-image:linear-gradient( transparent, pink), url(hair.jpg);
|
||
|
background-repeat: no-repeat;
|
||
|
}
|
||
|
.subone{
|
||
|
display:flex;
|
||
|
align-items:flex-start;
|
||
|
flex-wrap:wrap;
|
||
|
margin-top:1vw;
|
||
|
margin-bottom:2vw;
|
||
|
}
|
||
|
.subone p{
|
||
|
font-size:1.5rem;
|
||
|
width:50vw;
|
||
|
}
|
||
|
.tik{
|
||
|
width:2vw;
|
||
|
height:auto;
|
||
|
}
|
||
|
h3{
|
||
|
color:#00000;
|
||
|
}
|
||
|
.better{
|
||
|
background-color:#d9d7d7;
|
||
|
}
|
||
|
.work{
|
||
|
display:flex;
|
||
|
align-items:center;
|
||
|
justify-content:space-evenly;
|
||
|
flex-wrap:wrap;
|
||
|
}
|
||
|
.workimg{
|
||
|
width:33vw;
|
||
|
height:20vw;
|
||
|
margin-bottom:2vw;
|
||
|
border-radius:10px;
|
||
|
}
|
||
|
.clients{
|
||
|
display:flex;
|
||
|
align-items:center;
|
||
|
justify-content:space-around;
|
||
|
flex-direction:row;
|
||
|
font-size:1.5rem;
|
||
|
}
|
||
|
.client{
|
||
|
display:flex;
|
||
|
flex-direction:column;
|
||
|
box-shadow:3px 3px 10px #FF9EAA;
|
||
|
padding:1vw;
|
||
|
}
|
||
|
.clientes{
|
||
|
display:flex;
|
||
|
flex-direction:row;
|
||
|
flex-wrap:wrap;
|
||
|
}
|
||
|
.lorm p{
|
||
|
width:12rem;
|
||
|
}
|
||
|
.imgtwitter{
|
||
|
width:1vw;
|
||
|
height:1.5vw;
|
||
|
}
|
||
|
.username{
|
||
|
margin-left:1vw;
|
||
|
margin-right:1vw;
|
||
|
}
|
||
|
.imgclient{
|
||
|
width:2vw;
|
||
|
height:auto;
|
||
|
}
|
||
|
footer{
|
||
|
margin-top:10vw;
|
||
|
background-color:#d9d7d7;
|
||
|
font-size:1.5rem;
|
||
|
}
|
||
|
.time{
|
||
|
width:1.5vw;
|
||
|
height:1.5vw;
|
||
|
}
|
||
|
.week{
|
||
|
display:flex;
|
||
|
margin-top:1vw;
|
||
|
}
|
||
|
.lorem{
|
||
|
margin-top:2vw;
|
||
|
}
|
||
|
|
||
|
.footer{
|
||
|
display:flex;
|
||
|
align-items:center;
|
||
|
justify-content:space-around;
|
||
|
}
|
||
|
.icon{
|
||
|
display:flex;
|
||
|
justify-content:center;
|
||
|
margin-top:3vw;
|
||
|
|
||
|
}
|
||
|
.icons{
|
||
|
width:2vw;
|
||
|
height:auto;
|
||
|
margin-left:0.5vw;
|
||
|
margin-right:0.5vw;
|
||
|
border:2px solid black;
|
||
|
padding:0.2vw;
|
||
|
|
||
|
}
|
||
|
.copyright{
|
||
|
display:flex;
|
||
|
justify-content:center;
|
||
|
margin-top:2vw;
|
||
|
font-size:0.8rem;
|
||
|
padding-bottom:1vw;
|
||
|
}
|
||
|
.but{
|
||
|
display:none;
|
||
|
margin-left:45vw;
|
||
|
font-size:20px;
|
||
|
background-color:#F09EAA;
|
||
|
border:0;
|
||
|
padding:0.4vw 0.6vw 0.4vw 0.6vw;
|
||
|
}
|
||
|
#check{
|
||
|
z-index: 3;
|
||
|
display: none;
|
||
|
}
|
||
|
.meenu{
|
||
|
display:none;
|
||
|
}
|
||
|
@media (max-width: 1203px){
|
||
|
.menu{
|
||
|
display:none;
|
||
|
width:21vw;
|
||
|
}
|
||
|
header{
|
||
|
display:flex;
|
||
|
justify-content:space-around;
|
||
|
}
|
||
|
.meenu{
|
||
|
display:flex;
|
||
|
align-items:center;
|
||
|
}
|
||
|
|
||
|
label{
|
||
|
display: flex;
|
||
|
align-items:center;
|
||
|
justify-content:space-between;
|
||
|
font-size: 25px;
|
||
|
cursor: pointer;
|
||
|
transition: 0.3s;
|
||
|
transition-property: color;
|
||
|
|
||
|
}
|
||
|
label:hover{
|
||
|
color: #fff;
|
||
|
}
|
||
|
label .close-btn{
|
||
|
display: none;
|
||
|
}
|
||
|
#check:checked ~ header .menu{
|
||
|
z-index: 2;
|
||
|
position: fixed;
|
||
|
top: 3vh;
|
||
|
right: 0;
|
||
|
background: pink;
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
width:54vw;
|
||
|
|
||
|
}
|
||
|
#check:checked ~ header .menu a{
|
||
|
font-weight: 700;
|
||
|
margin-right: 0;
|
||
|
margin-bottom: 50px;
|
||
|
letter-spacing: 2px;
|
||
|
}
|
||
|
|
||
|
#check:checked ~ header label .close-btn{
|
||
|
z-index: 2;
|
||
|
position: fixed;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
#check:checked ~ header label .menu-btn{
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
label .menu-btn{
|
||
|
position: absolute;
|
||
|
}
|
||
|
|
||
|
|
||
|
}
|
||
|
@media (max-width: 960px){
|
||
|
html{
|
||
|
font-size:50%;
|
||
|
}
|
||
|
|
||
|
|
||
|
}
|
||
|
@media (max-width: 700px){
|
||
|
html{
|
||
|
font-size:35%;
|
||
|
}
|
||
|
}
|
||
|
@media (max-width: 280px){
|
||
|
html{
|
||
|
font-size:20%;
|
||
|
}
|
||
|
}
|