hitmorecode

@hitmorecode

All comments

andro1ghado• 40
@andro1ghado
Submitted 2 months ago
Social Links Profile
#accessibility#web-components
1
hitmorecode• 6,270
@hitmorecode
Posted 2 months ago
Nice well done. A few comments

You only have a mobile version, the desktop version is missing

You forgot to add the hover effect on the buttons

You used <p> tag for the buttons link. Change it to <a> otherwise users will not be able to click on the links.

You don't have a h1 on your page

You can remove <div class="background"> inside the CSS change .background to body

You usde position: relative; to position the buttons, image and text. You can easily do this with flexbox or css grid. Only use position when necessary, otherwise just go with flexbox or css grid.

It's a good start Keep it up
0
Abouelhouda Iliass• 300
@ilyesab
Submitted 2 months ago
This was the hardest challenge for me. although it was similar to the previous ones.

I have a few concerns about the solution.

1- I used a picture element to pick the right image based on the viewport size. and css blend modes to apply the effect on the image. I'm not sure If I should have used css background images and linear gradients instead. what do you think?

2- I'm not sure about how I structured the html and css for this project. let me know if you like / dislike the structure of the code ?

3- I have doubts on how I handled the responsiveness and fear that my design looks bad on some screen sizes. let me know if that is the case for you.
Mobile-First approach using CSS Grid / Flexbox and custom properties
1
hitmorecode• 6,270
@hitmorecode
Posted 2 months ago
Nice well done, good try. Your page needs to be worked on to make it look good. I have a repository for this exercise, it's already a mobile first. It's a simple repository it already has the basic html and css. See if you can take it from here and create a finished product. Give it a try and if you have any questions let me know. I'll try to reply as soon as possible.

Stats preview card component repository

Keep coding
0
P
Maea Matugas• 40
@hollyBelly2021
Submitted 2 months ago
How did I do? Let me know if I could improve something. Thank you!
Product Preview Card Component
3
hitmorecode• 6,270
@hitmorecode
Posted 2 months ago
Really nice job it looks great. Still I have a few suggestions on how you can improve.

When working with images (in this case two different images for two different screen sizes) it's best to make use of the picture element.

Picture element here you can get information on how the picture element works and how you can use it. The HTML picture element explained this is a good video tutorial on this subject.

I see you are using CSS rest which is a good thing, but you need to add these two lines to it.

padding: 0; box-sizing: border-box;

This I wouldn't add it to .main-container I would add it to the body

