home.css
unknown
css
4 years ago
12 kB
35
Indexable
/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');
/* GENERAL CONFIG*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Lato, sans-serif;
}
/* HEADER DESKTOP */
header {
width: 100%;
height: 110px;
background-color: #E2E2E2;
display: flex;
position: relative;
justify-content: space-between;
text-align: center;
border: 1px solid #BBAFAF;
}
header .headernav {
display:flex;
padding:12px;
}
header .iconcarrito {
width: 26px;
position:relative;
bottom:13px;
left:27px;
opacity:70%;
}
header .iconcuenta {
width: 26px;
position:relative;
bottom:15px;
left:37px;
opacity:70%
}
header .iconfav {
width: 26px;
position:relative;
bottom:15px;
left:34px;
opacity: 60%;
}
.logo {
width: 80px;
position: relative;
left: 40px;
top:10px;
}
header ul {
display: flex;
list-style: none;
margin: auto 0;
list-style: none;
}
header ul li {
margin: 0 3px;
position: relative;
top:5px;
}
header ul li a {
color:grey;
font-size: 11px;
text-decoration: none;
}
header ul li:hover a{
color:rgb(53, 53, 53)
}
header .buscar {
display: flex;
margin: auto 0;
height:35px;
line-height:35px;
}
header .buscar input {
border:1px solid hsl(0, 7%, 81%);
border-right:none;
outline: none;
background: #fff;
padding: 0 15px;
font-size: 16px;
width: 800px;
height: 100%;
}
header .buscar i {
color:rgb(109, 109, 109);
font-size:20px;
background:#ffffff;
height: 100%;
padding:8px;
position:relative;
cursor:pointer;
z-index:1;
border:1px solid hsl(0, 7%, 81%);
opacity:80%;
border-left:none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
header .buscar i:hover {
color:#fff;
}
header .buscar i::after{
height: 100%;
width: 0%;
content: '';
background: #f04603;
position:absolute;
top:0;
right:0;
z-index: -1;
transition:0.3s;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
header .buscar i:hover::after{
width: 100%;
}
header .bar {
display:none;
}
header .bar {
position: relative;
margin:auto;
}
header .bar span {
position:absolute;
color:#Fff;
font-size:35px;
}
input[type=checkbox]{
-webkit-appearance: none;
display:none;
}
/* NAV---------------------------------------------*/
nav {
display:flex;
background-color: #E2E2E2;
justify-content: space-between;
width: 100%px;
border-top:none;
border-color: #CEC8C8;
border-bottom:1px solid #CEC8C8;
padding:0 15px;
height: 50px;
cursor: pointer;
}
nav ul {
display:flex;
list-style:none;
line-height:30px;
border:10px;
}
nav ul li {
display:inline-block;
padding: 10px 25px;
color:black;
font-size:16px;
}
nav ul li i {
color:rgb(71, 71, 71);
margin-left: 7px;
font-size: 22px;
position: relative;
top: 4px;
}
nav ul li i:hover {
color:rgb(255, 166, 0);
}
nav ul li:hover{
background-color: white;
color:rgb(255, 166, 0);
}
/* FOOTER ---------------------------------------------------------------------------------*/
.social img{
width: 40px;
height: 40px;
}
.footertop {
background-color: #E2E2E2;
display: flex;
justify-content: space-around;
padding: 15px;
bottom:0;
width: 100%;
margin-top: auto;
border:1px solid var(--border);
}
.footertop .inputemail{
border:1px solid #AAAAAA;
background:white;
padding:10px;
border-radius: 5px;
}
.footertop .confirmaremail {
background-color:#ff9900;
height: 39px;
color:#FBFFFF;
font-size: 14px;
font-family: 'Lato';
border-radius: 5px;
border:1px solid #AAAAAA;
padding:0px 14px;
}
.footertop .contenedorventatelefonica .bRED{
color:rgb(255, 0, 0);
font-size: 23px;
font-family: 'Lato';
font-weight:300;
}
.footertop .contenedorventatelefonica .numerotel {
color: rgb(0, 0, 0);
font-weight: bold;
}
.footercentral {
width: 100%;
height: 240px;
background-color: rgba(255, 255, 255, 0.486);
display: flex;
border:1px solid hsl(0, 7%, 81%);
}
.btnarrepentirse{
background-color: hsl(0, 0%, 100%);
color:rgb(255, 0, 0);
border:none;
text-decoration: underline;
position: relative;
left:1560px;
}
.footercolumna3Row{
padding-left:40px;
margin-top: 40px;
}
.footercolumna3Row h3{
font-size:17px;
}
.footercolumna2Row{
padding-left:40px;
margin-top: 40px;
}
.mediosdepago span {
position: relative;
bottom: 40px;
left: 160px;
}
.mediosdepago img {
padding-top: 140px;
padding-left:40px;
}
.footercolumna2Row h3 {
font-size:17px;
}
.footercolumna2Row ul li {
font-size:15px;
list-style: none;
color: #7A7A7A;
margin: 10px;
}
.footercolumna3Row ul li {
font-size:14px;
list-style: none;
color:#7A7A7A;
margin: 10px;
}
/* NAV RESPONSIVE ------------------------*/
/*HEADER RESPONSIVE----------------------*/
@media screen and (max-width: 769px) {
nav {
display:none;
}
header {
display:block;
padding:0;
}
header .logo {
display:inline-block;
padding: 15px 14px;
width: 120px;
position:relative;
left: -4px;
}
header .buscar {
width: 100%;
display:inline-flex;
justify-content:center;
margin-bottom:15px;
}
header .buscar input {
width:90%;
}
header ul {
display:flex;
width: 100%;
flex-direction: column;
background: rgb(19, 54, 255);
height:0;
visibility: hidden;
transition: 0.3s;
}
header ul li a {
color:rgb(255, 255, 255);
font-size:20px;
padding:25px;
display:block;
text-align: center;
}
header ul li a:hover {
background-color: #fff;
color:rgb(19, 54, 255);
}
header .bar {
display:block;
position:absolute;
top:70px;
right:80px;
cursor:pointer;
}
header .bar span {
color:rgb(255, 255, 255);
background-color: rgb(2, 12, 150);
padding:4px;
border-radius: 5px;
font-weight: bold;
}
header .bar #times{
display:none;
}
#check:checked ~ header .bar #times {
display:block;
}
#check:checked ~ header .bar #bars {
display:none;
}
#check:checked ~ header ul {
visibility: visible;
height:465px;
}
footer{
background-color: #EDEDED;
height: 100%;
width:100%;
}
.iconcarrito {
position: relative;
display: flex;
flex-direction: column;
top:23px;
}
.iconfav {
position: relative;
display: flex;
flex-direction: column;
top:23px;
left:40px;
}
.iconcuenta {
position: relative;
display: flex;
flex-direction: column;
top:23px;
left:40px;
}
header {
height: 180px;
}
} /*END RESPONSIVE*/
/* PRODUCT CARDS --------------------------------------------*/
.section{
width: 100%;
min-height: 100vh;
background-color:#eee;
}
.cards{
width: 100%;
display:flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin:auto;
}
.cards .new-arrival{
width: 100%;
margin-top:20px;
}
.cards .new-arrival h3{
text-align: center;
font-size:34px;
color:#222;
font-weight:700;
letter-spacing: 1px;
}
.cards .new-arrival span {
color:rgb(4, 0, 255);
}
.cards .new-arrival h1:after{
content: "";
height: 5px;
width: 325px;
background-color: #222;
border-radius:5px;
display:block;
margin:auto;
}
.card{
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
box-shadow: 0px 2px 4px rgb(0, 0, 0,25%);
width: 325px;
text-align: center;
margin:25px;
cursor:pointer;
background-color: #fff;
}
.image-section{
width: 100%;
height:400px;
display:flex;
justify-content: center;
align-items: center;
}
.image-section img {
width: 100%;
height: 100%;
object-fit:cover;
}
.description{
text-align: center;
}
.description h1{
font-size:20px;
text-transform: uppercase;
color:#222;
margin-bottom: 15px;
}
.description span {
font-size:21px;
letter-spacing: 1.5px;
margin-top: 8px;
margin-left: 8px;
font-weight: 700;
font-family: 'Roboto';
}
.card .cuotas {
color: rgb(19, 54, 255);
font-size: 19px;
margin-top:7px;
font-family: 'Roboto';
}
.button-group{
margin-top:30px;
}
.button-group .buy{
background-color:#000000;
font-size: 14px;
padding: 8px 20px;
border-radius:5px;
text-decoration: none;
letter-spacing: 1px;
color:#fff
}
.button-group .buy:hover{
background-color: rgb(0, 0, 0);
transition: 0.6s ease;
}
.button-group .cart {
background-color:none;
font-size:14px;
padding:8px 28px;
border-radius:5px;
border: 1px solid black;
text-decoration:none;
letter-spacing:1px;
color:rgb(0, 0, 0);
font-weight: 510;
}
.button-group .cart:hover{
background-color: rgb(2, 12, 150);
transition: 0.3s ease;
color:#fff;
}
.fav i{
font-size: 25px;
position: relative;
bottom: 140px;
left: 130px;
}
.fav i:hover{
color: rgb(219, 2, 2);
}
.heladera {
object-fit: fill;
width: 100%;
}
.card:hover{
-webkit-box-shadow: 0px 10px 13px -7px #000000, 4px -5px 20px 4px rgba(0,0,0,0);
box-shadow: 0px 10px 13px -7px #000000, 4px -5px 20px 4px rgba(0,0,0,0);
transition: 0.s all;
}Editor is loading...