Autor Tema: Interfaz de tienda online [HTML] [CSS] (Leído 2527 veces)

R3LI4NT · « **en:** Noviembre 02, 2021, 10:50:15 pm »

Hi comunidad HxC!
Vengo a compartir con ustedes una pequeña y sencilla interfaz de una tienda online que estuve desarrollando, eso sí, no es responsive (no tenía mucho tiempo que digamos, mes de parciales).

El footer ya lo había subido al foro y supuse que reutilizarlo no estaría mal...

HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenCart</title>
    <link rel="stylesheet" href="style/tienda.css">
    <link rel="icon" type="image/png" href="img/favicon.png" sizes="16x16">
 
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <div class="container">
        <a href="https://api.whatsapp.com/send?phone=+12222222222" class="wsp-btn" target="_blank">
            <i class='bx bxl-whatsapp'></i>
        </a>
 
        <div class="telefono">
            <p>Venta telefónica: <i class='bx bxs-phone'>1111-2222</i></p>
        </div>
 
        <div class="header">
            <div class="logo">
                <img src="img/logo.png" alt="">
            </div>
            <div class="search">
                <input type="search" class="icono-placeholder" placeholder="Buscar productos...">
                <i class='bx bxs-cart'></i>
            </div>
        </div>
 
        <div class="menu">
            <a href="#">Computación</a>
            <a href="#">Celulares</a>
            <a href="#">Electrodomesticos</a>
            <a href="#">Bicicletas y Motos</a>
            <a href="#">Smart TV</a>
            <a href="#">Colchones</a>
            <a href="#">Belleza</a>
            <a href="#" class="oferta-btn" style="color: #fff;font-weight: bold;">Ofertas</a>
        </div>
 
        <div class="slider-container middle">
            <div class="slides">
                <input type="radio" name="rad" id="rad-1" checked>
                <input type="radio" name="rad" id="rad-2">
                <input type="radio" name="rad" id="rad-3">
 
                <div class="slide s1">
                    <img src="img/1.png" alt="">
                </div>
 
                <div class="slide s2">
                    <img src="img/2.png" alt="">
                </div>
 
                <div class="slide s3">
                    <img src="img/3.png" alt="">
                </div>
                
                <div class="navegation">
                    <label for="rad-1" class="bar"></label>
                    <label for="rad-2" class="bar"></label>
                    <label for="rad-3" class="bar"></label>
                </div>
            </div>
        </div>
 
        <div class="credito">
            <h3>¡Pagá hasta en 24 cuotas sin interés!</h3>
            <div class="tarjetas">
                <img src="img/paypal.png" alt="">
                <img src="img/visa.png" alt="">
                <img src="img/mastercard.png" alt="">
                <img src="img/discover.jpg" alt="">
                <img src="img/american-express.png" alt="">
            </div>
        </div>
 
        <div class="vendidos">
            
            <div class="card">
                <div class="image">
                    <img src="img-ventas/acer.png" alt="">
                    <div class="contenido">
                        <h4>Acer Aspire A315-51</h4>
                        <p>Precio Web: <span>USD587</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/heladera.png" alt="">
                    <div class="contenido">
                        <h4>Heladera James</h4>
                        <p>Precio Web: <span>USD999</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/moto-vital.png" alt="">
                    <div class="contenido">
                        <h4>Moto Vital Twist 125</h4>
                        <p>Precio Web: <span>USD1.349</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/iphone-11.png" alt="">
                    <div class="contenido">
                        <h4>Iphone 11</h4>
                        <p>Precio Web: <span>USD865</span></p>
                        <p class="precio-antes" style="color: #212121;text-decoration:line-through;">Antes: USD799</p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/ropero-8.png" alt="">
                    <div class="contenido">
                        <h4>Ropero 8 puertas</h4>
                        <p>Precio Web: <span>USD374</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/tinta.png" alt="">
                    <div class="contenido">
                        <h4>Tinta Nutrisse</h4>
                        <p>Precio Web: <span>USD16</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/telefunken.jpg" alt="">
                    <div class="contenido">
                        <h4>TV Telefunken 32"</h4>
                        <p>Precio Web: <span>USD265</span></p>
                        <p class="precio-antes" style="color: #212121;text-decoration:line-through;">Antes: USD319</p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/sommier.jpg" alt="">
                    <div class="contenido">
                        <h4>Sommier 1 plaza</h4>
                        <p>Precio Web: <span>USD1.349</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="categorias-btn">
                <div class="categorias-border-bottom">
                    <button><a href="#">Ver todas las categorías</a></button>
                </div>
            </div>
        </div>
 
        <footer>
            <div class="columna-1">
                <div class="logo">Open<span style="font-weight: 600; color: #FF3030;">cart</span></div>
                <div class="social-icons">
                    <i class='bx bxl-facebook icons'></i>
                    <i class='bx bxl-instagram icons' ></i>
                    <i class='bx bxl-twitter icons' ></i>
                    <i class='bx bxl-whatsapp bx-wsp icons'></i>
                </div>
            </div>
            <div class="columna-2">
                <div class="sub-item">Empresa</div>
                <ul>
                    <li class="info">Contacto</li>
                    <li class="info">Soporte</li>
                    <li class="info">Productos</li>
                    <li class="info">Privacidad</li>
                    <li class="info">Cookies</li>
                </ul>
            </div>
            <div class="columna-3">
                <div class="sub-item">Links</div>
                <ul>
                    <li><i class='bx bx-chevron-right'></i><a href="#" class="link">Link #1</a></li>
                    <li><i class='bx bx-chevron-right'></i><a href="#" class="link">Link #1</a></li>
                    <li><i class='bx bx-chevron-right'></i><a href="#" class="link">Link #3</a></li>
                    <li><i class='bx bx-chevron-right'></i><a href="#" class="link">Link #4</a></li>
                    <li><i class='bx bx-chevron-right'></i><a href="#" class="link">Link #5</a></li>
                </ul>
            </div>
            <div class="columna-4">
                <div class="sub-item">
                    <i class='bx bx-envelope' ></i>
                    <div class="info-inbox">Envíanos un comentario!</div>
                </div>
                <div class="formulario formulario-responsive">
                    <input type="text" placeholder="Your Email">
                    <textarea placeholder="Escribe aquí tus comentarios" rows="10" cols="40">Escribe aquí tus comentarios</textarea>
                    <button class="btn-enviar"><a href="#">Enviar</a></button>
                </div>
            </div>
            <div class="copyright">
                <span class="text">Opencart &copy;2021, Todos los derechos reservados.</span>
            </div>
        </footer>
    </div>
