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!!
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.
;
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
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:
;
}
.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.