Acá está la mía 😄
Sección de contacto
22/26Recursos
Aportes 124
Preguntas 9
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! batalle mucho con esa sección de blog jaja pero lo logre:
Y listo la página de perfil:
Listo!!
Aquí dejo mi reto! espero feedback.
Reto
Ya quiero maquetar tan rápido como el profe🥲
Reto cumplido
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
Yo lo hice con flexbox 😄
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
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
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
Nuevamente, curso de grid, con inline-block, termina usando un width menor a 50% seguramente por el espacio que genera el font-size… Y pone ese número como si nada sin explicar por qué no 50. Ya no está explicando nada, al principio explicaba cosas innecesarias y ahora lo necesario no lo explica.
reto cumplido
En el minuto 9 y cachito no veo los parentecis de los que habla. Esos selectores funcionan pero uno es más especifico que el otro. En mi experiendia esos errores llevan a bugs que luego te roban un buen rato debuggear.
les comparto mi avance en Github
https://github.com/ArzCorp/Blog
Listo! 😄
genial este reto me costo y me demostro q ay distintas formas de llegar a un resultado lo hice un poco distinto mas trabajado me falta todavia la intuición que te hace pesar en la solución mas eficiente
Muy chévere.✔
Genial !!Un profe de 100 explicando…
estupendo peor yo lo hice así 😄
.contact-main-container{
width: 100%;
min-height: 250px;
display: flex;
justify-content: space-between;
}
.contact-main-container .contact-left{
display: grid;
grid-template-columns: 100px 1fr;
}
.contact-main-container .contact-right{
display: grid;
grid-template-columns: 100px 1fr;
}```
Qué forma tan sencilla de hacerlo…
Segundo Reto
En lo que respecta a codigo solo reutilice partes del codigo que ya hicimos quitando algunas partes y moificando algunos valores.
En la parte de arriba utilice como base a la clase blogs-news-container y en proyectos a blogs-main del blogs.html .
Reto del minuto 1:00 //Practicando Stylus
.contact-main-container
display grid
grid-template-columns 1fr 490px 490px 1fr
background-color #e6e9ed
align-items center
padding 5% 0 10%
.contact-main
display flex
align-items center
img
width 20%
height 20%
div
margin-left 10px
a
padding-bottom 5px
border-bottom 1px solid black
.contact-left
grid-column 2
padding-right 20%
.contact-right
grid-column 3
padding-left 20%```
Ansiosa de concluir. 😄
Adjunto mi codigo del css
/******************* CONTACTO *******/
.contact-main-container{
width: 100%;
background-color: #e6e9ed;
min-height: 250px;
display: flex;
justify-content: space-evenly;
}
.contact-main-container div {
display: flex;
max-width: 500px;
padding: 30px 0;
}
.contact-main-container img {
max-width: 100px;
height: 100px;
}
.contact-main-container .contact-left{
padding: 0;
padding-left: 10px;
display: inline-block;
}
.contact-main-container .contact-right{
padding: 0;
padding-left: 10px;
display: inline-block;
}
.contact-main-container a{
border-bottom: 1px solid gray;
}
mi codigo
.contact-main-container{
display: grid;
grid-template-columns: 1fr 1fr ;
padding: 50px 0 70px 0;
background: #cdd2da;
}
.contact-main-container img{
max-width: 100px;
}
.contact-main-container .contact-left{
display: grid;
grid-template-columns: 20% 80%;
margin-left: 220px;
align-items: center;
justify-items: start;
justify-self: start;
}
.contact-main-container .contact-left div a{
font-size: 26px;
border-bottom: 1px solid #cdd2da;
padding-bottom: 5px;
}
.contact-main-container .contact-right{
display: grid;
grid-template-columns: 15% 55%;
align-items: center;
justify-items: center;
}```
Muchas maneras de utilizar herramientas que aunque similares. cumplen diferentes roles dependiendo de las dimensiones del sitio. Todo encaja en la práctica.
Y el reto
Buen reto:
Mi codigo ¯_(ツ)_/¯
.contact{
background-color: #e6e9ed;
margin-top: 50px;
display: flex;
justify-content: space-around;
}
.contact__find-me{
display: flex;
align-items: center;
height: 200px;
}
.contact__image{
height: 60%;
margin: 0 10px;
}
.contact__title{
color: black;
font-size: 25px;
text-decoration: underline;
}
.contact__p{
font-family: sans-serif;
}```
Excelente clase!!
yo lo habia hecho con display grid en ves de inline block antes de ver el video.
Mi reto con CSSGrid
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.