</body>
</html>
 

CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:[email protected]&display=swap');
 
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
 
body {
    height: 100vh;
    width: 100%;
    background: #fff;
}
 
.wsp-btn{
    position:fixed;
    color:#fff;
    border-radius:50px;
    text-align:center;
    font-size:35px;
    width:60px;
    height:60px;
    line-height: 63px;
    bottom:25px;
    right:25px;
    background:#25d366;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
    transition: all 300ms ease;
    border: 2px solid #fff;
}
.wsp-btn:hover{
    background: #20ba5a;
}
 
.telefono {
    height: 40px;
    width: 100%;
    background-color: #F5F5F5;
    justify-content: end;
    display: flex;
    line-height: 40px;
    border-bottom: 2px solid #F1F1F1;
}
 
.telefono p {
    color: rgb(0,0,0,.7);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    padding-right: 50px;
    font-size: 400;
}
 
.telefono i {
    color: #000;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 400;
    padding-left: 3px;
}
 
.header {
    width: 100%;
    background: #fff;
    display: flex;
}
 
.header .logo {
    padding: 30px;
}
 
.header img {
    height: 40px;
    width: auto;
}
 
.header .search {
    padding: 30px;
    width: 100%;
    display: flex;
    justify-content: end;
}
 
.header .search input {
    height: 40px;
    width: 60%;
    outline: none;
    border: 1px solid #D8D8D8;
    padding: 10px;
}
 
.header .search input:focus {
    border: 1px solid #C7C7C7;
}
 
.header .search i {
    font-size: 35px;
    line-height: 40px;
    padding: 0 20px;
    transition: 0.3s;
    cursor: pointer;
    color: rgb(0,0,0,.8);
}
 
