Skip to content
OverviewSolutions
13
Comments
16

Bilal Türkmen

@bilalturkmenİstanbul340 points

Hi! i’m interested in digital marketing, graphic design and web development. And i'm open to collaborate with who are interested in similar topics.

I’m currently learning...

🎯 javascript, react, next.js

Latest solutions

View more solutions

Latest comments

  • Bilal Türkmen•340
    @bilalturkmenPosted almost 2 years ago

    Hi, nice work.

    I have a simple suggestion for the footer section to be at the bottom.

    you should delete this line

    and change this line

    like this justify-content: space-evenly;

    i think it will look better 🤙

    Marked as helpful
    1
  • Bilal Türkmen•340
    @bilalturkmenPosted about 2 years ago

    Hi Alper nice work.

    positioning in css sometimes can be confusing. I also experience this situation often.

    We need to add a relative container before the absolute position. actually you already added.

    so you can uncomment again this div

    <div class="hero__img-area">
<picture>
              <source
                media="(min-width: 62.5em)"
                srcset="./assets/img/desktop/image-hero-desktop.png"
              />
              <source
                media="(min-width: 37.5em)"
                srcset="./assets/img/tablet/image-hero-tablet.png"
              />
              <source
                media="(min-width: 31.25em)"
                srcset="./assets/img/mobile/image-hero-mobile.png"
              />
              <img
                src="./assets/img/mobile/image-hero-mobile.png"
                alt="The hero image"
                class="hero__img"
              />
            </picture>
</div>

    and then define the following css properties

    .hero__img-area{
  position:relative
}

.hero__img{
    position: absolute;
    top: -18.25rem;
    left: 0.1875rem;
}

    delete this

    update your .wrapper class min-width: 100% and .container class width:70em

    then set the "top" and "left" positions in the .hero__img class for your media queries.

    Secondly... I think this accessibility message pops up because you used nav tag twice. if you use aria-label for these tags, i think it will fix the problem.

    example:

    <nav aria-label="header menu"> ... </nav>
<nav aria-label="sub menu"> ... </nav>
    Marked as helpful
    1
  • Bilal Türkmen•340
    @bilalturkmenPosted about 2 years ago

    nice and meticulous work.

    Custom scrollbar is a nice detail. I liked framer motion, want to try too 🙂

    1
  • Bilal Türkmen•340
    @bilalturkmenPosted about 2 years ago

    Hi,

    • for the first question, it seems ok.

    but if you want use less css code, you can check this example

    • I don't know much about styled css, but i find it more correct to use external css, for file size and readability by others. but it seems be comfortable to use for small applications

    • maybe you should try css module. there is a comparison

    Marked as helpful
    0
  • Bilal Türkmen•340
    @bilalturkmenPosted about 2 years ago

    Hi Alper, nice work.

    It might be better, adding this background color to the body selector, instead section. White space appears around the edges of the page in full hd resolution.

    Happy Coding 🙂

    Marked as helpful
    0
  • Bilal Türkmen•340
    @bilalturkmenPosted about 2 years ago

    it makes me want to learn typescript 🥳

    this style blew my mind 👍

    1
View more comments