No products in cart
Back to overview

A Full Responsive Web Design in 24 minutes and 24 seconds Thu Nov 3 2016

Last updated: Thu Nov 3 2016
Look over my shoulder as I create a complete web design in less than 25 minutes. Watch the video and copy/paste the code for yourself!
Below is the code that you can copy for your own use. I highly recommend that you download the Real-Time CSS Editor (available for free for a limited time) so you can play around with the code yourself, make changes and see how it all works.

Click here to access the Ultimate CSS Package Including The Real-Time CSS Editor!

I strongly believe in pure HTML and CSS and have been working like that for over 12 years now. It is easy to write and allows you to quickly build anything you want, no matter the situation. Could this be you?

CopyHTML
<doctype html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="wrapper">

<header>
	<img src="images/logo_white.png" id="logo">

	<div class="split">
		<h1>Praesent ultrices, velit ac bibendum mollis. </h1>
	</div>
	<div class="split">
		<h3>Maecenas vel lobortis justo. Phasellus ligula libero, bibendum vitae. Bibendum vitae lacinia nec, dignissim vel elit. In ultrices eleifend volutpat. </h3>
		<a href="go.html" class="button">More Info</a>
	</div>
</header>
<main>

<section id="subitem">
 <div class="split">
	<h2>Maecenas vel lobortis justo. Bibendum vitae lacinia nec, dignissim vel elit. </h2>
	<p>Suspendisse sollicitudin odio nec dolor accumsan. Vitae consequat est sem et nibh. Lorem ipsum dolor sit amet In ultrices eleifend volutpat. Suspendisse sollicitudin odio nec dolor accumsan. </p>
		<a href="go.html" class="button_main">More Info</a>
</div>
 <div class="split">
	<ul>
		<li>Maecenas porttitor diam tortor, sed accumsan ligula cursus. </li>
		<li>Bibendum vitae lacinia nec, dignissim vel elit. </li>
		<li>Suspendisse sollicitudin odio nec dolor accumsa. </li>
		<li>In ultrices eleifend volutpat. </li>
		<li>Vitae consequat est sem et nibh. </li>
	</ul>
</div>
</section>

<section id="article_holder">
	<article>
		<img src="images/clock.png">
	<div class="article_descr">
	<h2>In ultrices eleifend volutpat. </h2>
	<p>Suspendisse sollicitudin odio nec dolor accumsa. Donec tempus, ligula nec facilisis imperdiet. </p>
		<a href="go.html" class="button_main">More Info</a>
	</div>
	</article>
	<article>
		<img src="images/kitty.png">
	<div class="article_descr">
	<h2>In ultrices eleifend volutpat. </h2>
	<p>Suspendisse sollicitudin odio nec dolor accumsa. Donec tempus, ligula nec facilisis imperdiet. </p>
		<a href="go.html" class="button_main">More Info</a>
	</div>
	</article>
	<article>
		<img src="images/lemon-water.png">
	<div class="article_descr">
	<h2>In ultrices eleifend volutpat. </h2>
	<p>Suspendisse sollicitudin odio nec dolor accumsa. Donec tempus, ligula nec facilisis imperdiet. </p>
		<a href="go.html" class="button_main">More Info</a>
	</div>
	</article>

	<a href="loadmore.html" class="button_main" id="button_more_articles">More Articles</a>

</section>

</main>

<footer>
© Strawberry Campus
</footer>


</div>

</body>
</html>


CopyCSS
html, body {
	padding:0;
	margin:0;
	color:#262626;
	font-family:Arial;
	background-color:#fafafa;
}
#wrapper {
	max-width:1600px;
	margin:auto;
}
header {
	width:100%;
	min-height:400px;
	background-color:#007fff;
	background-image:linear-gradient(-50deg,#0064c9,#3589dd);
	position:relative;
}
#logo {
	width:150px;
	position:absolute;
	top:10px;
	right:10px;
}
header .split {
	padding-top:200px;
}
.split {
	width:50%;
	display:table-cell;
	box-sizing:border-box;
	padding:0 80px 80px 80px;
}
header h1 {
	color:white;
	font-size:200%;
	letter-spacing:1px;
	line-height:130%;
}
header h3 {
	color:#85bef7;
}
.button,
.button_main {
	background-color:#ff8819;
	color:white;
	width:150px;
	display:inline-block;
	text-align:center;
	padding:15px;
	border-radius:30px;
	text-decoration:none;
	text-transform:uppercase;
	transition-property:all;
	transition-duration:0.1s;
	transition-timing-function:ease-in-out;
}
.button:hover {
	background-color:#dd720d;
}
.button:active {
	background-color:#fc9e4b;
}
.button_main {
	background-color:transparent;
	color:#444;
	border:2px solid #c1c1c1;
}
.button_main:hover {
	background-color:#f2f2f2;;
}
.button_main:active {
	background-color:#ccc;
}
#subitem {
	margin-top:100px;
}
main h2 {
	letter-spacing:1px;
	line-height:130%;
}
p {
	letter-spacing:1px;
	line-height:170%;
}
ul {
	padding:0;
	margin:40px 0 0 30px;
	font-size:120%;
	padding:0;
}
ul li {
	list-style-type:none;
	margin-bottom:20px;
}
ul li::before {
	content: "2713";
	margin-right:10px;
	font-weight:bold;
	margin-left:-30px;
	color:#00bf00;
}
#article_holder article {
	background-color:white;
	margin:80px;
	border-bottom:1px solid #afafaf;
	min-height:400px;
}
#article_holder article img {
	width:500px;
	height:400px;
	float:left;
	margin-right:50px;
}
#article_holder .article_descr {
	padding-top:40px;
	padding-bottom:20px;
}
#button_more_articles {
	margin:auto;
	display:block;
	width:300px;
	max-width:80%;
}
footer {
	background-color:white;
	font-size:90%;
	text-align:center;
	padding:60px;
	margin-top:60px;
}
@media screen and (max-width:1200px) {

	body {
		font-size:90%;
	}
	header{
		min-height:350px
	}
	header .split {
		padding-top:150px;
	}
	#article_holder article {
		min-height:300px;
		margin:60px;
	}
	#article_holder article img {
		width:400px;
		height:300px;
	}
	#article_holder .article_descr {
		padding-top:30px;
	}
	.split {
		padding: 0 60px 60px 60px;
	}
	footer {
		padding:50px;
	}
	
}
@media screen and (max-width:980px) {

	body {
		font-size:80%;
	}
	header{
		min-height:300px
	}
	header .split {
		padding-top:100px;
	}
	#article_holder article {
		min-height:200px;
		margin:40px;
	}
	#article_holder article img {
		width:300px;
		height:200px;
	}
	#article_holder .article_descr {
		padding-top:20px;
	}
	.split {
		padding: 0 40px 40px 40px;
	}
	footer {
		padding:40px;
	}
	
}

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

	body {
		font-size:75%;
	}
	header{
		min-height:200px
	}
	header .split {
		padding-top:20px;
		margin-top:0;
	}
	#article_holder article {
		min-height:150px;
	}
	#article_holder article img {
		width:220px;
		height:150px;
	}
	#article_holder .article_descr {
		padding-top:10px;
		padding-bottom:10px;
		clear:left;
	}
	.split {
		padding:20px;
		display:block;
		width:auto;
		margin:10px;
	}
	footer {
		padding:10px;
	}
	#logo {
		width:80px;
	}
	#subitem {
		margin-top:50px;
	}
	
}
Hilco van der Meer
Hilco has been an entrepreneur and web developer since 2004. His focus is always you should be able to build whatever you want in a browser. He primarily focuses on the core principles of web development in the languages HTML, CSS, JavaScript, PHP and MySQL. You too can become a Web Development Master by taking our courses!

Feel free to leave a comment

Message in BBCode (Click On "Code Example" for extra options)
« Code Example
You are editing this content using BBCode. Below are your options.
Text Formatting
[b]{text}[/b] Bold
[i]{text}[/i] Italic
[u]{text}[/u] Underlined
[s]{text}[/s] Strike through
[size={nummer}]{text}[/size] Make {text} a certain size {number}
[title]{text}[/title] Create a big title
[subtitle]{text}[/subtitle] Create a smaller title
[color={kleur}]{text}[/color] Color the text with a name (red,blue, etc.) or color code (#527a32)
[center]{text}[/center] Center text
[align={left|center|right}]{text}[/align] Align text, choose from left, center, right
[url]{url}[/url]]
[url={url}]{text}[/url]
Create clickable url
Create clickable text
[mail]{email}[/mail]
[mail={email}]{text}[/mail]
Create clickable email address
Link text to email address
[bull /] Gives a bullet •
[copyright /] Gives ©
[registered /] Gives ®
[tm /] Gives ™
[quote]{text}[/quote]
[quote={naam}]{text}[/quote]
Create a quote are with an optional name/td>
[code]{text}[/code]
[php]{text}[/php]
[javascript]{text}[/javascript]
Place your code inside the corresponding tag
[list={style}] or [list]
[*] Item one
[*] Item two
[/list]
Create a list with items. {style} can be: none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha
[tasks]
[*] Step one
[*] Step two
[/tasks]
Create a set of tasks that can be checked off on the page. Checked status will only remain visible as long as the page is not reloaded
[sub]{text}[/sub] Create subscript
[sup]{text}[/sup] Create superscript
[b][color=blue]{text}[/color][/b] You can combine tags: create blue and bold text
Media
[img]{url}[/img] Include external
[img={breedte}x{hoogte}]{url}[/img] Include image in certain format
[img width=XX height=XX title="{title} ...]{url}[/img] You can use the default attributes of an image tag (width,height,alt,align,title,etc)
[youtube]{id}[/youtube] Create a youtube video on the page. The ID can be found at the end of the YouTube URL.
[youtube controls=1;autoplay=1;notime=1;width=200;height=150]{id}[/youtube] Create a youtube video with {id} and extra options
Copy word: strawberry (spam prevention)