Acá está la mía 😄
Sección de contacto
22/26Recursos
Aportes 151
Preguntas 10
Ordenar por:
Se siente genial cuando, al principio te demoras un montón en maquetar y dar estilos, pero poco a poco vas practicando, vas mejorando y lo haces mejor y más rápido! 😄
Mi codigo
.contact-main-container {
background-color: rgba(33, 35, 47, 0.226);
display: grid;
grid-template-columns: repeat(2, 300px);
justify-content: space-around;
}
.contact {
display: flex;
padding: 100px 0;
}
.contact img {
height: 90px;
margin-right: 10px;
}```
Hay una forma de hacer en HTML que cuando quieran poner un email de contacto este habra el correo automáticamente.
Pueden hacerlo con el siguiente atributo en la etiqueta a
<a href="mailto:[email protected]">[email protected]</a>
Yo lo hago cuando no es un correo verdadero.
No sé que tan bueno sea con un correo real si les manden mucho spam o algo así.
Pero sé los comparto por si alguien no lo conocía.
Listo!!
Listo! batalle mucho con esa sección de blog jaja pero lo logre:
Y listo la página de perfil:
😎😎😎😎
Aquí dejo mi reto! espero feedback.
Reto
Reto cumplido
Ya quiero maquetar tan rápido como el profe🥲
Yo lo hice con flexbox 😄
Acá está mi página responsive para móvil y escritorio.
Mobile first:
Desktop:
cuando dice Hay varias formas de hacer las cosas siempre la del profe es la mas corta
Reto terminado desde la clase pasada jaja
Aún no la tengo responsive ya que hice mal en no empezarla en Mobile First
Pero terminando este tomare el curso de figma y hare un diseño propio y pondré en practica esto pero empezando desde mobile first.
El proyecto va quedando así.
Display grid Onfire 😎!!!
Aca les dejo mi codigo
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Mi blog</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/flaticon.css">
</head>
<body class="home-body">
<header>
<section class="header-icons-container">
<div class="icons">
<a href=""><span class="flaticon-001-facebook"></span></a>
<a href=""><span class="flaticon-002-twitter"></span></a>
<a href=""><span class="flaticon-011-instagram"></span></a>
<a href=""><span class="flaticon-010-linkedin"></span></a>
<a href=""><span class="flaticon-008-youtube"></span></a>
</div>
</section>
<nav>
<section class="nav-logo-container">
<a href="index.html"><img src="images/logo-negro.png" alt="Logo de mi blog"></a>
</section>
<section class="profile-link">
<a href="perfil.html">Sobre mi</a>
</section>
</nav>
</header>
<main>
<section class="grid-container-blog blogpost-img-container">
<img src="images/post-1.png" alt="">
</section>
<section class="blogpost-main-container">
<div class="grid-container">
<h3>Noticias</h3>
<article class="">
<h1>Titulo del Blogpost</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
</div>
</section>
<section class="contact-main-container">
<div >
<img src="images/img-left.png" alt="">
<div class="contact-left">
<a href="/">Contacto</a>
<p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.</p>
</div>
</div>
<div>
<img src="images/img-right.png" alt="">
<div class="contact-right">
<a href="/">Escribe</a>
<p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit</p>
</div>
</div>
</section>
</main>
<footer>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</footer>
</body>
</html>
--------------------------------CSS-------------------------
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto+Slab:400,700|Roboto:400,500,700,900&display=swap');
body{
font-family: 'Roboto mono', monospace;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
display: inline;
color: black;
}
.home-body{
/* position: fixed; */
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.grid-container{
max-width: 980px;
margin: auto;
}
.grid-container-blog{
max-width: 1100px;
margin: auto;
}
header{
width: 100%;
height: 140px;
display: grid;
grid-template-rows: 1fr 1fr;
}
header .header-icons-container{
width: 100%;
height: 50px;
display: grid;
background-color: #47cfac;
}
header .header-icons-container .icons{
width: 300px;
height: auto;
display: flex;
justify-items: flex-end;
align-items: center;
justify-content: space-between;
justify-self: end;
margin-right: 50px;
}
header .icons span{
color: white;
}
header .icons span:hover{
color: #434a54;
}
nav{
display: grid;
grid-template-columns: 1fr 1fr;
height: 90px;
}
nav .nav-logo-container{
margin-left: 50px;
}
nav .nav-logo-container img{
width: 220px;
margin-top: 10px;
}
nav .profile-link{
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 50px;
}
nav .profile-link a{
color: black;
border-bottom: 1px solid black;
}
nav .profile-link a:hover{
color: #47cfac;
border-bottom: 1px solid #47cfac;
}
.home-main{
display: grid;
grid-template-columns: 1fr 4fr 1fr;
height: 517px;
background-image: url('../images/cover.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.home-main section{
display: grid;
grid-column: 2;
justify-items:center;
height: 350px;
margin-top: 80px;
}
.home-main-text{
font-family: 'Roboto mono', monospace;
font-size: 30px;
font-weight: 700px;
letter-spacing: 10px;
color: white;
text-align: center;
}
.home-main-button{
width: 110px;
height: 50px;
background: #48cfad;
text-align: center;
line-height: 50px;
border: 1px solid white;
}
.home-main-button a{
font-weight: 700;
font-size: 18px;
}
.blogs-main{
display: grid;
}
.blogs-news-container{
background-color: #e6e9ed;
padding: 0 50px 40px;
}
.blogs-main-new{
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 2fr;
}
.blogs-news-img-container{
grid-column: 1;
}
.blogs-news-img-container img{
width: 85%;
}
.blogs-news-info-container{
grid-column: 2;
}
.blogs-news-info-container p{
margin-bottom: 35px;
}
.blogs-posts-container{
padding: 0 50px 40px;
}
.blogs-posts-container h3{
border-bottom: 1px solid #cdd2da;
padding-bottom: 20px;
text-align: center;
}
.blogs-button{
border: 1px solid #47cfac;
padding: 10px 15px;
font-size: 12px;
}
.blogs-posts-container .posts-container{
display: inline-block;
padding-left:10px;
max-width: 30%;
margin-bottom: 50px;
}
.blogs-posts-container .posts-container p{
margin-bottom: 35px;
}
.blogs-posts-container .posts-container img{
width: 100%;
}
footer{
width: 100%;
height: 80px;
background-color: #22272d;
border-top: 35px solid #47cfac;
}
footer p{
display: flex;
color: white;
justify-content: center;
margin-top: 25px;
}
.blogpost-img-container{
padding: 0 50px 40px;
}
.blogpost-img-container img{
width: 100%;
}
.blogpost-main-container{
padding: 0 50px 40px;
}
.blogpost-main-container h3{
border-bottom: 1px solid #cdd2da;
padding-bottom: 20px;
}
.blogpost-main-container article h1{
font-size: 35px;
}
.contact-main-container{
background-color: #e6e9ed;
height: 310px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.contact-main-container img{
width: 100px;
height: 100px;
margin: 60px 0 0 100px;
}
.contact-main-container a{
padding-bottom: 3px;
border-bottom:1px solid black;
}
.contact-main-container .contact-left{
margin: -80px 0 0 210px;
}
.contact-main-container .contact-right{
margin: -80px 0 0 210px;
}
reto 2
Simplemente se logro, carajo releer y encontrar que partes de tu diseño estan jodidas es simplemente asombroso como cuando empiezas por un rompecabezas e intentas idear que va en tal lado
Mi reto:
Hola comunidad.
Yo usé grid para los contenedores de contacto
Reto
Este es mi proyecto. es otra forma de diseño, elimine algunas cosas como las imagenes e incorpore otros estilos. se que es colorido pero me gusto mucho 😃. sigo aprendiendo.
mi avance hasta el momento:
Listo!
**Reto: **
dos retos en la misma clase 👍
mi pagina de perfil terminada
aqui el reto!
Aqui esta el reto antes de ver el video
Yo use flexbox para la seccion de contacto, si quieren ver como lo hice, aqui se los dejo
<section class="contact__container">
<div class="contact__card">
<img
class="contact__info__image"
src="./assets/img/013-newsletter.png"
alt=""
/>
<div class="contact__info">
<p class="contact__info__title">Contacto</p>
<p class="contact__info__content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Perferendis ex e
</p>
</div>
</div>
<div class="contact__card">
<img
class="contact__info__image"
src="./assets/img/006-like.png"
alt=""
/>
<div class="contact__info">
<p class="contact__info__title">Escribe</p>
<p class="contact__info__content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Perferendis ex e
</p>
</div>
</div>
</section>
.contact__container {
display: flex;
height: 300px;
margin-top: 40px;
padding-top: 60px;
justify-content: space-evenly;
background-color: #e0e3ea;
font-family: 'Roboto Mono', monospace;
font-weight: 600;
}
.contact__card {
max-width: 300px;
display: flex;
max-height: 100px;
max-width: 350px;
}
.contact__card img {
max-width: 90%;
margin-right: 20px;
}
.contact__info {
align-self: center;
}
.contact__info__title {
width: fit-content;
border-bottom: 1px solid black;
font-size: 1.7rem;
}
.contact__info__content {
font-size: 1.4rem;
}
Así va quedando 😄
asi me quedo!
Resultado antes de ver la clase
HTML
<section class="contact-main-container">
<div class="grid-container contact-container">
<div>
<img src="/ASSETS/iconos/013-newsletter.png" alt="" />
<div class="contact-left">
<a href="/">Contacto</a>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div>
<img src="/ASSETS/iconos/006-like.png" alt="" />
<div class="contact-right">
<a href="/">Escribe</a>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</section>
CSS
.contact-main-container {
background-color: #e0e3ea;
padding: 70px 0 100px;
margin-top: 50px;
}
.contact-main-container .contact-container {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 200px;
}
.contact-main-container .contact-container div {
display: flex;
align-items: center;
}
.contact-main-container .contact-container div img {
width: 100px;
}
.contact-main-container .contact-container .contact-left,
.contact-main-container .contact-container .contact-right {
display: block;
margin-left: 5px;
}
.contact-left a,
.contact-right a {
border-bottom: 1px solid black;
padding-bottom: 5px;
}
.contact-left p,
.contact-right p {
margin-top: 15px;
}
Listo! Reto cumplido. Sección “Sobre mí” terminada sin haber visto el próximo video!! (también es responsive)
![Carlos Arturo Gutierrez Gonzalez [C6]](https://static.platzi.com/media/avatars/avatars/CarGDev_46c63feb-12ce-4743-ab80-cdd7adc9a3e3.png)
Asi quedo la seccion de contacto
HTML
<section class="contact-main-container">
<div class="contact">
<img src="./src/assets/correo-electronico.png" alt="">
<div>
<a href="">Where can I get some?</a>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
</div>
</div>
<div class="contact">
<img src="./src/assets/boda.png" alt="">
<div>
<a href="">Where can I get some?</a>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
</div>
</div>
</section>
CSS
.contact-main-container {
display: grid;
background-color: #E6E9ED;
}
.contact-main-container{
padding: 0px 150px;
grid-gap: 20px;
}
.contact-main-container .contact {
height: 200px;
display: grid;
justify-items: center;
align-items: center;
grid-gap: 5px;
}
.contact-main-container .contact div {
margin-left: 20px;
color: black;
}
.contact-main-container .contact div a {
text-decoration: underline;
}
.contact-main-container .contact div a:hover {
color: #CDD2DA;
background-color: #22272D;
}
.contact-main-container .contact:nth-of-type(1) {
grid-column: 1;
}
.contact-main-container .contact:nth-of-type(2) {
grid-column: 2;
}
.contact-main-container .contact img {
width: 100px;
grid-column: 1;
}
.contact-main-container .contact div {
grid-column: 2;
}
Para no sacar el color picker a cada rato, les recomiendo esta extension de Chrome llamada ColorZilla , les permite tener un color picker arriba y usarlo donde quieran de forma super rapida
- Reto cumplido
Mi solución al reto:
-
Vista💻:
-
HTML🧡:
-
CSS💙:
Así me quedo la mía!
y Acá esta el reto!
Extrañamente me costó mucho darle estilos a las imagenes pero pude hacerlo xd
E reutilizado gran parte del código anterior y a quedado muy bien
Mi intento 🥹
Adjunto mi resolución al reto 💪🏽
aquí el código de css
.contact-main-container {
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr;
margin-bottom: 50px;
}
.contact-main-container img {
width: 100px;
}
.contact-main-container div {
display: flex;
margin: 0 auto;
}
.contact-left,
.contact-right {
display: flex;
flex-direction: column;
width: 150px;
}
Falto aplicarle las clases left y right a los div pero supongo te lo pasaste por intuición.
Ayuda, no logro posicionar correctamente los textos…
asi me quedo
Aquí mi aporte…
como dato especial, el cuerpo de la pagina tenia 3 secciones y en un principio lo hice con flex, pero caí en cuenta que la idea era usar grid y volví a configurar todo con esta opción de display…
Done!
.
.
.
.
CSS
.contact-main-section {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
width: 100%;
height: 20rem;
background-color: #cdd2da;
}
.contact-info {
display: grid;
height: 40%;
width: 50%;
grid-template-columns: 1fr 2fr;
column-gap: 2rem;
}
.contact-info img {
width: 100%;
}
.contact-info div {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.contact-info div a {
border-bottom: 0.1rem solid black;
font-size: 1.6rem;
}
me quedo toda chueca jajaja
me encantó hacer el reto!!!
Les comparto mi reto completado:
Aquí está el reto…
Lo hice también responsive…
Asi me quedo !
Luchando y pensando pude lograr el reto usando flex . Siento como voy mejorando poco a poco aplicando lo aprendido con los retos que dejan en las clases.
Pues yo use flex-box:
<code html>
<sectio class=" contact-main-container">
<div class="contact-left">
<img src="/assets/img/013-newsletter.png" alt="">
<div class="left-content">
<a href="">Contacto</a>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="contact-right">
<img src="/assets/img/006-like.png" alt="">
<div class="right-content">
<a href="">Contacto</a>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p>
</div>
</sectio>
<code css>
.contact-main-container {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
margin-left: 0 auto 15px;
gap: 10px;background-color: #d7dde6;
}
.contact-left {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.contact-left img {
width:70px;
height: 70px;
justify-self: end;
align-self: center;
}
.left-content {
align-self: center;
}
.left-content a{
border-bottom: 1px solid black;
font-size: 14px;
}
.left-content p{
font-size: 14px;
text-align: justify;
}
.contact-right{
display: grid;
grid-template-columns: 1fr 2fr;
gap: 15px;
}
.contact-right img{
width: 70px;
height: 70px;
justify-self: end;
align-self: center;
}
.right-content{
align-self: center;
margin-right: 20px;
}
.right-content a{
border-bottom: 1px solid black;
font-size: 14px;
}
.right-content p{
font-size: 14px;
text-align: justify;
}
Buena idea, yo lo hice con un grid de 2 fracciones de 1 en columna ??:3
en el minuto 9:08 dice que está colocando paréntesis, pero no veo alguno... entiendo que se refiere a la "coma" para separar las clases.
asi me quedo al inicio del reto
/* contact template */
.contact-main-container {
background-color: #e6e9ed;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 40px;
}
.contact-left, .contact-right {
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
}
.contact-info-container {
display: flex;
flex-direction: column;
}
.contact-info-container a {
text-decoration: underline;
color: black;
}
mi aporte al reto antes de ver el video
desktop
tablet
mobile
done
Es increíble como me doy cuenta que cada vez voy entendiendo mejor la maquetación y los estilos, así ha quedado mi perfil principal 😃
Que tal campeon, buen dia… Increible reto…
100% responsive. radicalmente diferente.
Mi aporte…
<section class="perfil-container">
<div class="perfil-main grid-container">
<div class="perfil-img-container">
<img src="./assets/img/profile-pic.jpg" alt="">
</div>
<div class="perfil-info-container">
<h2>Hola!</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium maiores beatae natus neque velit, eveniet nulla nihil consequatur nobis officia aut aliquam libero iusto magni optio. Quo voluptatibus officia sed!</p>
</div>
</div>
</section>
<section class="projects-main-container">
<h3>Proyectos</h3>
<div class="grid-container flex-content">
<article class="project-container">
<h4>Proyecto 1</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At et ipsa consequatur sit suscipit! Quod sunt consectetur inventore quisquam tempora. Debitis ad fuga temporibus a quos commodi doloribus exercitationem? Amet.
</p>
</article>
<article class="project-container">
<h4>Proyecto 2</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At et ipsa consequatur sit suscipit! Quod sunt consectetur inventore quisquam tempora. Debitis ad fuga temporibus a quos commodi doloribus exercitationem? Amet.
</p>
</article>
<article class="project-container">
<h4>Proyecto 3</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At et ipsa consequatur sit suscipit! Quod sunt consectetur inventore quisquam tempora. Debitis ad fuga temporibus a quos commodi doloribus exercitationem? Amet.
</p>
</article>
</div>
</section>
.perfil-container {
width: 100%;
min-height: 250px;
background-color: #e6e9ed;
text-align: center;
padding: 50px 0;
}
.perfil-main {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.perfil-img-container img {
width: 70%;
}
.perfil-info-container {
text-align: initial;
}
.projects-main-container {
padding: 0 50px 40px;
}
.projects-main-container h3 {
text-align: center;
border-bottom: 1px solid #e6e9ed;
padding-bottom: 40px;
}
.projects-main-container .flex-content {
display: flex;
justify-content: space-around;
}
.projects-main-container .project-container {
padding: 0 10px;
}
Así me quedo
Solucion al reto
Este fue mi resultado combinando Grid y Flex.
Este es el resultado que hice pero no me convencia que el contenedor de contacto se sobresalga con los parrafois de arriba
y lo mejore un poco pero para responsive no es aun jajaj
Aca mi reto
Así es como me quedo
.contact-main-container {
background-color: #CDD2DA;
height: 200px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.contact-main-container .contact-left, .contact-main-container .contact-right {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
align-items: flex-end;
padding-bottom: 60px;
}
.contact-left, .contact-right {
width: 60px;
padding: 0 120px;
}
.contact-left div, .contact-right div {
padding-left: 15px;
}
.contact-left img, .contact-right img {
width: 80px;
}
.contact-left div a, .contact-right div a {
text-decoration: underline;
}
así quedo mi proyecto
No entendi bien la parte del padding botom en contact-main-container {
Alguien me orienta?
así quedo el mío:
Mi reto ❤️
ayuda! no entiendo lo de los parentesis en el minuto nueve, escribo la liinea así
.contact-main-container .contact-left, .contact-right {
text-align: initial;
margin-top: 85px;
}
pero no me queda la imagen de la derecha
así con el reto
vamos
loremp6 o el numero de palabras que se quiera colocar
Genial utilice el display:flex y me funcion, Gran curso
Reto cumplido 😃
Así me quedó sin ver las clase
(
Lo hice completamente diferente, utilizando css-grid
Pude lograr el mismo resultado
Me gustan las clases donde hay estos retos!
Hecho!
“display:grid;” es genial
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.