Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions50Comments149

All comments

  • Hanem Naga• 20

    @hanemNaga

    Submitted

    i made this website with desktop first media query for responsive,I want to use mobile first could you suggest free tutorials for me

    responsive huddle landing page

    #sass/scss

    1

    imad• 3,310

    @imadbg01

    Posted

    Greeting Hanem Naga! Congratulations for completing this challenge!, 👏👏👏.

    this https://web.dev/learn/design is a great resource for Learning Responsive Design! also I take a look at your code and you did great job, but you may want to add cursor: pointer; to the buttons, because for some reason buttons don't have cursor pointer by default.

    button {
  cursor: pointer;
}

    but overall good attempt, Happy Codding

    Marked as helpful

    0
  • Diana Jordan• 20

    @dee-jordan

    Submitted

    Completed this NFT Preview challenge. I always seem to have issues with hovering and span functions. If anyone has any tips and resources of the thought process or good practice tips, I would like to be able to determine how to use these functions on my own.

    NFT Preview

    1

    imad• 3,310

    @imadbg01

    Posted

    Greeting Diana Jordan! Congratulations for completing your challenge!, 👏👏👏.

    they is a lot of ways to archive this overly effect, this is good resource from w3school, and also this blog post has some good information, but I did some changes to your code to make it function,

    html

        <div class="images">
      <img src="images/image-equilibrium.jpg" alt="equilibrium" class="image-first">
    </div>

    css

    
main .images{
    position: relative;
    background-color: rgb(139, 213, 218);
    border-radius: 10px;
    z-index: 1;
    overflow: hidden;
}

.image-first{
    max-width: 100%;
    transition: opacity 200ms ease-in-out;
}
.images::after{
  content: "";
  position: absolute;
  background-image: url("./images/icon-view.svg");
  background-position: center;
  background-repeat: no-repeat;
  width: 3rem;
  height: 3rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all 250ms ease-in-out;
}

.images:hover .image-first{
  opacity: .2;
}
.images:hover::after {
  opacity: 1;
  visibility: visible;
  scale: 1;
}

    this implementation uses css pseudo-elements, I Hope this give you some hints or tricks after all good attempt, keep coding

    Marked as helpful

    0
  • Mohammed• 10

    @Osmosis-Jones

    Submitted

    i had rouble removing the background color from the parent div below the qr image.

    HTML and CSS

    1

    imad• 3,310

    @imadbg01

    Posted

    Hello Mohammed! Congratulations on successfully completing the challenge! 👏👏👏

    I have reviewed your code and have a few suggestions to further enhance it. The main issue I found was with the width: 10% property in the .qr-container class. To resolve this, I recommend changing it to max-width: 16rem;. Additionally, removing the height attribute from the image and setting the width to 100% will improve the image display.

    Here's the updated code:

    body {
min-height: 100vh;
display: grid;
place-content: center;
}

.qr-container {
background-color: #fff;
margin: auto;
max-width: 16rem;
padding: 20px;
align-items: center;
border-radius: 15px;
}

.qr-image img {
width: 100%;
margin: auto;
padding-bottom: 20px;
background-color: #fff;
}

    Overall, your attempt is commendable. Keep up the good work, and welcome to the Frontend Mentor community!

    Marked as helpful

    0
  • timidij• 140

    @timidij

    Submitted

    Please I need help on this project, I am having a challenge trying to position the background balls at the top and bottom...

    Profile card

    #accessibility#bootstrap#airtable

    2

    imad• 3,310

    @imadbg01

    Posted

    Greeting timidij!! Congratulations for completing your challenge!, 👏👏👏. well done

    this background a litter bit tricky, but they are many ways to archive it, one of the easy-it way to archive it is pseudo-elements,

    this snippet for example should works,

    body {
min-height: 100vh;
max-width: 1440px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Kumbh Sans", sans-serif;
color: var(--Very-dark-desaturated-blue);
background-color: var(--Dark-cyan);
position: relative;
z-index: 1;
overflow: hidden;
}

body::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 50vh;
width: 50vw;
  
background-image: url("./images/bg-pattern-top.svg");
background-position: bottom right;
background-repeat: no-repeat;
z-index: -1;
}
  
