Here is my XML code:
<!DOCTYPE HTML SYSTEM>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
<div class="header">
<img id="circle" src="circle.png" alt="circle"/>
<div class="menu">
<ul class="menu">
<a href="#">
<li id="menu" style="margin-left: 39%;">Home</li>
</a>
<a href="#">
<li id="menu" style="margin-left: 46%;">About</li>
</a>
<a href="#">
<li id="menu" style="margin-left: 53%;">Contact</li>
</a>
</ul>
</div>
<a href="http://www.google.com"><img id="src" style="margin-right: 6%" src="src.png" /></a>
<img id="ham" src="ham.png" style="margin-right: 2%" alt="ham"/>
<img id="smpline" src="smpline.png" style="margin-left: 5%;" alt="smpline"/>
<div class="welcome">
<p id="big">Web Design</p>
<p id="sml">
Fusce dapibus, tellus ac cursus commodo, tortor mauris <br />
condimentum , ut fermentum massa justo sit amet <br />
erat a ante venenatis dapibus posuere velit <br />
</p>
</div>
</div>
<img id="lowerfoto" src="lower.png" alt="lower"/>
<div class="head">
<img id="fteweit" src="fterwit.png" alt="white"/>
<ul class="head">
<li id="head" style="padding-left: 10%;">FOLLOW US</li>
<li id="head" style="padding-left: 30%;">GET TO KNOW US</li>
<li id="head" style="padding-left: 50%;">LOCATIONS</li>
<li id="head" style="padding-left: 70%;">OUR MISSION</li>
</ul>
<ul class="under">
<li id="under" style="padding-left: 10%;">
<a href="http://twitter.com">Twitter</a> <br />
<a href="http://facebook.com">Faceboook</a> <br />
<a href="http://linkedin.com">Linkedin</a> <br />
<a href="http://pinterest.com">Pinterest</a> <br />
<a href="http://youtube.com">YouTube</a> <br />
</li>
<li id="under" style="padding-left: 30%;">
<a href="http://twitter.com">About</a> <br />
<a href="http://facebook.com">Policies</a> <br />
<a href="http://linkedin.com">Careers</a> <br />
<a href="http://pinterest.com">Press</a> <br />
<a href="http://youtube.com">Developers</a> <br />
</li>
<li id="under" style="padding-left: 50%;">
<a href="http://twitter.com">Detroit</a> <br />
<a href="http://facebook.com">London</a> <br />
<a href="http://linkedin.com">Florida</a> <br />
<a href="http://pinterest.com">Las Vegas</a> <br />
<a href="http://youtube.com">California</a> <br />
</li>
<li id="under" style="padding-left: 70%;">
Fusce dapibus, tellus ac cursus commodo, tortor mauris <br />
condimentum nibh, ut fermentum massa justo sit amet <br />
risus. Integer posuere erat a ante venenatis dapibus <br />
posuere velit aliquet. Praesent commodo cursus magna, <br />
vel scelerisque nisl consectetur et. Sed posuere consectetur <br />
</li>
</ul>
<img id="fterblk" src="fterblk.png" alt="black" />
<p style="text-align: center center; position: absolute; top: 285%; left: 50%;color:white; transform: translate(-50%, -50%);">Copyright 2015-2016 @renkj</p>
</div>
</body>
</html>
And here is the SCSS:
html{
min-height: 100%;
margin: 0;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
color: #fff;
text-align: center;
position: absolute;
top: 5.3%;
}
/* More CSS rules... */
(Please note that the images are not displayed on jsfiddle. Focus on the "Follow us" section and below, "Get to know us" and below, "Locations" and below, and "Our Mission" and below.)
The text in the lower part of the webpage appears unselectable and the links do not work properly. Any suggestions on how to fix this issue? Thanks!