JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Rasmus Plambech</h1>
</div>
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<a href="#" title="iEnergy" target="_blank"><img src="img/banner1.png" width="960" height="300" alt="iEnergy"></a>
<a href="#" title="Visual Climate Center" target="_blank"><img src="img/banner2.png" width="960" height="300" alt="Visual Climate Center"></a>
</div>
</div>
</div>
</div>
<div id="bigbox">
<h2>Info om hjemmesidens formål</h2>
</div>
<div id="space">
</div>
<div id="box1">
About (link)
</div>
<div id="box2">
Portfolio (link)
</div>
<div id="box3">
Contact (link)
</div>
<footer>Rasmus</footer>
</div>
</body>
</html>
CSS
@charset "utf-8";
body {
font-family: Verdana, Geneva, sans-serif;
background-color:#FFFFFF;
}
#wrapper{
width: 960px;
margin: auto;
}
#space{
height: 25px;
}
#header {
padding: 4px;
background-color:#CCC;
height: 70px;
-webkit-border-top-right-radius: 20px;
-khtml-border-radius-topright: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-khtml-border-radius-topleft: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
}
#box1{
height:300px;
width:290px;
background-color:#CCC;
float:left;
padding: 5px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#box2{
height:300px;
width:290px;
background-color:#CCC;
float:left;
margin-left: 30px;
margin-right: 30px;
padding: 5px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#box3{
height:300px;
width:290px;
background-color:#CCC;
float:left;
padding: 5px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#bigbox{
height:300px;
background-color:#CCC;
padding: 5px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
footer
{
font-size:small;
text-align:center;
height:50px;
background-color:black;
}