23
Media | ES | Leo
Plantilla Pagina Web
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nombre de Empresa</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<style>
.banner {
background-size: cover;
background-position: center;
padding: 200px 0;
}
.banner h1 {
margin: 0;
color: white;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
font-size: 32px;
font-weight: bold;
}
.space {
padding-top: 150px;
}
.banner p {
font-size: 20px;
color: white;
opacity: .7;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.card-trip {
overflow: hidden;
background: white;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.card-trip > img {
height: 300px;
width: 100%;
object-fit: cover;
}
.card-trip h2 {
font-size: 16px;
font-weight: bold;
margin: 0;
}
.card-trip p {
font-size: 15px;
opacity: .7;
margin: 0;
}
.card-trip .card-trip-infos {
padding: 16px;
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
}
.card-trip-infos .card-trip-user {
position: absolute;
right: 16px;
top: -20px;
width: 40px;
}
.avatar-large {
width: 150px;
border-radius: 50%;
}
.btn-flat {
color: white;
padding: 8px 24px;
border-radius: 4px;
background: #670BFF;
transition: background 0.3s ease;
}
.btn-flat:hover {
background: #4D04C4;
color: white;
}
.form {
background-color: white;
padding: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.video {
background-color: black;
padding-bottom: 150px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img src="https://static.vecteezy.com/system/resources/thumbnails/001/192/266/small/rainbow.png" alt="" width="auto" height="100"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#nosotros">Nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#servicios">Productos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#equipo">Equipo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contacto">Contacto</a>
</li>
</ul>
<form class="d-flex">
<button class="btn btn-outline-success" type="submit">Whatsapp</button>
</form>
</div>
</div>
</nav>
<div class="banner" id="incio" style="background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://i0.wp.com/prismreports.org/wp-content/uploads/2022/08/iStock-1280720394.jpg?fit=1200%2C801&ssl=1);">
<div class="container">
<h1>Cambia tu vida aprende a programar!</h1>
<p>La programacion de va a ayudar a estructurar y desarrollar tus ideas, aprende juntos a profecionales. </p>
<a class="btn btn-flat" href="#">Ver más</a>
</div>
</div>
<div>
<div class="container space" id="nosotros">
<div class="text-center">
<h1>Titulo de Empresa</h1>
<p>Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Sint itaque at ea eum accusantium delectus dignissimos, iste alias dolorum. Enim porro, earum fugit minus illum possimus placeat quia recusandae consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam molestiae, nihil obcaecati veniam. Voluptatem fugiat molestiae excepturi consequatur eos, eius blanditiis minus aspernatur? Ullam illo ab et, molestias blanditiis velit.</p>
<a class="btn btn-flat" href="#">Write a story</a>
</div>
</div>
</div>
<div>
<div class="container space" id="servicios">
<div class="text-center">
<h1>Nuestros Productos</h1>
</div>
<br>
<div class="row">
<div class="col-md-4">
<div>
<div class="card-trip">
<img src="https://images.pexels.com/photos/6761423/pexels-photo-6761423.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-trip-infos">
<div>
<h6>Warrior Simple tee</h6>
<p><i class="fas fa-anchor" style="color: #2078AD;"></i> T-shirt</p>
</div>
<p class="card-trip-pricing"> $20.00 </p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<div class="card-trip">
<img src="https://images.pexels.com/photos/6761423/pexels-photo-6761423.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-trip-infos">
<div>
<h6>Warrior Simple tee</h6>
<p><i class="fas fa-anchor" style="color: #2078AD;"></i> T-shirt</p>
</div>
<p class="card-trip-pricing"> $20.00 </p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<div class="card-trip">
<img src="https://images.pexels.com/photos/6761423/pexels-photo-6761423.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-trip-infos">
<div>
<h6>Warrior Simple tee</h6>
<p><i class="fas fa-anchor" style="color: #2078AD;"></i> T-shirt</p>
</div>
<p class="card-trip-pricing"> $20.00 </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="space"></div>
<div class="video">
<div class="container space">
<div class="text-center">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/0rEoT5apIsQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
<div>
<div class="container space" id="equipo">
<div class="text-center">
<h1>Nuestro Equipo</h1>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="text-center">
<img class="avatar-large" alt="avatar-large" src="https://kitt.lewagon.com/placeholder/users/arthur-littm" />
<h3>Nombre Completo</h3>
<p>Posicion</p>
</div>
</div>
<div class="col-md-6">
<div class="text-center">
<img class="avatar-large" alt="avatar-large" src="https://kitt.lewagon.com/placeholder/users/arthur-littm" />
<h3>Nombre Completo</h3>
<p>Posicion</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="container space" id="contacto">
<div class="form">
<div class="text-center">
<h1>Contactanos</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores dolorem magni hic ab exercitationem, labore debitis repellendus suscipit</p>
</div>
<br>
<div class="">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Nombre Completo</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Correo Electronico</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Telefono</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Mensaje</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="text-center">
<a class="btn btn-flat" href="#">Write a story</a>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<div style="background-color: black; color: white;" >
<div class="container ">
<br>
<br>
<div class="row">
<div class="col-md-4 ">
<img src="https://static.vecteezy.com/system/resources/thumbnails/001/192/266/small/rainbow.png" alt="" height="100">
<br>
<br>
</div>
<br>
<div class="col-md-4 ">
<h4>Social Media</h4>
<br>
<p><i class="fab fa-instagram"></i> Instagram</p>
<p><i class="fab fa-youtube"></i> Youtube</p>
<br>
</div>
<div class="col-md-4">
<h4>Info. de Contacto</h4>
<br>
<p><i class="fas fa-envelope"></i> contact@arcoiris.com</p>
<p><i class="fas fa-phone"></i> +507 6420-0420</p>
<p><i class="fas fa-map-marker-alt"></i> Tocumen, Panama </p>
</div>
</div>
<br>
<br>
<br>
</div>
<div style="background-color: black;">
<div class="footer2">
<div class="container text-center " style="padding-top: 8px; padding-bottom: 8px;" >
<h6 style="color: white;">©2023 Arcoiris </h6>
</div>
</div>
</div>
</body>
</html>
Warriors
Logo - <img src="https://i.ibb.co/7CgTxwR/warriors-logo.png" alt="warriors-logo" border="0">
Banner - https://i.ibb.co/8sCtrch/warriorbanner.png
Producto1 - <img src="https://i.ibb.co/vmYkRhk/warriors-pro1.png" alt="warriors-pro1" border="0">
Producto 2 - <img src="https://i.ibb.co/LCBDzLp/warrios-prod2.png" alt="warrios-prod2" border="0">
Producto 3 - <img src="https://i.ibb.co/Bs3mJDR/warriors-prod3.png" alt="warriors-prod3" border="0">
Invasion Enemiga
Logo - <img src="https://i.ibb.co/WxhNCh3/invasion-enemiga.png" alt="invasion-enemiga" border="0">
Banner - https://i.ibb.co/qCmWPr5/invasion-enmigabanner.png
Producto - <img src="https://i.ibb.co/PGrsk6d/invacion-prod.png" alt="invacion-prod" border="0">
Rodriguez Tours
Logo - <img src="https://i.ibb.co/1KLjwMt/rodriguez-tours.png" alt="rodriguez-tours" border="0">
Banner - https://i.ibb.co/MZtTYnh/banner-tours.png
Proyecto 507
Logo - <img src="https://i.ibb.co/L17W9dV/507-log0.png" alt="507-log0" border="0">
Banner - https://i.ibb.co/BfvqjzS/507banner.png
Producto 1 - <img src="https://i.ibb.co/yWN22h9/507-prod1.png" alt="507-prod1" border="0">
Producto 2 - <img src="https://i.ibb.co/JpFQS3N/507-prod2.png" alt="507-prod2" border="0">
Producto 3 - <img src="https://i.ibb.co/C8nFSLW/507-prod3.png" alt="507-prod3" border="0">
LashBunny
Logo - <img src="https://i.ibb.co/sK4kvj3/lashbunny.png" alt="lashbunny" border="0">
Banner - https://i.ibb.co/hmYXdd1/lash-banner.png
Producto 1 - <img src="https://i.ibb.co/8X72Xw5/lash-prod1.png" alt="lash-prod1" border="0">
Producto 2 - <img src="https://i.ibb.co/YBmc8C1/lash-prod2.png" alt="lash-prod2" border="0">
Producto 3 - <img src="https://i.ibb.co/10cs5MN/lash-prod3.png" alt="lash-prod3" border="0">
