CSS code for DIV Layout Practice #1
<!doctype html>
<html>
<head>
<style type="text/css">
#bigmain{
background-color:black;
width:100%;
height: 735px;
}
#forred {
border-radius:18px;
float: left;
background-color: red;
width: 50%;
height: inherit;
}
#name{
border-radius:18px;
float: right;
background-color:chartreuse;
width: 50%;
height: inherit;
}
#purple{
border-radius:18px;
float: left;
background-color:purple;
width: 75%;
height: 300px;
}
#verticaldiv{
border-radius:18px;
width: 25%;
height: 735px;
background-color:red;
float :right;
}
#black{
float: right;
border-radius:18px;
width: 100%;
height: 500px;
background-color: black;
}
#colours{
float :left;
border-radius:18px;
width: 75%;
height: 200px;
background-color:white;
}
#lightblue{
float: right;
border-radius:18px;
width: 60%;
height: 80px;
background-color:lightblue;
}
#green {
border-radius:18px;
float: left;
width: 40%;
height: 200px;
background-color: green;
}
#smallred{
float :right;
width: 60%;
height: 120px;
background-color:firebrick;
border-radius:18px;
}
#useless{
float :right;
position:relative;
width: 100%;
height: 235px;
background-color:purple;
border-radius:18px;
}
#last{
float :left;
position:relative;
width: 75%;
height: 235px;
background-color:orange;
border-radius:18px;
}
</style>
</head>
<body>
<div id="bigmain">
<div id="forred">
</div>
<div id="name">
<div id="verticaldiv">
<div id="black">
</div>
<div id="useless">
</div>
</div>
<div id="purple">
</div>
<div id="colours">
<div id="lightblue">
</div>
<div id="green">
</div>
<div id="smallred">
</div>
</div>
<div id="last">
</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment