All comments

• 

  Haim Mizrahi•30

  @haimmmSubmitted almost 3 years ago

  I'm just a beginner, looking for tips to improve my solution!

  

  Solution using flexbox

  2

  10
  

  Hanif•570

  @1Hanif1Posted almost 3 years ago

  I tried to look at your code but the git hub link is broken As per what I see on the console first thing I'd say is don't set solid width and height to 'body' instead just put "min-height: 100vh" on body. It'll automatically make the body span the entire window

  Also your card is not centered. Centering elements is tricky so here's one way to do it set the container class of your card to have the following properties { display: flex; justify-content: center; align-items: center; }

  If you're not familiar with this code then I'd suggest you look into Flex box in CSS

  considering you're a beginner I'll share a resource from where you can learn CSS in depth https://web.dev/learn/css/

  Finally some bit of motivation! Great work! Keep trying and happy learning! ^^

  1

  This comment has received 1 replyShow
• 

  Ejike•120

  @agkaysterSubmitted over 3 years ago

  My questions are:

  1. Please how do I get JavaScript to work on opening the navbar-burger while using small devices?

  2. How do I make those underlines under "Learn more", are those underlines or text shadows?

  

  Coolest Sunnyside landing page with mobile and desktop view

  3

  10
  

  Hanif•570

  @1Hanif1Posted over 3 years ago

  Firstly, Amazing effort! nice work : ) Still needs quite some work on the alignments and placements of the elements, fonts, colors and stuff

  As for your questions,

  1. I am still a beginner in JavaScript and I do know how to make Hamburger menus but I don't understand some of the JavaScript that you have written. So apologies! I couldn't help :(

  2. For those underlines I would have inserted a div element with a class of, let's say, 'text-underline' inside the parent element containing the text 'Learn more'.

  You could also do that using pseudo elements in CSS, which is the better option in my opinion.

  With the parent div of 'Learn more' having 'width: fit-content' I would have applied the following CSS on 'text-underline'

  .text-underline{ width: 100%; height: 2px;
  background-color: yellow;
  transform: translateY(-2px);
  border-radius: 12px;
  }

  I just assumed those values of 12px and -2px. Actual value might be different

  Hopefully I was able to help. Still a beginner myself so I did what I could

  Anyways, once again Solid Effort brother 👍

  0
• 

  Mohamed Ibrahim•30

  @IbrahimWebdeveloperSubmitted over 3 years ago

  My first coding project was completed with the help of some tutorials on the Internet. CSS isn't easy, but I definitely will manage to learn it.

  

  I just refered w3schools to complete this challenge

  1

  20
  

  Hanif•570

  @1Hanif1Posted over 3 years ago

  YES! Keep going friend you got this! :)

  0

  This comment has received 1 replyShow
• 

  Kinosaurus•10

  @KinosaurusSubmitted over 3 years ago

  Hello!

  Does anyone know how to add a color overlay as seen in the model solution?

  I've been searching around and trying but it's not working :(

  Many thanks!

  

  Positioning, Padding, Divs & Spans, Box Theory

  2

  20
  

  Hanif•570

  @1Hanif1Posted over 3 years ago

  So the step I used for getting the purple overlay on image First I set the Image container's background color as purple - "background-color: hsla(277, 64%, 61%,0.8);" Then I applied mix blend mode property on the image itself and set it to 'multiply'. "mix-blend-mode: multiply;" - which basically blends the image with background color of the container

  Check this page: https://www.w3schools.com/cssref/pr_mix-blend-mode.asp

  Hopefully this helps :)

  0