HTML workshop

Today i have been looking further into creating a website, covering the basics again then adding some extras such as how to include website transitions.

Below is some of the code i have used however there are a number of websites which can be useful when learning these new skills which i have included below.

http://www.w3schools.com/css/css3_transitions.asp

http://matthewlein.com/ceaser/

This was the code input in the CSS folder in the programme Brackets;

.container {
width: 600px;
margin: 30px auto;
}

.box-text {
color: #dfd
.box {
width: 170px;
float: left;
padding: 30px 15px;
background: #ef1111;
}

.special-box {
background: #dfdfdf;
}

.box:hover {
background: #49f59f;
color: #de5111;
padding: 50px 15px;
-webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
transition: all 2s;

}

This is the actual HTML file input ;

<!doctype html>
<html>
<head>
<title>Format Code</title>
<link href=”css/styles.css” rel=”stylesheet”>
</head>

<body>
<div class=”container”>
<div class=”box”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
</div>

<div class=”box special-box”>

<p>If I don’t format this code correctly, Kyle will be very angry, and it will be hard to know whats going on. <span class=”box-text”>It’s much easier if I keep my markup clean from the start</span></p>
</div>
<div class=”box”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet varius blandit. Aliquam erat volutpat. Sed nisi mauris, pellentesque eu nibh in, tincidunt bibendum erat. Nullam et tincidunt dolor, non mollis velit.</p>
</div>
</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s