Avatar of Simon Leung
Simon Leung
 asked on

HTML and CSS template

Is there any HTML and CSS layout template that I can follow to start building my website ?

Thx.
CSSHTMLWeb Development

Avatar of undefined
Last Comment
Robert Perez

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Zakaria Acharki

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Rikin Shah

Hi,

I think you should go for bootstrap themes-
https://bootstrapmade.com/

Why Bootstrap?
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap is completely free to download and use! - https://www.w3schools.com/bootstrap/default.asp

https://www.w3schools.com/bootstrap/bootstrap_templates.asp
Simon Leung

ASKER
Need to look for a pure HTML and CSS technique only, ... as a base for my course assignment...
Zakaria Acharki

Take a look to https://templatemo.com/ too, most of the templates are Pure HTML/CSS.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Julian Hansen

Need to look for a pure HTML and CSS technique only,
Bootstrap is a pure CSS framework.

Your question is not clear.
Here is a basic HTML boilerplate
<!doctype html>
<html>
<head>
<title>Title of your webpage here</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<style>
body, html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  font-size: 100%;
}
a {
  text-decoration: none;
}
.container {
  width: 1180px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}
nav {
  background: gray;
}
.main-content {
  flex-grow: 1;
}
nav {
  display: flex;
  padding-right: 1rem;
  padding-left: 1rem;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
}
nav a {
  color: white;
  padding: 1rem;
  display: block;
}
nav a:hover {
  background: white;
  color: gray;
}
nav .nav-fill {
  flex-grow: 1;
}
.small-text {
  font-size: .75rem;
}
.text-right {
  text-align: right;
}
</style>
</head>
<body>
<div class="container">
   <header>
           <h1>Heading for your page</h1>
           <nav>
              <ul class="nav-fill">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
              </ul>
        <span class="nav-right">
        <a href="#">Help</a>
        </span>
           </nav>
   </header>
   <section class="main-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae semper magna, a interdum sapien. Duis at urna arcu. Sed et neque ultrices, laoreet arcu in, mattis ligula. Mauris efficitur facilisis tellus, sit amet pulvinar nisl tristique et. Pellentesque in auctor sem, at finibus massa. Duis sodales odio et consectetur malesuada. Aenean mollis, risus sit amet mollis viverra, quam felis ultrices ligula, non malesuada urna nibh eget velit. Cras ornare ornare dui vel tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    <p>Aliquam at enim quam. Praesent eu odio ipsum. Ut tristique congue libero vel mattis. Curabitur sem tellus, finibus sed luctus eget, mollis euismod ante. Morbi convallis nibh eget tortor gravida aliquet. Vivamus iaculis urna in augue malesuada, pharetra gravida ante maximus. Fusce pharetra purus enim, vulputate viverra diam maximus ac. Donec malesuada ipsum ut posuere imperdiet. Vestibulum ut ligula dolor. In hac habitasse platea dictumst. Fusce at tempus est. Proin porta commodo ipsum, in lacinia purus egestas at. Duis egestas dolor vel ligula scelerisque consequat. Sed convallis tempus vulputate. Quisque id arcu nec sem vehicula condimentum. Aliquam arcu leo, viverra eu mollis ut, pulvinar eget elit.</p>
    <p>Ut sit amet lorem sapien. Curabitur euismod enim massa, eu scelerisque augue congue eget. In nisl purus, maximus a nisl aliquet, rhoncus viverra risus. Ut porttitor purus in iaculis condimentum. Ut et sagittis nibh. Nam id justo at mi efficitur facilisis. Donec fermentum dolor vitae dui semper molestie.</p>
    <p>Nullam vulputate lacinia finibus. Nam id ornare dui. Proin blandit lobortis tortor vel consequat. Vestibulum vehicula nibh sed purus semper eleifend. Vestibulum libero dolor, faucibus sed nisi in, pulvinar viverra ante. Suspendisse potenti. Nulla at ligula at felis ullamcorper sagittis quis a augue. Aliquam tortor metus, feugiat quis iaculis sed, dictum eget nibh. Maecenas at urna vel eros rhoncus pretium ac a leo. Morbi lectus lacus, congue eu lorem ac, consequat fringilla ligula. Quisque volutpat tellus at turpis scelerisque lacinia. Ut tincidunt lacus sed leo auctor, tincidunt tempor velit egestas. Integer vel tincidunt nunc. In feugiat orci vel elit tempus vestibulum. Nunc eleifend suscipit velit, et varius nunc aliquet a.</p>
    <p>Morbi at elit ut velit porttitor placerat. Maecenas sed sem accumsan, rutrum lorem id, cursus lectus. Cras ullamcorper purus at blandit tempor. Nam commodo vestibulum libero vitae gravida. Mauris sem est, euismod eu dolor ut, tincidunt hendrerit enim. Cras in interdum odio. Nam augue est, pellentesque a justo vel, sagittis facilisis leo. Morbi blandit odio ut feugiat ultrices. Curabitur pretium urna massa, euismod scelerisque augue vestibulum sit amet.</p>
   </section>
   <footer>
       <p class="small-text text-right">Copyright &copy;2019</p>
   </footer>
</div>
</body>
</html>

Open in new window

You can see it working here
Loganathan Natarajan

These days , we create templates using "CSS Frameworks" like Bootstrap and its responsive as well.

Are you looking for very basic HTML, CSS way to create Templates?

In that case, You need to go here https://www.experts-exchange.com/questions/29141311/HTML-and-CSS-template.html?anchorAnswerId=42833663#a42833663
Robert Perez

I love using: https://html5up.net/ for HTML5 / CSS3 website templates. These sites have great free templates as long as you give them credit for their work. If you just want to look at the templates to see what has been done where that's a good place to start.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.