💚
Web Developer Fundamentals
¿Qué aprenderás sobre HTML y CSS?
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
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
7 Hrs
34 Min
48 Seg
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
22/55Recursos
Aportes 1150
Preguntas 95
Ordenar por:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lista de compras</title>
<link
href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="Lista de compras.css" />
</head>
<body>
<body>
<head>
<h1>Lista del supermecado</h1>
</head>
<main>
<ul class="pedido">
<p>Frutas</p>
<li>
<ol class="container">
<figure>
<img src="Pera.png" alt="" />
<figcaption class="nombre">Pera</figcaption>
</figure>
<figure>
<img src="Manzana.png" alt="" />
<figcaption class="nombre">Manzana</figcaption>
</figure>
<figure>
<img src="Plátano.png" alt="" />
<figcaption class="nombre">Plátano</figcaption>
</figure>
</ol>
</li>
<li>
Carnes
<ol class="container">
<figure>
<img src="Cerdo.png" alt="" />
<figcaption class="nombre">Cerdo</figcaption>
</figure>
<figure>
<img src="Res.png" alt="" />
<figcaption class="nombre">Res</figcaption>
</figure>
<figure>
<img src="Pollo.png" alt="" />
<figcaption class="nombre">Pollo</figcaption>
</figure>
</ol>
</li>
<li>
Vegetales
<ol class="container">
<figure>
<img src="Tomate.png" alt="" />
<figcaption class="nombre">Tomate</figcaption>
</figure>
<figure>
<img src="Zanahoria.png" alt="" />
<figcaption class="nombre">Zanahoria</figcaption>
</figure>
<figure>
<img src="Cebolla.png" alt="" />
<figcaption class="nombre">Cebolla</figcaption>
</figure>
</ol>
</li>
</ul>
</main>
</body>
</body>
</html>
body {
background-color: #4faf;
}
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
h1 {
margin: 20px;
text-align: center;
font-size: 40px;
}
.pedido {
font-size: 30px;
margin: 10px;
padding: 20px;
list-style-type: none;
}
ul li ol.container {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
width: 100%;
padding: 5px;
}
ul li ol figure img {
width: 200px;
height: 200px;
padding: 5px;
}
ul li ol figure figcaption.nombre {
font-size: 25px;
padding: 0px 50px;
}
Necesito práctica… las cosas no se colocan donde quiero… ayssss
body{
background-color: bisque;
display: flex;
justify-content: center;
align-items: center;
}
h1{
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
font-weight: bold;
font-size: large;
text-align: center;
}
h2{
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
font-size: small;
font-weight: bold;
text-align: center;
}
section{
background-color: rgb(236, 236, 250);
display: flex;
justify-content: space-around;
}
ul{
font-weight: bold;
padding: 20px;
}
ul ol{
font-weight: lighter;
margin-top: 20px;
}
img{
width: 200px; height: 200px;
}
video{
align-content: center;
height: 400px;
}
mi lista
Cascading style sheet (css) es la herramienta con la que le damos estilo a nuestra pagina ya sea color, tamaño, espacios, lugares de posición y más.
Cómo implementar CSS en nuestro HTML
Archivo CSS
esta es la mejor práctica en especial cuando tendremos mucho CSS, tendremos un archivo *.css y en el head del html pondremos las etiqueta <link rel=”stylesheet” href=”la direccion”>
y se aplicará el css de nuestro archivo
Etiqueta style
si tendremos poco css es posible usar la etiqueta style y directamente usarlo ahi
CSS embebido
esto no es muy bueno hacerlo pero se puede hacer si solo aplicaremos pocos atributos a pocas etiquetas con el atributo style en la etiqueta
Sintaxis CSS
Se comenta con /* contenido*/
la sintaxis es la siguiente
(cosa a modificar)
{
atributo: valor ;
atributo2: valor2;
…
}
Selector por elemento
Se indican con etiqueta{} en CSS (ejemplo p{} o h1{})
en html se aplicará a todas las etiquetas del tipo indicado
Esto es útil si queremos darle el mismo estilo a todos los elementos de un tipo como párrafo o titulos
Clases
se generan con .nombre{} en CSS
en html se indican con el atributo class=”nombre”
Esto sirve para dar el mismo estilo a muchos elementos distintos
Id
se generan con #nombre en CSS
en html se indica con el atributo id=””
Esto es útil si sólo lo usaremos con una etiqueta
Yo ya estoy diseñando mi página web ya que llevo varios meses aprendiendo de este tema (y de otros) y quiero empezar a hacer freelance.
No se preocupen si no les sale a la primera, yo también sigo equivocándome en ocasiones y de hecho en este curso he aprendido un montón de cosas que en tutoriales de youtube no decían!
Así que ánimo, la plataforma los está llevando por un camino bastante bueno para volverse expertos rapidamente!
Y recuerden, prueba, error y aprendizaje!
Lista de recetas 👩🍳
Dejeeeeen de hacer cosas que todavia no vimooooos, me siento un inutil jajajaja
Notas de la clase
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="Descripcion" content="Una pagina de prueba, para el curso HTML"/>
<meta name="robots" content="index,follow"/>
<title>Pagina de pruebas</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<H1 class="titulo">Lista de mercado</H1>
<div class="container">
<div class="container-cate">
<ul>
<li class="subtitulos-li">Frutas</li>
<ol>
<li class="lista"><a href="https://frutas.consumer.es/manzana/propiedades">Manzana</a></li>
<figure><img src="./Image/Manzanas.jpg" alt="Imagen de manzanas"></figure>
<li class="lista"><a href="https://www.infoagro.com/diccionario_agricola/traducir.asp?i=1&id=13&idt=2">Durazno</a></li>
<figure><img src="./Image/Durazno.jpg" alt="Imagen de durazno"></figure>
<li class="lista"><a href="https://www.frutas-hortalizas.com/Frutas/Presentacion-Pera.html">Pera</a></li>
<figure><img src="./Image/Peras.jpg" alt="Imagen de pera"></figure>
<li class="lista"><a href="https://www.frutas-hortalizas.com/Frutas/Presentacion-Sandia.html">Sandia</a></li>
<figure><img src="./Image/Sandia.jpg" alt="Imagen de sandia"></figure>
</ol>
</ul>
</div>
<div class="container-cate">
<ul>
<li class="subtitulos-li">Verduras</li>
<ol>
<li class="lista"><a href="https://www.frutas-hortalizas.com/Hortalizas/Presentacion-Zanahoria.html">Zanahoria</a></li>
<figure><img src="./Image/Zanahoria.jpg" alt="Imagen de Zanahoria"></figure>
<li class="lista"><a href="https://boletinagrario.com/ap-6,tomate,204.html">Tomates</a></li>
<figure><img src="./Image/Tomate.jpg" alt="Imagen de tomates"></figure>
<li class="lista"><a href="https://www.frutas-hortalizas.com/Frutas/Presentacion-Limon.html">Limon</a></li>
<figure><img src="./Image/Limones.jpg" alt="Imagen de Limones"></figure>
<li class="lista"><a href="https://www.frutas-hortalizas.com/Hortalizas/Presentacion-Lechuga.html">Lechuga</a></li>
<figure><img src="./Image/Lechuga.jpg" alt="Imagen de Lechuga"></figure>
</ol>
</ul>
</div>
</div>
<p>Desafío cumplido!!!</p>
</main>
<footer>
</footer>
</body>
</html>```
**CSS**
body{
display: flex;
background-image: url(./Image/Fondo.jpg)
}
.titulo{
font-family: Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;
font-size: 50px;
-webkit-text-stroke: 2px black;
color: #e8eddf;
display: flex;
justify-content: center;
}
.container{
width: 1200px;
display: flex;
justify-content: space-around;
}
.container-cate{
padding: 10px;
background-image: url(./Image/Fondo-notas.jpg);
border-radius: 15px;
border: solid black;
}
.subtitulos-li{
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
font-size: 22px;
font-weight: bold;
padding-bottom: 15px;
}
.container img{
width: 150px;
border-radius: 15px;
}
ol{
display: flex;
flex-direction: column;
}
li{
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
}
a{
color: green;
}```
Mi lista al estilo de platzi
- El código en GitHub :
Click acá para ver el codigo
Ya que andamos en epocas navideñas hice mi lista así
Y esto es el Css que utilicé
20. Mis apuntes sobre: “¿Cómo utilizamos CSS?: etiqueta, selector, class y por ID”
Se puede agregar el CSS de 3 maneras:
(La forma recomendada es como un link a un archivo externo CSS).
- Como link hacia un archivo externo “.css”:
<link rel="stylesheet" href="/CSS/claseCss/style.css">
- Como un bloque de código CSS dentro del head del HTML:
<style>
p{
color:blue;
font-size: 30px;
}
</style>
- Como un atributo dentro de una etiqueta HTML (estilo embebido):
<body>
<main>
<p style="color:red">I'm a text</p>
</main>
</body>
Se pueden agregar estilos en CSS la siguiente manera, colocando en la etiqueta en HTML class=“parrafo” o id=“texto”:
/* selector por elemento*/
p{
color:blue;
font-size: 40px;
}
/* selector por class */
.parrafo{
color:red;
}
/*selector por ID*/
#texto{
color:green;
font-size: 24px;
}
Les comparto el código HTML generado en clase:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clase CSS</title>
<link rel="stylesheet" href="/CSS/claseCss/style.css">
</head>
<body>
<main>
<p class="parrafo">I'm a text</p>
<p id="texto">Soy otro texto</p>
</main>
</body>
</html>
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
</head>
<body>
<main class="main">
<h1>Lista de la compra</h1>
<div class="contenedor">
<ul>
<li class="fw-900">Pasta
<ol>
<li><img src="./images/macarrones.jpg" alt="macarrones"><a href="https://www.divinacocina.es/macarrones-a-la-carbonara/" target="_blank">Macarrones</a></li>
<li><img src="./images/espaguetis.jpg" alt="espaguetis"><a href="https://www.recetasderechupete.com/espaguetis-con-setas-y-panceta/8589/" target="_blank">Espagetis</a></li>
</ol>
</li>
<li class="fw-900">
Carne
<ol>
<li><img src="./images/conejo.jpg" alt="conejo"><a href="https://www.recetas.net/receta/1011/Conejo-a-la-catalana" target="_blank">Conejo</a></li>
<li><img src="./images/pato.jpg" alt="pato"><a href="https://www.recetasderechupete.com/pato-a-la-naranja/11656/" target="_blank">Pato</a></li>
</ol>
</li>
<li class="fw-900">
Verdura
<ol>
<li><img src="./images/pimiento-rojo.jpg" alt="pimiento rojo"><a href="https://www.recetasderechupete.com/receta-de-lentejas-light-al-estilo-tradicional/938/" target="_blank">Pimiento rojo</a></li>
<li><img src="./images/zanahoria.jpg" alt="zanahoria"><a href="https://www.nooddle.es/receta/sopa-de-zanahoria-y-patata" target="_blank">Zanahoria</a></li>
</ol>
</li>
</ul>
</div>
</main>
</body>
</html>
CSS:
body {
font-family: ‘Lato’, sans-serif;
font-size: 62.5%;
background-color: #fafafafa;
}
h1 {
font-weight: 900;
font-size: 2.5rem;
text-align: center;
}
.main {
width: 80%;
margin: 0 auto;
}
.contenedor {
border: 1px solid white;
padding: 2rem 0;
border-radius: 0.7rem;
overflow: hidden;
background-color: white;
-webkit-box-shadow: -1px 0px 7px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 0px 7px -2px rgba(0,0,0,0.75);
box-shadow: -1px 0px 7px -2px rgba(0,0,0,0.75);
}
ul, ol {
list-style: none;
padding: 0;
}
ul {
display: flex;
justify-content: space-evenly;
}
ol {
display: flex;
flex-direction: column;
}
li {
text-align: center;
}
a {
text-decoration: none;
}
img {
height: 150px;
width: 150px;
object-fit: cover;
display: block;
margin-top: 3rem;
}
.fw-900 {
font-weight: 900;
font-size: 2rem;
/* margin-top: 2rem; */
}
a {
font-weight: 700;
font-size: 1.5rem;
color: black;
}
Resultado:
vi que algunos lo hicieron super chevere, creo que me falta un poco de practica y eso es lo que hare, practicar y practicar.
Hola a todos aqui aportando al desafio
https://nelsonechirinosc.github.io/Desafio-platzi-lista-super/
Me gustó el resultado 😃
CSS utilizado:
* {
background-color: #012a4a;
font-family: 'Segoe UI';
padding: 0;
margin: 0;
}
img {
width: 100px;
height: 100px;
margin-top: 20px;
border-radius: 100px;
}
h1 {
padding: 20px;
text-align: center;
background-color: #fca311;
}
.menu {
text-align: center;
background-color: #fca311;
}
ul {
border: 5px solid #073b4c;
padding: 80px;
display: inline-block;
margin: 35px;
border-radius: 20px;
color: aliceblue;
}
ol {
margin-top: -40px;
margin-bottom: -40px;
}
<code>
:root{
--first-color:#181c3c;
--second-color: #98CA3F;
}
body{
position: relative;
margin: 0;
background-color: #181c3c;
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
h1{
text-align: center;
color: var(--second-color);
}
a{
text-decoration: none;
}
section{
width: 150px;
padding: 10px 20px;
margin: 10px;
background-color: #ffffff;
color: var(--first-color);
border-color: var(--first-color);
border-radius: 10px;
}
.link__item{
color: var(--first-color);
}
.link__item:hover{
color: var(--second-color);
}
.shop__item{
color: var(--second-color);
}
.shop__item:hover{
color: #ffffff;
}
.container{
display: flex;
justify-content: center;
}
.img__item{
width: 20px;
height: 20px;
}
.ref__img{
width: 50px;
height: auto;
}
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Lista de supermercado">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi lista del super</title>
<link rel="stylesheet" href="./CSS/styles.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header>
<h1>Mi lista del super</h1>
<h1><a href="https://www.rappi.com.co/tiendas/tipo/market" target="_blank" class="shop__item"><i class='bx bx-shopping-bag'></i></a></h1>
</header>
<main>
<div class="container">
<section>
<h2>Frutas <img src="./IMG/icono_manzana.png" alt="" class="img__item"></h2>
<ul>
<li><a href="https://www.nestlecocina.es/coleccion/recetas-con-manzanas" target="_blank" class="link__item">Manzana</a></i></li>
<img src="./IMG/ref_manzana.png" alt="Esto es una Manzana" class="ref__img">
<li><a href="https://www.nestlecocina.es/ingredientes/recetas-con-pera" target="_blank" class="link__item"> Pera</a></li>
<img src="./IMG/ref_pera.png" alt="Esto es una Pera" class="ref__img">
<li><a href="https://www.nestlecocina.es/coleccion/recetas-con-fresas-y-fresones" target="_blank" class="link__item">Fresa</a></li>
<img src="./IMG/ref_fresa.png" alt="Esto es una fresa" class="ref__img">
</ul>
</section>
<br>
<section>
<h2>Carnes <img src="./IMG/icono_carne.png" alt="" class="img__item"></h2>
<ul>
<li><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-res/" target="_blank" class="link__item">Res</a></li>
<img src="./IMG/ref_res.png" alt="Esto es una res" class="ref__img">
<li><a href="https://www.cocinacaserayfacil.net/recetas-con-pollo/" target="_blank" class="link__item">Pollo</a></li>
<img src="./IMG/ref_pollo.png" alt="Esto es un pollo" class="ref__img">
<li><a href="https://www.recetasgratis.net/Cerdo-busqCate-1.html" target="_blank" class="link__item">Cerdo</a></li>
<img src="./IMG/ref_cerdo.png" alt="Esto es un cerdo" class="ref__img">
</ul>
</section>
<br>
<section>
<h2>Verduras <img src="./IMG/icono_patatas.png" alt="" class="img__item"></h2>
<ul>
<li><a href="https://www.cocinacaserayfacil.net/salsa-tomate-casera-receta/" target="_blank" class="link__item">Tomate</a></li>
<img src="./IMG/ref_tomate.png" alt="Esto es un tomate" class="ref__img">
<li><a href="https://www.pequerecetas.com/receta/7-recetas-con-zanahoria/" target="_blank" class="link__item">Zanahoria</a></li>
<img src="./IMG/ref_zanahoria.png" alt="Esto es una zanahoria" class="ref__img">
<li><a href="https://www.buzzfeed.com/rachelysanders/recetas-deliciosas-con-papas" target="_blank" class="link__item">Patata</a></li>
<img src="./IMG/ref_papa.png" alt="Esto es una papa" class="ref__img">
</ul>
</section>
<br>
<section>
<h2>Lácteos <img src="./IMG/icono_vaca.png" alt="" class="img__item"></h2>
<ul>
<li><a href="https://www.recetasderechupete.com/top-10-de-postres-con-leche/16835/" target="_blank" class="link__item">Leche</a></li>
<img src="./IMG/ref_leche.png" alt="Esto es una caja de leche" class="ref__img">
<li><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-yogurt/" target="_blank" class="link__item">Yogur</a></li>
<img src="./IMG/ref_yogur.png" alt="Esto es un yogur" class="ref__img">
<li><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-queso/" target="_blank" class="link__item">Queso</a></li>
<img src="./IMG/ref_queso.png" alt="Esto es queso" class="ref__img">
</ul>
</section>
</div>
</main>
</body>
</html>
Me costo dos horas pero lo logré, tome algunas ideas.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-widht, initial-scale">
<title>Lista Supermercado</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<h1>Lista del Supermercado</h1>
</header>
<main>
<section>
<ul>
<figure>
<img src="https://images.unsplash.com/photo-1485962093642-5f4386e84429?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
<ol>
<strong>
Frutas
</strong>
</ol>
<li>
🍐
3 Peras
<input type="checkbox">
</li>
<li>
🍇
1 Kg Uvas
<input type="checkbox">
</li>
<li>
🍎
4 Manzanas
<input type="checkbox">
</li>
<li>
🍊
1 kg Mandarinas
<input type="checkbox">
</li>
<li>
🍈
2 Melones
<input type="checkbox">
</li>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1529692236671-f1f6cf9683ba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
<ol>
<strong>Carnes</strong>
</ol>
<li>
🥩
3 kg Res
<input type="checkbox">
</li>
<li>
🐖
2 kg Cerdo
<input type="checkbox">
</li>
<li>
🥓
1 kg Tocino
<input type="checkbox">
</li>
<li>
🐔
2 pollos
<input type="checkbox">
</li>
<li>
🐟
2 kg Pescado
<input type="checkbox">
</li>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1557844352-761f2565b576?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
<ol>
<strong>Vegetales</strong>
</ol>
<li>
🍋
2 kg Limones
<input type="checkbox">
</li>
<li>
🥔
4 kg Papa criolla
<input type="checkbox">
</li>
<li>
🥑
2 kg Aguacate
<input type="checkbox">
</li>
<li>
🧅
2 kg Cebolla
<input type="checkbox">
</li>
</figure>
</ul>
<ol><strong>
Receta:
<a href="https://www.youtube.com/watch?v=BxRZol7vrAI" target="_blank">Rollo de Carne</a>
</strong>
</ol>
</section>
</main>
</body>
</html>
CSS3
html {
background-color: #395873;
}
h1 {
color: #BACBD9;
text-align: center;
}
figure {
max-width: 200px;
overflow: hidden;
}
img {
max-width: 300px;
height: 150px;
}
strong {
color: #8FBDD9;
font-size: 25px;
}
li {
color: white;
}
ul {
display: inline-flex;
}
a {
color: white;
}
**El código HTML (eliminé las lists para obtener el efecto deseado)
**
<!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="stylesheet" href="css/styles.css">
<title>Alimentos</title>
</head>
<body>
<header>
<h1 class="titulo1">Lista de <span class="titulo-span">alimentos</span></h1>
</header>
<section class="seccion">
<article>
<h2 class="lista-item" id="fruta">Frutas</h2>
<figure>
<img class="imagen-producto" src="img/alimento_fresa.png" alt="Una fresa sobre fondo azul">
<figcaption class="desc-producto">Fresa</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_durazno.png" alt="tres duraznos jugosos y rebanados sobre un fondo blanco">
<figcaption class="desc-producto">Durazno</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_lulo.png" alt="Una fresa sobre fondo azul">
<figcaption class="desc-producto">Lulo</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_manzana.png" alt="tres duraznos jugosos y rebanados sobre un fondo blanco">
<figcaption class="desc-producto">Manzana</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_naranja.png" alt="Una fresa sobre fondo azul">
<figcaption class="desc-producto">Naranja</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_uva.png" alt="tres duraznos jugosos y rebanados sobre un fondo blanco">
<figcaption class="desc-producto">Uva</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_banano.png" alt="Una fresa sobre fondo azul">
<figcaption class="desc-producto">Banana</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_maracuya.png" alt="tres duraznos jugosos y rebanados sobre un fondo blanco">
<figcaption class="desc-producto">Maracuya</figcaption>
</figure>
</article>
<hr>
<article>
<h2 class="lista-item" id="carne">Carnes</h2>
<figure>
<img class="imagen-producto" src="img/alimento_carne_res.png" alt="Una porción de punta de anca con papas fritas y ensalada sobre un tablon de madera">
<figcaption class="desc-producto">Carne de Res</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_carne_cerdo.png" alt="Una costilla de cerdo a termino medio con hojas de oregano">
<figcaption class="desc-producto"><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/" target="_blank">Cerdo</a></figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_camaron.png" alt="Una porción de punta de anca con papas fritas y ensalada sobre un tablon de madera">
<figcaption class="desc-producto">Camarón</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_conejo.png" alt="Una costilla de cerdo a termino medio con hojas de oregano">
<figcaption class="desc-producto"><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/" target="_blank">Conejo</a></figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_higado.png" alt="Una porción de punta de anca con papas fritas y ensalada sobre un tablon de madera">
<figcaption class="desc-producto">Higado</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_atun.png" alt="Una costilla de cerdo a termino medio con hojas de oregano">
<figcaption class="desc-producto"><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/" target="_blank">Atún</a></figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_pescado.png" alt="Una porción de punta de anca con papas fritas y ensalada sobre un tablon de madera">
<figcaption class="desc-producto">Mojarra</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_pollo.png" alt="Una costilla de cerdo a termino medio con hojas de oregano">
<figcaption class="desc-producto"><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/" target="_blank">Pollo</a></figcaption>
</figure>
</article>
<hr>
<article>
<h2 class="lista-item" id="verdura">Verduras</h2>
<figure>
<img class="imagen-producto" src="img/alimento_lechuga.png" alt="Una plantación de lechuga crespa que se extiende hacia el horizonte">
<figcaption class="desc-producto">Lechuga Crespa</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_tomate.png" alt="Una un tomate grande">
<figcaption class="desc-producto">Tomate</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_brocoli.png" alt="Una plantación de lechuga crespa que se extiende hacia el horizonte">
<figcaption class="desc-producto">Brócoli</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_cebolla-larga.png" alt="Una un tomate grande">
<figcaption class="desc-producto">Cebolla Larga</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_cebolla.png" alt="Una plantación de lechuga crespa que se extiende hacia el horizonte">
<figcaption class="desc-producto">Cebolla</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_cilantro.png" alt="Una un tomate grande">
<figcaption class="desc-producto">Cilantro</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_espinaca.png" alt="Una plantación de lechuga crespa que se extiende hacia el horizonte">
<figcaption class="desc-producto">Espinaca</figcaption>
</figure>
<figure>
<img class="imagen-producto" src="img/alimento_remolacha.png" alt="Una un tomate grande">
<figcaption class="desc-producto">Remolacha</figcaption>
</figure>
</article>
</section>
<footer>
<h3 class="pie"><span class="pie-span">Desarrollado con amor por </span><a href="https://www.mrd2.co">MRD2</a></h3>
</footer>
</body>
</html>```
**El código CSS**
@font-face{
font-family: ‘montserrat-medium’;
src: url(’…/fonts/Montserrat/Montserrat-Medium.ttf’);
}
@font-face{
font-family: ‘montserrat-bold’;
src: url(’…/fonts/Montserrat/Montserrat-Bold.ttf’) ;
}
@font-face{
font-family: merryweather-regular;
src: url(’…/fonts/Merriweather/Merriweather-Regular.ttf’);
}
@font-face{
font-family: caveat-semibold;
src: url(’…/fonts/Caveat/Caveat-SemiBold.ttf’);
}
body{
background-color: #ECEEED;
padding: 0px;
margin: 0px;
}
header{
padding-top: 0px;
margin-top: 0px;
background-color: #bb2205;
padding-bottom: 10px;
}
a{
text-decoration: none;
}
hr{
width: 200px;
margin-top: 50px;
margin-bottom: 50px;
border: 1px solid #d2d3c9;
}
.titulo1{
text-align: center;
font-family: merryweather-regular;
color: #FFFFFF;
margin: 0px;
}
.titulo-span{
font-family: caveat-semibold;
color: #f6830f;
font-size: 60px;
}
li{
list-style-type: none;
}
.lista-item{
font-family: montserrat-bold;
text-align: center;
list-style-type: none;
font-size: 30px;
}
#fruta{
color: #FF0040;
}
#carne{
color: #bb2205;
}
#verdura{
color: #0D8D2C;
}
article{
margin-left: auto;
margin-right: auto;
display: block;
width: 92%;
margin-top: 20px;
}
figure{
display: inline-block;
}
.imagen-producto{
border-radius: 20px;
box-shadow: 3px 3px 50px #BDBFBE;
}
.desc-producto{
font-family: merryweather-regular;
text-align: center;
margin-top: 15px;
}
.pie{
text-align: center;
font-family: montserrat-bold;
font-size: 18px;
}
.pie-span{
font-family: caveat-semibold;
font-size: 22px;
color: #f6830f;
}
No es mucho, pero es trabajo honesto 😄
Me es grato encontrar muchos ejemplos en los comentarios, de los cuales me basaré para mejorar mi codificaciòn en css, mientras les comparto mi avance del reto. Saludos! ! 😁
<body>
<main>
<h1>Pokedex</h1>
<section>
<figure>
<img src="https://images3.alphacoders.com/100/thumb-1920-1009976.jpg" alt="Pikachu">
<figcaption>Pikachu</figcaption>
</figure>
<h3>Iformación</h3>
<ul>
<li>
Vida: 100%
</li>
<li>
Defensa: 100
</li>
<li>
Ataque: 150
</li>
</ul>
</section>
<section>
<figure>
<img src="https://alfabetajuega.com/hero/2020/08/Charmander-1.jpg?width=1200&aspect_ratio=1200:631" alt="Pikachu">
<figcaption>Charmander</figcaption>
</figure>
<h3>Iformación</h3>
<ul>
<li>
Vida: 100%
</li>
<li>
Defensa: 150
</li>
<li>
Ataque: 150
</li>
</ul>
</section>
<section>
<figure>
<img src="https://alfabetajuega.com/hero/2021/09/pokemon-go-squirtle.jpg?width=1200&aspect_ratio=1200:631" alt="Pikachu">
<figcaption>Pikachu</figcaption>
</figure>
<h3>Iformación</h3>
<ul>
<li>
Vida: 100%
</li>
<li>
Defensa: 100
</li>
<li>
Ataque: 150
</li>
</ul>
</section>
</main>
</body>
css3
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
background: url(https://i.ebayimg.com/images/g/m08AAMXQCtlRU098/s-l300.jpg);
}
h1{
color: yellow;
}
section{
width: 240px;
height: 250px;
margin: 20px;
background-color: yellow;
border-radius: 20px;
display: inline-block;
}
figure img{
width: 200px;
border-radius: 20px;
object-fit: cover;
margin: 20px 0 0 20px;
}
figcaption{
background-color: lightgray;
padding-left: 80px;
}
h3{
padding-left: 70px;
}
section ul {
list-style: none;
padding-left: 80px;
}
Lo hice todo de nuevo para recordar lo aprendido. Creo que con las clases que siguen aprenderé a poder poner cada lista que dividí en un contendor para poder cambiar de posición. Además mover la posición de los button e input type “submit”
Ahi vamos maso menos.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Mi lista de compras</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<h1>Lista de compras by Marie</h1>
</header>
<main>
<div id=contenedor>
<section id=frutas>
<h3>Frutas</h3>
<ul>
<li><img src="./Pics/Manzanas.jpg" alt="Unas manzanas" width="150"><br>5 Manzanas 🍎</li>
<br>
<li><img src="./Pics/Peras.jpg" alt="Unas peras" width="150"><br>4 Peras 🍐</li>
<br>
<li><img src="./Pics/Pinas.jpg" alt="Unas piñas" width="150"><br>2 Piñas 🍍</li>
<br>
<li><img src="./Pics/Fresas.jpg" alt="Unas fresas" width="150"><br>1 paquete de fresas 🍓</li>
<br>
<li><img src="./Pics/Banano.jpg" alt="Unos bananos" width="150"><br>1 banano 🍌</li>
</ul>
<p>
¡Y ya estamos listos para nuestra
<a class="links" href="https://www.recetasnestle.com.co/recetas/ensalada-de-fruta-con-queso" target="_blank">ensalada de frutas!</a>
</p>
</section>
<section id=verduras>
<h3>Verduras</h3>
<ul>
<li><img src="./Pics/Lechuga.jpg" alt="Una lechuga" width="150"><br>1 lechuga romana 🥗</li>
<br>
<li><img src="./Pics/Pepinillos.jpg" alt="Unos pepinillos" width="150"><br>4 pepinillos 🥒</li>
<br>
<li><img src="./Pics/Ajonjoli.jpg" alt="Ajonjolí" width="150"><br>1 ajonjolí 🥗</li>
<br>
<li><img src="./Pics/Ajo.jpg" alt="Unos ajos" width="150"><br>4 ajos 🧄</li>
</ul>
<p>
Y con un par de ingredientes más, nuestra
<a class="links" href="https://www.cocinafacil.com.mx/recetas-de-comida/receta/ensalada-de-atun-y-aguacate/" target="_blank">ensalada</a>
estará lista.
</p>
</section>
<section id=carnes>
<h3>Carnes</h3>
<ul>
<li><img src="./Pics/Carne.jpg" alt="Carne" width="150"><br>1 kg de carne 🍖</li>
<br>
<li><img src="./Pics/Pollo.jpg" alt="Pollo" width="150"><br>1 bandeja de pollo 🍗</li>
<br>
<li><img src="./Pics/Chorizos.jpg" alt="Unos chorizos" width="150"><br>4 chorizos 🌭</li>
<br>
<li><img src="./Pics/Tocino.jpg" alt="Tocineta" width="150"><br>1 paquete de tocineta 🥓</li>
</ul>
<p>
¡Para hacer la mejor
<a class="links" href="https://www.recetasnestle.com.co/recetas/picada-tipica" target="_blank">picada!</a>
</p>
</section>
</div>
<p id=final>Hecho con amor 💚</p>
</main>
</body>
</html>```
CSS
body {
background: linear-gradient(to bottom, rgb(0, 87, 128), white)
}
h1 {
align-items: center;
width: 600px;
text-align: center;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: white;
font-size: 30px;
font-style: italic;
font-weight: bolder;
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
background: #44a9d1;
padding: 20px;
border: 5px solid #5878ca;
margin: 20px auto;
border-radius: 35px 0px 35px 0px;
}
#contenedor{
margin: 20px auto;
text-align: center;
}
section {
vertical-align: top;
display: inline-block;
width: 300px;
background: #44a9d1;
padding: 20px;
border: 5px solid #5878ca;
margin: 20px;
border-radius: 35px 0px 35px 0px;
}
h3{
text-align: center;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: white;
font-size: 20px;
font-style: italic;
font-weight: bolder;
text-shadow: 2px 2px 2px black;
}
li{
text-align: center;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: black;
font-weight: bold;
}
p{
text-align: center;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: white;
font-style: italic;
font-weight: bold;
text-shadow: 1px 1px 1px black;
}
#final {
align-items: center;
width: 600px;
text-align: center;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #44a9d1;
font-size: 30px;
font-style: italic;
font-weight: bolder;
text-shadow: 1px 1px 2px black;
margin: 20px auto;
}```
https://uigradients.com/#CheerUpEmoKid
aqui podemos encontrar colores muy bonitos para modificar nuestro background!
se los recomiendo mucho.
RESULTADO
HTML
CSS
Todavía es nivel pollito 🙈 pero me está gustando mucho el curso 😍
Estructura del css
Clase 22 - ¿Cómo utilizamos CSS?: Por etiqueta, selector, class y por ID
¿De qué formas podemos agregar CSS a HTML?
- Usando la etiqueta <link>.
- Usando la etiqueta <style>
- Usando el atributo style en cualquier etiqueta.
¿Cómo funciona la etiqueta <link>?
- Esta etiqueta requiere dos atributos, rel y href.
- rel = Nos permite indicarle al navegador el tipo de archivo que vamos a referenciar. En este caso el valor que debe llevar el atributo es stylesheet.
- href = Nos permite indicarle al navegador la ruta o ubicación del archivo CSS que debe cargar e implementar en el HTML.
- Sintaxis:
<link rel="stylesheet" href="style.css">
¿Cómo deberíamos de trabajar y ubicar con los archivos HTML y CSS en nuestro proyecto web?
- Debemos de crear una sola carpeta o directorio que contenga a estos archivos.
¿Cómo funciona la etiqueta <style>?
- Esta etiqueta debemos de ubicarla dentro de la etiqueta <head>. Dentro de esta etiqueta vamos a ir escribiendo el CSS con su sintaxis.
- Sintaxis:
<style>
p
{
color: aqua;
font-size: 30px;
}
</style>
¿Cómo funciona el atributo style?
- Este atributo lo podemos usar en cualquier etiqueta de HTML. Para agregar CSS usando esta forma debemos ir escribiendo código CSS como valor de este atributo, pero debemos de tener en cuenta de usar la siguiente sintaxis:
- Sintaxis:
<p style="color: aliceblue; font-size: 15px;"> Texto </p>
- Como podemos ver cada elemento de CSS se debe separar por un punto y coma ( ; ).
¿Cómo se le llama a la forma de agregar estilos usando el atributo style en las etiquetas HTML?
- Estilos embebidos.
¿Cuál es la mejor forma que hay para integrar CSS en los archivos HTML?
- Usando la etiqueta <link>.
¿Por qué usar CSS con la etiqueta <style> no es buena práctica?
- Porque si tenemos escrito mucho CSS en esta etiqueta nuestro proyecto se demorara mucho tiempo en cargar.
¿Por qué es mala práctica agregar CSS usando el atributo style?
- Porque esto podría sobreescribir el CSS que hayamos escrito previamente.
¿Qué selectores podemos usar para agregar estilos a nuestras etiquetas HTML?
- Etiqueta.
- Class.
- Id.
¿Cómo podemos asignar estilos a una etiqueta HTML usando el selector de etiqueta?
- Lo podemos hacer usando la siguiente sintaxis dentro de nuestro archivo CSS.
- Sintaxis:
p
{
color: blue;
font-size: 40px;
}
- Como vemos lo que estamos haciendo en este caso es asignarle los estilos de color y font-size a todas las etiquetas <p> de nuestro proyecto web.
¿Cómo podemos asignar estilos a una etiqueta HTML usando el selector class?
- Lo primero que debemos de tener en cuenta para usar este método es que debemos escribir el atributo class al o los elementos que queremos agregarle estilos de la siguiente manera:
- Sintaxis:
<p class="text">Texto</p>
- Si queremos que los estilos afecten a un grupo determinado de etiquetas este es el mejor método, solo debemos de tener en cuenta de asignar el atributo class con el mismo valor a todas las etiquetas que queremos afectar.
- Luego de asignar el atributo debemos irnos a nuestro archivo CSS y usar el selector class de la siguiente manera
- Sintaxis:
.text
{
color: red;
}
- Cómo vemos la manera de usar el selector class en nuestros archivos CSS es escribir un punto (.) y seguido el valor que tienen las etiquetas HTML en su atributo class.
¿Cómo podemos asignar estilos a una etiqueta HTML usando el selector Id?
- Lo primero que debemos de tener en cuenta para usar este método es que debemos escribir el atributo id al elemento que queremos agregarle estilos de la siguiente manera:
- Sintaxis:
<p id="textos">Textos</p>
- Este método solo puede afectar a un solo elemento, además no se recomienda usar porque el atributo id se debe usar en JavaScript y no con CSS.
Luego de asignar el atributo debemos irnos a nuestro archivo CSS y usar el selector id de la siguiente manera - Sintaxis:
#textos
{
color: green;
font-size: 24px;
}
- Como vemos la forma de usar el selector id en nuestros archivos CSS es escribiendo el símbolo de numeral (#) y seguido de él debemos de escribir el mismo valor que escribimos en la etiqueta que queremos afectar.
¿Cómo podemos crear comentarios en CSS?
- Usando la siguiente sintaxis
/* Comentario */
El feedback es bienvenido🙂
<!DOCTYPE html>
<html lang="es">
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Esta página te moestrará gatitos">
<meta name="robots" content="index,follow">
<title>Lista del super</title>
<meta name="viewport" content="width=device-width, inicial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<header>
<h1>Lista del super</h1>
</header>
<main>
<ul>
<li class="item_title">Frutas</li>
<ol>
<li class="item_subtitle"> Manzanas
<p>
<img src="./pics/manzana.jpg" alt="Manzanas">
</p>
</li>
<li class="item_subtitle">Uvas
<p>
<img src="./pics/uvas.jpg" alt="Uvas" >
</p>
</li>
<li class="item_subtitle">Naranjas
<p>
<img src="./pics/naranjas.jpg" alt="Naranjas" >
</p>
</li>
<li class="item_subtitle">Peras
<p>
<img src="./pics/pera.jpg" alt="Peras" >
</p>
</li>
<li class="item_subtitle">Aguacates
<p>
<img src="./pics/aguacate.jpg" alt="Aguacate" >
</p>
</li>
</ol>
<li class="item_title">Verduras</li>
<ol>
<li class="item_subtitle">Calabazas
<P>
<img src="./pics/calabaza.jpg" alt="Calabazas" >
</P>
</li>
<li class="item_subtitle">Zanahorias
<p>
<img src="./pics/zanahorias.jpg" alt="Zanahorias" >
</p>
</li>
<li class="item_subtitle">Brocoli
<P>
<img src="./pics/brocoli.jpg" alt="Brocoli" >
</P>
</li>
<li class="item_subtitle">Papas
<p>
<img src="./pics/papas.jpg" alt="Papas" >
</p>
</li>
<li class="item_subtitle">Espinacas
<p>
<img src="./pics/espinaca.jpg" alt="Espinacas" ">
</p>
</li>
</ol>
<li class="item_title">Carnes</li>
<ol>
<li class="item_subtitle" >
<a href="https://www.youtube.com/watch?v=00uRfnaHrEo" target="_blank">
Pechuga de pollo
<p>
<img src="./pics/pollo.jpg" alt="Pechuga de pollo" >
</p>
</a>
</li>
<li class="item_subtitle">
<a href="https://www.youtube.com/watch?v=h6D62cZXkwc" target="_blank" >
Alitas
<p>
<img src="./pics/alitas.jpg" alt="Alitas de pollo" >
</p>
</a>
</li>
<li class="item_subtitle">
<a href="https://www.youtube.com/watch?v=9OUncLeeuCw" target="_blank">
Filete de pescado
<p>
<img src="./pics/pescado.png" alt="Pechuga de pescado" >
</p>
</a>
</li>
<li class="item_subtitle">
<a href="https://www.youtube.com/watch?v=Hww4Cqz4v30" target="_blank">
Carne molida
<p>
<img src="./pics/molida.jpg" alt="Carne molida" >
</p>
</a>
</li>
</ol>
</ul>
</main>
</body>
body {
background-color: rgba(49, 198, 218, 0.2);
}
h1 {
text-align: center;
font-family: cursive;
font-style:normal;
}
li {
display: inline-block;
text-align: center;
padding-inline-end: 50px;
}
img {
height: 150px;
width: 150px;
border-radius: 75px;
display: inline-block;
}
.item_title {
font-family: sans-serif;
font-style:normal;
text-align: right;
font-size: 20px;
padding-block-start: 20px;
padding-block-end: 20px;
}
.item_subtitle :hover {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: normal;
font-size: 15px;
color: black;
}
Les comparto mi lista✔️
Este es mi resultado al reto con los conocimientos que hemos adquirido y un poco de busqueda.
Quiero aprender maquetación si no estoy mal para organizar los elementos a mi antojo.
Estoy muy motivado!
No olvides las 3 maneras de aplicar estilos a los diversos elementos en HTML5:
Mi lista con nuevas características.
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">
<meta name="description" content="La lista del supermercado">
<title>Lista del supermercado</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<h1>Soy la lista del super!</h1>
</header>
<main>
<section class="lista">
<ul>
<li class="frutas">
<h3>Frutas</h3>
<ol>
<li>
<a href="https://www.recetasnestle.com.mx/recetas/postres/manzanas-con-canela">Manzana
🍏</a>
</li>
<li>
<a
href="https://www.quericavida.com/recetas/empanadas-de-platano-maduro-y-queso/21b4e266-eff2-4870-8b10-875045b015bb">Platano🍌</a>
</li>
</ol>
</li>
<li class="carnes">
<h3>Carnes</h3>
<ol>
<li>
<a href="https://www.youtube.com/watch?v=8fz_GMOP5Qc">Pollo🍗</a>
</li>
<li>
<a href="https://www.recetasgratis.net/receta-de-carne-molida-con-papas-42329.html">Carne
Molida🧆</a>
</li>
</ol>
</li>
<li class="verduras">
<h3>Verduras</h3>
<ol>
<li>
<a href="https://www.directoalpaladar.com/postres/bocaditos-de-limon-receta-1">Limón🍋</a>
</li>
<li>
<a
href="https://www.hogarmania.com/cocina/recetas/aperitivos/croquetas-zanahoria-20005.html">Zanahoria🥕</a>
</li>
</ol>
</li>
</ul>
</section>
<article>
<h1>Platillos</h1>
</article>
<section class="imagenes">
<picture>
<source media="(min-width:450px)" srcset="./img/manzanas.jpg">
<img src="./img/manzanas.jpg" alt="Postre de manzanas">
</picture>
<picture>
<source media="(min-width:450px)" srcset="./img/platanos.jpg">
<img src="./img/platanos.jpg" alt="Postre de platano">
</picture>
<picture>
<source media="(min-width:450px)" srcset="./img/pollo.jpg">
<img src="./img/pollo.jpg" alt="Platillo de pollo">
</picture>
<picture>
<source media="(min-width:450px)" srcset="./img/carne molida.jpg">
<img src="./img/carne molida.jpg" alt="Empanada de carne molida">
</picture>
<picture>
<source media="(min-width:450px)" srcset="./img/limon.jpg">
<img src="./img/limon.jpg" alt="Postre de limón">
</picture>
<picture>
<source media="(min-width:450px)" srcset="./img/zanahoria.jpg">
<img src="./img/zanahoria.jpg" alt="Platillos de zanahoria">
</picture>
</section>
</main>
<footer>
<h4>Creado con amor!!</h4>
</footer>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
header {
background-color: #f9844a;
font-size: 30px;
border: 1px solid #023047;
text-align: center;
/* margin-bottom: 15px; */
padding: 25px 0;
color: #4d908e;
}
.lista ul{
padding-top: 0px;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
padding-bottom: 25px;
/* border: 1px solid #023047; */
}
.lista ul h3{
padding-bottom: 5px;
}
.lista ul li{
list-style: none;
}
.lista ul li {
padding-top: 10px;
padding-bottom: 10px;
}
.frutas {
border: 1px solid #023047;
width: 100%;
text-align: center;
background-color: #90be6d;
color: #2d6a4f;
}
a{
text-decoration: none;
cursor: pointer;
transform: scale(1);
transition: 0.15s;
}
a:hover {
transform: scale(1.2);
}
.carnes {
border: 1px solid #023047;
width: 100%;
text-align: center;
background-color: #f94144;
color: #f9844a;
}
.verduras {
border: 1px solid #023047;
width: 100%;
text-align: center;
background-color: #d8f3dc;
color: #2d6a4f;
}
article{
background-color: #f9844a;
font-size: 30px;
border: 1px solid #023047;
text-align: justify;
/* margin-bottom: 15px; */
padding: 25px 0;
color: #4d908e;
}
.imagenes {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 8px;
background-color: #000814;
}
.imagenes img{
width: 100%;
height: 250px;
transform: scale(1);
transition: 0.15s;
cursor: pointer;
}
.imagenes img:hover{
transform: scale(1.2);
}
.imagenes img:not(hover){
transform: scale(0.8);
}
Les comparto mi código CSS y abajo el código HTML, también el enlace hacia github pages:
https://joeysolen.github.io/supermarket-list/
body{
background-color: rgb(28, 78, 87);
font-family: 'Roboto', sans-serif;
}
header{
background-color: rgb(131, 236, 117);
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
width: 98%;
margin: auto;
position: fixed;
z-index: 10;
}
nav{
margin: 5px;
}
h1{
text-align: center;
color: rgb(19, 83, 11);
}
h3{
margin-bottom: 0px;
}
h4{
margin: 10px;
padding: 8px;
}
hr{
margin-top: 0px;
margin-right: 45px;
}
article{
color: #fff;
margin:5px;
padding: 80px 1% 1% 1%;
}
section{
background-color: rgb(255, 235, 205);
border-radius: 5px;
margin: 5px;
padding: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
ul{
list-style: none;
}
figure{
width:40%;
display: flex;
align-items: center;
}
footer{
background-color: rgb(131, 236, 117);
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 5px;
}
<!DOCTYPE html>
<html lang="es">
<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">
<meta name="robots">
<title>🛒 Lista del supermercado 💵</title>
<link rel="stylesheet" href="./CSS/estilos.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,800;1,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<!--TÍTULO-->
<nav>
<h1>🛒 Lista del supermercado 💵</h1>
</nav>
</header>
<main>
<!--PÁRRAFO-->
<article>
<h2>Esta es mi lista del supermercado</h2>
<p>A continuación les presento mi lista del supermercado, apliqué algunos conceptos que ya conocía para reforzar y complementar en este curso.</p>
</article>
<!--VIDEO-->
<section>
<video src="./video/comida.mp4#t=05,10" controls preload="auto" style="margin: 5px; padding: 5px; width: 96%;"></video>
</section>
<!--LISTAS ORDENADAS Y DESORDENADAS, IMÁGENES Y ENLACES-->
<section>
<ul>
<!--PRIMERA LISTA-->
<li><h3>🍒 Frutas</h3></li>
<hr>
<ol>
<figure>
<img src="./img/manzana-royal.png" alt="Manzana Royal" style="width: 30%; margin-right: 30px;">
<li><a href="https://cutt.ly/PXRYaTM" target="_blank" style="text-decoration: none; color: rgb(66, 27, 0);">Manzana</a></li>
</figure>
<figure>
<img src="./img/naranja.png" alt="Naranja" style="width: 30%; margin-right: 30px;">
<li><a href="https://cutt.ly/pXRYd6K" target="_blank" style="text-decoration: none; color: rgb(66, 27, 0);">Naranja</a></li>
</figure>
<figure>
<img src="./img/mandarina.png" alt="Mandarina Royal" style="width: 30%; margin-right: 30px;">
<li><a href="https://cutt.ly/2XRYhXp" target="_blank" style="text-decoration: none; color: rgb(66, 27, 0);">Mandarina</a></li>
</figure>
</ol>
<!--SEGUNDA LISTA-->
<li><h3>🥬 Verduras</h3></li>
<hr>
<ol>
<figure>
<img src="./img/lechuga.png" alt="Manzana Royal" style="width: 30%; margin-right: 30px;">
<li><a href="https://cutt.ly/ZXRYzvi" target="_blank" style="text-decoration: none; color: rgb(66, 27, 0);">Lechuga</a></li>
</figure>
<figure>
<img src="./img/espinaca.png" alt="Manzana Royal" style="width: 30%; margin-right: 30px;">
<li><a href="https://cutt.ly/fXRYvGj" target="_blank" style="text-decoration: none; color: rgb(66, 27, 0);">Espinaca</a></li>
</figure>
<figure>
<img src="./img/repollo.png" alt="Manzana Royal" style="width: 30%; margin-right: 30px;">
<li><a href="https://cutt.ly/QXRYmLT" target="_blank" style="text-decoration: none; color: rgb(66, 27, 0);">Repollo</a></li>
</figure>
</ol>
<!--TERCERA LISTA-->
<li><h3>🥩 Carnes</h3></li>
<hr>
<ol>
<figure>
<img src="./img/res.png" alt="Manzana Royal" style="width: 30%; margin-right: 30px;">
<li><a href="https://cutt.ly/0XRYTec" target="_blank" style="text-decoration: none; color: rgb(66, 27, 0);">Res</a></li>
</figure>
<figure>
<img src="./img/cerdo.png" alt="Manzana Royal" style="width: 30%; margin-right: 30px;">
<li><a href="https://cutt.ly/HXRYY34" target="_blank" style="text-decoration: none; color: rgb(66, 27, 0);">Cerdo</a></li>
</figure>
<figure>
<img src="./img/pollo.png" alt="Manzana Royal" style="width: 30%; margin-right: 30px;">
<li><a href="https://cutt.ly/tXRYPib" target="_blank" style="text-decoration: none; color: rgb(66, 27, 0);">Pollo</a></li>
</figure>
</ol>
</ul>
</section>
</main>
<footer>
<div>
<h4>Proyecto creado por José Moreno 🤖</h4>
</div>
</footer>
</body>
</html>```
despues de mucho ensayo y error
Después de muchos ensayos😁😁😁
<!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>Lista del supermercado</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main>
<h1>Lista del supermercado</h1>
<section>
<ul class="meat">
<h3>Carnes</h3>
<li>
<a target="_blank" href="https://www.cocinacaserayfacil.net/recetas-con-pollo/">Pollo</a>
<img src="https://estaticos.miarevista.es/media/cache/1140x_thumb/uploads/images/article/5e5d78c35cafe81b4d6105b8/carne-pollo.jpg" alt="pollo" width="100px">
</li>
<li>
<a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-res/">Res</a>
<img src="https://dam.cocinafacil.com.mx/wp-content/uploads/2019/05/cortes-de-carne-01.png" alt="res" width="100px">
</li>
<li>
<a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/">Cerdo</a>
<img src="https://gourmet.expob2b.es/uploads/fotos_noticias/2017/09/w800px_16205-128419-hablamos-de-la-carne-de-cerdo.jpg" alt="cerdo" width="100px">
</li>
</ul>
<ul class="vegetables">
<h3>Verduras</h3>
<li>
<a target="_blank" href="https://www.cocinacaserayfacil.net/recetas-con-pollo/">Frutas</a>
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/frutas-1552246920.jpg?crop=1.00xw:0.753xh;0,0.105xh&resize=980:*" alt="frutas" width="100px">
</li>
<li>
<a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-res/">Espinaca</a>
<img src="https://www.clikisalud.net/wp-content/uploads/2016/07/mantener-frescura-espinaca.jpg" alt="espinaca" width="100px">
</li>
<li>
<a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/">Cebolla</a>
<img src="https://www.clikisalud.net/wp-content/uploads/2016/10/cebolla.jpg" alt="cebolla" width="100px">
</li>
</ul>
<ul class="milk">
<h3>Lácteos</h3>
<li>
<a target="_blank" href="https://www.cocinacaserayfacil.net/recetas-con-pollo/">Leche</a>
<img src="https://thefoodtech.com/wp-content/uploads/2020/05/jarras-vasos-con-leche.jpg" alt="leche" width="100px">
</li>
<li>
<a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-res/">Yogurt</a>
<img src="https://cdn-3.expansion.mx/dims4/default/5eb0946/2147483647/strip/true/crop/5472x3648+0+0/resize/800x533!/quality/90/?url=https%3A%2F%2Fcherry-brightspot.s3.amazonaws.com%2F9e%2F70%2F25103ecf4f379f1216e4430dd07c%2Fshutterstock-449274190.jpg" alt="yogurt" width="100px">
</li>
<li>
<a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/">Avena</a>
<img src="https://i.blogs.es/fdd250/1366_20001/1366_2000.jpg" alt="avena" width="100px">
</li>
</ul>
</section>
</main>
</body>
</html>
<code>
body{
margin: 0;
}
h1{
display: block;
text-align: center;
font-size: 32px;
color: #1c1c1c;
font-weight: 700;
font-family: sans-serif;
}
main{
text-align: center;
display: block;
margin: 0 200px;
background-color: rgba(255, 252, 203, 0.308);
padding: 25px;
}
section{
display: inline-block;
}
section ul{
display: inline-block;
padding: 0 30px;
}
section ul h3{
text-align: center;
font-size: 28px;
color: #3a3a3a;
font-weight: 600;
font-family: sans-serif;
}
section ul li{
display: block;
margin-bottom: 20px;
}
section li a{
font-size: 24px;
font-family: sans-serif;
font-weight: 400;
text-decoration: none;
display: block;
}
section .meat li a{
color: rgb(58, 14, 23);
}
section .vegetables li a{
color: rgb(14, 78, 17);
}
section .milk li a{
color: rgb(189, 181, 75);
}
section ul li img{
border-radius: 50%;
margin-top: 8px;
height: 100px;
}
buenísimo
aqui aprovechando el especial de todo free el 30 31 de octubre de 2020
Les quiero compartir aquí mi lista de compras con HTML y CSS, me tomo bastante tiempo y muchos errores que me frustraban, ya que no se veía como yo quería, pero que pude solucionar y me enseñaron muchas cosas. No se rindan el camino de la programación es muy largo y nunca se termina de aprender todo, lo importante es seguir adelante.
Hola
Así quedó mi lista 😃
Hice este por mi cuenta 😃 ![](
<code> <!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="stylesheet" href="stylee.css" />
<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=Irish+Grover&family=Quicksand:wght@300;500;700&display=swap"
rel="stylesheet"
/>
<title>Clase Css</title>
</head>
<body>
<header>
<div id="headerdiv">
<img
src="https://media.newyorker.com/photos/5909523bc14b3c606c103ba2/master/w_2560%2Cc_limit/chocolate-chip-cookie-580.jpg.jpeg"
alt="cookie-chips"
class="header-img"
/>
<p class="first-p">COOKIE CHIPS RECIPES!</p>
</div>
</header>
<main>
<h1>Select your favorite one!</h1>
<div class="container">
<div class="divone">
<img
src="https://joyfoodsunshine.com/wp-content/uploads/2018/02/best-chocolate-chip-cookies-recipe-4.jpg"
alt="vegan one"
class="vegan-image"
/>
<button class="vegan-button">Vegan recipe</button>
</div>
<div class="divtwo">
<img
src="https://sallysbakingaddiction.com/wp-content/uploads/2013/05/classic-chocolate-chip-cookies.jpg"
alt="no vegan "
class="nonvegan-image"
/>
<button class="nonvegan-button">Non-vegan Recipe</button>
</div>
</div>
</main>
</body>
</html>
CSS
:root {
font-family: "Irish Grover", cursive;
font-family: "Quicksand", sans-serif;
}
body {
margin: 0;
}
.header-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.first-p {
position: absolute;
margin-top: -120px;
margin-left: 440px;
font-size: 40px;
color: white;
font-weight: bold;
}
h1 {
text-align: center;
color: rgb(204, 156, 163);
}
.container {
display: flex;
}
.divone {
height: 50%;
width: 50%;
}
.divtwo {
height: 50%;
width: 50%;
padding: 0 12px;
}
.nonvegan-image {
height: 1200px;
}
.vegan-image {
}
.vegan-button {
position: absolute;
margin-top: -1000px;
margin-left: 250px;
background-color: rgb(122, 50, 107);
height: 40px;
width: 150px;
border-radius: 12px;
border: 1px solid white;
color: white;
}
.nonvegan-button {
position: absolute;
margin-top: -1000px;
margin-left: 250px;
background-color: rgb(122, 50, 107);
height: 40px;
width: 150px;
border-radius: 12px;
border: 1px solid white;
color: white;
}
.nonvegan-button:hover {
border: 1px solid rgb(122, 50, 107);
background-color: white;
color: rgb(122, 50, 107);
}
.vegan-button:hover {
border: 1px solid rgb(122, 50, 107);
background-color: white;
color: rgb(122, 50, 107);
}
Me base en el diseño de de Jeniffer Fernández
Mi aporte
Y aqui están los estilos CSS
body{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: #D1E5D1;
}
figure img{
height: 100px;
width: 100px;
}
h1{
color: #D8E5D8;
text-align: center;
background-color: #48A948;
height:20%;
width: auto;
font-size: 40px;
padding: 0;
margin: 0;
}
.Productos{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 15px 0px;
WIDTH: 100%;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
}
.Productos li{
font-size: 30px;
color: blue;
list-style: none;
PADDING-RIGHT: 2px;
DISPLAY: inline;
PADDING-LEFT: 2px;
FLOAT: left;
PADDING-BOTTOM: 2px;
WIDTH: 23%;
PADDING-TOP: 2px;
text-align: center;
margin-left: 10px;
}
ol li{
border-radius: 10px;
border: 1px solid black;
}
Utilicé también algunas herramientas aprendidas en el Curso gratis de programación básica para organizarlo de esta forma:
Código en CSS:
@import url(‘https://fonts.googleapis.com/css2?family=Fredoka+One&family=Pacifico&family=Poppins:wght@300&display=swap’);
body{
background-color: rgb(235, 213, 186);
}
#Titulo {
color: rgb(38, 0, 100);
text-align: center;
font-size: 50px;
font-family: ‘Pacifico’, cursive;
}
.grupo{
color:darkslateblue;
text-align: center;
font-size: 35px;
font-family: ‘Pacifico’, cursive;
}
ol{
display: flex;
flex-wrap: wrap;
color:black;
font-size: 20px;
font-family: ‘Poppins’, sans-serif;
}
li{
text-align: center;
list-style: inside;
list-style-type: decimal;
}
img{
border-radius: 20px;
width: 200px;
}
Comparto mis apuntes de la clase 😃
Cumpliendo con el reto!!
En vez de hacer una lista de supermercado, cree una lista con los materiales para crear mi Desk Setup!
De esta manera aplico los conocimientos adquiridos en este curso por el momento.
Cambiando estilo a las listas
La lista de la compra, no pude dedicarle mucho tiempo pero esto fue lo que me salio.
Bueno, yo simplemente quería aplicar todo lo aprendido hasta ahora pero como un post dirigido a esta clase:
Bueno aqui les dejo mi resultado, se que no es la gran cosa pero bueno, poco a poco jeje ❤️
¡Saludos! apenas voy aprendiendo ^_^
Código de 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="stylesheet" href="./CSS/style.css">
<title>ShopList</title>
</head>
<body>
<header>
</header>
<main>
<h1>Shop List by Ramiro López</h1>
<section>
<p class="title">Today's recipe</p>
<h2><a href="https://www.bettycrocker.com/recipes/cheddar-stuffed-chicken-breasts/9ee916a8-22ae-44d4-9910-2880fa599d6c" target="_blank" >Cheddar-Stuffed Chicken Breasts</a></h2>
<img class="recipe" src="./IMG/recipe.jpg" alt="Image of recipe">
<p class="subtitle">Ingredients: </p>
<ul>
<li class="list">4 Boneless skinless chicken breast halves (1 1/4 pounds) <br> <img class="ingredients" src="./IMG/chicken breast.jpg" alt="Image of Chiken breast"></li>
<li class="list">1/4 Teaspoon salt <br> <img class="ingredients" src="./IMG/teaspoon salt.jpg" alt="Image of salt"></li>
<li class="list">1/4 teaspoon pepper<br> <img class="ingredients" src="./IMG/pepper.jpg" alt="Image of pepper"></li>
<li class="list">3 ounces Cheddar cheese<br> <img class="ingredients" src="./IMG/cheese.jpg" alt="Image of cheese"></li>
<li class="list">1 tablespoon butter or margarine, melted<br> <img class="ingredients" src="./IMG/margarine.jpg" alt="Image of margarine"></li>
<li class="list">1/4 cup salsa<br> <img class="ingredients" src="./IMG/sauce.jpg" alt="Image of sauce"></li>
<li class="list">Chopped fresh cilantro, if desired<br> <img class="ingredients" src="./IMG/cilantro.jpg" alt="Image of cilantro"></li>
</ul>
</section>
</main>
<footer>
</footer>
</body>
</html>
Código de CSS
body{
margin: 0;
background-color: brown;
}
section{
margin-left: 10%;
margin-right: 10%;
padding: 15px;
background-color: white;
border-radius: 15px;
}
h1{
color: white;
font-size: 40px;
}
h2{
color: green;
}
.list{
color: green;
}
.recipe{
height: 350px;
}
.ingredients{
width: 150px;
}
.title{
color: brown;
font-size: 35px;
font-style: italic;
}
.subtitle{
color: brown;
font-size: 30px;
}
Comparto lo aprendido!! 👇👇👇
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" />
<title>Desafío 1</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>
<h1>Soy la lista del super!!</h1>
</header>
<section>
<ul>
<div class="contenedor">
<img src="./fruits.jpg" alt="imagen de frutas" />
</div>
<li class="tipo">Frutas:</li>
<ol>
<li>Manzana 🍎</li>
<li>Banana 🍌</li>
<li>Naranja 🍊</li>
<li>Sandía 🍉</li>
<li>Pera 🍐</li>
<li>Frutilla 🍓</li>
</ol>
</ul>
<ul>
<div class="contenedor">
<img src="./vegetables.jpg" alt="imagen de carnes" />
</div>
<li class="tipo">Carnes:</li>
<ol>
<li>Pollo 🍗</li>
<li>Salmón 🍣</li>
<li>Marisco 🍤</li>
<li>Cerdo 🍖</li>
<li>
<a
href="https://www.youtube.com/watch?v=BSYpe_93x-0"
target="_blank"
>Bife de chorizo 🥩</a
>
</li>
</ol>
</ul>
<ul>
<div class="contenedor">
<img src="./meats.jpg" alt="imagen de vegetales" />
</div>
<li class="tipo">Verduras:</li>
<ol>
<li>Tomate 🍅</li>
<li>Berenjena 🍆</li>
<li>Choclo 🌽</li>
<li>Brocoli 🥦</li>
<li>Palta 🥑</li>
<li>Cebolla 🧅</li>
</ol>
</ul>
</section>
<footer>
<p>Creado por Martín!! 👨🍳</p>
</footer>
</body>
</html>
CSS:
body {
background: papayawhip;
font-family: 'Courier New', Courier, monospace;
}
header {
color: darkred;
display: flex;
align-items: center;
justify-content: center;
}
section {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.tipo {
font-weight: bolder;
font-size: 18px;
}
footer {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
img {
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}
.contenedor {
height: 200px;
width: 200px;
margin-top: 10px;
margin-bottom: 30px;
}
a {
text-decoration: none;
}
HTML:
<!DOCTYPE html>
<html lang="es">
<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="stylesheet" href="./css/style.css">
<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=Outfit:wght@300&family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
<title>Lista de super</title>
</head>
<body>
<header><p>By Miguel Hernádez</p></header>
<main>
<h1 class="title">Soy una sexy lista de super ;)</h1>
<section class="Fruit">
<ul class="Fruit-list"><li>Frutas</li></ul>
<ol>
<div>
<li>Manzana</li>
<figure><img src="./assets/apple.png" alt="Manzana"></figure>
<div><input type="checkbox" checked="checked"></div>
</div>
<div>
<li>Fresa</li>
<figure><img src="./assets/strawberry.png" alt="Fresa"></figure>
<div><input type="checkbox" checked="checked"></div>
</div>
<div>
<li>Platano</li>
<figure><img src="./assets/bananas.png" alt="Platano"></figure>
<div><input type="checkbox"></div>
</div>
<div>
<li>Kiwi</li>
<figure><img src="./assets/kiwi.png" alt="Kiwi"></figure>
<div><input type="checkbox"></div>
</div>
</ol>
</section>
<section class="Meat">
<ul class="Meat-list"><li>Carnes</li></ul>
<ol>
<div>
<li>Pollo</li>
<figure><img src="./assets/hen.png" alt="Pollito"></figure>
<div><input type="checkbox" checked="checked"></div>
</div>
<div>
<li>Puerco</li>
<figure><img src="./assets/pork.png" alt="Puerco"></figure>
<div><input type="checkbox"></div>
</div>
<div>
<li>Res</li>
<figure><img src="./assets/cow.png" alt="Vaquita"></figure>
<div><input type="checkbox"></div>
</div>
</ol>
</section>
<section class="Vegetables">
<ul class="Vegetables-list"><li>Verduras</li></ul>
<ol>
<div>
<li>Zanahoria</li>
<figure><img src="./assets/carrot.png" alt="Zanahoria"></figure>
<div><input type="checkbox" checked="checked"></div>
</div>
<div>
<li>Brocoli</li>
<figure><img src="./assets/broccoli.png" alt="Brocoli"></figure>
<div><input type="checkbox"></div>
</div>
<div>
<li>Papa</li>
<figure><img src="./assets/potato.png" alt="Papa"></figure>
<div><input type="checkbox"></div>
</div>
</ol>
</section>
</main>
<footer>
<ul class="copyright">
<li><a href="https://www.flaticon.com/free-icons/fruit" title="fruit icons">Fruit icons created by Icongeek26 - Flaticon</a></li>
<li><a href="https://www.flaticon.com/free-icons/chicken" title="chicken icons">Chicken icons created by Freepik - Flaticon</a></li>
<li><a href="https://www.flaticon.com/free-icons/pig" title="pig icons">Pig icons created by monkik - Flaticon</a></li>
<li><a href="https://www.flaticon.com/free-icons/cow" title="cow icons">Cow icons created by Victoruler - Flaticon</a></li>
<li><a href="https://www.flaticon.com/free-icons/carrot" title="carrot icons">Carrot icons created by Freepik - Flaticon</a></li>
<li><a href="https://www.flaticon.com/free-icons/broccoli" title="broccoli icons">Broccoli icons created by Freepik - Flaticon</a></li>
<li><a href="https://www.flaticon.com/free-icons/potato" title="potato icons">Potato icons created by Freepik - Flaticon</a></li>
</ul>
</footer>
</body>
</html>
CSS:
body{
font-family: 'Outfit', sans-serif;
font-family: 'Quicksand', sans-serif;
margin: 0;
}
main{
width: 100%;
display: grid;
place-items: center;
}
section{
-webkit-box-shadow: 10px 10px 26px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 26px -4px rgba(0,0,0,0.75);
box-shadow: 10px 10px 26px -4px rgba(0,0,0,0.75);
}
.Fruit-list{
background-color: Gold;
display: inline-block;
color: white;
border-radius: 5px;
padding: 3px;
}
.Meat-list{
background-color: orangered;
display: inline-block;
color: white;
border-radius: 5px;
padding: 3px;
}
.Vegetables-list{
background-color: limegreen;
display: inline-block;
color: white;
border-radius: 5px;
padding: 3px;
}
.Fruit{
margin: 5px;
border-radius: 10px;
padding: 20px;
width: 300px;
border-style: solid;
border-width: 3px;
border-color: gold;
}
.Meat{
margin: 5px;
border-radius: 10px;
padding: 20px;
width: 300px;
border-style: solid;
border-width: 3px;
border-color: orangered;
}
.Vegetables{
margin: 5px;
border-radius: 10px;
padding: 20px;
width: 300px;
border-style: solid;
border-width: 3px;
border-color: limegreen;
}
ul{
list-style: none;
font-size: 20px;
font-weight: bold;
padding: 0;
}
ol{
display: flex;
flex-direction: column;
padding: 0;
}
ol div{
background: WhiteSmoke;
margin: 2px;
border-radius: 10px;
height: 30px;
padding: 10px;
display: flex;
align-items: center;
}
ol div li{
list-style: none;
}
ol div figure{
margin-inline-start: 10px;
margin-inline-end: 10px;
}
ol div img{
width: 20px;
height: 20px;
}
ol div div{
margin-right: 5px;
flex-grow: 1;
text-align: right;
display: flex;
flex-direction: row-reverse;
}
body {
padding: 0;
margin: 0;
background-color: rgb(14, 12, 158);
}
header {
background-color: rgb(237, 229, 10);
margin: auto;
height: 80px;
padding-top: 2%;
}
header h1 {
text-align: center;
display: inline;
margin-left: 30%;
margin-right: 30%;
margin-top: 50%;
margin-bottom: auto;
}
img {
height: 250px;
width: 250px;
border-radius: 5%;
}
.clasificacion {
font-size: 2em;
list-style-type: none;
color: white;
}
.producto{
color: white;
font-size: 1.2em;
}
.producto a {
text-decoration: none;
color: white;
}
.contenedor{
background-color: purple;
float: left;
width: 35%;
margin-left: 8%;
}
footer {
position:fixed;
color: white;
bottom:0;
width: 100%;
height: 25px;
margin:0;
padding-left: 2%;
background-color: rgb(237, 229, 10);
}
Mi lista de compras:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>Lista de Compras</title>
</head>
<body>
<main>
<h1>Lista de Compras</h1>
<ol>
<li class="listas">
<h2>Carne</h2>
<ul>
<li>
<figure>
<img src="./src/pechuga.jpeg" alt="pechuga de pollo">
</figure>
<a href="https://www.youtube.com/watch?v=kfLproHPRVM">Pechuga de Pollo</a>
</li>
<li>
<figure>
<img src="./src/carneMolida.jpg" alt="Carne Molida">
</figure>
<a href="https://www.youtube.com/watch?v=pyvjroHtpHM">Carne Molida</a>
</li>
<li>
<figure>
<img src="./src/salmon.jpg" alt="Salmon">
</figure>
<a href="https://www.youtube.com/watch?v=Ki5bUd08GAQ">Salmon</a>
</li>
</ul>
</li>
<li class="listas">
<h2>Biberes</h2>
<ul>
<li>
<figure>
<img src="./src/salmon.jpg" alt="Salmon">
</figure>
<a href="https://www.youtube.com/watch?v=BDqeVnxFoa8">Espaguetis</a>
</li>
<li>
<figure>
<img src="./src/garbanzos.jpg" alt="Salmon">
</figure>
<a href="https://www.youtube.com/watch?v=ZPkjghdBhB4">Garbanzos</a>
</li>
<li>
<figure>
<img src="./src/quesoCrema.jpg" alt="Salmon">
</figure>
<a href="https://www.youtube.com/watch?v=ePr6sih0Fvk">Queso Crema</a>
</li>
</ul>
</li>
<li class="listas">
<h2>Verduras</h2>
<ul>
<li>
<figure>
<img src="./src/papas.jpg" alt="Salmon">
</figure>
<a href="https://www.youtube.com/watch?v=GcYTes0aOPU">Papas</a>
</li>
<li>
<figure>
<img src="./src/lentejas.jpg" alt="Salmon">
</figure>
<a href="https://www.youtube.com/watch?v=SwdhZlsgnf4">Lentejas</a>
</li>
<li>
<figure>
<img src="./src/albahaca.jpg" alt="Salmon">
</figure>
<a href="https://www.youtube.com/watch?v=9cYZ_E6Kpv4">Albahaca</a>
</li>
</ul>
</li>
</ol>
<h3>Espero que les agusten las recetas 😉👌</h3>
</main>
</body>
</html>
CSS:
body {
font-family:Verdana, Geneva, Tahoma, sans-serif;
color: white;
background-color: darkcyan;
text-align: center;
}
img {
width: 5em;
height: auto;
border-radius: 30px;
padding: 10px;
}
a {
text-decoration: underline;
color: white;
}
ol,ul {
list-style-type: none;
}
ol {
display: flex;
box-sizing: content-box;
justify-content: center;
}
.listas {
padding: 5px;
border-radius: 30px;
border: solid 5px white;
background-color: darkgoldenrod;
margin: 15px;
}
Comparto mi ejemplo.
así quedo después de usar css
body{
background-color: #e29578;
}
#Titulo
{
color: #edf6f9;
background-color: #006d77;
width: 600px;
font-size: 50px;
text-align: center;
}
#canasta
{
width: 150px;
text-align: center;
}
#SubTitulo
{
color: #edf6f9;
background-color: #83c5be;
width: 600px;
}
.tipo
{
font-size: 25px;
color: #006d77;
background-color: #ffddd2;
width: 250px;
}
.producto
{
font-size: 20px;
color: #83c5be;
background-color: #edf6f9;
width: 210px;
}
main
{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: #006d77;
}
Esta quedando di-vi-na la web para ser solo una lista
Aqui hay buenas referencias de CSS y todas sus funciones, espero les sirva.
Aprendiendo poco a poco 😃
Así mi lista del super con poquito CSS
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lista del super</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<main>
<h1 class="titulo">Lista del Super!</h1>
<ul>
<li class="subtitulo">Frutas</li>
</ul>
<ol>
<div>
<li class="nombres"> <a target="blank"
href="https://cookpad.com/ar/recetas/8202723-tarta-de-pera-postre-muy-facil-economico-y-delicioso">Pera</a>
</li>
<figure>
<img class="imagen" src="./imagenes/pexels-any-lane-5945907.jpg"
alt="Esta es la imagen de una Pera">
<figcaption>Esta es la imagen de una Pera</figcaption>
</figure>
</div>
<div>
<li class="nombres"> <a target="blank"
href="https://www.paulinacocina.net/budin-de-banana-sin-huevo-facil/4988">Banana</a>
</li>
<figure>
<img class="imagen" src="./imagenes/pexels-juan-salamanca-61127.jpg"
alt="Esta es la imagen de una Banana">
<figcaption>Esta es la imagen de una Banana</figcaption>
</figure>
</div>
<div>
<li class="nombres"><a target="blank"
href="https://www.recetasgratis.net/receta-de-jalea-de-mango-casera-15406.html">Mango</a></li>
<figure>
<img class="imagen" src="./imagenes/pexels-anna-shvets-5217960.jpg"
alt="Esta es la imagen de un Mango">
<figcaption>Esta es la imagen de un Mango</figcaption>
</figure>
</div>
</ol>
<ul>
<li class="subtitulo">Carnes</li>
</ul>
<ol>
<div>
<li class="nombres"><a target="blank"
href="https://www.cocinacaserayfacil.net/cordon-bleu-pollo-receta/">Pollo</a></li>
<figure>
<img class="imagen" src="./imagenes/pollo.jpg" alt="Esta es la imagen de un Pollo">
<figcaption>Esta es la imagen de un Pollo</figcaption>
</figure>
</div>
<div>
<li class="nombres"><a target="blank"
href="https://www.afuegolento.com/receta/pescado-frito-crujiente/16403/">Pescado</a>
</li>
<figure>
<img class="imagen" src="./imagenes/pescado.jpg" alt="Esta es la imagen de un Pescado">
<figcaption>Esta es la imagen de un Pescado</figcaption>
</figure>
</div>
<div>
<li class="nombres"><a target="blank"
href="https://www.recetasgratis.net/receta-de-carne-molida-con-papas-42329.html">Carne Molida</a>
</li>
<figure>
<img class="imagen" src="./imagenes/carne.jpg" alt="Esta es la imagen de una Carne Molida">
<figcaption>Esta es la imagen de una Carne Molida</figcaption>
</figure>
</div>
</ol>
<ul>
<li class="subtitulo">Verduras</li>
</ul>
<ol>
<div>
<li class="nombres"><a target="blank"
href="https://cookpad.com/ar/recetas/14543540-papas-clasicas-al-horno-con-tips?via=search&search_term=papas">Papa</a>
</li>
<figure>
<img class="imagen" src="./imagenes/papa.jpg" alt="Esta es la imagen de una Papa">
<figcaption>Esta es la imagen de una Papa</figcaption>
</figure>
</div>
<div>
<li class="nombres"><a target="blank"
href="https://www.hogarmania.com/cocina/recetas/aperitivos/croquetas-zanahoria-20005.html">Zanahoria</a>
</li>
<figure>
<img class="imagen" src="./imagenes/zanahoria.jpg" alt="Esta es la imagen de una Zanahoria">
<figcaption>Esta es la imagen de una Zanahoria</figcaption>
</figure>
</div>
<div>
<li class="nombres"><a target="blank"
href="https://www.directoalpaladar.com/recetas-de-legumbres-y-verduras/receta-facil-para-hacer-cebolla-caramelizada">Cebolla</a>
</li>
<figure>
<img class="imagen" src="./imagenes/cebolla.jpg" alt="Esta es la imagen de una Cebolla">
<figcaption>Esta es la imagen de una Cebolla</figcaption>
</figure>
</div>
</ol>
</main>
</body>
</html>>
<@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,500&family=RocknRoll+One&display=swap');
.titulo {
color: #9D2AA6;
font-size: 50px;
text-align: center;
font-family: 'RocknRoll One', sans-serif;
}
.subtitulo {
color: #FF0093;
font-size: 30px;
font-family: 'RocknRoll One', sans-serif;
margin: 50px;
margin-top: 5px;
margin-bottom: 5px;
}
.nombres a {
color: #D031FF;
font-size: 25px;
font-family: Josefin Sans;
text-decoration: dashed;
}
ol{
display: flex;
width: 600px;
justify-content: space-around;
list-style: none;
margin: 0 auto;
}
.imagen {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 30px;
}
div{
text-align: center;
}
figcaption{
margin-top: 5px;
text-align: left;
font-size: 15px;
font-family: Josefin Sans;
color: white;
}
body{
background-color: black;
}>
body{
background-color: #e6e6e6;
}
h1 {
color: #23120b;
font-size: 60px;
}
.subtitulo {
color: #21209c;
}
a {
color: #21209c;
}
a:hover {
color: #ffa45b;
font-size: 20px;
}
.imagen {
width: 150px;
padding: 10px 0px 10px 0px;
}
.titulo-seccion {
font-size: 25px;
color: #222831;
}
Estoy todo emocionado que le estoy entendiendo a esta clase xD
ES posible dividir el html y el css en varios archivos para mantener de alguna manera la modularidad del codigo y que sea mas facil de leer y mantener en el tiempo? los archivos con 300 lineas de codigo son muy dificilis de leer, en lo personal prefiero un limite de 100 lineas de codigo, podrria entonces tener un footer en un archivo, un main en otro y asi susecivamente y simplemente llamarlos como sifueran funciones de librerias?
Lista de Frutas.
No es mucho, pero trabajo honesto ❤️
No es mucho, pero es trabajo honesto.
Para quitarle el subrayado y color a los hipervinculos hice:
a {
text-decoration: none;
color: white;
}
Por aquí dejo mi lista de mercado…humilde pero honesto xd
ESTE ES MI CODIGO
<body>
<heade>
<h1 class=“titulo”>Lista de mercado </h1>
</heade>
<main>
<ul>
<li class=“subtitulo”>Frutas</li>
<ol>
<li class=“manzana”><a href=“https://www.youtube.com/watch?v=4MwVoj1Txa0&t=671s”>Manzana 🍎</a></li>
<figure>
<img src="./pics/manzana.jpg" alt=“Es una imagen de una manzana” class=“imagenes”>
<figcaption>Imagen de una manzana</figcaption>
</figure>
<li><a href=“https://www.youtube.com/watch?v=eNPlYsQMvJE”>Piña 🍍</a></li>
<figure>
<img src="./pics/piña.jpg" alt=“Es una imagen de una piña” class=“imagenes”>
<figcaption>Imagen de una piña</figcaption>
</figure>
<li><a href=“https://www.recetasgratis.net/receta-de-pastel-de-banana-36996.html”>Banana 🍌</a></li>
<figure>
<img src="./pics/platano.jpg" alt=“Es una imagen de un platano” class=“imagenes”>
<figcaption>imagen de platanos</figcaption>
</figure>
</ol>
</ul>
<ul>
<li class=“subtitulo”>Carnes</li>
<ol>
<li><a href=“https://www.youtube.com/watch?v=2UDj9D6tsrQ”>Carne para unos burritos de asada 🌮</a></li>
<figure>
<img src="./pics/carne.jpg" alt=“Es una imagen de una carne” class=“imagenes”>
<figcaption>imagen de una carne</figcaption>
</figure>
<li><a href=“https://www.recetasgratis.net/receta-de-pollo-al-horno-peruano-73603.html”>Pechuga 🍗</a></li>
<figure>
<img src="./pics/pechuga.jpg" alt=“Es una imagen de una pechuga de pollo” class=“imagenes”>
<figcaption>Imagen de pechuga de pollo</figcaption>
</figure>
<li><a href=“https://www.pequerecetas.com/receta/sushi/”> Salmon para hacer sushi 🍣</a></li>
<figure>
<img src="./pics/salmon.jpg" alt=“Es una imagen de un Salmon” class=“imagenes”>
<figcaption>Imagen de salmon</figcaption>
</figure>
</ol>
</ul>
<ul>
<li class=“subtitulo”>Verduras</li>
<ol>
<li><a href=“https://www.recetasgratis.net/receta-de-ensalada-de-brocoli-con-aguacate-50876.html”>Brocoli 🥦</a></li>
<figure>
<img src="./pics/brocoli.jpg" alt=“Es una imagen de un brcoli” class=“imagenes”>
<figcaption>Imagen de un Brocoli</figcaption>
</figure>
<li><a href=“https://www.lecturas.com/recetas/limon/”>Limon 🍋</a></li>
<figure>
<img src="./pics/limones.jpg" alt=“Es una imagen de limones” class=“imagenes”>
<figcaption>Imagen de limones</figcaption>
</figure>
<li><a href=“https://www.youtube.com/watch?v=2UDj9D6tsrQ”>cebolla para los burritos 🧅</a></li>
<figure>
<img src="./pics/cebolla.jpg" alt=“Es una imagen de una cebolla” class=“imagenes”>
<figcaption>Imagen de cebollas</figcaption>
</figure>
</ol>
</ul>
</main>
</body>
</html>
Muy buen curso, muy didàctico y fácil de entender si , incluso como yo,se tienen pocos conocimientos.
Hola, aqui mi aporte, encontraran el codigo css, y como realice la division de elementos en html
CSS:
CODIGO HTML DE LAS SUBPAGINAS:
Y LA SUBPAGINA:
a echarle ganas a css
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?