Skip to content
OverviewSolutions
14
Comments
0

Lutfi Ismail

@lutfiismail52Indonesia150 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

JavaScript

Latest solutions

  • Responsive bento grid layout

    Lutfi Ismail•150
    Submitted 3 days ago

    I'm looking for guidance on how to implement the .card-3 section so that the image inside it behaves as expected. Specifically, on wide screens (desktop view), I want the image to have width: 100%, but with the lower part of the image being cropped, as shown in the design reference provided in this project.

    I'm currently unsure how to achieve this layout behavior for the .card-3 element and would really appreciate any help or suggestions.

    Thank you in advance for your time and support! 🙏🙏.

    0 comments

  • Huddle landing page with a single introductory section

    #pure-css
    Lutfi Ismail•150
    Submitted 4 months ago

    How to make elements with CSS class .wrapper can be aligned as in the design, what code do I need to fix/add? Here is more or less an example of my code:

    <div class="wrapper">
        <div class="top-section">
          <img src="./images/illustration-mockups.svg" alt="hero image">
        </div>
        <div class="bottom-section">
          <h1 class="jargon">Build The Community <br> Your Fans Will Love</h1>
          <p class="description">
            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="btn-register">Register</button>
          <div class="social-media">
            <i class="fa-brands fa-facebook-f"></i>
            <i class="fa-brands fa-instagram"></i>
            <i class="fa-brands fa-twitter"></i>
          </div>
        </div>
</div>

    @media screen and (min-width: 768px) {
  .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    margin: 28px 0;
  }
}

    For those of you who took the time to give me feedback, I say thank you and appreciate it. 😊

    1 comment

  • A responsive single-price grid component

    #pure-css
    Lutfi Ismail•150
    Submitted 4 months ago

    Is it better to use the CSS property display: grid; to achieve a better design or can this design also use the CSS property display: flexbox. Because I use flexbox instead of grid, would it be easier to just use the CSS property display: grid;?

    For those of you who took the time to give me feedback, I say thank you and appreciate it. 😊

    2 comments

  • A responsive four-card feature section on a landing page

    #pure-css
    Lutfi Ismail•150
    Submitted 4 months ago

    Is the method/approach I used to achieve the design correct? If there is anything that needs to be improved, where is it?

    For those of you who have taken the time to give me feedback, I say thank you very much and appreciate it. 😊

    0 comments

  • A responsive social proof section on a landing page

    #pure-css
    Lutfi Ismail•150
    Submitted 4 months ago

    Is my way of positioning the testimonial and rating sections correct using the CSS property position: relative;. Maybe there is a better and more efficient way? Here is more or less an example of my code:

    <div class="top-section-ratings">
 <div class="rating">
   <div class="rating-starts">
     <img src="./images/icon-star.svg" alt="star icon">
     <img src="./images/icon-star.svg" alt="star icon">
     <img src="./images/icon-star.svg" alt="star icon">
     <img src="./images/icon-star.svg" alt="star icon">
     <img src="./images/icon-star.svg" alt="star icon">
   </div>
 <p class="rating-text">Rated 5 Stars in Reviews</p>
 </div>
 </div>
 </section>

 <!-- Testimonials Section -->
 <section class="testimonials">
   <div class="testimonial">
     <div class="testimonial-header">
     <img class="testimonial-image" src="./images/image-colton.jpg" alt="Colton Smith">
     <div class="testimonial-user">
       <p class="testimonial-name">Colton Smith</p>
       <p class="testimonial-role">Verified Buyer</p>
     </div>
   </div>
   <p class="testimonial-text">
 "We needed the same printed design as the one we had ordered a week before.
 Not only did they find the original order, but we also received it in time.
 Excellent!"
 </p>
 </div>

    @media screen and (min-width: 768px) {
 .top-section-ratings> :nth-child(1) {
 position: relative;
 left: -40px;
 }

 .top-section-ratings> :nth-child(2) {
 position: relative;
 left: -20px;
 }

 .rating {
 width: 400px;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 gap: 8px;
 }

 .testimonials {
 display: flex;
 gap: 16px;
 }

 .testimonials> :nth-child(2) {
 position: relative;
 top: 10px;
 }

 .testimonials> :nth-child(3) {
position: relative;
top: 20px;
}
}

    Thank you for taking the time to help me with this question, I really appreciate it! 😊

    0 comments

  • A cool profile card component

    #pure-css
    Lutfi Ismail•150
    Submitted 4 months ago
    0 comments
View more solutions

Latest comments

No comments written yet.