Acá está la mía 😄
;
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.
;
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

<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>
.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:
;
}
.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
_/¯
.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.