Skip to content
OverviewSolutions
8
Comments
13
Adem Tozlu
@Adem-Tozlu

All comments

  • Adem Tozlu•160
    @Adem-TozluSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm excited to keep learning and growing!

    What challenges did you encounter, and how did you overcome them?

    Initially, it was challenging to ensure that when one element was clicked, the others would retain their original color. However, through persistent thinking and research, I managed to overcome this issue by systematically working through the individual steps.

    What specific areas of your project would you like help with?

    I would be happy about any feedback

    Frontend-Mentor-Interactive-rating-component with Javascript

    1
    Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    The screenshot of the frontend doesn't match the real one. I have a gap between submit and screenshot and nothing is displayed there. But when I check it myself there is a gap

    0
  • Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    Hello, your profile is not in the middle, try to do it like that. take your margin 100px out of .card. and do this on your body day then it should center itself

    display: flex; flex-direction: column; height: 100vh; justify-content: center; align-items: center; text-align: center;

    0
  • leonesoj•10
    @leonesojSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how the challenge turned out but I would've liked to get dimensions closer to the design.

    What challenges did you encounter, and how did you overcome them?

    I don't know how to make web pages responsive but the design turned out just fine on smaller screens based on me making my window smaller and bigger. The only real difficulty was nailing down the dimensions. Also, I might be wrong but something tells me using the tag inside the text elements is probably not ideal and there are better ways to do so.

    What specific areas of your project would you like help with?

    Where do I start when it comes to implementing a web-responsive design?

    QR Code Component built on Flexbox

    1
    Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    Hello response, it's best to start mobile first then you'll save yourself all the codes. Then you can add @media and then enter the values for a higher pixel. But for the task you don't need @media because the Qr code is in the middle. Here's a page about @media

    https://developer.mozilla.org/en-US/docs/Web/CSS/@media?retiredLocale=de

    0
  • Ana Beatriz•30
    @AnaBeatrizA-SilvaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    The entire project

    What challenges did you encounter, and how did you overcome them?

    The links part.

    What specific areas of your project would you like help with?

    The links

    Social Link Profile

    1
    Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    Hello, I think you didn't get the part with the active button, i.e. the color changes when you move over it with the mouse.

    I have a solution for you, try it out

    links a:hover { background-color: hsl(75, 94%, 57%); color: var(--color-off-black);

    }

    Marked as helpful
    0
  • Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    You can do that, but it would be better if you do a tag and then within a tag the buttons, for example:

    <a href="https://github.com" target="_blank"> <button> GitHub </button> </a>

    Alternatively, you can do it like this

    <button onclick="window.location.href='https://github.com';"> GitHub </button>

    you can try it out

    Marked as helpful
    0
  • Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    Hello, I took a look at your code and there seem to be errors. and it is important that you have a main tag in your body, try it like this. Replace your div id=container tag with main and add this in your CSS and best of all, don't make so many div containers that you don't need. Have I sent you a suggested solution, you can mess around with it a bit

    HTML

    <body> <main> 
    <div class="qr-code">
  <img src="images/image-qr-code.png" alt="QR Code">
  <h2>Improve your front-end skills by building projects
  </h2>
  <p class="text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
    </main> </body>

    CSS

    body{

    font-size: 15px;
font-family: Outfit, sans-serif;
background-color: var(--color-Light-gray);

    }

    main

    { height: 97vh; display: flex; justify-content: center; align-items: center;

    }

    .qr code img{ width: 100%; border-radius: 0.5rem;

    }

    0
  • Timsilve•70
    @TimsilveSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Am proud to have done it alone

    What challenges did you encounter, and how did you overcome them?

    My challenge was on Deploying the repository on GitHub pages

    I later realized that for the livesite to display my webpage i must not include all my file eg the index.html in a subfolder

    What specific areas of your project would you like help with?

    The font-family Why is mine not working

    Responsive landing page using HTML and CSS

    1
    Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    Hello, I looked at your code and there are errors in it, for example in line 15 (CSS) is missing (;). The Fontfamly name is spelled incorrectly, try it here.

    add this where you have @font face

    @import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');

    Then check if you have the names correct and font weight. example it would look like this.

    font-family: "Young Serif", serif; font-weight: 400;

    I'll also give you a tip on how to color the numbering

    ol li::marker{ color: var(--color-primary-nutmeg); font-weight: bold; }

    0
  • Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    <a href="">GitHub</a> <a href="">Frontend Mentor</a> <a href="">LinkedIn</a> <a href="">Twitter</a> <a href="">Instagram</a>

    I would add these as buttons because these are buttons

    html

    <button> GitHub </button>

<button>  Frontend Mentor  </button>

<button>  LinkedIn  </button>

<button> Twitter  </button>

<button>  Instagram </button>

    css

    button { cursor: pointer; width: 90%; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; background-color: var(--color-grey); border-style: none; color: var(--color-white); font-weight: 700; }

    And you have it flush with the edge at the bottom but in the original it is not on the edge. So you could try it

    Marked as helpful
    1
  • pablodev•430
    @PabloodevSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Hello guys❤️

    The challenge was easy for me, I had problems in some parts, but it was very important for me to learn new tags and features

    I learned how to change the color of the list type, in which case it inherits the color of the parent tag

    I also learned how to use tables

    What challenges did you encounter, and how did you overcome them?

    I had problems with how to define the color of the list marking elements, I researched some videos and now I know how it works

    I also had a problem with the last nutrition div, I looked at other solutions here on the platform and saw index.html there I learned that there is a table tag, I researched its documentation and understood how it works

    What specific areas of your project would you like help with?

    how my code can be organized in a better way

    All help is appreciate!

    pablodev - Recipe Page Solution

    1
    Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    Es ist sehr gut gelungen vielleicht solltest du noch die zahlen dicker machen und die punkte dünner.Es gibt aber auch einige Fehler in deinem code . h1 Tag solltest du nur einmal verwenden nur mehrfach.Was ich dir noch empfehlen würde.Benutze vorallem bei breite und höhe keine px sondern em oder rem ambesten rem.Weil px eine feste angabe ist.rem bezieht sich auf dem browser.Wenn ein benutzer keine standart wert als browser hat dann könnten die px werte probleme machen.

    Marked as helpful
    0
  • Shubhojit Mitra•40
    @shubhojit-mitra-devSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    is easy when you have practiced 2-3 times

    What challenges did you encounter, and how did you overcome them?

    It was much easier this time because of all the practice from the previous challenges

    What specific areas of your project would you like help with?

    Creativity is required. Right now all the designs are provided to me, but when I am creating a project by myself, I need to think a lot while designing.

    Responsive Social links profile using HTML5 & CSS3

    2
    Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    Es ist sehr gut geworden !

    0
  • Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    Das untere Bild ist zu klein genauso auch der Name . Zudem würde ich den schwarzen rand unten bischen dicker machen ansonsten ist es sehr gut geworden

    Marked as helpful
    0
  • Adem Tozlu•160
    @Adem-TozluPosted 6 months ago

    Die ecken sollten einen Radius bekommen .Das machst du mit border-radius:. Der P tag sollte weniger breite haben

    0