CSS templates

Let us see how to create a template similar to https://themes.semicolonweb.com/html/canvas/index.html

Some important global styles

  • *,::after,::before - box-sizing:border-box
  • body - line-height:1.5;color:black;font-family:lato,sans-serif;text-align:center;
  • define css variables - e.g. text-align: var(--bs-body-text-align);
  • :active - outline:0!important
  • Start with mobile design first
  • Apply animations to body
  • body contains div.wrapper, fixed position elements like go to top, scripts
  • div.wrapper - width:100%, margin:0, position:relative, background-color:white
  • wrapper contains header, one or more sections and footer
  • header - It contains logo, search and hamburger.
    • for header - align-items:center and display:flex
    • Apply margin-right:auto to logo. Remaining children (search and hamburger) are pushed to right and rest of the space is set as margin-right for logo
    • Push the primary menu child to next row by setting flex-basis to 100% and flex-wrap property on parent to wrap.
    • After clicking on search icon, show the search box overlapping existing elements. So search form must have z-index more than header wrapper and position being absolute.
    • To show icons, use fontawesome.com as explained at using icons
    • To show items based on viewport size, use media query - @media (min-width: 576px) and set display to block.
    • set background to 0 0 or transparent for header and set the margin-top of next section to -100 so that header will be shown image. Also set the position of header to fixed.
    • To shrink header, you can animate height property after scroll event occurs
      $(window).scroll(function() {    
          var scrollBy = $(window).scrollTop();
          if (scrollBy >= 500) {
          } else {


  • Why clear:both is used
  • :root vs *
  • how the arrow is displayed in menu? why \e99a is translated to arrow

Web development and Automation testing

solutions delivered!!