Hey Everyone!!
First time post here, i stumbled accross this site. I am a full time CPA but through my years in college and highschool I have always had a desire to do some freelance webdesign.
So after many years away from HTML and CSS i recently purchased a refresher book and decided to attempt at doing a portfoilo type layout. Keep in mind this is just testing my knowledge on using HTML and CSS in general. I would love it if you guys could comment on and give me suggestions with my code. Keep in mind this is my first ever layout attempt.
Hopefully I am heading in the right direction!
First time post here, i stumbled accross this site. I am a full time CPA but through my years in college and highschool I have always had a desire to do some freelance webdesign.
So after many years away from HTML and CSS i recently purchased a refresher book and decided to attempt at doing a portfoilo type layout. Keep in mind this is just testing my knowledge on using HTML and CSS in general. I would love it if you guys could comment on and give me suggestions with my code. Keep in mind this is my first ever layout attempt.
Hopefully I am heading in the right direction!
Code:
<!DOCTYPE html>
<html>
<head>
<title>Portfolio Layout</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- WRAPPER -->
<div id="container">
<!-- Header Container -->
<div id="header">
<!-- Nav Menu Block -->
<div id="nav">
<ul class="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Home</a></li>
</ul>
<div id="search">
<input class="submit" type="submit" value="Search">
<input class="input" type="text" value="30">
</div>
</div>
<!-- End of Nav Block -->
</div>
<!-- End of Header -->
<!-- Start of Content Area -->
<div id="content">
<div id="article_1">
<div class="article_top">
<h3>Article One</h3>
</div>
<div class="article_middle">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim lobortis est ut congue. Mauris ut tellus volutpat nisl pharetra sagittis at in risus. Vivamus pharetra, ipsum vel accumsan egestas, sem lorem pharetra massa, rhoncus vulputate leo tellus vel urna. Suspendisse placerat nibh at urna dictum sit amet lacinia sem venenatis. Praesent non orci nec lorem semper luctus a vel erat. Donec enim nisi, commodo eu porttitor non, consequat ac magna. Nam augue ipsum, dictum eu interdum quis, ornare id eros. Morbi ac mattis enim</p>
</div>
<div class="article_bottom">
<p>posted 02/23/2012</p>
</div>
</div>
<div id="article_2">
<div class="article_top">
<h3>Article Two</h3>
</div>
<div class="article_middle">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim lobortis est ut congue. Mauris ut tellus volutpat nisl pharetra sagittis at in risus. Vivamus pharetra, ipsum vel accumsan egestas, sem lorem pharetra massa, rhoncus vulputate leo tellus vel urna. Suspendisse placerat nibh at urna dictum sit amet lacinia sem venenatis. Praesent non orci nec lorem semper luctus a vel erat. Donec enim nisi, commodo eu porttitor non, consequat ac magna. Nam augue ipsum, dictum eu interdum quis, ornare id eros. Morbi ac mattis enim</p>
</div>
<div class="article_bottom">
<p>posted 02/23/2012</p>
</div>
</div>
<div id="article_3">
<div class="article_top">
<h3>Article Three</h3>
</div>
<div class="article_middle">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim lobortis est ut congue. Mauris ut tellus volutpat nisl pharetra sagittis at in risus. Vivamus pharetra, ipsum vel accumsan egestas, sem lorem pharetra massa, rhoncus vulputate leo tellus vel urna. Suspendisse placerat nibh at urna dictum sit amet lacinia sem venenatis. Praesent non orci nec lorem semper luctus a vel erat. Donec enim nisi, commodo eu porttitor non, consequat ac magna. Nam augue ipsum, dictum eu interdum quis, ornare id eros. Morbi ac mattis enim</p>
</div>
<div class="article_bottom">
<p>posted 02/23/2012</p>
</div>
</div>
</div>
<!-- End Content Area -->
<div id="footer">
<p>footer information here</p>
</div>
<!--End of Footer -->
</div> <!-- End of Container -->
</body>
</html>
Code:
/* CSS for Port Test */
*{
font-family: Georgia;
color: white;
font-size: 16px;
}
body{
background-color: #B0B0B0;
background-repeat: none;
margin: 0px;
}
#container{
width:1000px;
height: 900px;
margin: auto;
padding: 0px;
}
#header{
width:1000px;
height: 295px;
float:left;
background: rgba(104, 104, 104, .6);
}
#nav{
width: 1000px;
height: 50px;
float:left;
background: rgba(0, 0, 0, .6);
border-bottom: 3px solid #332244;
}
.nav li{
list-style-type: none;
display: inline;
margin-left: 10px;
padding: 0 5px 0 5px;
text-transform: uppercase;
float: right;
}
#search{
float:left;
margin:0;
opacity: none;
padding-left: 10px;
}
.submit{
border-radius: 5px;
color: black;
}
.input{
border-radius: 25px;
}
.nav a{
text-decoration: none;
}
.nav li:hover{
color: black;
background: white;
}
.nav a:hover{
color:black;
}
#content{
float: left;
width: 1000px;
background: rgba(51, 34, 68, .5);
margin-top: 5px;
background-repeat: repeat-y;
}
.article_top{
height:36px;
float left;
background: rgba(104, 104, 104, .8);
border: 1px solid #686868;
margin: 10px 0 0 10px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding-left: 10px;
}
.article_middle{
background: rgba(104, 104, 104, .8);
background-repeat: repeat-y;
border: 1px solid #686868;
margin: 0px 0px 0 10px;
padding-left: 10px;
}
.article_bottom{
height:36px;
float left;
background: rgba(104, 104, 104, .8);
border: 1px solid #686868;
margin: 0px 0px 10px 10px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
padding-right: 10px;
text-align: right;
}
#article_1{
width: 300px;
float: left;
margin: 10px 0px 10px 30px;
}
#article_2{
float: left;
width: 300px;
margin: 10px 0 10px 10px;
}
#article_3{
width: 300px;
float: left;
margin: 10px 0 10px 10px;
}
#footer{
width: 1000px;
height: 200px;
float: left;
background: rgba(0, 0, 0, .6);
margin-top: 5px;
text-align: center;
}
Last edited:
