Designing Roomes rates Tables (show rowspan and colspan).

HTML

<div id="contents">
    <h2>Rooms Rates :</h2>
        <div class="CSSTableGenerator" >
            <table >
                <tr>
                    <td>Room Type</td>
                    <td >Weekdays (RM- nett)</td>
                    <td>Weekends (RM- nett)</td>
                    <td>S/Peak (RM- nett)</td>
                </tr>
                <tr>
                    <td >SUPERIOR</td>
                    <td colspan="3">129.00</td>
                </tr>
                <tr>
                    <td >DELUXE</td>
                    <td rowspan="2">158.00</td>
                    <td rowspan="2" colspan="2">168.00</td>
                    
                </tr>
                <tr>
                    <td >DELUXE SUITE</td>
                </tr>
                <tr>
                    <td >SUPER DELUXE</td>
                    <td>168.00</td>
                    <td>188.00</td>
                    <td>198.00</td>
                </tr>
                <tr>
                    <td >FAMILY SUPERIOR</td>
                    <td>199.00</td>
                    <td>219.00</td>
                    <td>239.00</td>
                </tr>
                <tr>
                    <td >SUPER DELUXE</td>
                    <td>189.00</td>
                    <td>209.00</td>
                    <td>219.00</td>
                </tr>
            </table>
        </div>
        <p>
            ** THE ABOVE RATE ARE INCLUSIVE OF BREAKFAST
        </p>
</div>      

CSS

.CSSTableGenerator 
{
    margin:0px auto;
    width:900px;
    margin-bottom:15px;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #000000;
    border-radius:5px;
}

.CSSTableGenerator table
{
    border-collapse: collapse;
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}


.CSSTableGenerator tr:nth-child(odd)
{ 
    background-color:#ffffff; 
}

.CSSTableGenerator tr:nth-child(even)   
{ 
    background-color:#D3D3D3;
}
 
 .CSSTableGenerator tr:first-child td
{
        
    background-color:#9370DB;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:14px;
    font-family:Arial;
    font-weight:bold;
    color:#ffffff;
}

 .CSSTableGenerator td
{
    vertical-align:middle;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:center;
    padding:7px;
    font-size:12px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
}

Images hover showing the info
HTML

<div id="contents">                     
    <div class="body">
        <h1>Food</h1>
        <ul id="foods">
            <li>
                <h2><a href="foods.html">Food Culture</a></h2>
                <div class="infos">
                    <a href="foods.html"><img src="images/curture_food.jpg" alt="Img" height="169" width="780"><span class="cover"></span></a>
                    <p>
                        <span style="font-style:italic ; font-size:30px;">Satay</span> I'm a product overview. Here you can write more information about your product. Buyers like to know ...
                    </p>
                </div>
            </li>
            <li>
                <h2><a href="foods.html">Sumptuous Desserts</a></h2>
                <div class="infos">
                    <a href="foods.html"><img src="images/desserts.jpg" alt="Img" height="169" width="780"><span class="cover"></span></a>
                    <p>
                        <span style="font-style:italic ; font-size:30px;">Choco Ice Cream Sandwich</span> I'm a product overview. Here you can write more information about your product. Buyers like to know ...
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

#foods li div.infos
 {
    height: 169px;
    width: 780px;
    position: relative;
}

#foods li div.infos p 
{
    background: url(images/bg-foodDetail.png) repeat;
    color: #316e66;
    display: none;
    height: 60px;
    width: 740px;
    padding: 6px 20px 0;
    position: absolute;
    left: 0;
    bottom: 0;
}

#foods li div.infos p span 
{
    display: block;
    font: 22px/22px "Times New Roman";
}

#foods li div.infos:hover span.cover 
{
    background: url(images/bg-foodInfos.png) repeat;
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

#foods li div.infos:hover p
{
    display: block;
}

• Font : Colour, size, bold, underlined, italics.
• Heading / Paragraph : Alignments (center, right, left).
• Images.
• Tables (show rowspan and colspan).
• Hyperlinks (Text and image).
• Lists : ordered, unordered and image/animated bullet.
• Multimedia elements (sound and movie).
• Cascading Style Sheet (CSS) : External, Internal, Inline.
• Forms.



Designing header navagation
HTML

<div id="navigation">
    <ul>
        <li class="selected">
            <a href="index.html">Home</a>
        </li>
        <li>
            <a href="about.html">About us</a>
        </li>
        <li>
            <a href="rooms.html">Rooms</a>
        </li>
        <li>
            <a href="photo.html">Gallery</a>
        </li>
        <li>
            <a href="foods.html">Food</a>
        </li>
        <li>
            <a href="facilities.html">Facilities</a>
        </li>
        <li>
            <a href="news.html">News</a>
        </li>
        <li>
            <a href="contact.html">Contact</a>
        </li>
    </ul>
</div>

CSS

/** Navigation **/
#navigation 
{
    background: #6B2D5F;
    border-top-style:ridge;
    border-bottom-style:ridge;
    border-width:6px;
    border-color:#761466;
    clear: both;
    height: 40px;
    width: 980px;
}

#navigation ul
 {
    display: inline-block;
    width: 1000px;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#navigation li 
{
    float: left;
    background-repeat: no-repeat;
    height: 45px;
    width: 122px;
    margin: 0px;
    padding-left: 1px;
    text-align: center;
}

#navigation li a 
{
    color: #fff;
    display: block;
    font: bold 14px/48px Arial;
    height: 45px;
    text-decoration: none;
    text-transform: uppercase;
}

#navigation li a:hover 
{
    background-position: 0 -59px;
    color: #6d6157;
}

#menu_item
{   
   background: url(images/btn.png);
   padding: 0px 10px;
   border-radius: 8px;  
   color: #000000;
   font-size: 15px;
   width:130px;
   height:30px;
   list-style-type:none;
   text-align:center;
   text-decoration: none;

}

#menu_item a
{   
    color:#000000;
    text-decoration:none;
}
    
#menu_item a:hover
{   
    color:#6d6157;
    text-decoration:none;
}

Contact Forms :


Designing contact page for Klebang Beach Resort
HTML

<div id="contacts">
    <fieldset>
        <legend>Feedback</legend>
        <form name="feedback" action="" method="">

            <table>                                 
                <tr>
                    <td>Name:</td>
                    <td><input type="text" name="feedback_name" placeholder="Your name..."></td>
                </tr> 
                <tr>
                    <td>Email:</td>
                    <td><input type="email" name="feedback_email" placeholder="Your email..."></td>
                </tr> 
                <tr>
                    <td>Subject:</td>
                    <td><input type="text" name="feedback_subject" placeholder="Subject..."></td>
                </tr> 
                <tr>
                    <td class="txtarea">Message:</td>
                    <td><textarea placeholder="Comments..."></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" value="" class="btn">
                        <input type="reset" value="" class="reset"/>
                    </td>
                </tr>                                   
            </table>

        </form>
    </fieldset>
</div>

CSS

#contact fieldset
 {
    float: right;
    color: #5a4535;
    height: 320px;
    width: 420px;
    border: 1px solid #5a4535;
    padding: 19px 19px 6px;
}

#contact textarea 
{
    height: 143px;
    line-height: 17px;
    width: 338px;
    border: 1px solid #5a4535;
    border-radius: 2px;
    overflow: auto;
    resize: none;
}

#contact p span 
{
    display: block;
    text-indent:0px;
    text-transform: uppercase;
}

#contents p 
{
    font-size: 15px;
    text-indent:50px;
    line-height: 30px;
    padding: 0 0 8px 2px;
}