body::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 50vh;
width: 50vw;
  
background-image: url("./images/bg-pattern-bottom.svg");
background-position: top left;
background-repeat: no-repeat;
z-index: -1;
}

    Hope this helps or give you some hints,

    Happy Codding!

    0
  • imad• 3,310

    @imadbg01

    Posted

    Greetings Abhiram! Congratulations on completing this challenge! 👏👏👏

    you did great job using grid, and you can also use media query to make it responsive, something like so

    .container {
display: grid;
max-width: 43rem;
margin: 1rem;
border-radius: 8px;
overflow: hidden;
    
}

@media (min-width: 35rem) {
.container {
grid-template-columns: repeat(2 , 1fr);
grid-template-rows: repeat(2 , 1fr);
}

    also notice that I changing the width to max-width and rem instead of percentage helps width responsivity, as percentage doesn't give the accepted result ,

    but over all good attempt, Keep it up, and Happy Codding!

    Marked as helpful

    1
  • Igor• 230

    @MIU-cz

    Submitted

    please help! how can i do transparency on image like at template design? my way:

    1. add opacity on div - 0.65;
    2. add opacity on img - 0.45; but it non like on template!!

    Stats preview card component solution Flex + SCSS

    #sass/scss#bem

    1

    imad• 3,310

    @imadbg01

    Posted

    Greetings Igor! Congratulations on completing this challenge! 👏👏👏

    Have you considered using mix-blend-mode instead of opacity?

    you can try something like this,

    .card__picture img {
width: 100%;
height: 100%;
object-fit: cover;
/* opacity: 0.45; */
mix-blend-mode: multiply;
}

    Overall, your attempt was really good. Keep up the great work!

    Marked as helpful

    0
  • Ross Porter• 10

    @porter-s-ross

    Submitted

    I don't think that my project really transfers very well to mobile. I wanted to make this component as simple as possible, so without getting into things like media queries, are there some ways that would help to create responsive designs?

    QR Component using HTML/CSS only

    2

    imad• 3,310

    @imadbg01

    Posted

    Greeting Ross Porter!! Congratulations for completing your first challenge, 👏👏👏.

    you did great job using flex, you can just use max-width instead to fix width on the card, and also it's a good idea to use rem instead of percentage, something like so

    .card {
	
max-width: 19rem;
	
}

    Overall good attempt, keep it up, and have a good day/night

    Marked as helpful

    1
  • P
    CJ Cameron• 350

    @CJCameron13

    Submitted

    Having the cyan overlay display over the image didn't work the way I thought it would. However I did figure out how to get it to work. It's a little glitchy when hovering though. Any suggestions? Thanks!

    NFT Preview Card Component

    2

    imad• 3,310

    @imadbg01

    Posted

    Greeting CJ Cameron!! Congratulations for completing your challenge, 👏👏👏.

    I have made some improvements to your code based on your feedback. Here are the updated HTML and CSS sections:

    html line 18

    <a href="#"id="cube-image" aria-label="cube-image">
<img  alt="cube-image" src="images/image-equilibrium.jpg">
</a>

    css line 35

    #cube-image {
display: flex;
border-radius: 15px;
margin-bottom: 20px;
background-color: var(--cyan);
position: relative;
justify-content: center;
align-items: center
}

#cube-image::after {
content: url(./images/icon-view.svg);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 200ms ease-in-out, scale 300ms ease-in-out;
scale: 0;
}

#cube-image img {
max-width: 100%;
display: block;
opacity: 1;
border-radius: 10px;
transition: opacity 200ms ease-in-out;
}

