Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
24
Comments
717

Ecem Gokdogan

@ecemgo9,380 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!

Latest solutions

  • Notifications Page (only HTML + CSS + JS)


    Ecem Gokdogan•9,380
    Submitted about 1 year ago

    1 comment
  • Responsive Single-Page Design Portfolio


    Ecem Gokdogan•9,380
    Submitted over 1 year ago

    1 comment
  • Responsive Intro Component with Sign-up Form

    #animation#accessibility

    Ecem Gokdogan•9,380
    Submitted about 2 years ago

    0 comments
  • Responsive Project Tracking Intro Component


    Ecem Gokdogan•9,380
    Submitted about 2 years ago

    0 comments
  • Interactive Rating Component with the Dark/Colorful Theme


    Ecem Gokdogan•9,380
    Submitted about 2 years ago

    0 comments
  • Responsive Sunnyside Agency Landing Page (only HTML + CSS + JS)

    #animation

    Ecem Gokdogan•9,380
    Submitted about 2 years ago

    2 comments
View more solutions

Latest comments

  • Ezequiel•1,250
    @3eze3
    Submitted about 2 years ago

    Interactive Card Rating (Scss/Js) 🧡

    #accessibility#jss#sass/scss
    3
    Ecem Gokdogan•9,380
    @ecemgo
    Posted about 2 years ago

    The animation is awesome! 🤩

  • Andrewwangari•110
    @Andrewwangari
    Submitted about 2 years ago

    Flexbox , Box-model Bootstrap

    3
    Ecem Gokdogan•9,380
    @ecemgo
    Posted about 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    • You can add the recommended color for the screen to the body
    body {
      background: hsl(212, 45%, 89%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    
    • If you use max-width, the card will be responsive
    • You'd better update padding to give a gap between the content and the border of the card
    .box3 {
      /* padding: auto; */
      padding: 15px;
      /* border: 1px solid hsl(212, 35%, 85%); */
      border-radius: 10px;
      /* width: 300px; */
      max-width: 300px;
      /* height: 500px; */
      background-color: hsl(0, 0%, 100%);
    }
    
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img {
      /* width: 300px; */
      width: 100%;
      border-radius: 5%;
      /* padding: 10px; */
    }
    
    • You'd better update the padding of the p
    p {
      /* padding: 20px; */
      padding: 10px;
    }
    
    • You don't need to define .box2 and you can remove it
    /* .box2 {
        border: 1px solid hsl(212, 35%, 85%);
        margin: 150px auto;
        width: 1500px;
        height: 700px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: hsl(219, 71%, 75%);
    } */
    
    • Finally, the solution will be responsive if you follow the steps above

    Hope I am helpful. :)

  • Jonah Ssegawa•240
    @devjhex
    Submitted about 2 years ago

    Qr code component using basic CSS

    #bem#sass/scss
    1
    Ecem Gokdogan•9,380
    @ecemgo
    Posted about 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you use max-width, the card will be responsive and you can reduce the width a bit
    • You don't need to use margin if you use flexbox in the body
    .qrComponent {
      /* width: 370px; */
      max-width: 300px;
      /* margin-top: 3rem; */
      /* margin-inline: auto; */
    }
    
    • After updating like above, you don't need to use media queries for this solution because the solution will be responsive if you follow the steps above

    Hope I am helpful. :)

    Marked as helpful
  • Rafael Nunes•30
    @RafaelNunesg
    Submitted about 2 years ago

    qr-code-component-main solution using HTML and css

    3
    Ecem Gokdogan•9,380
    @ecemgo
    Posted about 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    body {
      background: hsl(212, 45%, 89%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    
    • If you use max-width, the card will be responsive and you can reduce the width a bit
    • You'd better update padding to give a gap between the content and the border of the card
    .container {
      padding: 16px;
      /* margin: 6% auto 38% auto; */
      max-width: 300px;
      /* width: 348px; */
      /* height: 545px; */
    }
    
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img {
      width: 100%;
      /* width: 316px; */
      /* margin: 16px 0px 16px 16px; */
      border-radius: 8px;
    }
    
    • You'd better update the margin of the texts
    h2 {
      /* margin: 10px 36px 10px 36px; */
      margin: 20px 10px;
    } 
    
    p {
      /* margin: 10px 36px 10px 36px; */
      margin: 10px 0 30px;
    }
    
    • Finally, the solution will be responsive if you follow the steps above

    Hope I am helpful. :)

    Marked as helpful
  • Emilio•180
    @emilioQuilodran
    Submitted about 2 years ago

    responsive qrcode using sass

    2
    Ecem Gokdogan•9,380
    @ecemgo
    Posted about 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    When you download the starter, there is a style-guide.md in the folder. You can use that reference for color, font-size, font-family etc.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    • For the background, you can use the recommended color in the body
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: hsl(212, 45%, 89%);
    }
    
    • If you use max-width, the card will be responsive and you can increase the width a bit
    • You'd better update padding to give a gap between the content and the border of the card
    • You can add text-align: center to center texts
    .main .card {
      /* width: 240px; */
      max-width: 300px;
      border-radius: 10px;
      margin: 0 auto;
      background-color: white;
      /* padding: 10px; */
      padding: 15px;
      text-align: center;
    }
    
    • You can add font-size to the .card-title and update it in the card-text
    .main .card .card-title {
      font-size: 20px;
    }
    
    .main .card .card-text {
      font-weight: 300;
      /* font-size: 12px; */
      font-size: 16px;
    }
    
    • You don't need to use .main and .main .block and you can remove them
    /* .main {
      position: relative;
      background-color: #DFDBE5;
      background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
      width: 100%;
      height: 100vh;
      padding-top: 5%;
    } */
    
    /* .main .block {
      box-shadow: 0 10px 20px #bbbbbb;
      background-color: rgb(148, 188, 214);
      width: 75%;
      margin: 0 auto;
      padding: 5% 0;
      text-align: center;
    } */
    
    • Finally, you can remove media queries because the solution will be responsive if you follow the steps above

    Hope I am helpful. :)

    Marked as helpful
  • Rodrigo Oliveira Silva•10
    @RodrigooliveiraBRPR
    Submitted about 2 years ago

    HTML CSS

    3
    Ecem Gokdogan•9,380
    @ecemgo
    Posted about 2 years ago

    Some recommendations regarding your code that could be of interest to you.

    HTML

    • The html structure should be like that:
    <body>
      <main class="card">
       <img src="images/image-qr-code.png" alt="image-qr-code">
        <h1>Improve your front-end skills by building projects</h1>
        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
      </main>
       <footer class="atribuition"Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
        Coded by <a href="https://github.com/RodrigooliveiraBRPR">Rodrigo De Oliveira Silva</a>.
      </div>
    </body>
    
    • If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
    

    CSS

    • After adding them to the HTML, you can add this font-family to the body
    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    body {
      background-color: hsl(212, 45%, 89%);
      min-height: 100vh;
      align-items: center;
      font-size: 15px;
      /* font-family: "Marck Script", cursiva; */
      /* font-family: "Outfit", sem serifa; */
      /* display: flexbox; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-family: "Outfit", sans-serif;
    }
    
    • If you use max-width, the card will be responsive
    .card {
      max-width: 300px;
    }
    
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    img {
      /* width: 96%; */
      width: 100%;
      border-radius: 20px;
    }
    
    • You'd better update texts in this way:
    h1 {
      color: hsl(218, 44%, 22%);
      margin: 20px 0;
      font-size: 20px;
      line-height: 1.3;
    }
    
    p {
      color: hsl(220, 15%, 55%);
      margin-bottom: 20px;
      line-height: 1.3;
    }
    
    • You don't need to define .container and text and you can remove it
    /* .container {
      max-width: 350px;
      margin: 0 auto;
    } */
    
    /* text {
      padding: 22px 10px;
    } */
    
    • Finally, if you follow the steps above, the solution will be responsive.

    Hope I am helpful. :)

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Mentor of the Week - 2nd Place

This badge is awarded to the 2nd placed community member on the weekly Wall of Fame.

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

Mentor of the Month - 2nd Place

This badge is awarded to the 2nd placed community member on the monthly Wall of Fame.

Fun fact

The computer in this badge is loosely based on the Commodore PET which was one of the earliest home computers launched in 1977. It came with 4 KB of RAM...that's not a typo!

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub