Week 3 was about web design. We got to write some html and css code by hand. We learned about the essential html tags and how they are used.
This is the code I wrote.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
<title>
Test HTML Document
</title>
</head>
<div id=”holder”>
<body>
<h1>Header</h1>
<h2>Slightly smaller header</h2>
<p class=”roundedCorners” style=”border:10px #B0B solid”>Paragraph<br>
<a href=”http://www.google.com”>with a link underneath it</a></p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<img class=”dropShadow” src=”https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688″>
<div class=”roundedCorners dropShadow” id=”loginBox”>
</div>
</body>
</div>
</html>
CSS
body{
background-color: #EFEFEF;
}
p{color: red;}
img{
width:70%;
}
ul li{
color: green;
border:1px black solid;
float:left;
padding:10px;
margin:10px;
list-style-type: none;
box-shadow: 0px 0px 7px 1px red;
border-radius: 20px;
background-color: #CCC;
width:250px;
}
ul li:hover{
box-shadow: 0px 0px 10px 3px red;
}
#holder{
width: 70%;
margin: auto;
}
.roundedCorners{
border-radius: 20px;
padding:8px;
}
.dropShadow{
box-shadow: 0px 0px 10px black;
}
#loginBox{
height: 30px;
width: 80px;
background-color:red;
float:right;
position:absolute;
top:0px;
right:0px;
margin:10px;
}
Comments are closed.