Pos si alguien mas necesita el diseño en figma de la clase y lo estaba buscando como yo.
https://www.figma.com/file/BIvMK5z4qpusGfr5l3Of6s/Platzi-Live-Landing?node-id=2%3A2
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
12 Días
2 Hrs
40 Min
18 Seg
Sesión 3: 10 de marzo
3/4Recursos
Aportes 8
Preguntas 4
Ordenar por:
Me propuse como reto maquetar con HTML y CSS la página clon de Platzi Day, anexo las imágenes y el código en HTML y CSS, me falta realizar los media queries para que la página sea responsive web design. Agradezco sus opiniones al respecto y consejos.
Ahora el código HTML:
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
<title>Platzi</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<nav class="navbar">
<figure class="logo-high">
<img src="./img/isotipo.webp" alt="">
<img src="./img/logotipo.webp" alt="">
</figure>
<ul>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Planes</a>
</li>
<li>
<a href="#">Cursos</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Agenda</a>
</li>
</ul>
</nav>
</header>
<main class="main-container">
<section class="section-up">
<div class="left-section">
<h1>Platzi Day</h1>
<h4>18, 19 y 20 de Marzo</h4>
<p>Acceso sin costo a todos los cursos <br> de platzi durante 72 hrs</p>
<div>
<input type="text" name="" id="" value="https://platzi.com/l/day-2712939/">
<button>Copiar</button>
</div>
</div>
<div class="right-section">
<img src="./img/Hero.webp" alt="">
</div>
</section>
<section>
<div class="first-section">
<h2>¿Qué es el Platzi Day?</h2>
<p>Platzi Day es la oportunidad perfecta para que, gracias a ti, más personas puedan descubrir <br>
y probar la experiencia de la educación profesional efectiva durante 72 horas continuas sin <br>
necesidad de contar con una suscripción.</p>
</div>
<div class="second-section">
<h2>Subscripciones con las que cuenta Platzi</h2>
<div class="sub-cat">
<div>
<h3>Basic</h3>
<p>1 estudiante</p>
</div>
<div>
<h3>Expert</h3>
<p>1 estudiante</p>
</div>
<div>
<h3>Expert +</h3>
<p>2 estudiantes</p>
</div>
</div>
</div>
<div class="third-section">
<h2>Encontrarás cursos de:</h2>
<div class="courses">
<div>
<h3>Desarrollo e <br> Ingeniería</h3>
</div>
<div>
<h3>Marketing <br> Digital</h3>
</div>
<div>
<h3>Cursos de <br> Inglés</h3>
</div>
</div>
</div>
</section>
</main>
<footer >
<div class="footer-container">
<figure class="logo-down">
<img src="./img/isotipo.webp" alt="">
<img src="./img/logotipo.webp" alt="">
</figure>
<p>Transformamos la economía de nuestros países <br> entrenando a la próxima generación de <br> profesionales en tecnología.</p>
<a href="#">Preguntas Frecuentes</a>
<a href="#">Trabaja con nosotros</a>
<a href="#">Términos y Condiciones</a>
</div>
</footer>
</body>
</html>
Y finalmente el código CSS:
:root {
--bg-nav-fot: #0C1633;
--letter-white: #FFFFFF;
--col-btn: #98CA3F;
--bg-blue: #17A2F8;
--bg-rose: #FF8080;
--input-grey: #C4C4C4;
--big-lg: 6.4rem;
--lg: 4rem;
--big-md: 3rem;
--md: 2.2rem;
--big-sm: 2rem;
--sm: 1.8rem;
--min: 1.5rem;
--f-weight-medium: 600;
--f-weight-light: 500;
--font-site: 'Montserrat', sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: var(--font-site);
}
img {
width: 100%;
}
nav {
width: 100%;
height: 6.8rem;
background-color: var(--bg-nav-fot);
}
.logo-high {
position: absolute;
top: 1.4rem;
left: 2.5rem;
}
.logo-high img:first-child {
margin-top: .3rem;
width: 2.9rem;
height: 3.2rem;
}
.logo-high img:last-child {
width: 4.8rem;
margin-bottom: .4rem;
}
.navbar ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
height: 100%;
}
.navbar li {
margin-right: 10.5rem;
}
.navbar li:last-child {
margin-right: 0;
}
.navbar a {
text-decoration: none;
color: var(--letter-white);
font-size: var(--sm);
font-weight: var(--f-weight-medium);
}
.main-container {
margin-left: 12rem;
margin-right: 12rem;
}
.section-up {
margin-top: 8rem;
margin-bottom: 4rem;
display: flex;
justify-content: space-between;
}
.left-section h1 {
font-size: var(--big-lg);
margin-top: 2rem;
margin-bottom: 2rem;
}
.left-section h4 {
font-size: var(--sm);
color: var(--col-btn);
margin-bottom: 3rem;
}
.left-section p {
font-size: var(--md);
margin-bottom: 5.5rem;
}
.left-section div {
display: flex;
}
.left-section input {
width: 34rem;
height: 3.6rem;
border: 1px solid var(--input-grey);
margin-right: 1rem;
}
.left-section input[type="text"] {
padding-left: 1.5rem;
font-family: var(--font-site);
font-size: var(--min);
}
.left-section button {
width: 13.3rem;
height: 3.6rem;
background-color: var(--col-btn);
border: none;
border-radius: .6rem;
font-size: var(--sm);
color: var(--letter-white);
}
.section-up .right-section img {
margin-right: 12rem;
width: 37.1rem;
}
.first-section h2 {
font-size: var(--lg);
margin-bottom: 2rem;
}
.first-section {
margin-bottom: 6rem;
}
.first-section p {
font-size: var(--md);
}
.second-section {
margin-bottom: 5rem;
}
.second-section h2 {
font-size: var(--lg);
margin-bottom: 4rem;
}
.sub-cat {
display: flex;
justify-content: space-between;
padding: 0 3rem;
}
.sub-cat div {
background-color: var(--bg-nav-fot);
width: 30.7rem;
height: 16.4rem;
border-radius: .8rem;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 3.1rem;
}
.sub-cat h3 {
color: var(--letter-white);
font-size: var(--big-md);
margin-bottom: 1rem;
}
.sub-cat p {
color: var(--letter-white);
font-size: var(--big-sm);
}
.third-section {
margin-bottom: 8rem;
}
.third-section h2 {
font-size: var(--lg);
margin-bottom: 6rem;
}
.courses {
display: flex;
justify-content: space-between;
}
.courses div {
width: 37.5rem;
height: 16.4rem;
border-radius: .8rem;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 3.5rem;
}
.courses h3 {
color: var(--letter-white);
font-size: var(--big-md);
}
.courses div:first-child {
background-color: var(--col-btn);
}
.courses div:nth-child(2) {
background-color: var(--bg-blue);
}
.courses div:last-child {
background-color: var(--bg-rose);
}
footer {
background-color: var(--bg-nav-fot);
}
.footer-container {
margin-right: 5.2rem;
margin-left: 5.2rem;
height: 33.7rem;
}
.logo-down {
padding-top: 5rem;
margin-bottom: 2.3rem;
}
.logo-down img:first-child {
width: 3.3rem;
}
.logo-down img:last-child {
width: 5.5rem;
}
.footer-container p {
color: var(--letter-white);
font-size: var(--min);
margin-bottom: 3rem;
}
.footer-container a {
color: var(--letter-white);
text-decoration: none;
display: block;
font-size: var(--min);
margin-bottom: 1.2rem;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
Soy nueva en programación y los shortcuts en Visual Studio me han hecho la vida mucho más fácil. Aquí se los dejo para quienes deseen 😄
Windows:
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Mac:
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
Dejo mi resultado final en GitHub haciendo el clone del diseño compartido para este reto. En mi perfil de gitHub comparto cada proyecto practico que realice por curso en caso que deseen clonarlo o ser colaboradores de alguno.
Muy bueno este Platzi Challenge. Ahora la pregunta que me hago es: debemos hacer esta misma pagina que la profesora o podemos hacer la que querremos.
nav > *
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?