Posts Tagged ‘html’

Be the Batman of web design

Tuesday, August 3rd, 2010

I’m a huge comic fan and as long as I can remember, Superman has been my favorite hero. But there’s a problem with Superman, he’s doesn’t make a very good role model. Why? Because Superman showed up on Earth and was immediately better than you at everything. That’s not really something you can aspire to unless, of course, you are planning on going to a planet where no one is as good as you at web design!

Batman is the one superhero that people can look to for inspiration because he’s one of the few that’s just a man. But in order to become Batman, he worked and worked until he became the best at all the things he needed to master to accomplish what he set out to. It’s been changed a bit over the years, but Batman became an expert at martial arts, an escape artist, a detective and a scientist. And, over the years, it’s become apparent that Batman will always be the last guy standing.

So what does this have to do with web design? Well, from what I’ve learned over the years, no one just shows up and is great at everything that it takes to be a great web designer. There are no Supermen out there, there are only people that have worked their way to becoming Batman. To be a web design Batman, you need to know design, HTML/CSS, JavaScript and technologies like Flash or PHP. And you need to be good at all of them.

Of course, not everyone can be Batman but trying to get there will make you better at what you do. Although, you could be like the Flash and be really, really good at one thing but I don’t think anyone is going to say the Flash is cooler than Batman.

Tags: css, flash, html, javascript, php
Posted in HTML/CSS | No Comments »

CSS3 Transitions on Transforms in Firefox 4

Thursday, July 29th, 2010

In one of my previous posts, I showed how to use SVG as a mask over top of video and I based it on what I saw in a demo video showing off what Firefox 4 can do. With the release of the second Firefox 4 beta, Mozilla has released a few of the demos along with the code. The demo that I think has the most potential for real world use, is the London Project. I can see sites being animated like this really taking off, for better or for worse. And the great thing is, it only takes a few lines of CSS and one line of JavaScript to do it.

Here’s my version of what Paul Rouget made without the video.

How does it work? Like most CSS3 animations, it’s easy once you’ve figured it out. First off, the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<body class="intro">
<div id="wrapper">
<div id="intro" onclick="document.body.classList.remove('intro')">
<h1><a href="#">WELCOME</a></h1>
<p><a href="#">Click Here</a></p>
</div>
<div id="logo">
<img src="demo_logo.png" />
</div>
<div id="picture">
<img src="robot_slap.jpg" />
</div>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique sem id tortor lacinia vel iaculis turpis tincidunt. Sed tincidunt venenatis neque, vel pretium dui suscipit id. Duis sit amet nibh quis ante pretium faucibus nec in quam. In feugiat rhoncus diam, id porta lorem blandit eget. Vivamus et velit sit amet nunc cursus pretium. Mauris in lectus nec tortor lacinia vehicula. Nam sed elit augue. Mauris id magna ipsum. Quisque sagittis aliquam elit at sagittis.</p>
</div>
</div>
</body>

The only thing here that’s important to the animation is this line: <div id=”intro” onclick=”document.body.classList.remove(‘intro’)”>. This is what triggers the animation when the right box is clicked. It does this by removing the class “intro” that’s assigned to the body tag and then the elements of the page are animated to their new position on the page. Here’s the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

