CMSimple-XH

CMSimple_XH Template Tutorial

Visitor Statistics
» 1 Online
» 2 Today
» 1 Yesterday
» 3 Week
» 16 Month
» 322 Year
» 472 Total
Record: 35 (09.11.2018)

Insert & style demo content

To imitate a real page, it is good to insert a DEMO content and style commonly used elements. 

 

template.htm

<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body id="body">
	<div class="alt-nav">
		<div class="btn">
			<img src="images/alt-nav-btn.png">
		</div>
		<div class="nav">
			<!-- alternative navigation START-->
			<ul>
				<li>Item 1</li>
					<ul>
						<li>Item 1.1</li>
						<ul>
							<li>Item 1.1.1</li>
							<li>Item 1.1.2</li>
							<li>Item 1.1.3</li>
						</ul>
						<li>Item 1.2</li>
						<li>Item 1.3</li>
					</ul>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</div>		
	</div>
<div class="page-wrapper">
	<div class="top-container inner">
		<div class="logo">
			<img src="images/logo.png">
		</div>
		<div class="sitename">
			<!-- sitename -->
			SITENAME
		</div>
		<div class="languagemenu">
			<!-- languagemenu -->
			LANGUAGEMENU
		</div>
		<div class="clear"></div>
	</div>
	
	<div class="banner-container">
		<img src="images/banner.jpg">
		<div class="slogan">
			<!-- slogan -->
			SLOGAN
		</div>
	</div>
	<div class="clear"></div>
	<div class="locator-container inner">
		<div class="locator">
			<!-- locator -->
			LOCATOR
		</div>
		<div class="searchbox">
			<!-- searchbox -->
			SEARCHBOX
		</div>
		<div class="clear"></div>
	</div>

	<div class="main-container inner">
		<div class="navigation">
			<!-- navigation -->
			NAVIGATION
		</div>
		<div class="content">
			<!-- content START -->
			<h1>Heading 1</h1>
			<h2>Heading 2</h2>
			<h3>Heading 3</h3>
			<h4>Heading 4</h4>
			<h5>Heading 5</h5>
			<h6>Heading 6</h6>
			<br>
			<a>This is linked text. Hover me.</a>
			<br>
			<a href="#">Another linked text. Hover me too.</a>
			<br>
			<blockquote>
			This is a BLOCKQUOTE: Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna.</blockquote>
			<br>
			<p class="important">
			This is important notice: Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			<br>
			<p>Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
			<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			<br>
			<p>Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
			<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			<br>
			<h5>Bulletted list</h5>
			<ul>
				<li>Item 1</li>
					<ul>
						<li>Item 1.1</li>
						<li>Item 1.2</li>
						<li>Item 1.3</li>
					</ul>
				<li>Item 2</li>
				<li>Item 3</li>
					<ol>
						<li>Item 1.1</li>
						<li>Item 1.2</li>
						<li>Item 1.3</li>
					</ol>
				<li>Item 4</li>
				<li>Item 5</li>
				<li>Item 6</li>
			</ul>
			<br>
			<h5>Numbered list</h5>
			<ol>
				<li>Item 1</li>
					<ol>
						<li>Item 1.1</li>
						<li>Item 1.2</li>
						<li>Item 1.3</li>
					</ol>
				<li>Item 2</li>
				<li>Item 3</li>
					<ul>
						<li>Item 1.1</li>
						<li>Item 1.2</li>
						<li>Item 1.3</li>
					</ul>
				<li>Item 4</li>
				<li>Item 5</li>
				<li>Item 6</li>
			</ol>
			<br>

			<br>
			<!-- START HTML5 VIDEO -->
			<div class="video-box">
				<video poster="media/nazov_video_subor.jpg" controls preload="metadata">
					<source src="media/nazov_video_subor.mp4" type="video/mp4">
					<source src="media/nazov_video_subor.ogv" type="video/ogg">
					<source src="media/nazov_video_subor.webm" type="video/webm">
					<div class="Rvideo-nosupport">
					*Your web browser does not support HTML5 video*<br>
					</div>
				</video>
				<div class="video-caption">
				Sample HTML5 Responsive Video<br>
				</div>
			</div>
			<!-- END HTML5 VIDEO -->
			<br>
			<h3>Positioning images</h3>
			<img src="images/image.jpg" alt="Image left" class="left" style="width: 200px; height:auto;">
			<p>Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
				<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			<div class="clear"></div>
			<img src="images/image.jpg" alt="Image left" class="right" style="width: 200px; height:auto;">
			<p>Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
			<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			<!-- content END -->
		</div>
		<div class="news">
			<div class="box">
				<!-- newsbox 1 -->
				<h1>NEWSBOX 1</h1>
				<p>Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
				<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			</div>
			<div class="box">
				<!--newsbox 2 -->
				<h1>NEWSBOX 2</h1>
				<p>Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p><p> Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			</div>
		</div>
		<div class="clear"></div>
	</div>

	<div class="footer-container inner">
		<!-- footer -->
		FOOTER CONTAINER
	</div>
</body>
</html>

  

stylesheet.css

...
/*** step 7 ***/
/* fonts & text, images, media formating */
body, #body{
	font: 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
p{padding-bottom:.5rem;}
h1{margin-top: 0; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid black;}
h2, h3{margin: 1rem 0; padding-bottom: .5rem; border-bottom: 1px solid black;}
h1{font-size: 2.5rem;}
h2{font-size: 2.2rem;}
h3{font-size: 1.7rem;}
h4, h5, h6{color: #444; margin: 1rem 0; border-bottom: 1px solid #444;}
h4{font-size: 1.5rem;}
h5{font-size: 1.3rem;}
h6{font-size: 1.1rem;}
.box h1{color:green; font-size:1.5rem;}
a, a:visited{color:blue; text-decoration: none;}
a:focus, a:hover, a:active{color:red; border-bottom:2px solid red;}
ul, ol{
	padding-left: 1rem;
}
blockquote{
	color: green;
	font-style: italic;
	margin-left: 1%;
	padding-left: 1%;
	border-left: 3px solid #444;
}
div.important, p.important{
	color: red;
	font-style: italic;
	background: silver;
	border: 1px dotted red;
	padding: 1rem;
}
img.left{float:left; margin: 0 1rem 1rem 0;}
img.right{float: right; margin: 0 0 1rem 1rem;}
.video-box 
	{
	background-color: #000000;
	text-align: center;
	padding: 0px;
	margin: 0px auto 0px auto;
	width: 100%;
	max-width: 520px;
	height: auto;
	border: 1px solid #000000;
	}
/* for use with hi_fancybox plugin */
a.zoom, a.zoom_g, a.zoom_i{}
/* */
.video-box video 
	{
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin: 0px;
	}

.video-caption 
	{
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	padding: 8px 5px 8px 5px;
	}

.video-nosupport
	{
	color: #FFFFFF;
	padding-top: 110px;
	padding-bottom: 110px;
	}

.sitename{
	color: maroon;
	padding-top: 2%;
}
.languagemenu{
	padding-top: 2%;
	text-align: right;
}
.slogan{
	color: maroon;
	font-size: 2rem;
	padding: 2%;
}
.navigation, .news{padding: 3rem 0;}
.content{padding: 3rem;}
.box{padding: 0 1rem; margin-bottom: 1rem;}
.footer-container{
	font-size: .8rem;
	text-align: center;
}
...

 

 

PREVIEW

 

top
YOUR DISPLAY HAS
SMALL RESOLUTION
MINIMAL 320px
IS REQUIRED