Scribd
Upload
51 views8 pages

Example CSS HTML Template Code

This HTML document defines the structure and layout of an elearning website. It includes sections for the header, navigation menu, content sections, and footer. Styling is provided by an external CSS stylesheet which specifies styles for things like the navigation bar, sections, and responsive design for smaller screens.

Uploaded by

PALAVALASA MANIKANTA VARAPRASAD
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views8 pages

Example CSS HTML Template Code

This HTML document defines the structure and layout of an elearning website. It includes sections for the header, navigation menu, content sections, and footer. Styling is provided by an external CSS stylesheet which specifies styles for things like the navigation bar, sections, and responsive design for smaller screens.

Uploaded by

PALAVALASA MANIKANTA VARAPRASAD
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

<!

doctype html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>HTML template</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div id="wrapper">

<header>

<h1 >Elearning Website</h1>

<span class="headingtext">This is the Home page content</span> </header>

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="blog.html">Blog</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

<section id="one" >

<h2>add <a href="#">content</a> here</h2>

<p></p>

</section>

<section id="two" >

<h2>add content here</h2>

<p></p>

</section>

<section id="three">
<h2>add content here</h2>

<p></p>

</section>

<footer>

<h4>Footer</h4>

<p>Footer text</p>

</footer>

</div>

</body>

</html>
@charset "utf-8";

/* CSS Document */

body {

margin: 0;

padding: 0;

border: 0;

width: 100%;

background: #fff;

color: #666;

font-family: 'Open Sans', sans-serif;

a{

color: #1E6FFF;

a:hover {

color: #fff;

background: #1E6FFF;

text-decoration: none;

h1, h2, h3 {

padding: 0;

p{

padding: 0;

}
img {

width:100%;

/* Navigation styles */

nav {

width: 100%;

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #444;

text-align: center;

nav li {

float: left;

font-family: 'Open Sans', sans-serif;

font-size: 1.2em;

line-height: 40px;

height: 40px;

border-bottom: 1px solid #393434;

nav a {

text-decoration: none;
color: #fff;

display: block;

text-transform: uppercase;

padding: 4px;

font-weight: bold;

width: 120px;

nav a:hover, a:active {

background-color: #000000;

#wrapper {

padding: 5px;

width: 960px;

margin: 20px auto;

header {

height: 100px;

padding: 0 15px;

section {

float: left;

padding: 15px;

margin: 5px;

border: solid 1px #ccc;


}

#one {

width: 300px;

background: #E8E8E8;

#two {

width: 500px;

background: #8B8B8B;

#three {

width: 840px;

footer {

clear: both;

padding: 0 15px;

@media screen and (max-width: 960px) {

#wrapper {

width: 100%;

nav a {

width: 80px;

}
@media screen and (max-width: 600px) {

header {

height: 50px;

padding: 0;

nav a {

width: 100%;

padding:0 2px;

margin:2px;

nav li {

font-size: 0.7em;

line-height: 20px;

height: 20px;

h1, h2 {

font-size: 1em;

.headingtext {

display: none;

section {

width: auto;

float: none;
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy