Meglepődve tapasztaltam, hogy ismét tudok hosszú videókat feltölteni a YouTube-ra, úgyhogy végre nem kell darabolnom. Ennek örömére készítettem egy hosszabb anyagot a reszponzív weboldaltervezés alapjairól.

A videóban elkészített oldalt ide kattintva tudod megnézni.

Videó

HTML forráskód


<div id="wrapper">
	<header>
		Responsive <span>Webdesign</span>
	</header>
	<nav>
		<a href="">elso</a> •
		<a href="">masodik</a> •
		<a href="">harmadik</a> •
		<a href="">negyedik</a>
	</nav>
	<section>
		<article>
			<h1>Lorem ipsum</h1>
			<figure>
				<img src="1.jpg" alt=""/>
				<figcaption>
					kep leirasa par szoban...
				</figcaption>
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie augue et nisl scelerisque nec consectetur est pharetra. Fusce imperdiet luctus justo, in sodales ante accumsan et. Vestibulum arcu sapien, aliquam ac porta ac, pellentesque id nibh. Pellentesque ut enim sed eros condimentum condimentum. Vivamus erat nisi, consectetur vitae gravida at, porttitor non diam. Proin non mauris eu felis sagittis tincidunt. Mauris eget elit arcu. Ut lectus magna, venenatis ac placerat vel, sodales ut sapien.</p>
		</article>
		<article>
			<h1>Lorem ipsum</h1>
			<figure>
				<img src="2.jpg" alt=""/>
				<figcaption>
					kep leirasa par szoban...
				</figcaption>
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie augue et nisl scelerisque nec consectetur est pharetra. Fusce imperdiet luctus justo, in sodales ante accumsan et. Vestibulum arcu sapien, aliquam ac porta ac, pellentesque id nibh. Pellentesque ut enim sed eros condimentum condimentum. Vivamus erat nisi, consectetur vitae gravida at, porttitor non diam. Proin non mauris eu felis sagittis tincidunt. Mauris eget elit arcu. Ut lectus magna, venenatis ac placerat vel, sodales ut sapien.</p>
		</article>
	</section>
	<aside>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas erat est, faucibus sit amet adipiscing ut, mattis in felis. Mauris metus mi, molestie non dignissim a, aliquam ut elit. In in lorem nisl, nec porta nunc. Vivamus vitae ullamcorper eros. Fusce sed sapien euismod lacus faucibus egestas ut a felis. Vivamus porta neque nec turpis porta sed semper enim hendrerit. Quisque ut est sem. Aenean in suscipit lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus elementum metus in diam tincidunt accumsan. Sed vitae est dapibus massa sollicitudin iaculis id non dui. Proin ut tellus quis sem tincidunt consectetur. Aenean in ullamcorper lorem.
	</aside>
	<div class="clear"></div>
</div>
<footer>
	<a href="">elso</a>
	<a href="">masodik</a>
	<a href="">harmadik</a>
	<a href="">negyedik</a>
</footer>

CSS forráskód


* { padding: 0; margin: 0; border: 0 }
body {
	background: url('bg.png') #ab5927;
	font-family: arial;
	font-size: 100%;
	color: #f0c9b1
}
a { color: #FFB400; }
div.clear { clear: both; }

div#wrapper {
	width: 800px;
	margin: 20px auto;
	border-radius: 10px
}
header {
	font-size: 360%;
	font-weight: bold;
	color: #fff;
	font-family: "trebuchet MS";
	text-shadow: 2px 2px 2px #6d2a15
}
header span { color: #000 }
footer {
	width: 760px;
	margin: 20px auto;
	font-size: 85%;
	background: rgba(129,63,21,0.5);
	padding: 20px;
	text-align: center
}
footer a { margin: 0 15px; }
nav {
	padding: 10px 0;
	margin: 20px 0;
	color: #000;
	box-shadow: 0px 0px 5px #6d2a15;
	background: #ffb400;
	background: -moz-linear-gradient(top,  #ffb400 0%, #ff8500 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb400), color-stop(100%,#ff8500));
	background: -webkit-linear-gradient(top,  #ffb400 0%,#ff8500 100%);
	background: -o-linear-gradient(top,  #ffb400 0%,#ff8500 100%);
	background: -ms-linear-gradient(top,  #ffb400 0%,#ff8500 100%);
	background: linear-gradient(to bottom,  #ffb400 0%,#ff8500 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb400', endColorstr='#ff8500',GradientType=0 );
}
nav a {
	color: #000;
	text-decoration: none;
	margin: 0 10px;
	font-family: "trebuchet MS"
}
nav a:first-child { margin-left: 20px }
nav a:hover { text-decoration: underline }
section {
	width: 558px;
	float: left;
	margin: 0 20px 0 0;
	padding: 0 20px 0 0;
	font-size: 80%;
	border-right: 2px dotted #c57240
}
section article { margin: 0 0 20px 0 }
section article p {
	text-align: justify;
	line-height: 140%
}
section article h1 {
	margin: 0 0 10px 0;
	font-size: 150%;
	color: #ffb400;
	font-family: "trebuchet MS";
	text-shadow: 1px 1px 1px #6d2a15
}
aside {
	float: right;
	width: 200px;
	font-size: 80%
}
figure {
	padding: 10px;
	background: #c57240;
	margin: 0 0 20px 0
}
figure img { max-width: 100% }
figure figcaption {
	font-style: italic;
	font-size: 80%;
	margin: 6px 0 0 0
}
@media only screen
and (min-width : 480px)
and (max-width : 800px) {
	div#wrapper { width: 600px }
	header { font-size: 320% }
	section { width: 408px }
	aside { width: 150px }
	footer { width: 560px }
}
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
	div#wrapper { width: 400px; }
	header { font-size: 200%; }
	section { width: 400px; padding: 0; margin: 0; border: 0 }
	aside { display: none }
	footer { width: 360px }
}
@media only screen
and (min-width: 240px)
and (max-width: 320px) {
	div#wrapper { width: 300px; }
	header { font-size: 200%; text-align: center }
	header span { display: block }
	nav { text-align: center }
	nav a { margin: 0 3px }
	nav a:first-child { margin: 0 3px }
	section { width: 300px; padding: 0; margin: 0; border: 0 }
	aside { display: none }
	footer { display: none }
}