Scribd
Upload
15 views4 pages

Web Template CSS

This document contains the HTML and CSS code for a sample elearning website. The HTML includes the website structure with headings, navigation links, two content sections with images and text, and a footer. The CSS styles the navigation bar, content sections, images, and other elements.

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
15 views4 pages

Web Template CSS

This document contains the HTML and CSS code for a sample elearning website. The HTML includes the website structure with headings, navigation links, two content sections with images and text, and a footer. The CSS styles the navigation bar, content sections, images, and other elements.

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/ 4

<!

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>

<header>

<!--Headings-->

<h1>Elearning Website</h1>

This is a sample website</header>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<section>

<div>Heading text</div>
<div class="content" > Lorem ipsum dolor sit amet, <img src="http://lorempixel.com/400/200/sports/"
> wisi amet rutrum nulla proin odio mauris, aliquet rutrum aliquam nibh amet nascetur commodo, arcu
eu in ullamcorper mauris. Arcu bibendum elit. Magna penatibus velit ut wisi nunc, lectus magnis tempus
elit, aenean lectus felis urna eu egestas arcu, elit sollicitudin donec fermentum. Natoque semper sodales
sed, euismod curabitur scelerisque tempor fringilla quis, gravida id ultrices, commodo convallis laoreet
maecenas at. Ut posuere, mauris dapibus suspendisse a ultricies. Tincidunt a sed sapien quisque fames,
lacus at vel ante nulla, ut non elit adipiscing pretium, nibh posuere corrupti a nec. Porta aliquam eros
nibh, pulvinar rutrum ad, at ac habitasse vitae feugiat. Sed tristique, sed vitae purus est. </div>

<div > Lorem ipsum dolor sit amet, <img src="http://lorempixel.com/400/200/sports/" > wisi amet
rutrum nulla proin odio mauris, aliquet rutrum aliquam nibh amet nascetur commodo, arcu eu in
ullamcorper mauris. Arcu bibendum elit. Magna penatibus velit ut wisi nunc, lectus magnis tempus elit,
aenean lectus felis urna eu egestas arcu, elit sollicitudin donec fermentum. Natoque semper sodales
sed, euismod curabitur scelerisque tempor fringilla quis, gravida id ultrices, commodo convallis laoreet
maecenas at. Ut posuere, mauris dapibus suspendisse a ultricies. Tincidunt a sed sapien quisque fames,
lacus at vel ante nulla, ut non elit adipiscing pretium, nibh posuere corrupti a nec. Porta aliquam eros
nibh, pulvinar rutrum ad, at ac habitasse vitae feugiat. Sed tristique, sed vitae purus est. </div>

</section>

<footer>This is a sample of a footer</footer>

</body>

</html>
CSS File

@charset "utf-8";

/* CSS Document */

div {

background: #D0D0D0;

color: #5B64FF;

margin: 20px;

width:50%;

img {

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: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, 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: #009BFF;

You might also like