Skip to content
OverviewSolutions
8
Comments
0
Alina
@electr0space

All solutions

  • Submitted 2 months ago

    A responsive landing page with dropdown menu

    • HTML
    • CSS
    • JS
    0
  • Submitted 8 months ago

    Responsive site with blog post slider using JS

    • HTML
    • CSS
    • JS
    0

    Hello fellow front-enders! 👋

    I have a couple of questions for you and I would REALLY appreciate any recommendations or suggestions!

    1. I don't really like how my hero section turned out. I decided to put the bg-intro-desktop.svg image as a background using CSS and the image-mockups.png positioned right by the hero text using flexbox. What was your solution?

    2. I decided to add a small challenge for myself and make a carousel for blog posts section for smaller screens. It'd be nice if you share your thoughts on how I can improve the carousel.

    Here's html section, where

    blog is my main container for this section,

    blog__cards is a container for the blog cards,

    blog__card is a blog card:

        
      Latest Articles

      

      
        
          // blog card content
        
    
        
          // blog card content
        
    
        
          // blog card content
        
    
        
          // blog card content

    CSS section:

    .blog__cards {
    display: flex;
}
.blog__card {
    min-width: calc(100% / 4);
    margin-right: 20px;
}

.blog__card:last-of-type {
    margin-right: 0;
}

@media screen and (max-width: 1320px) {
    .blog__cards {
        overflow: hidden;
        scroll-behavior: smooth;
    }

    .blog__card {
        min-width: calc(96% / 2);
    }
}

@media screen and (max-width: 840px) {

    .blog__card {
        min-width: calc(100% / 1);
    }
}

    And finally JS:

    // Switch between blog posts in the blog section

const blogCards = document.querySelector(".blog__cards"); // carousel
const firstCard = blogCards.querySelectorAll(".blog__card")[0]; // the first blog card
const arrows = document.querySelectorAll(".blog i"); // arrows to scroll the cards 

// Get the margin right value between the cards
let marginRight = parseInt(getComputedStyle(firstCard).marginRight);

let cardWidth = firstCard.clientWidth;
let scrollDistance = cardWidth + marginRight;

// Carousel for blog posts 

arrows.forEach((arrow) => {
    arrow.addEventListener("click", () => {
        blogCards.scrollLeft += arrow.id === "left" ? -scrollDistance : scrollDistance;
    })
})

const showArrows = () => {
    let scrollWidth = blogCards.scrollWidth - blogCards.offsetWidth;
    arrows[0].style.display = blogCards.scrollLeft === 0 ? "none" : "block";
    arrows[1].style.display = blogCards.scrollLeft === scrollWidth ? "none" : "block";
}
  
blogCards.addEventListener("scroll", showArrows);

    Or if you notice anything suspicion, I'll be happy to hear from you in any case! Thank you guys! 🤗

  • Submitted 9 months ago

    Responsive landing page with HTML/CSS/JS

    • HTML
    • CSS
    • JS
    0
  • Submitted 12 months ago

    Responsive page using CSS Grid and JS for mobile menu

    • HTML
    • CSS
    • JS
    0
  • Submitted about 1 year ago

    Responsive landing page using Flexbox

    • HTML
    • CSS
    0
  • Submitted about 1 year ago

    Responsive 3-column card using Grid

    • HTML
    • CSS
    0
  • Submitted over 1 year ago

    Responsive product card with HTML/CSS/JS (interaction with button)

    • HTML
    • CSS
    3
  • Submitted over 1 year ago

    Responsive QR code card using Flexbox & media queries (HTML/CSS only)

    • HTML
    • CSS
    0