body {
margin:0; padding:0;
background:#dabe25;
font-family:Arial, sans-serif;
}
#wrapper {
width:900px;
height:500px;
border:10px solid #000;
margin:50px auto;
-moz-border-radius:80px 0 80px 0;
-webkit-border-radius:80px 0 80px 0;
background:#fff;
position:relative;
}
#intro {
width:200px;
height:100px;
border:10px solid #000;
text-align:center;
position:absolute;
left:350px;
top:-200px;
opacity:0;
}
#intro a {
text-decoration:none;
color:#000;
}
#intro h1 {
margin:10px 0 0 0;
}
#logo {
position:absolute;
left:620px;
top:15px;
-moz-transition-duration:1s;
-moz-transition-delay:1s;
}
#picture {
width:500px;
height:375px;
border:10px solid black;
position:absolute;
top:60px;
left:50px;
-moz-transition-duration:1s;
-moz-transition-delay:.5s;
}
#text {
width:250px;
padding:10px;
border:10px solid #000;
position:absolute;
left:590px;
top:130px;
background:#ccc;
-moz-transition-duration:1s;
-moz-transition-delay:2s;
}
#text p {
margin:0;
}
body.intro #intro {
-moz-transform:translate(0, 380px);
opacity:1;
}
body.intro #logo {
-moz-transform:translate(0, -200px);
}
body.intro #picture {
-moz-transform:translate(0, -800px);
}
body.intro #text {
-moz-transform:translate(0, -800px);
}

Most of this is styling, which we don’t need to worry about here. We’ll look at just the #logo div because they all behave the same. If you look at the CSS for #logo, you’ll see its final positioning on the page. But there’s also body.intro #logo. Here, we’re using the transform property to animate the positioning of the #logo div. Using translate, we set the initial position to -200px which will take it off the viewable part of the page. And when the #intro div is clicked and the “intro” class is removed from the body tag, the #logo div is animated to its permanent position using the -moz-transition-duration property. All the different elements come in in a staggered effect using the -moz-transition-delay property.

And that’s it. Something that people will use Flash to get the same effect can now be done using just HTML, CSS and the tiniest amount of JavaScript. Right now this only works in Firefox 4, but it’s designed to display properly in all other browsers, just without the animation or, in some cases, the rounded corners.

Poke around in the demo and look at the Mozilla one, which adds SVG masks to the mix. Getting on board with techniques like this as early as possible is going to be the right move, especially since HTML5 is the latest buzzword clients are bringing up when talking about websites. And I’m a fan of adding in extra things like this for people that use newer browsers, as long as it still displays properly in older ones.

Tags: CSS3, Firefox, html, javascript
Posted in HTML/CSS | No Comments »

In some browsers <textarea> is resizable

Sunday, July 25th, 2010

I was building a contact form a few weeks ago and since I use Firefox 3.6 to do my testing while I build a site, I didn’t noticed until I checked the site in Chrome that you can now resize text areas. If there’s a couple of diagonal lines in the bottom right corner of the text area, you can click and drag to resize it. Checking around, I’ve found this is only available in Chrome, Safari and Firefox 4 right now, but I’m sure that when Internet Explorer 9 comes out, it will be there too. Is this a big deal? Maybe not, but when you resize the text area if can affect the design around it, moving text and pictures around. And I know from experience, that’s the kind of thing that can become a major issue for some of the clients I’ve worked it, if they happened to discover you can do that.

But this is an easy problem to solve. I usually set the height and width of form elements in my CSS. But there’s a couple of tricky things you should know. If you just set this:

1
2
3
4

textarea {
width:400px;
height:300px;
}

It will set the height and width of the text area but it will let the visitor make it bigger although not smaller. You have to set the max-height and max-width as well. If you just set the max-height or max-width, the visitor can resize the text area from the default width to the max-width you’ve set and the same with height. So both need to be set in order to prevent any resizing:

1
2
3
4
5
6

textarea {
width:400px;
height:300px;
max-width:400px;
max-height:300px;
}

So far, I haven’t been able to find any info on preventing resizing with a setting inside the actual HTML tag, but since CSS is used nearly 100% time, it’s not a big deal to do it this way.

Tags: css, html
Posted in HTML/CSS | 1 Comment »

Create the ThinkGeek background effect using CSS3

Wednesday, July 14th, 2010

When ThinkGeek launched their new site design last year, one of the hilights was the background image that switches from robots to zombies when you scroll down to the bottom of the page. It was one of those things that made me, as a web designer, need to know how they did it. How they did it was using a few images and some wrapper divs. It’s not complicated once you figure it out and I think the few extra divs is worth it for the effect. If you want to see how ThinkGeek does it, check out this screencast by Chris Coyier over at CSS-Tricks.

I knew it could be done with CSS3 but was it worth it? The other day I began wondering if you could do it with less HTML and CSS, if you used things like CSS gradients and multiple backgrounds. After some trial and error, I figured out you could do it with a couple of lines of CSS and no extra HTML. Of course, the problem is, it won’t work in any version of IE.

For the CSS, we just need to apply multiple background images to the body tag and this works because CSS3 gradients are technically a background image.

1
2
3
4
5
6
7
8
9
10
11
12

body {
padding:0;
margin:0;
background:url(images/robots2.png) fixed repeat-x -275px bottom, -moz-linear-gradient(#000, #404143 180px, #404143 70%, #000 80%) no-repeat #404143;
background:url(images/robots2.png) fixed repeat-x -275px bottom, -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(0.1, #404143), color-stop(0.7, #404143), color-stop(0.8, #000)) no-repeat #404143;
}
#content {
width:800px;
min-height:2000px;
margin:0 auto;
background:#fff;
}

Check out the demo here.

That’s all the CSS I used to get the same effect. there’s two background properties because there has to be one for Firefox and one for the Webkit browsers, Safari and Chrome. Robots2 is just a image I made that’s the same colors as the ThinkGeek image. Putting it first sets it on top of the gradient background, For the gradients, of course Firefox and Webkit have different syntax but the set up for this is pretty much the same. Black for 180 pixels in Firefox or 10% in Webkit. Then it changes to the gray and stays gray until 70% of the page height and it turns black again at the 80% mark. #content is just a div I put in there because for the effect to work right the page needs to be around 2000 pixels in height, which isn’t that big of a deal.

I think this is great example of what CSS3 is going to let people do. It wasn’t a ton of CSS and HTML to do it with images, but this will load faster because it’s only one image and less code. One thing I noticed while doing this is Chrome doesn’t seem to create gradients as nicely as Safari or Firefox, hopefully Google is working on this because as CSS3 becomes more wide spread, it might make some designs look pretty bad. Another I’ve noticed, if you put a gradient first then multiple backgrounds won’t work. I was fooling around trying to have two gradients and nothing would display at all.

Tags: css, CSS3, html
Posted in HTML/CSS | 1 Comment »

Don’t build a site that relies on JavaScript

Monday, July 12th, 2010

I’ve been spending a lot of my time learning jQuery, mainly because the direction the web is going, web designers and front-end developers are going to need to know it to fulfill their clients needs. jQuery is great and can add a lot to a website, including increasing the functionality of a site. But I’m not a big fan of things not working if the visitor has turned JavaScript off. I’ve said here and other places that I feel if they user turns off JavaScript or Flash or Java then they know that they are going to be missing certain elements of a site and I feel, since they’ve made their decision, they should be prepared to live with the consequences. At the same time, I don’t think that a site’s main functionality should rely on something like JavaScript in order to work. A site that needs JavaScript to provide it’s main function, such as e-commerce, is built wrong.

99% of people have JS turned on, so what’s the big deal? I was taught and I still follow it to this day, your site should work if the CSS is turned off. A visitor might come to your site and the CSS file doesn’t load, so instead of refreshing, they assume the site looks this way. You want them to be able to still get around and be able to do what they wanted to do on your site. And I believe this has to apply to JavaScript as well. Some browsers suck at running JavaScript and we’ve been on sites where it takes a few minutes to load because it’s hanging up on the JS. How many times has a site half loaded on you because it was waiting for the JS, so you just clicked the back button?

So what do you do? Build your main functionality with HTML and a language like PHP. Just like CSS is for styling and positioning, JavaScipt and libraries like jQuery should be used to enhance a web site. One thing I’ve learned over the years is that a lot of these decisions come down to who is the sites audience. Your audience will almost always determine the technology you use and if you think you can get away with using JS to provide an import functionality, then do it. But always be aware that there might be someone out there that can’t use the site the way you intended.

Tags: css, html, javascript, php
Posted in HTML/CSS | No Comments »

2 CSS Positioning Tips Every Web Designer Needs to Know

Thursday, July 1st, 2010

In my fight to stop people from using tables for layout in web design, there’s a couple of arguments I come across a fair amount. One is about pinning a div, like a footer div, to the bottom of another div and it stays there regardless of the parent div’s height. And the other one is positioning a div inside a parent div that’s been center on the page. Both of these things are easy to do when you know how to do them and for some reason the solution isn’t as wide spread as you would think it is. In fact, the way you position div inside another div is something that I only found out about a couple months ago. In fact I had a work around that worked pretty good, but used margins, which isn’t always the best way to go.

Let’s say you have this HTML:

1
2
3

And you wanted to position “right_block” over to the right side of the “wrapper” div. Here’s how I used to do it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#wrapper {
width:800px;
height:500px;
background:#ccc;
margin:auto;
}
#right_block {
width:100px;
height:200px;
background:#222;
position:absolute;
margin-left:600px;
top:50px;
}

