CSS Templates with Examples

CSS Templates with Examples

CSS Templates with Examples

Templates are complete web pages which are responsive. We can find many websites which give us free responsive web pages to use.

Or we can also create our own responsive web-pages and sell them online.

The main motive of a website template is that we can use it for free.

And which will look good on a big screen like a computer, a mobile screen or any other kind of screen.

Images will also respond to the screen including all the other elements available in the template.

Advantages -

Templates are available for free as well paid.
Useful for backend developers
Saves time to design frontend
No special knowledge is required to use template

Now we will see how a web template will look in different devices and the variety of template ideas.

The responsive nature and the variety of ideas are shown using the following images -

Image 1 -

Mail Template image -

Image 2 -

Educational Template image -

Image 3 -

The cafe Templet -

Image 4 -

Template image for social networking -

Creating our own template -

Example - Shopping website template -

<style>

:root {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
body {
background-color: #709b90;
font-family: Helvetica, Arial, sans-serif;
}
.container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(4, auto);
grid-gap: 1.5em;
max-width: 1080px;
margin: 0 auto;
}
header,
nav {
grid-column: 1 / 3;
grid-row: span 1;
}
.main {
grid-column: 1 / 2;
grid-row: 3 / 5;
}
.sidebar-top {
grid-column: 2 / 3;
grid-row: 3 / 4;
}
.sidebar-bottom {
grid-column: 2 / 3;
grid-row: 4 / 5;
}
.tile {
padding: 1.5em;
background-color: #fff;
}
.tile > :first-child {
margin-top: 0;
}
.tile * + * {
margin-top: 1.5em;
}
</style>

<body>
<div class="container">
<header>
<h1 class="page-heading">Ink</h1>
</header>
<nav>
<ul class="site-nav">
<li><a href="/">Home</a></li><li><a href="/features">Features</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/support">Support</a></li>
<li class="nav-right">
<a href="/about">About</a>
</li>
</ul>
</nav>
<main class="main tile">
<h1>Team collaboration done right</h1>
<p>Thousands of teams from all over the
world turn to <b>Ink</b> to communicate
and get things done.</p>
</main>
<div class="sidebar-top tile">
<form class="login-form">
<h3>Login</h3>
<p>
<label for="username">Username</label>
<input id="username" type="text"
name="username"/>
</p>
<p>
<label for="password">Password</label>
<input id="password" type="password"
name="password"/>
</p>
<button type="submit">Login</button>
</form>
</div>
<div class="sidebar-bottom tile centered">
<small>Starting at</small>
<div class="cost">
<span class="cost-currency">$</span>
<span class="cost-dollars">20</span>
<span class="cost-cents">.00</span>
</div>
<a class="cta-button" href="/pricing">
Sign up

</a>
</div>
</div>
</body>

Output -