COPIA TRABAJO VIERNES
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Ecopeel</title>
<link rel="shortcut icon" href="img/ecopeel.jpg" type="image/x-
icon">
<link rel="stylesheet" href="css/estilos.css">
<!--Icon-Font-->
<script src="https://kit.fontawesome.com/eb496ab1a0.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container-bar">
<input type="checkbox" id="btn-social">
<label for="btn-social" class="fa fa-play"></label>
<div class="icon-social">
<ul>
<li><a href="https://www.facebook.com/?
locale=es_LA"><img src="img/facebook.png" width="50"
height="50"></a></li>
</ul>
<span id="title">Facebook</span>
</a>
<ul>
<li><a href="https://www.youtube.com/"><img
src="img/youtube.png" width="49" height="49"></a></li>
</ul>
<span id="title">Youtube</span>
</a>
<ul>
<li><a href="https://twitter.com/?lang=es"><img
src="img/twitter.png" width="50" height="50"></a></li>
</ul>
<span id="title">Twitter</span>
</a>
<ul>
<li><a href="https://www.instagram.com/"><img
src="img/Instagram2.webp" width="50" height="50"></a></li>
</ul>
<span id="title">Pinterest</span>
</a>
</div>
</div>
<section class="form-register">
<h4>Formulario Registro</h4>
<input class="controls" type="text" name="nombres" id="nombres"
placeholder="Ingrese su Nombre">
<input class="controls" type="text" name="apellidos"
id="apellidos" placeholder="Ingrese su Apellido">
<input class="controls" type="email" name="correo" id="correo"
placeholder="Ingrese su Correo">
<input class="controls" type="password" name="correo" id="correo"
placeholder="Ingrese su Contraseña">
<p> De acuerdo <a href="#">Terminos y Condiciones</a></p>
<input class="botons" type="submit" value="Registrar">
<p><a href="#">¿Ya tengo Cuenta?</a></p>
</section>
<header>
<nav>
<a href="#">Inicio</a>
<a href="#">Acerca de</a>
<a href="#">Portafolio</a>
<a href="#">Servicios</a>
<a href="#">Contacto</a>
</nav>
<section class="textos-header">
<h1>Comprometidos con el medio ambiente y un mejor
futuro</h1>
<h2>Para nuestras comunidades</h2>
</section>
<div class="wave" style="height: 150px; overflow: hidden;" ><svg
viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%;
width: 100%;"><path d="M0.00,49.98 C149.99,150.00 349.20,-49.98
500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none;
fill: #fff;"></path></svg></div>
</header>
<main>
<section class="contenedor sobre nosotros">
<h2 class="titulo">Nuestro producto</h2>
<div class="contenedor-sobre-nosotros">
<img src="img/banner.gif" alt="" class="imagen-about-us">
<div class="contenido-textos">
<h3><span>1</span> Buenos estandares de salud</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Sequi, recusandae facilis esse, non fugit praesentium quod
excepturi suscipit culpa nisi ad nihil mollitia distinctio obcaecati
sint quasi totam porro qui?</p>
<h3><span>2</span> Buenos estandares de salud</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Sequi, recusandae facilis esse, non fugit praesentium quod
excepturi suscipit culpa nisi ad nihil mollitia distinctio obcaecati
sint quasi totam porro qui?</p>
</div>
</section>
<section class="Portafolio">
<div class="contenedor">
<h2 class="titulo">Portafolio</h2>
<div class="galeria-port">
<div class="imagen-port">
<img src="img/planta.jpg" alt="">
<div class="hover-galeria">
<img src="img/puntero.png" alt="">
<p>Nuestro trabajo</p>
</div>
</div>
<div class="imagen-port">
<img src="img/planta.jpg" alt="">
<div class="hover-galeria">
<img src="img/puntero.png" alt="">
<p>Nuestro trabajo</p>
</div>
</div>
<div class="imagen-port">
<img src="img/planta.jpg" alt="">
<div class="hover-galeria">
<img src="img/puntero.png" alt="">
<p>Nuestro trabajo</p>
</div>
</div>
<div class="imagen-port">
<img src="img/planta.jpg" alt="">
<div class="hover-galeria">
<img src="img/puntero.png" alt="">
<p>Nuestro trabajo</p>
</div>
</div>
<div class="imagen-port">
<img src="img/planta.jpg" alt="">
<div class="hover-galeria">
<img src="img/puntero.png" alt="">
<p>Nuestro trabajo</p>
</div>
</div>
<div class="imagen-port">
<img src="img/planta.jpg" alt="">
<div class="hover-galeria">
<img src="img/puntero.png" alt="">
<p>Nuestro trabajo</p>
</div>
</div>
<div class="imagen-port">
<img src="img/planta.jpg" alt="">
<div class="hover-galeria">
<img src="img/puntero.png" alt="">
<p>Nuestro trabajo</p>
</div>
</div>
<div class="imagen-port">
<img src="img/planta.jpg" alt="">
<div class="hover-galeria">
<img src="img/puntero.png" alt="">
<p>Nuestro trabajo</p>
</div>
</div>
</div>
</div>
</section>
<section class="clientes contenedor">
<h2 class="titulo">Que dicen nuestros clientes</h2>
<div class="cards">
<div class="card">
<img src="img/salud.jpg" alt="">
<div class="contenido-texto-card">
<h4>Name</h4>
<p>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Iusto, molestiae.</p>
</div>
</div>
<div class="card">
<img src="img/salud.jpg" alt="">
<div class="contenido-texto-card">
<h4>Name</h4>
<p>Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Iusto, molestiae.</p>
</div>
</div>
</div>
</section>
<section class="about-services">
<div class="contenedor">
<h2 class="titulo">nuestros servicios</h2>
<div class="servicio-cont">
<div class="servicio-ind">
<img src="img/servicios.jpeg" alt="">
<h3>Name</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Possimus, a.</p>
</div>
<div class="servicio-ind">
<img src="img/servicio2.jpg" alt="">
<h3>Name</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Possimus, a.</p>
</div>
<div class="servicio-ind">
<img src="img/servicios3.png" alt="">
<h3>Name</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Possimus, a.</p>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="contenedor-footer">
<div class="content-foo">
<h4>Phone</h4>
<p>3508985762</p>
</div>
<div class="content-foo">
<h4>Email</h4>
<p>3508985762</p>
</div>
<div class="content-foo">
<h4>Location</h4>
<p>3508985762</p>
</div>
</div>
<h2 class="titulo-final">© Danilo Urriago | Andres
Segura</h2>
</footer>
</body>
</html>
PARTE CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container-bar{
width: 100%;
max-width: 50px;
position: fixed;
left: 0;
top: 25%;
}
.container-bar a{
display: block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
font-size: 18px;
position: relative;
transition: all 500ms ease;
color: #fff;
}
.container-bar a:hover{
background: #1c1c1c;
}
.container-bar .fa-facebook{
background: #3b5998;
border-radius: 0px 5px 0px 0px;
}
.container-bar .fa-youtube{
background: #e52a23;
}
.container-bar .fa-twitter{
background: #00acee;
}
.container-bar .fa-github{
background: #747473;
}
.container-bar .fa-pinterest{
background: #c8232c;
border-radius: 0px 0px 5px 0px;
}
.container-bar #title{
position: absolute;
background: #1c1c1c;
padding: 0px 8px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
font-size: 15px;
top:12px; left: 0px;
transition: all 500ms ease;
opacity: 0;
visibility: hidden;
z-index: -1;
}
.container-bar a:hover #title{
opacity: 1;
visibility: visible;
left: 64px;
}
.container-bar #title:after{
position: absolute;
content: '';
border-left: 7px solid transparent;
border-right: 6px solid #1c1c1c;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
right: 100%;
top: 8px;
}
#btn-social{
display: none;
}
.fa-play{
cursor: pointer;
transition: all 0.4s;
font-size: 12px;
margin-bottom: 5px;
display: inline-block;
transform: rotate(180deg);
color: #49b0e6;
}
#btn-social:checked ~ .fa-play{
transform: rotate(0deg);
}
.icon-social{
transition: all 0.4s;
transform: translateX(0%);
box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
}
#btn-social:checked ~ .icon-social{
transform: translateX(-100%);
box-shadow: 0px 1px 10px rgba(0,0,0,0.0);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
body {
background-image: url(fondo.jpg);
}
.form-register {
width: 400px;
background: #24303c;
padding: 30px;
margin: auto;
margin-top: 100px;
border-radius: 4px;
font-family: 'calibri';
color: white;
box-shadow: 7px 13px 37px #000;
}
.form-register h4 {
font-size: 22px;
margin-bottom: 20px;
}
.controls {
width: 100%;
background: #24303c;
padding: 10px;
border-radius: 4px;
margin-bottom: 16px;
border: 1px solid #1f53c5;
font-family: 'calibri';
font-size: 18px;
color: white;
}
.form-register p {
height: 40px;
text-align: center;
font-size: 18px;
line-height: 40px;
}
.form-register a {
color: white;
text-decoration: none;
}
.form-register a:hover {
color: white;
text-decoration: underline;
}
.form-register .botons {
width: 100%;
background: #1f53c5;
border: none;
padding: 12px;
color: white;
margin: 16px 0;
font-size: 16px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'open sans';
}
.contenedor{
padding: 60px 0;
width: 90%;
max-width: 1000px;
margin: auto;
overflow: hidden;
.titulo{
color: #642a73;
font-size: 30px;
text-align: center;
margin-bottom: 60px;
}
/*Header*/
header{
width: 100%;
height: 600px;
background: #11998e;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, hwb(143 22% 6%),
#11998e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, hsla(143, 85%, 58%, 0.61),
hsla(175, 80%, 33%, 0.61)),url(../img/ecology.jpg);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari
7+ */
position: relative;
nav{
text-align: right;
padding: 30px 50px 0 0;
}
nav > a{
color: aliceblue;
font-weight: 300;
text-decoration: none;
margin-right: 10px;
}
nav > a:hover{
text-decoration: underline;
}
header .textos-header{
display: flex;
height: 430px;
width: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.textos-header h1{
font-size: 50px;
color: aliceblue;
}
.textos-header h2{
font-size: 30px;
font-weight: 300px;
color: aliceblue;
}
.wave{
position: absolute;
bottom: 0;
width: 100%;
}
/* About us */
.contenedor-sobre-nosotros{
display: flex;
justify-content: space-evenly;
}
.imagen-about-us{
width: 48%;
}
.sobre-nosotros .contenido-textos{
width: 48%;
}
.contenido-textos h3{
margin-bottom: 15px;
}
.contenido-textos h3 span{
background: #4d0686;
color: aliceblue;
border-radius: 50%;
display: inline-block;
text-align: center;
width: 30px;
height: 30px;
padding: 2px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.979);
margin-right: 5px;
}
.contenido-textos p{
padding: 0px 0px 30px 15px;
font-weight: 300;
text-align: justify;
}
/*Galeria*/
.portafolio{
background: #f2f2f2;
}
.galeria-port{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.imagen-port{
width: 24%;
margin-bottom: 10px;
height: 200px;
overflow: hidden;
position: relative;
cursor: pointer;
box-shadow: 0 0 6px 0 rgb(0,0,0, .5);
}
.imagen-port >img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hover-galeria{
position: absolute;
width: 100%;
height: 100%;
top:0;
transform: scale(0);
background: hsla(123, 82%, 35%, 0.788);
transition: transform .5s;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.hover-galeria img{
width: 50px;
}
.hover-galeria p{
color: #fff;
}
.imagen-port:hover .hover-galeria{
transform: scale(1);
}
/*Clientes*/
.cards{
display: flex;
justify-content: space-evenly;
}
.cards .card{
background: #38ef7d;
display: flex;
width: 46%;height: 200px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
box-shadow: 0 0 6px 0 rgb(0, 0, 0, 0.6);
}
.cards .card img{
width: 30%;
height: 100px;
object-fit: cover;
border: 3px solid #fff;
border-radius: 50%;
display: block;
}
.cards .card > .contenido-texto-card{
width: 60%;
color: #fff;
}
.cards .card > .contenido-texto-card p{
font-weight: 300;
padding-top: 5px;
}
/* our team*/
.about-services{
background:#f2f2f2 ;
padding-bottom: 30px;
}
.servicio-cont{
display: flex;
justify-content: space-between;
align-items: center;
}
.servicio-ind{
width: 28%;
text-align: center;
}
.servicio-ind img{
width: 90%;
}
.servicio-ind h3{
margin: 10px 0;
}
.servicio-ind p{
font-weight: 300;
text-align: justify;
}
/*footer*/
footer{
background: #414141;
padding: 60px 0 30px 0;
margin: auto;
overflow: hidden;
}
.contenedor-footer{
display: flex;
width: 90%;
justify-content: space-evenly;
margin: auto;
padding-bottom: 50px;
border-bottom: 1px solid #ccc;
}
.content-foo{
text-align: center;
}
.content-foo h4{
color: #fff;
border-bottom: 3px solid #38ef7d;
padding-bottom: 5px;
margin-bottom: 10px ;
}
.content-foo p{
color: #ccc;
}
.titulo-final{
text-align: center;
font-size: 24px;
margin: 20px 0 0 0;
color: #9e9797;
}