If you set left to 600px then “right_block” will stay 600px from the left edge of the browser and 50px from the top no matter the width and height of the browser window. If you change left to margin-left, then “right_block” will be 600px from the left edge of the “wrapper” div and 50px from the top of it. If this works, then why not do it this way? Well, sometimes the margin can interfere with elements above it and this really isn’t the proper way to do it. But the solution is really simple. Just add position:relative; to “wrapper” in the CSS and then you can just position “right_block” the usual way.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#wrapper {
width:800px;
height:500px;
background:#ccc;
margin:auto;
position:relative;
}
#right_block {
width:100px;
height:200px;
background:#222;
position:absolute;
left:600px;
top:50px;
}

That’s all there is to it. This is one of those things that really needs to be taught to web designers just starting out. And setting the wrapper div’s position to relative is also part of the solution to pinning the footer div to the bottom. Here’s our HTML:

1
2
3

Now we want to pin “footer” to the bottom of “wrapper” and maybe the page height varies from page to page on our site and we don’t want to have to set it’s position on every page. It’s really easy to do:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#wrapper {
width:800px;
height:500px;
background:#ccc;
margin:auto;
position:relative;
}
#footer {
width:800px;
height:60px;
background:#555;
position:absolute;
bottom:0;
}

“Footer” will be pinned to the bottom because we’ve set the “wrapper” div’s position to relative and “footer” to absolute. But what positions it at the bottom is bottom:0; That’s all it takes. Now the “footer” div will be at the bottom no matter what the parent div’s height is.

CSS positioning can be frustrating when you’re just starting out. But once you know tricks like this, it makes the temptation to use tables for positioning a lot less. With CSS3 looking like it’s going to be supported in Internet Explorer 9, tables for layout is going to limit the features you can use in your design. And when it’s this easy to solve some of the problems people seem to have with CSS positioning, there’s really no reason to ever use tables to layout your website.

Tags: css, html, positioning
Posted in HTML/CSS | No Comments »

There’s nothing wrong with being “just” a front end developer

Tuesday, June 15th, 2010

The last little while I’ve begun to notice that some front end designers and developers seem to have a view of themselves as less then back end programmers or designers. I went through this too when I first graduated from school and started to become a part of web design community. All the popular blogs were by guys building web apps using Ruby or Python. I actually remember going to a blog of a HTML/CSS expert and actually thinking to myself, “All this guy does is HTML and CSS?” Now, of course, I realize how hard it is to make a lot of the designs I get in HTML and CSS. I really wish I could remember who that guy was because his blog looked pretty cool, well, at least in my memory.

