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.
Thx.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Need to look for a pure HTML and CSS technique only, ... as a base for my course assignment...
Take a look to https://templatemo.com/ too, most of the templates are Pure HTML/CSS.
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 ©2019</p>
</footer>
</div>
</body>
</html>
These days , we create templates using "CSS Frameworks" like Bootstrap and its responsive as well.
In that case, You need to go here https://www.experts-exchange.com/questions/29141311/HTML-and-CSS-template.html?anchorAnswerId=42833663#a42833663
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
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.
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