.header .search i:hover {
    color: #BF0303;
}
 
.menu {
    background-color: #F5F5F5;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0px 15px 5px -15px #111; 
}
 
.menu a {
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    color: rgb(0,0,0,.8);
    padding: 20px;
    font-size: 15px;
    transition: 0.5s;
    cursor: pointer;
    letter-spacing: .4px;
}
 
.menu a:hover {
    color: #EA0000;
}
 
.oferta-btn {
    background: #A30101;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}    
 
.credito {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 5px 0;
}
 
.credito h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: bold;
    color: rgb(0,0,0,.8);
    padding-top: 30px;
}
 
.credito .tarjetas {
    padding: 45px 25px;
    border-bottom: 1px solid #E5E5E5;
    width: 92%;
}
 
.credito .tarjetas img{
    height: 30px;
    width: auto;
    padding: 0 30px;
    transition: 0.3s;
    cursor: pointer;
}
 
.credito .tarjetas img:hover {
    transform: scale(1.1);
}
 
.vendidos {
    width: 100%;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
}    
 
.vendidos h2 {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    color: rgb(0,0,0,.9);
    letter-spacing: 1px;
    padding: 30px 0;
    font-size: 27px;
}
 
.vendidos .card {
    width: 300px;
    height: 385px;
    background: #FDFDFD;
    border: 1px solid #E1E1E1;
    font-family: 'Poppins', sans-serif;
    transition: 0.6s;
    margin: 10px 20px;
    flex: 1 0 21%;
}
 
.vendidos .card:hover {
    transform: scale(1.1);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
 
.vendidos .card img {
    height: 180px;
    width: auto;
    transition: 0.5s;
    padding-top: 20px;
    cursor: pointer;
}
 
.vendidos .card img:hover {
    transform: scale(1.1);
}
 
.vendidos .card .image {
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
 
.vendidos .contenido {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}
 
.vendidos h4 {
    color: rgb(0,0,0,.6);
    font-weight: 300;
    padding-top: 15px;
}
 
.vendidos p {
    color: #EA0000;
    font-weight: bold;
    padding-top: 20px;
}
 
.vendidos p span {
    color: rgb(0,0,0,.8);
}
 
.vendidos .añadir-btn {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
 
.vendidos .comprar-btn {
    background: #EA0000;
    outline: none;
    border: none;
    height: 35px;
    width: 90px;
    margin-top: 15px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    line-height: 35px;
    transition: 0.3s;
}
 
.vendidos .comprar-btn a {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    padding: 0 10px;
    font-size: 14px;
}
 
.vendidos .comprar-btn i {
    font-size: 18px;
}
 
.vendidos .comprar-btn:hover {
    opacity: 0.6;
}
 
.precio-antes {
    font-size: 14px;
}
 
.slider-container {
    width: 100%;
    height: 330px;
    overflow: hidden;
}
 
.middle {
    position: relative;
}
 
.navegation {
    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    display: flex;
}
 
.bar {
    width: 15px;
    height: 15px;
    border: 2px solid #BF0303;
    border-radius: 50%;
    margin:0 10px;
    transition: 0.3s;
    cursor: pointer;
}
 
.bar:hover {
    background: #A30101;
    border: 2px solid #BF0303;
}
 
input[name="rad"] {
    position: absolute;
    visibility: hidden;
}
 
.slides {
    width: 500%;
    height: 100%;
    display: flex;
}
 
.slide {
    width: 20%;
    transition: 0.6s;
}
 
.slide img {
    width: 100%;
    height: 100%;
}
 
#rad-1:checked ~ .s1 {
    margin-left: 0;
}
 
#rad-2:checked ~ .s1 {
    margin-left: -20%;
}
 
#rad-3:checked ~ .s1 {
    margin-left: -40%;
}
 
.categorias-btn {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 25px 0;
}
 
.categorias-btn button {
    background: #EA0000;
    outline: none;
    border: none;
    height: 50px;
    width: 280px;
    cursor: pointer;
    transition: 0.4s;
}
 
