Kasper Website Template

Description

This template is just design for home page of Kasper PSD Template Design, it have modern and simple design with small line of code to make it readable for any one, and it have a lot of features using on it to make the website responsive with anu screen size, like grid system and flex-box, and most important it use prefix to compatible to any browsers version.

Tools:

• HTML
• CSS

What i do in this template?

1. make responsive webiste design using grid and flex-box.

2. using videos in my website to make it look modern & attractive website.

3. using componant to resuse it in my html code

   /* Start Component */
   /* Heading */
   .main-heading {
      text-align: center;
   }
   
   .main-heading h2 {
      font-weight: normal;
      font-size: 40px;
      position: relative;
      margin-bottom: 70px;
      text-transform: uppercase;
   }
   
   .main-heading h2::before {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      height: 2px;
      background-color: #333;
      bottom: -30px;
      width: 120px;
   
   }
   
   .main-heading h2::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid #333;
      bottom: -38px;
      background-color: white;
   }
   
   .main-heading p {
      width: 550px;
      margin: 0 auto 100px;
      max-width: 100%;
      line-height: 2;
      color: var(--p-color);
   }
   
   /* Heading */
   /* End Component */
   

4. make readable code:

   • short and meaning class name.
   • using media query for each class that have to be edit in another screen (below it).
   • using pseudo-class to select the element i need without creating to many classes.
   • using comment to tell this section of code for spicific section in website.
   • using css variables.

5. Using form and design it as PSD design.

6. Learn some Emmet use case in vs code to increase my typing speed.

I learn a lot of thing in this project and now i be able to create a project with just UX&UI design without follow a tutorial.

Important

This Project is not finished yet. wait for update (any thing i learn and can be used on it, i will add it in this project) Stay tuned🔥

Screen Shots:

Tip

This Website design is learning project from ElZero Web School Website, And this one of four template that i make to learn front-end basics. (2/4).

Thanks and Goodbye❤️.

Made By Medhat Assem.