#cube-image:hover::after {
opacity: 1;
scale: 1;
}
#cube-image img:hover {
opacity: .5;
}

    I hope these changes help resolve the issue with the cyan overlay display. It's worth mentioning that there are multiple approaches to achieve a hover effect on an image, and your solution looks great! Happy coding!

    Marked as helpful

    0
  • Alexander Hergert• 710

    @alexander-hergert

    Submitted

    I had a hard time to find the right way to let the image look like it should. I can't match the dark tones. If you have an advice for me feel free to help out :D Ofcourse any feedback is welcome.

    stats preview card component

    1

    imad• 3,310

    @imadbg01

    Posted

    Greetings Alexander Hergert! Congratulations on completing this challenge! 👏👏👏

    You did a great job on this task! I have a suggestion that might make it even better. Have you considered using mix-blend-mode? It's a CSS property that can enhance your design. You can learn more about it on the Mozilla Developer Network website: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.

    Additionally, instead of using a solid background color, you can experiment with gradients. Here's an example of how you could implement it:

    .section-image::before {
/* background-color: var(--soft-violet) */
background: linear-gradient(320deg, #ff61f3 0, #b86ffb 100%);
}

.section-image img {
mix-blend-mode: multiply;
}

    Feel free to play around with the values and see what works best for you!

    Overall, your attempt was really good. Keep up the great work!

    Marked as helpful

    1
  • HeroLeam• 30

    @HeroLeam

    Submitted

    In my view it was a simple project to start my career, I had no difficulties, the project is visibly close to the challenge, I can't say if I did the development correctly and not to say the patterns in question of typing the codes.

    If you can evaluate and mention points that I can improve, thank you!

    3-Column Preview Card Ccomponent

    3

    imad• 3,310

    @imadbg01

    Posted

    Greeting @HeroLeam!! Congratulations for completing your challenge!, 👏👏👏. well done

    you did great, and you can also add cursor: pointer; to the buttons, as you may notice that buttons doesn't have a cursor pointer by default,

    button {
cursor:pointer;
}

    overall good attempt, keep it up and have a good day/night

    Marked as helpful

    0
  • ASM• 100

    @ahmed-sabbah-mohamed

    Submitted

    i hope that my coding is good, but if you found duplicate in code or errors tell me to improve my skills.

    3-column-preview-card-component-main

    #sass/scss

    1

    imad• 3,310

    @imadbg01

    Posted

    Greeting Ahmed! Congratulations for completing your challenge, 👏👏👏.

    I take a moment to look at your code, and you did great job, moreover I have some tips for you that may help improve your solution,

    for the body is a good idea to change the fix height: 100vh to min-height: 100vh let the body grow with the contents, if you look at devtools on the browser and hove over body element you will notice that body not wrapping up all the page, you can check this also by changing background-color in the body, as for the cards if each of them well have a h1 it's better to change from the div to section element for more semantically meaning, and you can take advantage for that to reduce duplication on css and use nth-child pseudo-class.

    example

    <section class="card">
</section>

<section class="card">
</section>

<section class="card">
</section>

    css

    .cards {
display: inline-block;
padding: 35px;
width: 300px;
}

.cards::nth-child(1) {
background-color: hsl(184deg, 100%, 22%);
}
.cards::nth-child(2) {
background-color: hsl(184deg, 100%, 22%);
}

.cards::nth-child(3) {
background-color: hsl(184deg, 100%, 22%);
}

    and to solve border-radius issue you can simply put it on the container itself,

    .container {
border-radius : 10px;
}

    Hope this give you some hints Overall you did great, have a great day/night, and keep coding 👍.

    Marked as helpful

    0
  • seerees doboyi• 20

    @reesjr

    Submitted

    responsive design was a challenge to me when working on this project I'm still unsure if i did well enough on the media query

    product-preview-card-component

    #react#sass/scss#semantic-ui#tailwind-css

    2

    imad• 3,310

    @imadbg01

    Posted

    Greeting seerees doboyi!! Congratulations for completing your first challenge, 👏👏👏.

    you did great job using flex, but the path to images need an update, as for now the images not showing up, fix -

    <img src="./images/image-product-desktop.jpg" alt="" class="img">
    <img src="./images/image-product-mobile.jpg" alt="" class="img-2">

    you can read about Dealing_with_files.

    Overall, have a great day/night, and keep coding 👍.

    Marked as helpful

    0
  • imad• 3,310

    @imadbg01

    Posted

    Greeting Fernando!! Congratulations for completing this challenge, 👏👏👏.

    for some reason the live site has 404 not found, you can try to deploy to https://www.vercel.com/ or https://www.netlify.com/ they are both fantastic and easy to use, and also recommended by Frontend Mentor Community for hosting challenges.

    Overall, have a great day/night, and keep coding 👍.

    Marked as helpful

    0
  • P
    Jay-Ann Bravo-Harriott• 20

    @jbravoh

    Submitted

    1. It took me a while to figure out how I was going to fetch the API as it's done a variety of ways, but once I got that sorted my priority was the CSS, especially the responsive design.

    2. The code in the return statement looks quite messy, does anyone have a cleaner way to organise the code?

    3. What's best practice when fetching data from an API as well as media queries for responsive design?

    Responsive Advice Generator

    #react

    1

    imad• 3,310

    @imadbg01

    Posted

    Greeting Jay-Ann Bravo-Harriott!! Congratulations for completing your challenge!, 👏👏👏.

    You did great on this challenge, but there is a bug on Firefox relative to cache, Firefox users will not be able to generate a new advice, to fix that for them simply pass an optional parameter {cache: 'no-cache'} to fetch.

     const getAdvice = () => {
    const url = "https://api.adviceslip.com/advice";

    fetch(url, {cache: 'no-cache'})

// ...

    Overall, good job, have a great day/night, and keep coding 👍.

    1
  • imad• 3,310

    @imadbg01

    Posted

    Greeting edbizichjr!! Congratulations for completing your challenge, 👏👏👏.

    you did great job using great, however the image not showing up because a there are a space at the being of src instead of slash /.

    fix -

    <img alt="product image" src="./images/image-product-desktop.jpg">

    Overall, have a great day/night, and keep coding 👍.

    Marked as helpful

    0
  • imad• 3,310

    @imadbg01

    Posted

    Greeting Abdulhafeez Ibrahim!! Congratulations for completing your challenge, 👏👏👏.

    they are many ways to archive that overly effect , One of the simplest ways is using CSS properties and pseudo-elements.

    for example you will need the following, a wrapper an image and icon as a decorative element

    HTML

    <div class="image-wrapper">
  <img class="eth-img" src="images/image-equilibrium.jpg" alt="Equilibrium image" >
</div>

    CSS

    .image-wrapper {
position: relative;
background-color: hsl(178, 100%, 50%);


/* ... */
}
.eth-img {
 opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;

/* ... */
}

.image-wrapper::after {
  content: url(images/icon.svg);
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 transition: .5s ease;
}

.image-wrapper:hover .eth-img{
  opacity: 0.3;
}

.image-wrapper:hover::after {
  opacity: 1;
}

    you can check out this resource to learn more.

    Hope this helps and give you some hints.

    Overall, Welcome to Frontend Mentor Community, and keep coding 👍.

    Marked as helpful

    1
  • imad• 3,310

    @imadbg01

    Posted

    Greeting lee!! Congratulations for completing this challenge, 👏👏👏.

    the live site has a 404 not found, the reason for that is when deploying to Github Pages, github by default look for index.html all letters on lowercase, on the root of your repository, to fix this issue simply rename index.HTML to index.html.

    you can learn more about github pages here.

    also you can give a try to https://www.vercel.com/ and https://www.netlify.com/ they're both fantastic and easy to use, and also recommended by Frontend Mentor Community for hosting challenges.

    overall Hope this helps you, keep coding and welcome to Frontend mentor Community

    Marked as helpful

    0
  • imad• 3,310

    @imadbg01

    Posted

    Greeting Maria!! Congratulations for completing your challenge!, 👏👏👏.

    You did great on this challenge, but there is a bug on Firefox relative to cache, Firefox users will not be able to generate a new advice, to fix that for them just pass an optional parameter {cache: 'no-cache'} to fetch.

    fetch("https://api.adviceslip.com/advice", {cache: 'no-cache'})
```
*overall, Happy coding, and have a great Day*

    Marked as helpful

    0
  • Bill McDavitt• 460

    @BMcdavitt

    Submitted

    I am curious to see what others did to create the hover effect on the image.

    CSS Javascript

    1

    imad• 3,310

    @imadbg01

    Posted

    Greeting Bill McDavitt!! Congratulations for completing your challenge!, 👏👏👏.

    for the hover effect, they're a lot of ways to archive it, for me personally I found using two spared element, one for the image and one as pseudo-elements, that way I can apply two different transition and I can archive a smooth animation.

    but if you curious about the best solution so far, lucas create this awesome nft-preview-card-vanilla-css-custom-design-and-hover-effects you check out and am sure that you will get a lot of inspiration from it.

    overall, happy coding, and have a great day

    Marked as helpful

    1
  • imad• 3,310

    @imadbg01

    Posted

    Greeting Akindutire Emmanuel!! Congratulations for completing your challenge!, 👏👏👏.

    for some reason the live site showing 404 not found, you can give a try to https://www.vercel.com/ and https://www.netlify.com/ they're both fantastic and easy to use, and also recommended by Frontend Mentor Community for hosting challenges.

    overall, Happy Codding, and have a good day/night

    Marked as helpful

    0
  • imad• 3,310

    @imadbg01

    Posted

    Greeting Walter Franz!! Congratulations for completing your First challenge!, 👏👏👏. well done

    you did great using job using grid and semantic elements, however box-shadow has invalid property, because the alpha value has a coma not a dot, to fix it just replace coma with dot, box-shadow: 0 1.6rem 1.6rem hsla(0, 0%, 0%, 0.05);, and also for padding you may wanna use padding-block instead of just standard padding,

    but overall good attempt, happy coding and welcome to Frontend Mentor Community

    Marked as helpful

    0
  • imad• 3,310

    @imadbg01

    Posted

    Greeting Jagpratap Singh!! Congratulations for completing your challenge!, 👏👏👏. well done

    you did great, just a simple fix to that shrinking on the image you can add flex-shrink: 0; to it, because the flex items will shrink to the small size possible and width: 50% has no effect on it,

    .card-image-desktop {
	display: block;
	width: 50%;

	flex-shrink: 0;
}

    Hope this help!

    overall Happy coding, and have a great Day

    Marked as helpful

    1
  • Anmol Panchal• 20

    @anmolp476

    Submitted

    I am sort of unsure about my CSS code. I have a feeling that I can make it more efficient, but I'm not sure exactly how. Any advice is helpful though!

    Random Advice Generator

    2

    imad• 3,310

    @imadbg01

    Posted

    Greeting Anmol Panchal!! Congratulations for completing your challenge!, 👏👏👏.

    I saw your code and you did great job using flex, however I have some tips for you may help you improve your solution if you don't mind,

    on CSS you can safely remove width: 100vw; from the body, as default are auto which works well, and overflow: hidden;, because there is overflow on the page. and add cursor: pointer; to the button, because by default buttons don't have a pointer, and on case you need one.

    CSS

    body {	
	/* width: 100vw; */
	/* overflow: hidden; */
}

.next-button button {
	cursor: pointer;
}

    and for JavaScript, there is a bug on Firefox relative to cache, Firefox users will not be able to generate a new advice, to fix that for them just pass a optional parameter {cache: 'no-cache'} to fetch.

    async function getQuote()
{
    const response = await fetch("https://api.adviceslip.com/advice", {cache: 'no-cache'})
   
}

    as for HTML my advice for you, is to not make div your best friend, because will not find them when project grow, instead try make use of meaningful tags, for example You should use <main> to wrap the container. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

    useful recourse

    overall hopefully this feedback helps, happy coding, and Have a Great Day/

    Marked as helpful

    1
  • Wiks• 750

    @wiksmf

    Submitted

    Hi! I just completed this challenge, any feedback is welcome! Thanks 😊

    Advice generator app

    1

    imad• 3,310

    @imadbg01

    Posted

    Greeting Wiks!! Congratulations for completing your challenge!, 👏👏👏. well done

    You did a great job on this challenge, so I'm perfectly happy for you, however there is a bug on Firefox relative to cache, Firefox users will not be able to generate a new advice, to fix that for them just pass an optional parameter {cache: 'no-cache'} to fetch.

    fix-

    `fetch(adviceApiUrl), {cache: 'no-cache'})`

    overall you did great, Happy coding, and have a great day

    Marked as helpful

    1