AssadullahADELYAR

@AssadullahADELYAR

All comments

Marius• 130
@Idksomany
Submitted about 1 year ago
Base Apperal Responsive UI (cat de cat)^_^
1
AssadullahADELYAR• 200
@AssadullahADELYAR
Posted about 1 year ago
Hello!

Congratulation you have done very well, try to improve your design for medium size you like you can center the h1 tag and increase the size of input.

for input to remove the white background add background-color: transparent:

#email-input { padding: 1rem 2rem; border: 2px solid var(--ds-red); outline: none; border-radius: 30px; width: 60%; }

#email-input { padding: 1rem 2rem; border: 2px solid var(--ds-red); outline: none; border-radius: 30px; width: 60%; background-color: transparent; }

I hope it is helpful

Happy coding
1

Nate• 160

@nathansunt

Submitted about 1 year ago

Still working on my JS skills

Base Apparel coming soon page

AssadullahADELYAR• 200

@AssadullahADELYAR

Posted about 1 year ago

Hello!

Congratulation you have done very well, but for good practice you should not add everything inside the form.

<form action="#" id="form" class="container">
      <h2>
        WE'RE <span class="coming">COMING SOON</span>
      </h2>
      <p class="text">
        Hello fellow shoppers! We're currently building our new fashion store. 
        Add your email below to stay up-to-date with announcements and our launch deals.
      </p>
      <div class="email-container" id="email-container">
        <input type="email" id="email" class="email-box" placeholder="Email Address">
        <button type="submit" id="submit" class="submit-button"><img src="images/icon-arrow.svg"></button>
      </div>
      <span id="error-text"></span>
    </form>

<form action="#" id="form" class="container">
        <input type="email" id="email" class="email-box" placeholder="Email Address">
        <button type="submit" id="submit" class="submit-button"><img src="images/icon-arrow.svg"></button>
      <span id="error-text"></span>
    </form>

for input and button you don't need to add a class you can style with id.

I hope it is helpful

Happy coding

Marked as helpful

Mahmoud Essam Mourad• 850
@mahmoudessam16
Submitted about 1 year ago
SASS + HTML + JS
1
AssadullahADELYAR• 200
@AssadullahADELYAR
Posted about 1 year ago
Hello!

Great job it looks very good in small screen, but in desktop view not the same as challenge.

To work with these kind of designs you should use CSS GRID.

I also did this challenge I used grid and this Article helped me a lot.

Hope it is helpful Happy coding
Marked as helpful
1
Jennifer Souza• 340
@zoedarkweather
Submitted about 1 year ago
All feedback welcome, especially any tips for handling the images on this one. I set max-widths on the desktop as it was either too large or shrinking weirdly, but I'm wondering if anyone's found a better way to handle that. Thank you!
Mobile-first solution using CSS grid
1
AssadullahADELYAR• 200
@AssadullahADELYAR
Posted about 1 year ago
Hello!

You have done a great job, I also did this one today and I did the picture with CSS background-image here is My Slolution

Hope it helps

Happy coding
Marked as helpful
1
alexivany• 80
@alexivany
Submitted about 1 year ago
Profile Card Challenge
1
AssadullahADELYAR• 200
@AssadullahADELYAR
Posted about 1 year ago
congratulations on completing this challenge 🎉🎉

This is great but I think you should consider changing some things:

You don't need to have extra div's to set two background-images on your body Instead you can do something like this:

inside of your body

body { background-image: url(images/bg-pattern-top.svg); background-repeat: no-repeat; background-size: cover; background-position: top -40rem left -30rem; }

ofcourse you can use more than one background image like this:

body { background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg); }

please check This

I hope it was helpful for you👍👍

Happy coding 🙂🙂
Marked as helpful
1
FinnJ04• 100
@FinnJ04
Submitted about 1 year ago
building the component went quite well, but I was facing an issue when the screen-size was too small (you couldn't see the whole component when the Y size was too small, nor scroll). I fixed this by setting the height too 100%, but this caused that the component was not vertically centered anymore.(I also used the overflow property, but didn't like that either). I didn't have this issue on my stats-preview-card-component. Tips how to solve this problem would be very much appreciated!
single-price-grid-component using flexbox & grid
1
AssadullahADELYAR• 200
@AssadullahADELYAR
Posted about 1 year ago
Hello!

Your solution looks very good. You can check out my solution for the Price-grid challenge. Please let me know your feedback.

Thank you,
0
Simonas• 40
@SimasCode
Submitted about 1 year ago
Hello, Frontend Mentor Community ! This is my first project solution. I would appreciate it if you leave a comment.
QR code component solution
1
AssadullahADELYAR• 200
@AssadullahADELYAR
Posted about 1 year ago
Hello!

You have done a great job, in my opinion for margin in container class you can do with one line of code and for box-shadow you can put the first value 0px and increase the 3rd value for blur.

.container { background-color: var(--white); border-radius: 20px; margin: 60px 30px 60px 30px; width: 340px; margin-right: auto; margin-left: auto; text-align: center; box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); }

.container { margin: 0 auto; box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.1); }

I hope it was helpful for you

Happy coding,
Marked as helpful
0

Fahid Abdullah• 10

@1230fahid

Submitted about 1 year ago

Are there best practices I could have followed to improve this project? What mistakes do you believe I need to work on the most? Any resources worth mentioning to improve at those mistakes?

My QR Code Component Solution using HTML & CSS

AssadullahADELYAR• 200

@AssadullahADELYAR

Posted about 1 year ago

Hello, your design looks great, but you don't need to use too many P tags.

<section class="boldedText">
      <p>Improve your front-end </p>
      <p>skills by building projects</p>
    </section>
    <section class="nonboldedText">
      <p>Scan the QR code to visit Frontend </p>
      <p>Mentor and take your coding skills to</p>
      <p>the next level</p>
    </section>

for boldedText class you should use heading tag and control the size with CSS.

<section class="boldedText">
      <p>Improve your front-end </p>
      <p>skills by building projects</p>
    </section>

<section class="boldedText">
      <h2>Improve your front-end skills by building projects</h2>
    </section>

You can do it with one paraghraph tag.

<section class="nonboldedText">
      <p>Scan the QR code to visit Frontend </p>
      <p>Mentor and take your coding skills to</p>
      <p>the next level</p>
    </section>

<section class="nonboldedText">
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </section>

and you can control the spacing with gap: 15px when you use flex-box.

I hope it was helpful for you

Happy coding,

Marked as helpful

MonarchRyuzaki• 180
@MonarchRyuzaki
Submitted about 1 year ago
I usually find it a bit difficult on the following things:

Center/Position stuff.

Setting Height/Width and stuffs of images

So would want some advice to improve on that Thank you
QR Code Component Using CSS Flexbox
3
AssadullahADELYAR• 200
@AssadullahADELYAR
Posted about 1 year ago
Hi! use flex-box to center your content.
0

AssadullahADELYAR

All comments

Base Apperal Responsive UI (cat de cat)^_^

Base Apparel coming soon page

SASS + HTML + JS

Mobile-first solution using CSS grid

Profile Card Challenge

single-price-grid-component using flexbox & grid

QR code component solution

My QR Code Component Solution using HTML & CSS

QR Code Component Using CSS Flexbox