Curved Huddle with vanilla HTML, CSS, and JS.

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  So far so good.

  • well done for creating a site that is responsive.
  • form input elements must be associated with labels. You can visually hide the label to match the design by using css. eg

  .sr__only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap; /* added line */
      border: 0;
  }
  

  • look into responsive image techniques like srcset and picture element and try to avoid this method that you used below

  <div>
        <svg class="mobile-svg wrap" width="375" height="101" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a7" d="M0 0h375v112H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b7" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)" fill="#F6FBFF"><path d="M-126.345-502.65C14.982-645 139.39-680.588 246.88-609.414c161.235 106.762 291.228 92.307 408.49 0 78.175-61.537 78.175 146.947 0 625.453-127.86 101.604-237.07 122.013-327.628 61.226-135.838-91.181-342.275-91.181-450.675 57.166-72.266 98.899-73.403-113.462-3.41-637.083z"/></g></g></svg>
        <svg class="desktop-svg wrap" width="1440" height="139" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a8" d="M0 0h1440v162H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b8" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path d="M-5.845-498.692C254.493-641 483.665-676.577 681.673-605.422c297.011 106.73 536.472 92.279 752.482 0 144.006-61.52 144.006 146.903 0 625.271-235.532 101.575-436.707 121.978-603.526 61.208C580.4-10.098 200.12-10.098.438 138.207c-133.123 98.87-135.217-113.43-6.283-636.899z" fill="#F6FBFF"/><path d="M760-521h560V39H760z"/></g></g></svg>
      </div>
  

  Marked as helpful

  1

  ---

  

  Sadam A•40

  @sadumbPosted over 3 years ago

  @ChamuMutezva I see, this is my first time using svg as background, i will improve the method next time. Thank you Chamunorwa for your feedback! Its really helpful for me :)

  0
• 

  Sandeep Ivan Albarillo•40

  @sandyivanPosted over 3 years ago

  Good job! Looks good and its responsive. :)

  0

  ---

  

  Sadam A•40

  @sadumbPosted over 3 years ago

  @sandyivan Thanks, Sandeep!

  0