HTML CODE :::
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="icon" href="img/logo.png">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/estilosprincipal.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Carter+One|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Carter+One|K2D" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Hi+Melody" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<!-- BARRA LOGO Y MENU -->
<div class="row nav rounded-top align-items-stretch justidy-content-between">
<!-- LOGOTIPO -->
<div class="col-md-12 col-lg logo d-flex align-items-center justify-content-center justify-content-lg-start">
<a href="#" style="text-decoration: none;"><img src="img/logo.png" width="130" height="100" alt="">
<span class="icono icon-dot "></span>
<p>AmisCake</p></a>
</div>
<!------ NAVEGACIOM REDES SOCIALES ------->
<div class="row rounded-top align-items-stretch justidy-content-between">
<nav class="navbar nav2 navbar-expand-lg navbar-light bg-fondonav ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
<ul class="navbar-nav ">
<li class="nav-item " >
<a class="nav-link" href="#" style="color: #000"> <i class="fas fa-home iconosmenu"></i> Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #000"><i class="fas fa-question iconosmenu"></i> Nosotros </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #000"><i class="fas fa-phone-volume iconosmenu"></i> Contacto </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categorias <i class="fas fa-utensils iconosmenu"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#item-1">Postres</a>
<a class="dropdown-item" href="#">Pudines</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- ----------MENU DE NAVEGACION ------------ -->
<!-- JUMBOTRON LLAMATIVO LADING PAGE -->
<div class="row rounded-top align-items-stretch justidy-content-between">
<div class="jumbotron">
<div class="container">
<h1 class="display-4 textjumbutron">Postres y Pudines</h1>
<p class="lead">Los mejores postres y pudines los encuentras donde AmisCake, de calidad y caceros.</p>
<hr class="my-4">
<h6 class="textoregistro">Registrare y obten un 30% de descuento hoy!</h6>
<a class="btn btn-registro btn-lg" href="#" role="button">Registrar</a>
</div>
</div>
CSS CODE :::
*{
padding: 0;
margin: 0;
}
body{
background: #f2f2f2;
font-family: 'Open Sans' , sans-serif;
}
header{
margin-top: 30px;
}
header .nav{
border-top: 6px solid rgb(31,169,167);
min-height: 80px;
overflow: hidden;
background-color: #fff;
z-index: 0;
}
.nav2{
margin: 10px;
padding: 20px;
}
header .nav2 a:hover{
text-decoration: underline rgb(31,169,167);
}
/*------COLOR DE LA OPCION CATEGORIAS DEL MENU*/
#navbarDropdownMenuLink{
color: #000;
}
/*-----BOTON PARA BAJAR HACIA BAJO */
.btn-scroll{
border-radius: 50%;
margin: 38px 5px 0px 0px;
background-color: rgb(235,112,119); ;
color: #fff;
box-shadow: 0 0 4px grey;
}
/*-----LOGOTIPO-----*/
header .logo img,
header .logo span,
header .logo p{
font-size: 25px;
display: inline-block;
margin: 0;
font-family: 'Pacifico', cursive;
}
/*----- CONFIGURANDO TAMAÑO DEL LOGO PARA PONERLO MAS ALADO DEL TEXTO -----*/
header .logo img{
margin: 0px 0px 15px 0px;
}
header .logo p{
color: #777777;
}
/*------ MENU DE NAVEGACION ------*/
.nav2{
background-color: #fff;
}
.iconosmenu{
color: rgb(31,169,167);
}
/*----- JMBOTRON -------*/
.jumbotron{
z-index: 2;
background-image: url(../img/background.jpg);
width: 100%;
color: #fff;
height: 420px;
}
/*-----TEXTO DENTRO DEL JUMBUTRON*/
.textjumbutron {
font-size: 40px;
}
.lead{
font-size: 18px;
}
/*----- TEXTO DENTRO DEL JUMBOTRON-----*/
.textoregistro{
font-family: 'Carter One', cursive;
font-family: 'K2D', sans-serif;
font-size: 20px;
}
/*----- BOTON DENTRO DEL JUMBOTRON-----*/
.btn-registro{
background-color: rgb(31,169,167);
color: #fff;
}
.btn-registro:hover{
background-color: rgb(116,76,39);
color: #fff;
}
/*-----MENU DE REDES SOCIALES-----*/
header .menu {
height: 70px;
padding: 0;
}
header .menu a {
display: block;
text-decoration: none;
padding: 0 30px;
}
header .menu a div span {
font-weight: 600;
}
header .menu .c-1 {background: rgb(55,80,162); color: #fff;}
header .menu .c-2 {background: rgb(201,45,162); color: #fff;}
header .menu .c-3 {background: rgb(28,156,234); color: #fff;}
header .menu .c-1:hover {background: rgb(79,91,213); color: #fff;}
header .menu .c-2:hover {background: rgb(150,47,191); color: #fff;}
header .menu .c-3:hover {background: rgb(64,143,203); color: #fff;}
/*-------IMAGENES DE LA SECCION*/
.portafolio{
padding: 0 20px;
margin-bottom: 40px;
}
.portafolio .titulo{
padding: 40px 0;
text-align: center;
color: #3da5e2;
font-weight: 300;
}
.portafolio .fotos .contenedor-imagen{
margin-bottom: 40px;
overflow: hidden;
}
.imagen1{
height: 177px;
width: 700px;
}
.imagen3{
height: 252px;
width: 700px;
}
#textoventa{
padding: 12px;
color: rgb(31,169,167);
}
.zoom{
height:auto;
width: 100%;
padding: 10PX;
border-radius: 18px;
}
.zoom:hover
{-webkit-transform:scale(1.1);transform:scale(1.03);transition: all 0.5s;}
/*FONDO AL CONTENEDOR DE PRODUCTOS*/
.product{
height: auto;
box-shadow: 0 0 2px grey;
}
.precio{
font-family: 'Pacifico', cursive;
font-size: 35px;
}