.main-container { height: 100vh; background-color: hsl(30, 38%, 92%); display: flex; justify-content: center; align-items: center; } body { min-height: 100vh; // it's good practice to use min-height: 100vh on the body background-color: hsl(30, 38%, 92%); display: flex; justify-content: center; align-items: center; // you can add this to the body as a font-family fallback font-family: arial, helvetica, sans-serif; }

You could have combined .title-styles and .discount into one CSS rule. Both of them use the same font-family

.title-styles, .discount { font-family: Fraunces; }

As for your media-query change the max-width to 600px. This will prevent the right side of the card to overflow to the left side.

Keep it up
Marked as helpful
1
Wanjiru-M• 40
@Wanjiru-M
Submitted 2 months ago
I'd appreciate feedback to ensure my code meets best practices and professional standards.
3-Column-preview-card-component
1
hitmorecode• 6,270
@hitmorecode
Posted 2 months ago
Well done. I took a look at your page and there are a few things that you can/must fix for the page to look good.

Remove max-width: max-width: var(--max-width); on the body. By default the body's width is always 100%.

Add min-height: 100vh on the body, for the body to fill the screen.

If you are not too familiar with CSS Grid* you can start with flexbox. Here is a link to a good tutorial The Ultimate CSS3 Flexbox Tutorial - Colt's Code Camp

When writing CSS try to follow the DRY rule (Don't Repeat Yourself)

.grid-1{ background-color: var(--primary-color); height: 80vh; padding: 30px; width: 22vw; border-radius: 10px 0 0 10px; } .grid-2{ background-color: var(--secondary-color); height: 80vh; padding: 30px; width: 22vw; } .grid-3{ background-color: var(--dark-color); height: 80vh; padding: 30px; width: 22vw; border-radius: 0 10px 10px 0; }

Here you have three that are being repeated three times height, padding and width. You can combine this into one CSS rule

.grid-1, .grid-2, .grid-3 { height: 80vh; padding: 30px; width: 22vw; } .grid-1{ background-color: var(--primary-color); border-radius: 10px 0 0 10px; } .grid-2{ background-color: var(--secondary-color); } .grid-3{ background-color: var(--dark-color); border-radius: 0 10px 10px 0; }

Don't use vh or vw for card heights and widths this will complicate things. Use fixed dimensions instead (rem, px, em)

See with this comments you can fix your page. If not feel free to ask Keep it up
1
TahBlaise36• 20
@TahBlaise36
Submitted 2 months ago
What i found difficult was when i was trying to use display-flex in order to make the layout responsive which didn't work, so i used grid instead.
responsive units with rem, responsiveness with grid and media query
1
hitmorecode• 6,270
@hitmorecode
Posted 2 months ago
Your solution is not showing. You need to create a live link to your solution. Also after finishing you need to upload an image of your finished product.

You can create a live page on github, see if you can figure it out if not let me know.

I see that you add the CSS inside the html, don't do this, this is not good practice. Always create an external CSS file and create a link with the html file.
0
Ilya Andreev• 320
@NeoScripter
Submitted 2 months ago
The hardest thing was to align the elements in the right part of the card so that they look good in the mobile layout as well
Responsive product card preview made using CSS
2
hitmorecode• 6,270
@hitmorecode
Posted 2 months ago
Nice well done. I took a look at what you did and I have a few suggestions;

Remove max-width on .wrapper change it to width

Inside the media query add a width of 300px to .wrapper

On the bottom of the card you have both price and link/button inside the same div. Use two different div's for this. So that you can move the price and leave the button in the center of the card

0
Ahmed Hazem• 180
@ahmed-hazem-1
Submitted 2 months ago
results-summary-component-main
2
hitmorecode• 6,270
@hitmorecode
Posted 2 months ago
Nice well done, the animation looks good too. There is one issue with your card. When you go to mobile screen size. The circle in the middle of the card, is no longer round but oval. This is because you usde % for both width and height of the container.

You can fix this by using px, em or rem for the width and height.

In your case just change both the width and height to 120px
0
me_bee• 60
@DhahiraThesneem
Submitted 2 months ago
How to increase the shadow of parent card while hovering child element?
Blog preview card using Tailwind CSS
#tailwind-css
1
hitmorecode• 6,270
@hitmorecode
Posted 2 months ago
Looks good well done. As for your question you need to add a CSS rule. For example

.card:hover { box-shadow: and increase the pixels of the shadow; }

0
Rebecca Padgett• 1,620
@bccpadge
Submitted 5 months ago
For the paragraph, I made the gray color darker to fix the accessibility issue.

All feedback is welcome.
Responsive Blog preview card using HTML and CSS
#accessibility#bem
1
hitmorecode• 6,270
@hitmorecode
Posted 3 months ago
Nice looks good well done. I took a look at your markup and I see you have the same problem I had with the image. The max-width: 100% is breaking the border radius. If you remove max-width: 100% and adjust the width and height of the image, it should solve this problem.

That's why I removed the image from the html and added in the CSS. Looking closer to what you did, if I use display: block then it should solve my problem also.

Good job keep it up
0
muhibkhan2005• 80
@muhibkhan2005
Submitted 4 months ago
I completed this frontend mentor challenge social proof section master. You can see my solution here. Any suggestions on how i can improve are welcome.
social-proof-section-master
#tailwind-css
1
hitmorecode• 6,270
@hitmorecode
Posted 4 months ago
You uploaded the wrong challange.

The card is not responsive

Change the background size of image on the body to contain

0
Shady Waheed• 10
@Shady-Waheed
Submitted 4 months ago
qr code frontend mentor
1
hitmorecode• 6,270
@hitmorecode
Posted 4 months ago
Congratulations on your effort. I took a look at your code and I have some tips:

Don't place CSS inside the HTML file. Create a file for CSS and link it to the HTML

The content inside the card is overflowing, to prevent this give the card a height of auto

Give the body a min-height of 100vh and use flexbox or CSS-Grid to place the card in the middle of the page.

Before starting the challenge read the style-guide.md in here you'll find the information you need to style your page. In this file you'll see what fonts to use, font weights, fonts size and colors.

Make it a good habit using CSS reset

Keep coding 😎 👊
0
brandon• 10
@brandt33
Submitted 6 months ago
What is the best way to make responsive images?

Do you have any questions about best practices?
Mobile First with responsive design and using flex and queries
1
hitmorecode• 6,270
@hitmorecode
Posted 6 months ago
To make an image responsive, you can give the image a % of it's parent, but be careful when giving images % if not used properly this will break everything. You just have to analyze when to use % and when to avoid them.
3
Devang Vishnu• 120
@thedevangvishnu
Submitted 6 months ago
Order Summary React Component
#react#tailwind-css#node
1
hitmorecode• 6,270
@hitmorecode
Posted 6 months ago
Nice well done. Just one tip, you should change the background image size to contain to make it look like the example.
0
StasMelamed• 40
@StasMelamed
Submitted 6 months ago
Hello to everybody, this is my first challenge here, I hope not the last one) As for hardships, for me it was quite tricky to center the content on the page, first of all vertically. In order to do so I used stretching the outer block to 100% (height: vh-100) from Bootstrap classes + margin 0 auto for inner class. I think there are more ways to do so and I would appreciate if you share your solutions. Thanks!
QR code HTML CSS Bootstrap
#bootstrap
2
hitmorecode• 6,270
@hitmorecode
Posted 6 months ago
Well done. There is an issue with your page, when the screen size is around 991px, the card stretches to fill the content. Here are a few tips;

When working with cards give it a fixed width and height, unless you have a good reason not to do so. In this case it's best to do so.

To place the card in the middle of the page, you could have done it with flexbox or css grid. If you give the body a min-height: 100vh, you can then use justify-content and align-items to place the card in the middle of the page.

You can remove width: 100%, by default the width of the body is always 100%

I don't know how good you are familiar with vanilla css. If not then I suggest to start with vanilla css once you learn vanilla css then jumpo into frameworks.

Good job and keep it up
0
Marisa Phungbunphra• 20
@marisamie
Submitted 6 months ago
Hi I'm beginning for front-end developer this is my QR Code Payment create by use HTML and CSS if you have any suggestion pls feel free to comment me I want to practice more an more :)
HTML and CSS for QR Code Payment
#contentful#cube-css#webflow#wordpress#accessibility
3
hitmorecode• 6,270
@hitmorecode
Posted 6 months ago
Nice congratulations looks good. I only have one comment. You used <br> to break the paragraph. You don't have to do this. If you give the <p> a width a new line will be automatically created.

Anyways good job keep it up
Marked as helpful
1

VizeJS-dev• 80

@VizeJS-dev

Submitted 7 months ago

QR code component

hitmorecode• 6,270

@hitmorecode

Posted 7 months ago

Nice well done. You don't have to use margin to place the card in the middle of the page. Use flexbox or grid

body {
    background-color: hsl(212, 45%, 89%);
    font-family: Outfit, sans-serif;
    min-height: 100vh; /* add these three lines */
    display: grid;
    place-items: center;
}

## You can remove all commented out lines
.qr-container {
    display: grid;
    place-items: center;
    background-color: hsl(0, 0%, 100%);
/*     margin-top: 25vh; */
    text-align: center;
/*     margin-left: auto; */
/*     margin-right: auto; */
    width: 280px;
    border-radius: 15px;
}

Riki013• 20
@Riki013
Submitted 7 months ago
foi usado as tecnicas tradicionas de divs e no css o display flex
1
hitmorecode• 6,270
@hitmorecode
Posted 7 months ago
Nice well done, to place the card in the middle of the page add this to the body (see below)

Make it a habit of using min-height: 100vh; on the body. This is important for the responsiveness of the page

body { background-color: hsl(30, 38%, 92%); overflow: hidden; min-height: 100vh; /* add these three lines */ display: grid; place-items: center; }
Marked as helpful
0
Exgomes• 10
@Exgomes
Submitted 7 months ago
QR Code Component
1
hitmorecode• 6,270
@hitmorecode
Posted 7 months ago
Nice well done. The card is not in the middle of the page, you can fix this (see below). Make it a habit of using min-height: 100vh; on the body

body{ background-color: rgba(0, 50, 255, 0.2); min-height: 100vh; /* add these three lines */ display: grid; place-items: center; }
Marked as helpful
0

rsalohiddin• 20

@rsalohiddin

Submitted 7 months ago

3-column preview card component

hitmorecode• 6,270

@hitmorecode

Posted 7 months ago

Nice well done. The page is not responsive, here are a few things you can do to fix your page.

Make it a habit of using min-height: 100vh; this will make a page responsive to its content.
I've made a change in your media query. Everything that's commented out you can delete.
You don't need to add width on the body. By default the width of the body is always 100%.

body {
    background-color: #E4D282;
/*     width: 100%; */ /* delete this line */
    min-height: 100vh; /* add this line */
    font-family: 'Lexend Deca', sans-serif;
    display: grid; /* add this line, its needed to place the card in the middle of the page */
    place-items: center; /* add this line to place the content in the middle of the page */
    padding: 40px 0; /* add this line to create a space between content and body */
}

@media screen and (max-width: 870px){
     .row{
       flex-direction: column; /* add this line to change the direction of flexbox, to make the page responsive */
    }
/* everything below can be removed */
/*    
    .row__col1{
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0px;
        width: 120%;
        margin-left:-10%;
    }
    .row__col2{
        width: 120%;
        margin-left: -10%;
    }
    .row__col3{
        border-top-right-radius: 0px;
        border-bottom-left-radius: 8px;
        width: 120%;
        margin-left: -10%;
    }
    .btn{
        margin-top: 20%;
    } */
}

K01wfd• 690

@K01wfd

Submitted 7 months ago

Product-Preview-Card

hitmorecode• 6,270

@hitmorecode

Posted 7 months ago

Nice well done. Just a few tips

You are missing the border radius on the card
To place the card in the middle of the page, add this to your css

body {
  font-size: var(--fs-body);
  font-family: var(--font-family-montserrat);
  padding: var(--py) var(--px);
  background-color: var(--color-cream);
  color: var(--color-gray);
  min-height: 100vh; /* change to this */
  display: grid; /* add these two lines */
  place-content: center;
}

Luiz Otávio• 60
@luizotvio
Submitted 7 months ago
Overall I found the exercise easy, but I got a little lost to align the container in the center of the page, I had to research until I got the result, which I hope, will be the end!!
CSS Flexbox helped me complete the exercise
1
hitmorecode• 6,270
@hitmorecode
Posted 7 months ago
Nice well done. Just one tip

Make it a habit of using min-height: 100vh; instead of height: 100hv;. With min height the page will be responsive to it's content. Height is a fixed height, so if you add content to the page eventually it will overflow

Marked as helpful
0
Emmanuel Ebeh• 60
@manuelebeh
Submitted 7 months ago
In general, it wasn't complicated, but I'm stuck on the color of my overlay, which doesn't match the design.
Stats card component
1
hitmorecode• 6,270
@hitmorecode
Posted 7 months ago
Nice well done. Just one tip

On the overlay make these changes to make it look like the one on the design file

## add these two lines, play with the opacity until you happy with the result mix-blend-mode: multiply; opacity: .8;
1
Mustafa Khan• 70
@Mustafakhan2
Submitted 7 months ago
Order Summary Component(HTML and CSS)
1
hitmorecode• 6,270
@hitmorecode
Posted 7 months ago
Nice well done, one tip

On the .container change the % onborder-radius to px, rem or em. If you look closer the at the border radius it does not have a nice radius. This is because you used %.

Marked as helpful
0
Muhammad Qasim Fiaz• 190
@MuhammadQasimFiaz
Submitted 7 months ago
nft-preview-card-component-main HTML and CSS
#bootstrap#sass/scss
1
hitmorecode• 6,270
@hitmorecode
Posted 7 months ago
Nice well done. Just one tip.

When going to small screen size the background does not fill the entire page, there is a white section at the bottom of the page. Here is how you can fix it (see below)

.main { display: grid; align-items: center; justify-items: center; min-height: 100vh; /* change to this */ font-family: "Outfit", sans-serif; background-color: hsl(217, 54%, 11%); }
Marked as helpful
0

hitmorecode

All comments

Social Links Profile

Mobile-First approach using CSS Grid / Flexbox and custom properties

Product Preview Card Component

3-Column-preview-card-component

responsive units with rem, responsiveness with grid and media query

Responsive product card preview made using CSS

results-summary-component-main

Blog preview card using Tailwind CSS

Responsive Blog preview card using HTML and CSS

social-proof-section-master

qr code frontend mentor

Mobile First with responsive design and using flex and queries

Order Summary React Component

QR code HTML CSS Bootstrap

HTML and CSS for QR Code Payment

QR code component

foi usado as tecnicas tradicionas de divs e no css o display flex

QR Code Component

3-column preview card component

Product-Preview-Card

CSS Flexbox helped me complete the exercise

Stats card component

Order Summary Component(HTML and CSS)

nft-preview-card-component-main HTML and CSS