Front end web people are just as important to the whole process as anyone else in the loop. We are the people that make the part that people see and interact with. In a lot of cases, you’re also the person that has to take what the designer has given you and make it work with the functionality that the programmer has created. Sometimes it seems half my job is explaining to designers why something isn’t possible and the other half usually ends up making it possible. Front end web designers are the people that take flat designs and turn them into something interactive and that can be a lot harder than most people think. Front end developers should never sell themselves short with what they can do. Especially now with browsers speeding up their JavaScript adding HTML5 support, the things front end developers can do is jumping by leaps and bounds.

A few years ago, I became obsessed with learning Flash and ActionScript and the more I learned, the more I started hearing about Flex Builder. It seemed to me at the time if you were doing serious Flash work and you wanted the rest of the community to take you seriously, you had to be building everything using Flex Builder. But FB isn’t built to do the simple stuff and as I figured out, it doesn’t really matter what you use to build your project but how it looks and works in the end. I work with HTML/CSS/JS and Flash. Those are the only things I have time to do. We have a couple of guys that do the back en programming. Their HTML skills reside somewhere in 1997 and they’ve barely heard of CSS.

It takes a lot of skill to be able to rebuild a design in pixels. If that’s your skill, you should be proud of it. With the upcoming advances in web technology, front end developers are going to be even more important.

Tags: css, flash, flex, html, javascript
Posted in HTML/CSS | 3 Comments »

Using HTML5 geolocation and the Google Maps API

Wednesday, June 9th, 2010

The guys at Doctype.tv have done a couple of videos on Google Maps API and the HTML5 geolocation feature, but they didn’t show exactly how to link them together. For someone like me, who’s still just getting comfortable with JavaScript it can take a bit to figure out exactly how the get the two to hook up. So I took the code they provided and worked it out. Here’s a demo of what we’ll be making.

First, for the HTML all you need is this:

1	<div id="mapDiv"></div>

If you really wanted to, you could even just use JavaScript to add the div to the page, but this is good enough for what we want to do here. Next, just a little CSS to make the map look nice:

1
2
3
4
5
6
7
8

#mapDiv {
width:500px;
height:300px;
border:1px solid #efefef;
margin:auto;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
}

Now for the JavaScript. First we need to like to the Google Maps API:

1	<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

Now we have to check that geolocation is actually available with the browser the visitor is using:

1
2
3

if(navigator.geolocation) {

}

So far, I’ve only been able to get this to work in Firefox 3.6, it’s supposed to work in Chrome but it hasn’t been working for me. Next we need this line:

1	navigator.geolocation.getCurrentPosition(hasPosition);

What’s happening here? We’re using the built in HTML5 getCurrentPosition function and passing in a function called hasPosition, which we have to create now, above this line.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function hasPosition(position) {
//Creates a variable called point and sends the latitude and longitude to Google Maps to get your position
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),

//Settings for the map
myOptions = {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
},

//Finding the div we want the map to be in
mapDiv = document.getElementById("mapDiv"),
//Pass in the div and map settings to the map
map = new google.maps.Map(mapDiv, myOptions),

//
marker = new google.maps.Marker({
position: point,
map: map,
title: "You are here"
});
}

And you should get this.

Here’s the entire code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>

if(navigator.geolocation) {

function hasPosition(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),

myOptions = {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
},

mapDiv = document.getElementById("mapDiv"),
map = new google.maps.Map(mapDiv, myOptions),

marker = new google.maps.Marker({
position: point,
map: map,
title: "You are here"
});
}
navigator.geolocation.getCurrentPosition(hasPosition);
}
</script>
<style>
#mapDiv {
width:500px;
height:300px;
border:1px solid #efefef;
margin:auto;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
}
</style>
</head>

<body>
<div id="mapDiv"></div>
</body>
</html>

Tags: browser, css, Firefox, html, HTML5, javascript
Posted in HTML/CSS | 1 Comment »

Getting started with the canvas tag

Wednesday, June 2nd, 2010

