<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Do you got milk?</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="firkant"> </div>
<div id="wrapper">
<div id="bilde1"><img src="images/theplace.jpg" alt="2pac" /></div>
<h1>Do you got Milk?</h1>
<div id="ord1"><p>I</p></div>
<div id="bilde2"><img src="images/theplace.jpg" alt="2pac" /></div>
<div id="ord2"><p>Got</p></div>
<div id="bilde3"><img src="images/theplace.jpg" alt="2pac" /></div>
<div id="ord3"><p>No Milk OR ? Δ</p></div>
<div id="bilde4"><img src="images/theplace.jpg" alt="2pac" /></div>
</div>
<hr/>
</body>
</html>
/*rest css*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html {
height:100%;
width:100%;
background-color:#000;
/*this code her reset the default styles in the browsers*/
margin:0;
padding:0;
}
body {
height:100%;
width:100%;
/*this code her reset the default styles in the browsers*/
margin:0;
padding:0;
}
#wrapper {
width:100%;
min-height:100%;
/* min-width: 100%; */
/* position: relative; */
}
p {
color:#fff;
font-size: 200%;
}
h1{
color:#fff;
margin:0% 0 0 35%;
word-spacing: 0.3em;
padding: 2% 2% 2% 2%;
font-family: "American Typewriter";
font-size: 200%;
}
hr{
background-color: white;
width: 100%;
height: 14%;
border: white;
margin: 89% 0% 0% 0%;
}
#firkant {
background-color:#fff;
position:absolute;
opacity:0.1;
height:100%;
width:100%;
z-index:-2;
margin-top:-0;
margin-left:-0;
}
img {
/* height: 220px; */ /*why do i have to use px but not % here? firefox dont like %%% ????*/
/* width: 426px; */
height:30%;
width:30%;
min-height:10%;
min-width:10%;
border-top: 20px solid white;
border-right: 20px solid white;
}
#bilde4 img {
/*
height:30%;
width:30%;
*/
float:right;
margin:-29% 0% 30% 1%;
/*putts the hr element al the way down with the margin bottim 34%*/
opacity:-.1;
filter:alpha(opacity=40);
/* For IE8 and earlier */
border: none;
}
/*when you hover over the pic so will the picure appear 100 perfect with 100% colors*/
#bilde4 img:hover {
opacity:1;
filter:alpha(opacity=100);
/* For IE8 and earlier */
}
hr{
background-color: white;
width: 100%;
height: 10%;
border: green;
/*position: absolute;when i use this code, the hr element goes 100% width*/
margin: -5% 0% 0% 0%;/*why do i have to have 43 in margin here??*/
position: absolute;
z-index: 30;
}
#ord1 p {
font-size:500%;
}
#ord1{
margin:15% 0 0 4%;
height: 20%;
width: 10%;
}
#ord2 p {
/*
position: absolute;
z-index: 50;
*/
}
#ord2 {
margin:8% 0 0 16%;
float:left;
height: 20%;
width: 10%;
}
#ord3 p {
color:black;
/* font-size:500%; */
}
#ord3 {
margin:21% 0% 0% 35%;
height: 20%;
width: 100%;
float: left;
padding: 4px 2px 2px 2px;
position: absolute;
z-index: 60;
}
#bilde1 img {
float:left;
margin:-1% 0% 0% 0%;
border-top: 60px solid white;
position: absolute;
z-index: 10;
}
#bilde2 img {
float:left;
margin: -10.65% 0% 0% 14%;
border-top: 24px solid white;
position: absolute;
z-index: 8;
}
#bilde3 img {
float:left;
margin: 4.4% 0% 0% 2%;
position: absolute;
z-index: 6;
border-top: 39px solid white;
}
Registrerte brukere: Google [Bot]