By coding my website twice in two different ways, my knowledge of html coding has dramatically increased . I appreciate the time and effort that goes into the construction of a website, and am confident that I can now use my new found knowledge to creating on online portfolio for myself.
I designed and coding 5 pages- the index or home page, the News section, the Magazine section, an article and the contact page
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Inside</title>
<script type= "text/javascript" src="jquery-1.2.6.min.js">
</script>
<script type= "text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 3500 );
});
</script>
</head>
<body>
<div id="wrap">
<div id="aside">
<div class= "logo">
<a href="index2.html"><img src="Images/Insidelogo.jpg" width="142" height="45" alt="logo"></a>
</div><!-- /logo -->
<ul id="nav">
<li><a href="magazine.html" id= "t-mag">Magazine</a></li>
<li><a href="news.html" id= "t-news">News</a></li>
<li><a href="#" id= "t-work">Workspace</a></li>
<li><a href="#" id= "t-show">Showcase</a></li>
<li><a href="#" id= "t-about">About Us</a></li>
<li><a href="#" id= "t-sub">Subscribe</a></li>
</ul>
<div id= "ad">
<h4>featured sponsor</h4><a href="http://www.cotto.co.th/main.html"><img src="Images/CottoMilan.png" alt= "ad"></a>
<h3>COTTO in Milan</h3>
<p> Thailand based tile and sanitaryware brand COTTO is set to launch its Marmo Granito-Paradiso collection at 2012 Milan Furniture Fair.</p>
</div><!-- /ad -->
</div><!-- /aside -->
<div id="content">
<div id= "feature">
<div id="slideshow">
<img src="Images/inside-cover.png" alt="cover" class="active" />
<img src="Images/spread1.jpg" alt="spread1" />
<img src="Images/spread2.jpg" alt="spread2" />
<img src="Images/spread3.png" alt="spread3" />
<img src="Images/spread4.png" alt="spread4" />
</div>
<h1>inside magazine 70: <span style="font-weight:400">working for solutions<span style="color:#ff6633">//</span></span></h1>
</div><!-- /feature -->
<div class="article">
<a href="#"><img src="Images/holick-resort-1.jpg" width="328" height="209" alt="holick"/>
<h2>Holick sea resort, sweden<span style="color:#ff6633">//</span></h2></a>
</div><!-- /article -->
<div class="article">
<a href="#"><img src="Images/500bourkest.jpg" width="328" height="209" alt="500bourke"/>
<h2>500 bourke st<span style="color:#ff6633">//</span></h2></a>
</div><!-- /article -->
<div class="article">
<a href="#"><img src="Images/jamiesitalian.jpg" width="328" height="209" alt="jamies"/>
<h2>Jamie's Italian<span style="color:#ff6633">//</span></h2></a>
</div><!-- /article -->
<div class="article">
<a href="#"><img src="Images/operahouse.jpg" width="328" height="209" alt="opera"/>
<h2>Sydney Opera House<span style="color:#ff6633">//</span></h2></a>
</div><!-- /article -->
</div><!-- /content -->
<div id="footer">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div><!-- /footer -->
</div><!-- /wrap -->
</body>
</html>
CSS:
@charset "UTF-8";
/* CSS Document */
#wrap {
width: 80%;
max-width: 750px;
min-width: 600px;
margin: 0 auto;
padding: 40px 0 0 0;
}
#aside {
float:left;
position:fixed;
}
.logo {
padding-left: 40px;
padding-bottom: 20px;
}
#content {
float:right;
width: 450px;
text-align:inherit;
}
#feature {
padding-left: 5px;
padding-right: 20px;
padding-bottom: 10px;
border-bottom: dashed thin #666;
}
#slideshow {
position:relative;
height:300px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
body {
background-color: #FFFFFF;
color: #666666;
font-family: Breuer,Helvetica,Arial,Sans-Serif;
font-size: 10px;
}
.article {
clear: both;
overflow: auto;
border-bottom: dashed thin #666;
}
.article img {
float: right;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 1px;
padding-right: 1px;
}
h1 {
font-family:Breuer,Helvetica,Arial,Sans-Serif;
font-size: 10px;
}
h2 {
font-size: 10px;
color:#333;
text-transform:lowercase;
font-weight:400;
}
h3 {
font-family:Breuer,Helvetica,Arial,Sans-Serif;
font-size: 10px;
color:#ff6633;
}
h5 {
text-transform:lowercase;
}
li {
list-style-type:none;
}
#nav{
font-size: 12px;
background-color:#FFF;
text-transform: uppercase;
}
#nav #t-mag {
display: block;
background: url(Images/M.png) no-repeat left top;
height: 23px;
padding: 1px 0 0 20px;
}
#nav #t-news {
display: block;
background: url(Images/N.png) no-repeat left top;
height: 23px;
padding: 1px 0 0 20px;
}
#nav #t-work {
display: block;
background: url(Images/W.png) no-repeat left top;
height: 23px;
padding: 1px 0 0 20px;
}
#nav #t-show {
display: block;
background: url(Images/S.png) no-repeat left top;
height: 23px;
padding: 1px 0 0 20px;
}
#nav #t-about {
display: block;
background: url(Images/about.png) no-repeat left top;
height: 23px;
padding: 1px 0 0 20px;
}
#nav #t-sub {
display: block;
background: url(Images/subscribe.png) no-repeat left top;
height: 23px;
padding: 1px 0 0 20px;
}
#ad{
width: 120px;
margin-left: 40px;
margin-top: 40px;
border-bottom: thin solid #FF6633;
border-top: medium solid #FF6633;
font-size:9px;
}
a:link {
color: #666666;
text-decoration: none;
}
a:active {
text-decoration: none;
}
a:visited {
color: #999999;
text-decoration: none;
}
a:hover {
color: #48BABF;
text-decoration: none;
}
#comment-form {
width: 50%;
float: left;
}
#comment-form fieldset {
margin: 0 0 15px;
border: none;
}
#comment-form fieldset label {
font-weight: bold;
margin: 0 0 3px;
}
#comment-form fieldset input,
#comment-form fieldset textarea {
width: 90%;
padding: 5px;
font-size: 1.4em;
background: #e2e1d7 url(../images/input-bg.gif) repeat-x;
border: none;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#comment-form fieldset textarea {
height: 100px;
}
#comment-form fieldset input:focus,
#comment-form fieldset textarea:focus {
background: #fff;
}
#footer{
clear: both;
padding: 10px 0 10px 0;
font-size: 1em;
color: #9c836e;
float:right;
}
No comments:
Post a Comment