Skip to content
OverviewSolutions
13
Comments
0
Lutfi Ismail
@lutfiismail52

All solutions

  • Huddle landing page with a single introductory section

    #pure-css
    Lutfi Ismail•130
    Submitted about 1 month 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•130
    Submitted about 1 month 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•130
    Submitted about 1 month 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•130
    Submitted about 1 month 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•130
    Submitted about 1 month ago
    0 comments

  • Responsive 3 column preview card component

    #pure-css
    Lutfi Ismail•130
    Submitted about 1 month ago

    If you check my code, find any errors, and want to give your suggestions, I would be very grateful for the time and effort you put into helping me improve my code and sharing your knowledge. 😊

    1 comment

  • A responsive stats preview card component

    #pure-css
    Lutfi Ismail•130
    Submitted about 1 month ago

    Is my approach to displaying the header image on different screen sizes using the CSS background-color property correct? Or is there a better approach. Here is an example code:

    <div class="stats-preview-card">
<div class="stats-preview-card-header"></div>
<div class="stats-preview-card-content">
<!-- other codes -->
</div>
</div>

    .stats-preview-card-header {
width: 100%;
height: 240px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-image: url("./images/image-header-mobile.jpg");
background-repeat: no-repeat;
background-size: cover;
 background-position: center;
 position: relative;
}

.stats-preview-card-header::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 background-color: hsla(277, 100%, 61%, 0.50);
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 width: 100%;
 height: 240px;
}

/* Responsive code */
@media screen and (min-width: 768px) {
 .stats-preview-card-header {
 width: 50%;
 height: 446px;
 border-top-left-radius: 0;
 border-bottom-right-radius: 8px;
 background-image: url("./images/image-header-desktop.jpg");
order: 2;
}

.stats-preview-card-header::before {
height: 446px;
border-top-left-radius: 0;
border-bottom-right-radius: 8px;
}
}

    Thank you very much for your answer and explanation. I really appreciate your time and effort in helping me! 😊

    0 comments

  • A beautiful order summary component

    #pure-css
    Lutfi Ismail•130
    Submitted about 1 month ago
    0 comments

  • A responsive nft preview card component

    #pure-css
    Lutfi Ismail•130
    Submitted about 1 month ago

    Is the approach I am using to achieve this design correct? Or maybe there is another approach that is better and more efficient.

    Thank you very much for your answer and explanation. I really appreciate your time and effort in helping me! 😊

    0 comments

  • A responsive product preview card component

    #pure-css
    Lutfi Ismail•130
    Submitted about 1 month ago

    Is my approach of displaying different images for different screen sizes by using two different image elements and then setting which one to display for a given screen width correct? Or is there a better and more efficient way. Here is the code:

    <div class="container">
  <img class="image1" src="images/image-product-mobile.jpg" alt="a parfume" />
  <img class="image2" src="images/image-product-desktop.jpg" alt="a parfume" />
  <div class="wrapper">
  </div>
</div>

    @media screen and (min-width: 768px) {
  .image1 {
    display: none;
}

  .image2 {
    display: block;
    width: 50%;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
}

    Thank you very much for your answer and explanation. I really appreciate your time and effort in helping me! 😊

    1 comment

  • A responsive results summary component

    #pure-css
    Lutfi Ismail•130
    Submitted about 1 month ago

    Is my approach correct in making this component responsive?

    Thank you very much for your answer and explanation. I really appreciate your time and effort in helping me! 😊

    0 comments

  • A cool and responsive social links profile page

    #pure-css
    Lutfi Ismail•130
    Submitted about 1 month ago

    Are the HTML tags I'm using correct and does the method I'm using to achieve the design follow best practice guidelines?

    Thank you very much for your answer and explanation. I really appreciate your time and effort in helping me! 😊

    0 comments

  • A beautiful recipe webpage created with HTML & CSS

    #pure-css
    Lutfi Ismail•130
    Submitted about 1 month ago

    Am I doing it right to separate the image elements with a wrapper that wraps the entire element below it that contains the explanation, preparation, ingredients, and others?

    Thank you very much for your answer and explanation. I really appreciate your time and effort in helping me! 😊

    0 comments