Sunnyside Agency

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  Hey there congrats for completing the challenge ... **i see ur design in mobile **.. where do i start? First the arrow is not anchored to the image so when u resize the position shifted upward so to fix these i use absolute position from the bottom of image

  .hero-section img { 
    position: absolute; 
    bottom: 15rem; 
  }
  

  The font for paragraphs should be different from the header that is given in the design...for photography and graphic design images should be added as background images

    background-image: url("/images/mobile/image-graphic-design.jpg"); 
  } 
  
  ``` and the minimum height shoud be set to prevent the collision of image and text as in ur design...
  ```css
  //all elements (*)
  .main-section__poster > * { 
    background-size: cover; 
    background-repeat: no-repeat; 
    min-height: 600px; 
    display: flex; 
    align-items: flex-end; 
  }
  

  In the testimonial section the texts need padding and text align in the center and the job title size should be smaller ... *answer to ur question * 1]When ur design appears in the screen it is automatically zoomed and it shouldn't be like that .. not recommended ... 2]to animate block of elements use AOS library from github search aos in google and u will find how to apply it 3]the shape of navbar in the mobile version is created by css clip-path property and useful method in the future of ur works i wish i could draw an X Y axis and show u but u can found it on online resources how to utilize it .....it is generally cutting block elements in html in different shapes by mathematical approach if u r familiar with x and y axis in maths its easy

  .nav-card { 
     position: absolute; 
     top: 2rem; 
     right: 0.5vmin;  
     clip-path: polygon(0 6%, 95% 6%, 100% 0, 100% 100%, 0% 100%); 
     display: none; 
   }
  

  U can refer my result for more

  1