My first website - Advice please.
Good morning
I am mid way through completing my first website and would like some advice on how I can improve (if required, as it seems to be working) on my code. I know there is always room for improvement - please be kind.
The issues I am currently having:
My horizontal list in the footer will not "inline"
Could someone kindly direct me to where I can find a contact sheet template?
Here is my HTML for index page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Site</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<header id="header">
John with a J Photography
</header>
<nav id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="main1">
<p id="above-phots">These are a few shots I have taken over the years since taking up Photography. Please look at my Portfolio for more examples of my work.</p>
<div id="first">
<img src="images/image1.jpg" width="300"/>
<p id="title">Whitstable Harbour</p>
<p id="content">A small fishing town famous for its oysters, with a working harbour. Whitstable Harbour is full of history and character. This shot was taken with a Nikon D3200, Tamron 70-300mm lens f4.0 1/800. The image has some editing using Adobe Lightroom.</p>
</div>
<div id="second">
<img src="images/image2.jpg" width="300"/>
<p id="title">Fradley Junction</p>
<p id="content">Fradley Junction is where the Coventry Canal joins the Trent and Mersey Canal. It's one of the busiest places on the waterways where canals, boats and people meet. This shot was taken with a Nikon D750, Nikon 24-70mm. The image has some editing using Adobe Lightroom.</p>
</div>
<div id="third">
<img src="images/image3.jpg" width="300"/>
<p id="title">Fradley Junction Tree</p>
<p id="content">Lone tree also at Fradley Junction where the Coventry Canal joins the Trent and Mersey Canal. This shot was taken with a Nikon D750, Nikon 24-70mm. The image has some editing using Adobe Lightroom.</p>
</div>
<div id="fourth">
<img src="images/image4.jpg" width="300"/>
<p id="title">Chapel Down Winery (Tenterden)</p>
<p id="content">This shot was taken with a Nikon D750, Nikon 24-70mm. The image has some editing using Adobe Lightroom.</p>
</div>
<div id="fifth">
<img src="images/image5.jpg" width="300"/>
<p id="title">Atlas Way (Birmigham)</p>
<p id="content">This shot was taken with a Nikon D3200, Nikon 18-55mm f4.6. The image has some editing using Adobe Photoshop.</p>
</div>
<div id="sixth">
<img src="images/image6.jpg" width="300"/>
<p id="title">Spoons</p>
<p id="content">This shot was taken with a Nikon D3200, Nikon 50mm f1.4. The image has some editing using Adobe Photoshop.</p>
</div>
</div>
<div id="main-info">
<p id="main-info-text">Please get in touch through my <a href="contact.html">CONTACT</a> page if you would to see if I can help you with any of your photographic needs.</p>
</div>
<div id="footer">
<p class="copyright_text">© copyright 2017 JWAJP.</br>Designed and Developed by John MacKinnon</p>
<ul class="social">
<li><a href="#">Twitter.</a></li>
<li><a href="#">Facebook.</a></li>
<li><a href="#">Linkedin.</a></li>
<li><a href="#">500px.</a></li>
</ul>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
Here is the CSS:
* {
margin: 0px;
padding: 0px;
}
#wrap {
border: 1px solid #949393;
height: auto;
width: 950px;
margin: auto;
}
#header {
background-color: #949393;
height: 80px;
text-align: center;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-weight: 300;
font-size: 75px;
}
#menu {
font-size: 10px;
text-decoration: none;
background-color: #949393;
height: 50px;
text-align: center;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: inline-block;
font-size: 25px;
margin: 10px;
}
#menu ul li a:hover {
color: #D0CDCD;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
color:#F4A00E;
}
#main1 {
width: 930px;
height: 800px;
border: 0px solid #3CAF19;
margin: auto;
margin-top: 15px;
}
#first {
/*background-color: #F60C10;*/
float: left;
width: 300px;
height: 300px;
margin: 5px;
}
#above-phots {
font-size: 20px;
padding: 5px;
font-weight: 300;
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
#title {
color: #F4A00E;
font-size: 18px;
font-weight: bold;
padding: 10px;
}
#content {
text-align: justify;
font-size: 16px;
font-weight: 300;
padding: 10px;
}
#second {
/*background-color: #F60C10;*/
float: left;
width: 300px;
height: 300px;
margin: 5px;
}
#third {
/*background-color: #F60C10;*/
float: left;
width: 300px;
height: 400px;
margin: 5px;
}
#fourth {
/*background-color: #F60C10;*/
float: left;
width: 300px;
height: 200px;
margin: 5px;
}
#fifth {
/*background-color: #F60C10;*/
float: left;
width: 300px;
height: 200px;
margin: 5px;
}
#sixth {
/*background-color: #F60C10;*/
float: left;
width: 300px;
height: 200px;
margin: 5px;
}
#main-info {
width: 930px;
height: 30px;
border: 0px solid #2827CF;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
}
#main-info-text {
text-align: center;
padding: 5px;
}
#seventh {
float: left;
margin: 5px;
}
#seventh img {
margin: 5px;
padding: 5px;
}
#footer {
height: 80px;
background-color: #949393;
width: 900;
margin: auto;
margin-top: 15px;
border: 0px solid #3CAF19;
text-align: center;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-weight: 300;
}
.copyright_text {
margin: 25px;
float: left;
}
.social {
list-style-type: none;
float: right;
margin: 5px 20px;
list-style-type: inline;
}
.social li a {
}
#contact {
margin-top: 100px;
width: 50px;
}
Again many thanks for taking the time to look at this and reply.
Regards
John
AdChoices