One of the things in HTML5 that’s getting everyone excited is the canvas tag. It allows a web designer or developer to create graphics and animations in a Flash-like style. It’s something I’ve been interested in for a while, but I never found the time to actually sit down and figure out how to use it. The canvas tag is a perfect example of why web designers aren’t going to be able to just stick with HTML and CSS, they are going to have to add JavaScript to their arsenal if they want to take advantage of HTML5′s features.

Looking at what the canvas tag can do, I got to thinking a developer could use it to create things like website banners instead of using images. So, here’s a quick and simple banner using HTML5′s canvas tag.

The HTML:

1	<canvas id="banner" width="600px" height="120px"></canvas>

Something that I discovered when I was messing around is that you can’t set the height and width of the canvas with CSS, if you do, it stretches out everything that’s inside it. You have to set the dimensions inside the actual tag itself.

There’s not much CSS, just enough to set things up:

1
2
3
4
5
6
7

canvas {
display:block;
}
#banner {
border:1px solid gray;
margin:auto;
}

All we’re doing here is setting the canvas to display:block so that we can control it like a regular div and I just put a 1 pixel border around it so I could see where it was on the page if my JavaScript didn’t work. As for our JavaScript, it’s not that complicated and we don’t need that much to make what we want:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function makeBanner()
{
var banner = document.getElementById('banner');
if(banner.getContext)
{
var bannerFill = banner.getContext('2d');
bannerFill.fillStyle = "#000";
bannerFill.fillRect(10, 10, 580, 100);
var bannerText = banner.getContext('2d');
bannerText.fillStyle = "#fff";
bannerText.font = "bold 50px sans-serif";
bannerText.fillText("Atomic Robot!", 120, 80);
}
}

So what’s going on here? var bannerFill = banner.getContext(’2d’); is setting our canvas to 2D, there isn’t a 3D setting, but I’m sure it will come one day. Next, if you’ve done anything with ActionScript, this will look familiar, we’re just drawing a black rectangle, we’re positioning it at x = 10 and y = 10, with a width of 580 pixels and a height of 100 pixels. And for the text, we just set the font size and style and then, using fillText we say what we want the text to say and the position.

Now, to make it all work, we just need to add this to the body tag:

1	onload="makeBanner();"

That just runs the JavaScript code when the page loads. I haven’t created anything amazing design-wise, but this should be enough to get someone started using the canvas tag. I plan on spending some more time looking at this and I’m going to build a more complex one that someone would use on an actual website.

Tags: css, html, HTML5, javascript
Posted in HTML/CSS | 1 Comment »

Easy two column positioning with variable height in CSS

Wednesday, June 2nd, 2010

As I’ve stated on here before, nothing drives me crazier than seeing people using tables for website layouts when CSS is better and easier when you know what to do. One thing I had trouble with when I was just starting out was a two column layout with the left column matching the height of the right column. Eventually I figured it out and it’s a lot easier than you think. Remember, there’s always more than one way to do things, but this is the simplest way I’ve found to do this.

First thing we need is out HTML:

1
2
3
4
5
6

Nothing major, we just have a container div and the two column divs. The first thing you might notice is that the right column is above the left column, I do this because it allows me to position the two columns with only a couple of lines of CSS.

Here’s our CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#container {
width:1000px;
margin:auto;
background:gray;
position:relative;
}
#right_column {
width:700px;
margin-left:300px;
background:black;
min-height:500px;
}
#left_column {
width:300px;
position:absolute;
top:0;
}

All I’m doing here is setting the right column’s left margin to equal the width of the left column and then setting the left column’s position to absolute and it’s top position to zero. This moves it up and into the position we want. The main problem I always had was getting the left column to stretch to the height of the right column which is usually a big deal if they both have different background colors. I’ve solved that problem here by not giving the left column a background color and giving the color I’d want the left column to have to the container div. Now when the right column stretches, it will stretch the container div and it will look like the left column is stretching with it.

This works in all the modern browsers and it’s what I use here on my blog. I don’t know if it works in IE6 because I don’t really care.

Tags: css, html, tutorial
Posted in HTML/CSS | No Comments »