Skip to content
OverviewSolutions
8
Comments
15
Gabriel_BC
@GabrielBC2021

All comments

  • Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Hello :D

    1.- You have problems with your images and is because you, in your HTML document have

    <img src="/Resource/image.png">

    the HTML is looking for that Resource folder and that's why you are having that problem.

    0
  • Facundo Rubio•250
    @Facu3071Submitted over 2 years ago

    I appreciate so much if you take a bit of your time and give me a feedback. Thanks.

    3-column

    2
    Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Hello, just a quick tip

    If you want to center your main or div, so this one is right in the center of your website, you can add the next properties to your body

    `body {

    display: flex;

align-items: center;

min-height: 100vh;

    } `

    and you can eliminate the next properties from your media query

    `.section {

    justify-content: center;

align-items: center; 

position: absolute; 

top: 35%;

left: 50%;

transform: translate(-50%, -50%);

    } `

    With this now you don't have a lot of CSS code to center your div and is easier.

    I hope it helps you :D

    Marked as helpful
    1
  • Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Hello, Just little details

    1.- You are not adding all the hovers, you added the hover to the image, but you are missing adding hover properties to the text Equilibrium #3429 and the text Jules Wyvern.

    2.- You are missing the font weight in some parts of the project, just add them, not big problems

    3.- You are missing the alt attribute in your img tag, just add it (If you don't know what this attribute works for, just tell me and I'll tell you with details).

    Little details that will make your website look better.

    Marked as helpful
    1
  • Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Hello :D, just a couple of thing:

    1.- You have your style.css but in your HTML you are including styles in the head tag, just cut those styles that you are using in your HTML and paste them in your style.css.

    2.- I've seen in your repository that you took out some on the images that the project gives you, you can put them in the images folder, by doing this you are more organized and if someone watches your repository will understand everything you are doing in a better way.

    3.- In your QR-code image and your container you are using so much the border-radius, you can try just using 1em instead of 2em, you can see the design and you will understand what i'm saying haha.

    4.- You have in the project the file style-guide where tells you which properties, colors, font families, font size, etc, you are going to use, you can check it out and try while you are coding, take a look at the design so you have a better perspective of what you are doing in real time.

    Hope these tips help you.

    Little details that you make your website look better :D

    0
  • Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Just a couple of tips

    1.- Don't mix your HTML with your CSS, you have your stylesheet.css and your index.html but in your HTML file you are using styles in your head tag, just cut those styles and paste them in your stylesheet.css.

    2.- You are not importing the font family the right way, here is a solution:

    You can import your font family in your CSS heres how you can import it and how to use it in your body:

    @import url('https://fonts.googleapis.com/css2family=Outfit:wght@400;700&display=swap');

    and now in your body,

    body { font-family: 'Outfit', sans-serif; }

    remember, all of this in your CSS file, the import you can put it right in the top of the file.

    Hope this helps you :D

    Marked as helpful
    2
  • Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Just 2 things, not big problems, just liiiitle details

    1.- You can eliminate the default HTML that comes in every project, so your project looks better and the same to the design that the platform is giving you.

    2.- When you are including img you have to use the attribute alt="". This attribute helps your website. Lets say the img you are using is not loaded on your website, the alt attribute will display a description of your image, for example:

    <img src"/images/image.png" alt="This is an image">

    With this if your image didn't load on your website, will show the text and will help the user to understand what was the image about.

    Little details that will make your website look better :D

    Marked as helpful
    1
  • Lucas LoPresti•60
    @LucasdudeSubmitted over 2 years ago

    I found a lot of it difficult. I did the best i could but towards the end i started using relative positioning which isn't necessarily bad but it's kind of a shortcut and i want to learn how to do it properly. I also struggled with the hovering over the image part as well as inserting those little icons.

    I used css and positioning for a bit of it

    1
    Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Hello :D

    Just little details and tips

    1.- Try putting all your files in folders, like the images from the project you can create a image folder, by doing this you are more organized and if someone watch your code they will understand what you are doing.

    2.- You didn't include the font family that comes in the style-guide file, try importing it so your website looks better.

    3.- You can use either Flexbox or Grid to this project, it helps a lot and will reduce your CSS code.

    Little details that will make your website look way better :D

    Marked as helpful
    1
  • Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Hello, just some little details

    1.- That is not the right background color so... You can change it.

    2.- You can eliminate the default HTML that comes in every project, by doing this your website will look a little bit better.

    3.-Be careful with the backslash you use (your code)

    src="images\image-qr-code.png"

    You have to use this one /

    Little details that will make your website look better :D

    Marked as helpful
    2
  • Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Just some liiitle details, nothing so bad though.

    1.- You are just forgetting about that the heading must be in uppercase, nothing so bad.

    2.- You can eliminate the default HTML that comes in every project, so your website look just a liiitle better.

    3.- You are having a GitHub problem because I tried to watch your code but there is a 404 page problem.

    Little details that will make your website look better :D

    Marked as helpful
    0
  • Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Hello, just some little details

    1.- You are not uploading your files the right way on GitHub, you don't have to upload the folder, just the components (what is inside the folder).

    2.- I know is a small project, but you shouldn't mix your CSS in your HTML, you have to separate your CSS stylesheet and in your HTML use the tag link to link that stylesheet.

    3.- You are not including media queries, so your website could be responsive, if you look at it un Firefox developer view, when you are in device pov, your website Is falling apart, with media queries we prevent that so you can check that out.

    Little details that will make your website look better :D

    Marked as helpful
    0
  • Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Just little details like:

    1.- You can eliminate the HTML code that comes by default in every project (It makes you website look better).

    2.- You are having problems with your GitHub repository because I can't see your code due to a GitHub problem, make sure you are uploading your files the right way.

    3.- I suggest you that you can upload your website in Netlify it makes look better and it gives you the option of uploading a website from your repository without problems.

    I hope this can help you :D

    Marked as helpful
    0
  • Leslie Fernandez•290
    @leslief10Submitted over 2 years ago

    I had to compromise on the transparency of the aquamarine rectangle so the view icon would look white. All feedback/recommendations are welcomed!

    NFT preview card component

    1
    Gabriel_BC•300
    @GabrielBC2021Posted over 2 years ago

    Hello :D

    1.- You can eliminate the default HTML that comes in the projects, so your website looks a little bit better, just a little detail.

    2.- You can eliminate the next piece of code, that is not neccesary

    .preview-card__image-container:hover .preview-card__image { opacity: 0.3; }

    3.- When you hover the image, the color coves the background image and in the design is not full cover, so you can just modify that opacity like this:

    .preview-card__image-container--overlay:hover { opacity: 0.5; background-color: var(--currency-color); cursor: pointer; }

    Just some details that will make your website looks better. Good work, keep it up :)

    Marked as helpful
    0