HTML & CSS

Today I have been learning and refreshing my skills on creating a basic webpage layout in the form of a “Pug rescue” page. So far I have been able to apply two images, some text in the form of a header, footer and navigation tags. Although it still does need a lot of editing such as the colours and positioning , this is a good starting point for the new task set. Below is my code so far which I will continue to edit in my own time and a screenshot of my website so far.

</pre>
<DOCTYPE html>
<html lang="en">

<head>

</head>

<body>
<div id="header">
<h1><b>Pug rescue</b></h1>
</div>

<div id="nav" style= "width:auto;height:auto;position:relative; display:inline-block;margin:auto">
Adopt<br>
Donate<br>
Contact <br>

</div>

<div>

<img src="images/pug.jpg"
style="width:400px;height:400px; position:relative; display:inline-block;margin: auto" >
<img src="images/pug.jpg"
style="width:400px;height:400px; position:relative; display:inline-block;margin: auto" >

<p style="width: 850px; font-size: 1.5em; background-color:#44690">This is a webpage.Hello! </p>

</div>

<div id="footer" style="width:100px;height:100px; position:absolute; bottom: 0">

<b>Pug rescue</b>

</div>

</body>

</html>

Screen Shot 2015-02-05 at 12.51.56

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s