Skip to content
OverviewSolutions
5
Comments
6
Maurício Fontoura
@mauricio-fontoura

All comments

  • Vitório•120
    @VitorioTuckersSubmitted about 2 years ago

    Not so sure about the spacing on this one had to add margin on the body to make sure everything was aligned without leaving a huge gap on the middle but everything else looking good.

    Huddle Landing Page solution

    3
    Maurício Fontoura•80
    @mauricio-fontouraPosted about 2 years ago

    Hello again win. you could also add better separating the HTML contents for example:

    <main class="wrapper"> _______________________________________________________________________________ <header class="heading"> <img class="logo" src="./images/logo.svg" alt="huddle-logo"> </header> _______________________________________________________________________________ <div class="container-illustration"> <img class="illustration" src="./images/illustration-mockups.svg" alt="illustration-mockup"> </div> _______________________________________________________________________________ <article class="content"> <h1 class="content-heading">Build The Community<br>Your Fans Will Love</h1> <p class="content-text"> Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as you engage in genuine discussion. </p> <button class="content-btn">Register</button> </article> _____________________________________________________________________________________ </main>
    0
  • Vitório•120
    @VitorioTuckersSubmitted about 2 years ago

    Not so sure about the spacing on this one had to add margin on the body to make sure everything was aligned without leaving a huge gap on the middle but everything else looking good.

    Huddle Landing Page solution

    3
    Maurício Fontoura•80
    @mauricio-fontouraPosted about 2 years ago

    Hi Victory, congratulations on your project. You can solve the Layout of this project with Display Grid, with grid-template-columns. I leave a link here to help you friend:

    https://css-tricks.com/almanac/properties/g/grid-template-columns/

    0
  • cesar•490
    @cyeguezSubmitted about 2 years ago

    Hola, subo mi solución tratando de limpiar mas el proyecto segun recomendaciones de la comunidad, generé el archivo readme.md de manera de que mejorara la presentación del proyecto.

    Product preview card component

    4
    Maurício Fontoura•80
    @mauricio-fontouraPosted about 2 years ago
    <main class= "wrapper"> <section class="card-container"> <div class="card"> <div> <img src="./images/image-product-desktop.jpg" alt="img product"> </div> <div class="card-body"> <h2 class="card-title">Perfume</h2> <h2 class="card-subtitle">Gabrielle Essence Eau De Parfum</h2> 
        <p> A floral, solar and voluptuous interpretation composed by Olivier
      Polge, Perfumer-Creator for the House of CHANEL.
    </p>
    </div> <section class=" price-container"> <div class="card-price"> <h1 >$149.99 </h1> <p> $169.99</p> </div> <div class="card-button"> <button> <img src="./images/icon-cart.svg" alt="" /> </button> </div> </section> </div> </section> </main>
    Marked as helpful
    0
  • cesar•490
    @cyeguezSubmitted about 2 years ago

    Hola, subo mi solución tratando de limpiar mas el proyecto segun recomendaciones de la comunidad, generé el archivo readme.md de manera de que mejorara la presentación del proyecto.

    Product preview card component

    4
    Maurício Fontoura•80
    @mauricio-fontouraPosted about 2 years ago

    Hello my friend @cyeguez,

    Congrats on completing the challenge

    You can also try to separate the written content and images within the HTML with div, section or article. depending on the project. This way you will have more vision of where you will separate the content by block or better contains. For example:

    Marked as helpful
    0
  • Maurício Fontoura•80
    @mauricio-fontouraPosted about 2 years ago

    Hello Friend, how are you

    Try structuring your HTML as blocks for example:

    body{

    <main class=" wrapper> <section class="container-showImage" <div> <img src=""> </div> <h1>Title</h1> <p>Lorem... </p> </section> <section class="other-block"> So follows the flow of the structure </section> </main> </body>

    With this structure you can have a much better handling and so you can build good and responsive grids.

    hope it helps friend!!!

    Com essa estrura você consegue ter uma manipulação muito melhor e assim você consegue construir bons grids e resposive. deixo aqui um tutorial que pode te ajudar muito. Espero que ajude amigo!!!

    https://www.youtube.com/watch?v=rg7Fvvl3taU

    0
  • Maurício Fontoura•80
    @mauricio-fontouraPosted about 2 years ago

    Estava aprendendo muito com os seus códigos e métodos. Eu estou estudando programação apenas 2 mês e receber apoio de um amigo que já sabe muito mais do que eu é uma honra. Que Deus lhe abençoe muito Lucas !!!

    Ansioso para começar a trabalhar na área hahhaha. Vamos que Vamos : )

    0