.categorias-btn button:hover {
    transform: translateY(-10px);
    opacity: 0.7;
}
 
.categorias-btn button a {
    color: #fff;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
 
.categorias-border-bottom {
    width: 96%;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 20px;
}
 
/* FOOTER */
 
footer {
    bottom: 0;
    left: 0;
    width: 100%;
    background: #161515;
    color: #fff;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 3.55rem 1.35rem;
    padding-bottom: 6rem;
    font-family: 'Poppins', sans-serif;
}
 
footer .logo {
    color: #fff;
    font-size: 30px;
    text-shadow: 0px 3px 5px #000;
}
 
.social-icons {
    font-size: 20px;
    display: flex;
    gap: 10px;
    margin: 20px 0;
}
 
.bxl-facebook {
    border-radius: 50%;
    background: #3b5998;
    color: #fff;
    padding: 5px;
}
 
.bxl-instagram {
    border-radius: 50%;
    background: #DD2A7B;
    color: #fff;
    padding: 5px;
}
 
.bxl-twitter {
    border-radius: 50%;
    background: #00ACEE;
    color: #fff;
    padding: 5px;
}
 
.bx-wsp{
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    padding: 5px;
}
 
.icons {
    cursor: pointer;
}
.icons:hover {
    opacity: 0.5;
}
 
.sub-item {
    display: flex;
    font-size: 19px;
    margin: 12px 0;
    color: #F6392F;
    text-transform: uppercase;
    align-items: center;
    gap: 10px;
}
 
li {
    padding: 6px 0;
    font-size: 15px;
}
 
li .link {
    color: #fff;
    opacity: 0.7;
}
 
li .link:hover {
    color: #fff;
    cursor: pointer;
    opacity: 1;
}
 
.bx-chevron-right {
    font-size: 18px;
}
 
.info {
    opacity: 0.7;
    transition: 0.2s;
    cursor: pointer;
}
 
.info:hover {
    opacity: 1;
}
 
.info-inbox {
 
    text-transform: none;
    font-size: 16px;
}
 
.bx-envelope {
    color: #fff;
    font-size: 23px;
}
 
input {
    border: none;
    outline: none;
    height: 35px;
    width: 250px;
    padding: 0 10px;
    background: none;
    border-radius: 6px;
    border: 2px solid #F6392F;
    color: #fff;
    transition: 0.4s;
    font-weight: 400;
}
 
input:focus {
    transition: 0.4s;
    background: #110413;
    font-weight: 200;
}
 
.formulario {
    display: flex;
    flex-direction: column;
}
 
.btn-enviar {
    margin: 5px 0;
    width: 120px;
    height: 35px;
    background: #F6392F;
    border-radius: 6px;
    outline: none;
    border: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 0 10px #000;
    transition: 0.3s;
    font-weight: bold;
    letter-spacing: 1px;
}
 
.btn-enviar:hover {
    box-shadow: none;
    transform: translateY(-5px);
}
 
.btn-enviar a {
    color: #fff;
}
 
textarea {
    width: 77%;
    margin: 10px 0;
    height: 100px;
    outline: none;
    border-radius: 6px;
    border: 2px solid #F6392F;
    background: none;
    color: #fff;
    font-weight: 200;
    padding: 5px 5px;
    opacity: 0.7;
}
 
textarea:focus {
    transition: 0.4s;
    background: #110413;
    font-weight: 200;
    opacity: 1;
}
 
.columa-4{
    width: 30%;
    display: flex;
    flex-direction: column;
}
 
.copyright {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 50px;
    background: #f2f2f2;
    color: #000;
    align-items: center;
    display: flex;
}
 
.copyright .text {
    padding: 0 20px;
}
 

DESCARGAR PROYECTO
Mediafire: https://www.mediafire.com/folder/x2cesbgl7344l/Tienda_Online
MEGA: https://mega.nz/folder/yOgyAKhA#A4YIgDenU16ZkLPQq2mb7Q

Vuelve a España Google News después de 8 años y trae todas estas novedades

Autor Tema: Interfaz de tienda online [HTML] [CSS] (Leído 2527 veces)

R3LI4NT

Interfaz de tienda online [HTML] [CSS]