Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
11
Babalola victor ayomide
@ZHADOW999

All comments

  • P
    Alfonso Pruneda•190
    @915fonzie
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    Most proud of learning how to use framer motion to animate my pages.

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

    Some challenges I faced had to do with layouts. Initially when I created my layouts for each page, I had not included the links because initially I did not have a solution to make it work, but after several hours I figured out how to be able to use the links in the layouts and still being able to keep the order of my elements where they should be.

    Space Tourism Multipage done with React, React Router and SASS

    #react#react-router#sass/scss#motion
    1
    Babalola victor ayomide•430
    @ZHADOW999
    Posted 11 months ago

    remove the overflow: hidden on the main tag page

    Marked as helpful
  • Vinayak•320
    @V102002
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I finished this in within an hour. It was a good revision

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

    Adding the box shadow, had to refer chatgpt for that and the mobile version of the design

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

    This was more of a revision and I was designed it within an hour

    Blog-Preview (Revision)

    2
    Babalola victor ayomide•430
    @ZHADOW999
    Posted about 1 year ago

    also bolg-container set the height to auto and remove the margin-top on the preview-img it will look better like that 😁

    Marked as helpful
  • Vinayak•320
    @V102002
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I was able to replicate the card with less help and i was implemented media queries for 768px and 500px

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

    I wasn't able to get the right height of the card, so it was trial and error

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

    Any feedback is welcome

    NFT_Preview-Card using Flex box

    1
    Babalola victor ayomide•430
    @ZHADOW999
    Posted about 1 year ago

    hey its me again just set the height to auto

  • Vinayak•320
    @V102002
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I finished in an hour

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

    I came across a problem when I made a live site, the alignment was off

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

    Please give feedback on how to get it better

    Product-Preview

    1
    Babalola victor ayomide•430
    @ZHADOW999
    Posted about 1 year ago

    Firstly remove the margin left on the container and put margin:auto; to center it

    The card at 500px screen size set the width to 85%

    The button at 500px screen size set the width to be 90% and add margin:auto;

    The container at 500px screen size remove the height:1000px and set the height to height:auto,

    So these are the correction i made to make it better

    If you wanna center elements in a container, set the container to 100% or any size of your choice and set the elements in the container to like 90% or any size of your choice and put margin:auto;

    Adding auto on width or height means adding width or height based on the amount of element in the container it' really helpful

    i hope this helps you, happy coding 😁👌 !

    Marked as helpful
  • theHeroJoel•60
    @theHeroJoel
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm really happy about how simple the code is, I used Vanilla JS to build the functionality of changing the theme to any of the three (just like the design).

    I started with working on the HTML and CSS to have a functional calculator before worrying about the themes. If I have a similar project to this in the future, I would still take this approach.

    Overall, I really like how easy the code is, and how fast I was able to build it.

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

    I did not encounter any particular issues in the course of solving this.

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

    The Javascript portion for sure. I believe the code would have been even easier if I had knowledge of React JS

    Responsive Calculator App Using Javascript

    1
    Babalola victor ayomide•430
    @ZHADOW999
    Posted about 1 year ago

    Well done, but why didn't you follow the design?

  • Koda👹•3,830
    @kodan96
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Made with:

    • HTML 🦴
    • SCSS 🖌️
    • JS 🤖
    • mobile-first approach 📲📲
    • luxon, jQuery, GSAP libraries used in the development 📗📗
    • autoprefixer for browser compatibility 🧭
    • minified files for better performance 🚀
    What specific areas of your project would you like help with?

    If you notice any bugs or have suggestions you know what to do 👇👇

    Clock App ⏲️⏲️ w/ HTML, CSS, JS

    #gsap#jquery#animation
    3
    Babalola victor ayomide•430
    @ZHADOW999
    Posted about 1 year ago

    this is really cool but i found a bug, i could not view the entire web page, it like you put an overflow:hidden; or something

  • Dhananjay Sutwane•180
    @Dhananjaysutwane
    Submitted about 1 year ago

    responsive using flex and media queries, no js used for hamburger menu

    2
    Babalola victor ayomide•430
    @ZHADOW999
    Posted about 1 year ago

    Nice job ! but i recommend you use grid instead of flexbox to have more consistent size with each box

  • P
    Øystein Håberg•13,260
    @Islandstone89
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Managed to get most of it done.

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

    I couldn't figure out the backgrounds on the header and the "State of the Art" section. I changed the header gradient because of contrast issues with the text, so I'm not sure the background circles would fit for those colors. The trouble with the "State of the Art" section was that the circle was either on top of everything or not showing. My disdain for background "decorations" continues xD

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

    I also couldn't figure out how to make the menu dropdowns independent. The functionality works, the dropdowns show when the button is clicked, and disappear when the button is clicked again. But every time I click one of them, all the others also show/disappear.

    Blogr Landing Page

    #accessibility
    3
    Babalola victor ayomide•430
    @ZHADOW999
    Posted about 1 year ago

    hey there :) good work your project but i got a few improvements for you😁

    USE THIS code for the hero section to fix the background image and add the gradient

    the background position property just helps to position the image in the container

    background repeat : sets the image to not repeat

    background size : just sets the size of the image

    so yeah play around with to get your desired look

    This approach will also work for the "State of the Art Infrastructure" section too, just change the image and the linear gradient color ^_^ and mess around with the back position and size

    background-image:url(./images/bg-pattern-intro-desktop.svg), linear-gradient(
        to right,
     hsl(13, 100%, 72%)19%,
     hsl(353, 100%, 62%)50%);
    background-position:  27% 52%;
    background-repeat: no-repeat;
    background-size: 220%;
    border-radius: 0 0 0 5rem;
    color: white;
    

    And now for the java script this was the code i used

    just add a show class to the css file like this

    .show{opacity: 1;}

    i set my dropdown to an opacity of 0, but you can use display: none on the dropdown and display block in the show class if you prefer that so the dropdown will set a display on click

    .arrow{ transform: rotate(180deg); } added this arrow class to the css to make the arrow to turn 180deg on click

    soo this code will set the dropdown to show when the button is clicked

    function myFunction() { document.getElementById("dropdown1").classList.toggle("show"); document.getElementById("arrow").classList.toggle("arrow"); document.getElementById("arrow2").classList.toggle("arrow"); }

    // Close the dropdown menu if the user clicks outside of it

    window.onclick = function(event) { if (!event.target.matches('.dropdown-rel')) { var dropdowns = document.getElementsByClassName("dropdown"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

    i hope this helps 😁😁😁😁

    Oh yh I forgot to add that if you want to do different drop downs just use the same code but changed the function name for each drop-down

    Marked as helpful
  • Abdul-Ahad•160
    @ahad324
    Submitted almost 2 years ago

    LoopStudios Landing Page

    2
    Babalola victor ayomide•430
    @ZHADOW999
    Posted about 1 year ago

    You forgot to do the mobile design 👀

  • Khôi•10
    @Minhkh0inee
    Submitted almost 2 years ago

    Responsive Product Preview Card Component with CSS media

    1
    Babalola victor ayomide•430
    @ZHADOW999
    Posted almost 2 years ago

    Remove all the read me and style file from the folder and specify the path of the image with './' to be able to see the image

  • Abdul-Ahad•160
    @ahad324
    Submitted almost 2 years ago

    LoopStudios Landing Page

    2
    Babalola victor ayomide•430
    @ZHADOW999
    Posted almost 2 years ago

    Try making the position of the images absolute and the text position relative

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

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

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