Day 1:
On day one of week three we looked at HTLM and CSS by doing this we made a mock website to explore what HTML and CSS did. This helped us with understanding how websites work and how to place the layout of the website.
HTML:
<head>
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
</head>
<div id=”holder”>
<h1>This is a title</h1>
<h2>This is a H2 title</h2>
<p style=”border:1px #00F solid;”
>this is some text</p>
<p>This is a paragraph
<br>Then a br
</p>
<a href=”http://www.google.co.uk”
>This is link</a>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<img class=”dropShadow” src=”http://cdn.theatlantic.com/assets/media/img/photo/2016/02/smithsonian-magazines-2015-photo-co/s01_GeertWeggen/main_900.jpg?1456418926″width=”100px”>
<div class=”dropShadow roundedCorners” id=”loginBox”></div>
</div>
<img class=”dropShadow” src=”http://cdn.theatlantic.com/assets/media/img/photo/2016/02/smithsonian-magazines-2015-photo-co/s01_GeertWeggen/main_900.jpg?1456418926″width=”100px”>
CSS:
body{background-color: grey;
color:purple;
}
p{color: blue;}
img{
width:100%;
}
ul li{
color:green;
border:1px black solid;
float:left;
padding:10px 10px 100px 10px;
margin:10px;
list-style-type:none;
box-shadow: 10px 10px 10px black;
border-radius: 15px;
width:250px;
}
ul li:hover{
background-color: red;
border:10px green dashed;
}
#holder{
width:60%;
margin:auto;
}
.roundedCorners{
border-radius: 10px;
}
.dropShadow{
box-shadow: 0px 0px 10px black;
}
#loginBox{
height:50px;
width:50px;
background-color:blue;
float:right;
position:absolute;
top:10px;
right:10px;
}
Day 2:
For day two we did some work on the layout of the website by doing some grid work and some research, we also did some research into colour pallets that work with eachother.
Day 3:
On day three we decided to look at some WordPress themes such as Divi and other themes to see who some elements of the websites worked together and how the colours and imagery were used on the theme. With this we then went on to make an draft website to see how the layouts and the elements worked
.
Comments are closed.