June 23, 2021

TriStudy

TriStudy Provide Free Online Tutorials about Programming languages,Digital Marketing, web designing, online earning, web hosting, WordPress etc

How To Create Own template in HTML

html template

Asalam u alaikum> this is Shahid Malla and in this tutorial, i am going to show you how we can make own templates and sell it on ThemeForest.

Make Your Own Template in Html

Step 1. We Need To Divide ur Screen Among 6 Parts, Header Body, Footer, Right Side Bar, and Left Side Bar. so we can host our content in a good format and we can make it easy for users.


Example Header Article Nav Aside Footer https://tristudy.com/wp-content/uploads/2019/11/in.html

<!doctype html>
<title>Example</title>
<style>
  * {
   box-sizing: border-box; 
  }
  body {
    margin: 0;
  }
  #main {
    display: flex;
    min-height: calc(100vh - 40vh);
  }
  #main > article {
    flex: 1;
  }
  #main > nav, 
  #main > aside {
    flex: 0 0 20vw;
    background: beige;
  }
  #main > nav {
    order: -1;
  }
  header, footer, article, nav, aside {
    padding: 1em;
  }
  header, footer {
    background: yellowgreen;
    height: 20vh;
  }
</style>
<body>
  <header>Header</header>
  <div id="main">
    <article>Article</article>
    <nav>Nav</nav>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</body>

View this code: Click Here

Header 
<header>Header</header>

Bottom

<article>Article</article>

Slide Bar Left Right Html box

<nav>Nav</nav>
    <aside>Aside</aside>

Footer and Close

 </div>
  <footer>Footer</footer>
</body>

Thank You!