Web Programming for Wordpress Website Part2

Sunday, March 19, 2017

HTML Code - Youtube Video Embed, Google Search and Download File

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<center>
<a href="https://docs.google.com/spreadsheets/d/1-NB_NpH1FXuIyCp_n7g8W8jJn_SZTQdTBsAevtodHAM/edit?usp=sharing" target="_blank">free download my link</a>

<a href="https://www.4shared.com/office/2gk-_frFei/SHAH.html" target="_blank">free download my cv</a>

<h2> web design class 01</h2>
<iframe width="500" height="350" src="https://www.youtube.com/embed/JchqNdmTbig" frameborder="0" allowfullscreen></iframe>

</center>

<center>

<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF=" http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value="en">

</td></tr></TABLE>
</FORM>
</center>


<center><script type="text/javascript" src="http://widget.supercounters.com/flag.js"></script><script type="text/javascript">sc_flag(1386125,"FFFFFF","000000","cccccc",2,100,0,0)</script><br><noscript><a href="http://www.supercounters.com/">Flag Counter</a></noscript>
</center>


</body>
</html>

Result of Above Code:

HTML Code for Theme -Shakil Project

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link href="images/favicon.ico" rel="shortcut icon">
</head>

<body>
<div class="main_layout">

<div class="box_image">
<div class="header">
<div class="logo"><font color="#C7FBCD">SKYCE</font>DENT
<div class="icon"><img src="images/te2.png" width="40" height="40"> </div>

</div>

<div class="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="aboutus.html">ABOUT US</a></li>
<li><a href="services.html">SERVICES</a></li>
<li><a href="ourprice.html">OUR PRICE</a></li>
<li><a href="contactus.html">CONTACT US</a></li>
</ul>
</div>

</div>
<div class="text"><font color="#33CC00">DIAMONDS</font><br/>
<font color="#000000"> ARE FOREVER</font><br/>
<font color="#303030">SKYCE IS JUST FOR FUN </font>

<div class="icon2"> More</div>

</div>

</div>

<div class="box1"> SKYCE DIAMONDS<br/>
DENTAL JEWELLERY
<div class="line1"> </div>

</div>
<div class="box2"> HIGHEST STANDARDS OF <br/>
DENTAL TREATMENTS

<div class="line1"> </div>
</div>
<div class="box3"> DIAGNOSING UNIQUE <br/>
PROBLEMS & ORAL SURGERY</div>

<div class="line"> </div>

<div class="wrapper">
<div class="ban_text"> DENTAL JEWELLERY</div>
<div class="ban_text2"> STRONG TEETH</div>
<div class="ban_text3"> BLEACHING</div>

<div class="banner"><img src="images/d2.jpg" width="250" height="200"> </div>
<div class="banner2"><img src="images/banner33.jpg" width="250" height="200"> </div>
<div class="banner3"><img src="images/Banner1.jpg" width="250" height="200"> </div>

<div class="text_box">Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet

<div class="read1"> More </div>

</div>

<div class="text_box2">
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet

<div class="read2"> More</div>

</div>

<div class="text_box3">
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet

<div class="read2"> More</div>

</div>

</div>

<div class="container">

<div class="text2"><font color="#000000">STEP BY STEP<br/>
PROCEDURE</font> <br/>

<font color="#333333" size="2">TO APPLY TOOTH JEWELLERY: </font> <br/>

<p>Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet</p>

<div class="read3">More</div>

</div>

</div>

<div class="feedback_box">
<div class="icon3"> <img src="images/a.png" width="50" height="50"></div>

<div class="feedback"><font size="5" color="#FF6600">EASY TO REMOVE</font><br/>

Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet
Lorem ipsum dolor dit amet Lorem ipsum

<div class="icon5"> Learn more
<div class="symbol"> </div>

</div>
</div>

<div class="icon4"><img src="images/a2.png" width="50" height="50"> </div>

<div class="feedback2"><font size="5" color="#00CC00">No drilling</font><br/>
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet
Lorem ipsum dolor dit amet Lorem ipsum

<div class="icon5"><font color="#00CC00"> Learn more</font>
<div class="symbol2"> </div>

</div>

</div>

</div>

<div class="text_header"> NEWS & EVENTS</div>

<div class="footer">
<div class="date"> <font size="8">18</font><br/>
MARCH</div>

<div class="row"> </div>
<div class="footer_left"> Lorem ipsum<br/>
dolor dit amet lorem<br/>
<p>Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet</p>

Lorem<br>

</div>

<div class="date2"><font size="8">14</font><br/>
APRIL</div>

<div class="row2"> </div>
<div class="footer_right">
Lorem ipsum<br/>
dolor dit amet lorem<br/>
<p>Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet
Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet</p>

Lorem<br>

</div>

</div>

<div class="design"> ©Copyrights 2017 ! Dental Clinic templates<br/>
Designed by shahriar</div>

</div>
</body>
</html>

CSS Code for Theme -Shakil Project

@charset "utf-8";

/* CSS Document */

body

{background:#CCC; margin:0px;}

.main_layout

{width:960px; height:1540px; margin:0px auto; background:#FFF;}

.header

{width:960px; height:100px; margin:0px; background:rgba(116,211,221,.7); float:left;}

.box_image

{width:960px; height:300px; margin:0px 0px 5px 0px; background-image: url(../images/skyce.jpg);

background-repeat:no-repeat;

float:left;}

.icon

{width:40px; height:40px; margin:-45px 0px 0px 230px; background:; float: left;

}

.icon a{ color:#FFF;}

.logo

{width:280px; height:50px; margin:25px 0px 25px 0px; background:; float: left;

text-align:center; text-decoration:none; font-weight:bold; line-height:50px; font-size:28px; color:#FFF;}

.menu

{width:500px; height:35px; margin:32.5px 50px 0px 0px; background:; float: right;}

.menu ul{ margin:0px; padding:0px; list-style:none;}

.menu li{ display:inline;}

.menu a{ width:100px; height:35px; float:left; margin:0px; padding:0px;

text-align:center; text-decoration:none; font-weight:bold; line-height:35px; font-size:14px; color:#FFF;}

.menu a:hover{ background:rgba(61,201,184,.5);}

.text

{width:250px; height:140px; margin:20px 100px 0px 0px; float: right; background:;

font-weight:bolder; font-size:20px; color:#fff;}

.icon2

{width:60px; height:30px; margin:10px 0px 0px 0px; background:#3DB0E9; float: left;

font-weight:bolder; font-size:16px; line-height:30px; text-align:center; border-radius:5px 5px 5px 5px;}

.box1

{width:250px; height:70px; margin:0px 50px 0px 50px; float:left; background:#;

color:#0396A8; font-weight:bolder; padding-top:30px; font-family: 'Roboto Slab', serif;}

.box2

{width:250px; height:70px; margin:0px 0px 0px 0px; float:left; background:#;

color:#0396A8; font-weight:bolder; padding-top:30px; font-family: 'Roboto Slab', serif;}

.box3

{width:250px; height:70px; margin:0px 0px 0px 50px; float:left; background:#;

color:#0396A8; font-weight:bolder; padding-top:30px; font-family: 'Roboto Slab', serif;}

.line

{width:960px; height:5px; margin:5px 0px 0px 0px; float:left; background:#F4F4F4;}

.line1

{width:80px; height:2px; margin:-20px 0px 0px 180px; float:left; background:#E5E7E6;

transform:rotate(-55deg);}

.wrapper

{width:960px; height:400px; margin:0px auto; background:#; float:left;}

.ban_text

{width:250px; height:30px; margin:0px 50px 0px 50px; float:left; background:#;

font-weight:bolder; font-size:18px; color:#0C0; line-height:30px;}

.ban_text2

{width:250px; height:30px; margin:0px 0px 0px 0px; float:left; background:#;

font-weight:bolder; font-size:18px; color:#0C0; line-height:30px;}

.ban_text3

{width:250px; height:30px; margin:0px 0px 0px 50px; float:left; background:#;

font-weight:bolder; font-size:18px; color:#0C0; line-height:30px;}

.banner

{width:250px; height:200px; margin:0px 50px 0px 50px; float:left; background:#069;

}

.banner2

{width:250px; height:200px; margin:0px 0px 0px 0px; float:left; background:#fff;}

.banner3

{width:250px; height:200px; margin:0px 0px 0px 50px; float:left; background:#068;

}

.text_box

{width:250px; height:140px; margin:0px 50px 0px 50px; float:left; background:;

column-count:3; font-weight:lighter; font-size:16px;}

.text_box2

{width:250px; height:140px; margin:0px 0px 0px 0px; float:left; background:;}

.text_box3

{width:250px; height:140px; margin:0px 0px 0px 50px; float:left; background:;}

.read1

{width:60px; height:30px; margin:25px 0px 0px 0px; background:#67D74D; float: left;

font-weight:bolder; color: #FFF; line-height:30px; text-align:center;}

.read2

{width:60px; height:30px; margin:25px 0px 0px 0px; background:#686868; float: left;

font-weight:bolder; color: #FFF; line-height:30px; text-align:center;}

.container

{ width:960px; height:300px; margin:0px 0px 5px 0px; background-image:url(../images/b1.jpg);

background-repeat:no-repeat; float:left;}

.text2

{width:250px; height:250px; margin:20px 0px 0px 50px; float: left; background:#;

font-weight:bolder; font-size:32px; color:#fff;}

{text-align:justify; font-size:12px; column-count:2;}

.read3

{width:60px; height:30px; margin:5px 0px 0px 0px; background:#67D74D; float: left;

font-weight:bolder; color: #FFF; line-height:30px; text-align:center; font-size:16px;}

.feedback_box

{width:960px; height:120px; margin:0px 0px 0px 0px; float:left; background:#;}

.feedback

{width:250px; height:120px; margin:0px 0px 0px 20px; float:left; background:#;

font-weight:bolder; color:#333; font-size:16px;}

.feedback2

{width:250px; height:120px; margin:0px 0px 0px 20px; float:left; background:#;

font-weight:bolder; color:#333; font-size:16px;}

.icon3

{width:50px; height:120px; margin:0px 0px 0px 50px; background:#; float:left;

}

.icon4

{width:50px; height:120px; margin:0px 0px 0px 100px; background:#; float:left;

}

.icon5

{width:100px; height:20px; margin:0px 0px 0px 0px; background:; float: left;

color:#F60;}

.symbol

{width:10px; height:10px; margin:5px 5px 0px 0px; background:#F60; float:right;

border-radius:30px;}

.symbol2

{width:10px; height:10px; margin:5px 5px 0px 0px; background:#0C0; float:right;

border-radius:30px;}

.text_header

{width:960px; height:40px; margin:0px 0px 5px 0px; float:left; background:#F7F7F7;

text-align:center; font-size:24px; color:#000; font-weight:bolder; line-height:40px;}

.footer

{width:960px; height:200px; margin:0px 0px 5px 0px; float:left; background:#;}

.footer_left

{width:300px; height:200px; margin:0px 0px 0px 5px; float:left; background:#;

font-weight:bolder; color:#D9D598; color:#000; font-size:18px;}

.footer_right

{width:300px; height:200px; margin:0px 0px 0px 5px; float:left; background:#;

font-weight:bolder; color:#D9D598; color:#000; font-size:18px;}

.date

{width:60px; height:150px; margin:0px 0px 0px 45px; background: #; float: left;

font-weight:bolder; color:#C9ABAB; text-align:center; padding-top:50px;}

.date2

{width:60px; height:150px; margin:0px 0px 0px 40px; background: #; float: left;

font-weight:bolder; color:#D9D598; text-align:center; padding-top:50px;}

.row

{width:3px; height:180px; margin:10px 5px 5px 5px; background:#C9ABAB; float:left;}

.row2

{width:3px; height:180px; margin:10px 5px 5px 5px; background:#D9D598; float: left;}

.design

{width:960px; height:40px; margin:0px 0px 0px 0px; float:left; background:#F7F7F7;

text-align:center; padding-top:10px; color:#666;}

Result Code for Theme -Shakil Project

HTML Code for Theme -Moshiur Project

<!doctype html>

<html>

<head>

<title>SKYCEDENT</title>

</head>

<body>

<div class="title"><font face="Century Gothic" size="+4" color="#FFFFFF">SKYCEDENT</font><img src="images/icon_07-260x260.png" width="40px" height="40px"> </div>

<li><a href="#">ABOUT US</a></li>

<li><a href="#">SERVICE</a> </li>

<li><a href="#">SCHEDULE</a></li>

<li><a href="#">CONTACT US</a></li>

</ul></font></div>

</div>

<div class="image" ><div id="example2"><font size="+4" color="#FFF" face="Century Gothic"><b>DIAMONDS</b></font><br><font size="+2" color="#000" face="Century Gothic">ARE FOREVER</font><br><font size="+3" color="#666666" face="Century Gothic" ><b>SKYCE IS JUST FOR FUN</font><div id="success"><font size="+1" color="#FFF" face="Century Gothic" >LEARN MORE</font></b></div></div></div>

<div class="subbox1"><b><font size="+2" color="#09F" face="Century Gothic"><br>SKYCEDENT DIAMONDS <br>DENTAL JWELLARY</div><div class="row4"></div><div class="subbox2"><br>HIGHEST STANDARD OF DENTAL TREATMENT</div><div class="row5"></div><div class="subbox3"><br>DIAGONISING UNIQUE PROBLEM AND DENTAL SURGERY</font></b></div></div>

<div class="box1"><font size="+3" color="#000" face="Century Gothic">MEET OUR DENTISTS DIRECTLY<br></font><img src="images/dental_antibiotic_premedication_dentist_doctor_disagree.jpg" width="300px" height="200px" id="box1"><font size="+1" color="#000" face="Century Gothic">We have world class dentists with experience and well training. Our dentists are globaly approved. We are also trying our best to improve ourselves.</font><div id="success2"><font size="+1" color="#FFF" face="Century Gothic"><b>LEARN MORE</b></font></div></div>

<div class="box2"><font size="+3" color="#000" face="Century Gothic">LEARN MORE<br> ABOUT US</font><img src="images/des-moines-dentist-slider-4.jpg" width="300px" height="200px" id="box1"><font size="+1" color="#000" face="Century Gothic">We have world class dentists with experience and well training. Our dentists are globaly approved. We are also trying our best to improve ourselves.<div id="success2"><font size="+1" color="#FFF" face="Century Gothic"><b>LEARN MORE</b></font></div></div>

<div class="box3"><font size="+3" color="#000" face="Century Gothic">GET APPOINTMENT<br> WITH US</font><img src="images/download.jpg" width="300px" height="200px" id="box1"><font size="+1" color="#000" face="Century Gothic">We have world class dentists with experience and well training. Our dentists are globaly approved. We are also trying our best to improve ourselves.<div id="success2"><font size="+1" color="#FFF" face="Century Gothic"><b>LEARN MORE</b></font></div></div>

</div>

<div class="image2" ><div id="example3"><font size="+6" color="#333333" face="Century Gothic">STEP BY STEP</font><br><font size="+4" color="#000" face="Century Gothic">PROCEDURE</font><br><font size="+3" color="#666666" face="Century Gothic" ><b>TO APPLY TOOTH JWELLARY</font><div id="success"><font size="+1" color="#FFF" face="Century Gothic" >LEARN MORE</font></b></div></div>

<div class="box10"><font size="+3" color="#2BACE0" face="Century Gothic">EASY TO REMOVE</font><br><br><font size="+1" color="#000" face="Century Gothic">We have world class dentists with experience and well training. Our dentists are globaly approved. We are also trying our best to improve ourselves.<div id="success3"><font size="+1" color="#FFF" face="Century Gothic"><b>LEARN MORE</b></font></div></div>

<div class="box11"><font size="+3" color=":#2BACE0" face="Century Gothic">NO DRILLING</font><br><br><font size="+1" color="#000" face="Century Gothic">We have world class dentists with experience and well training. Our dentists are globaly approved. We are also trying our best to improve ourselves.<div id="success3"><font size="+1" color="#FFF" face="Century Gothic"><b>LEARN MORE</b></font></div></div>

<div class="box1010"><font size="+3" color="#33333" face="Century Gothic">NEWS & EVENT</font></div>

<div class="picture3"><font size="+5" color="#33333" face="Century Gothic">16th<br><font size="+2" color="#33333" face="Century Gothic">MARCH</font></font><div class="row"></div></div>

<div class="subbox7">We have world class dentists with experience and well training. Our dentists are globaly approved. We are also trying our best to improve ourselves.<br> <br>LEARN MORE>></div>

<div class="picture4"><font size="+5" color="#33333" face="Century Gothic">2nd<br><font size="+2" color="#33333" face="Century Gothic">march</font></font><div class="row2"></div></div>

<div class="subbox8">We have world class dentists with experience and well training. Our dentists are globaly approved. We are also trying our best to improve ourselves.<br> <br>LEARN MORE>></div>

<div class="box1016"><font size="+1" color="#000" face="Century Gothic"><u>HOME PAGE ABOUT US SEVICE SCHEDULE CONTACT ME <br><b></b></u></font></font></div>

<div class="box1018"><b> <font size="+1" color="#2BACE0" face="Century Gothic"><i class="material-icons" style="font-size:25px">place </i><i class="fa fa-facebook-square" style="font-size:25px"></i><i class="material-icons" style="font-size:25px">phonelink </i></font></b></div>

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

</body>

</html>

CSS Code for Theme -Moshiur Project

@charset "utf-8";

/* CSS Document */

body{background-color:#F7FAFF; margin:0px auto;

}

.header

{ width:100%; height:100px; margin-top:0px; float:left; background-color:#2BACE0; opacity:.6; margin:-0px 0px -100px 0px; }

.title

{width:320px; height:60px; background-color:#2BACE0; margin:15px 30px 0px 70px; text-align:center;}

.menu

{width:750px; height:70px; float:right; margin:-60px 0px 0px 50px; }

.image

{width:1355px; height:500px;}

.border

{width:1258px; height:2px; border-radius:10px; margin:10px -20px 40px 10px; box-shadow: #999 20px 5px 20px;}

.mainbox

{width:1355px; height:200px; margin:30px 0px 0px 0px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f9fe+96,d6f0fd+100 */

background: #f2f9fe; /* Old browsers */

background: -moz-linear-gradient(top, #f2f9fe 96%, #d6f0fd 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #f2f9fe 96%,#d6f0fd 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #f2f9fe 96%,#d6f0fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */}

.subbox1

{width:330px; height:200px; margin:30px 0px 0px 150px; float:left; line-height:40px; }

.subbox2

{width:330px; height:200px; margin:-150px 0px 0px 40px; float:left; line-height:40px; }

.subbox3

{width:330px; height:200px; margin:-200px 0px 0px 900px; float:left; line-height:30px; }

.box1

{width:330px; height:550px; opacity:1.6; float:left; margin:0px 0px -80px 110px; text-align:center; padding:10px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f9fe+96,d6f0fd+100 */

background: #f2f9fe; /* Old browsers */

background: -moz-linear-gradient(top, #f2f9fe 96%, #d6f0fd 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #f2f9fe 96%,#d6f0fd 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #f2f9fe 96%,#d6f0fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */}

#box1{padding:px px; margin:0px 0px 20px 2px; border:2px solid #FFF; border-radius:5px;}

.box2

{width:330px; height:550px; opacity:1.6; float:left; margin:0px 0px -80px 40px; text-align:center; padding:10px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f9fe+96,d6f0fd+100 */

background: #f2f9fe; /* Old browsers */

background: -moz-linear-gradient(top, #f2f9fe 96%, #d6f0fd 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #f2f9fe 96%,#d6f0fd 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #f2f9fe 96%,#d6f0fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */}

.box3

{width:330px; height:550px; opacity:1.6; float:left; margin:0px 50px -80px 40px; text-align:center; padding:10px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f9fe+96,d6f0fd+100 */

background: #f2f9fe; /* Old browsers */

background: -moz-linear-gradient(top, #f2f9fe 96%, #d6f0fd 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #f2f9fe 96%,#d6f0fd 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #f2f9fe 96%,#d6f0fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */}

.image2

{width:1355px; height:500px; margin:20px 0px -300px 0px;}

.text

{text-align:center; width:400px; height:400px; margin:0px 0px 0px 0px;}

.box10

{width:400px; height:300px; float:left; margin:-250px 00px 20px 240px;}

.box11

{width:400px; height:300px; float:left; margin:-250px 00px -40px 230px;}

.row{width:5px; height:200px; background-color: #2BACE0; margin:-110px 0px 0px 140px;}

.row2{width:5px; height:200px; background-color: #2BACE0; margin:-110px 0px 0px 140px;}

.row4{width:5px; height:150px; background-color: #2BACE0; margin:40px 0px 0px 450px; transform:rotate(25deg);}

.row5{width:5px; height:150px; background-color: #2BACE0; margin:-150px 0px 0px 850px; transform:rotate(25deg);}

.picture

{width:200px; height:180px; margin:-230px 0px 0px 70px; float:left;}

.picture4

{width:100px; height:100px; margin:30px 0px 0px 20px; float:left; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+77,2ab0ed+100 */

background: #e4f5fc; /* Old browsers */

background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 77%, #2ab0ed 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 77%,#2ab0ed 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 77%,#2ab0ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */ text-align:center; line-height:40px; padding:10px;}

.picture3

{width:100px; height:100px; margin:30px 0px 0px 70px; float:left; text-align:center; line-height:40px; padding:10px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+77,2ab0ed+100 */

background: #e4f5fc; /* Old browsers */

background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 77%, #2ab0ed 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 77%,#2ab0ed 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 77%,#2ab0ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */}

.picture2

{width:200px; height:180px; margin:-200px 0px 0px 70px; float:left;}

.box1010

{width:1400px; height:45px; float:left; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+64,f6f6f6+100 */

background: #ffffff; /* Old browsers */

background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 64%, #f6f6f6 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 64%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 64%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */

margin:-40px 0px 0px 0px; text-align:center; line-height:45px;}

.subbox7

{width:330px; height:200px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f9fe+96,d6f0fd+100 */

background: #f2f9fe; /* Old browsers */

background: -moz-linear-gradient(top, #f2f9fe 96%, #d6f0fd 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #f2f9fe 96%,#d6f0fd 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #f2f9fe 96%,#d6f0fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */ margin:30px 0px 0px 80px; float:left; padding:5px 0px;}

.subbox8

{width:330px; height:200px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f9fe+96,d6f0fd+100 */

background: #f2f9fe; /* Old browsers */

background: -moz-linear-gradient(top, #f2f9fe 96%, #d6f0fd 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #f2f9fe 96%,#d6f0fd 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #f2f9fe 96%,#d6f0fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */ margin:40px 0px 30px 60px; float:left;}

#example2 {

background: url(../images/380ec080535b64614639407d89c3bd50.jpg); background-size:1365px 450px; height:400px; margin:0px; padding:180px; background-repeat:no-repeat;}

#example3 {

background: url(../images/bendigo-dentist.jpg); background-size: 1365px 500px; width:1300px; height:500px; margin:30px 0px 0px 0px; padding:150px; background-repeat:no-repeat; float:left; }

#success {

border: none; color:#FFF; padding:15px 2px; font-size: 16px; cursor: pointer; background-size:5px 2px; height:20px; margin:20px 0px 0px 0px;

background-repeat:no-repeat; width:150px; border-radius:20px; text-align:center; opacity:.6; line-height:20px;}

#success {background-color: #2BACE0; } /* Green */

#success:hover {background-color: #46a049; border-radius:20px; background-color: #03F; color: #FFF; transition:1s;}

#success2 {

border: none; padding:10px 2px; font-size: 16px; cursor: pointer; background-size:5px 2px; height:20px; margin:20px 0px 0px 85px; background-repeat:no-repeat;

width:150px; border-radius:20px;

text-align:center; line-height:20px; }

#success2 {background-color:#2BACE0;

color:#FFF; } /* Green */

#success2:hover {background-color:#2BACE0; border-radius:20px; background-color: #03F; color: #FFF; transition:1s;}

#success3 {

border: none; padding:10px 2px; font-size: 16px; cursor: pointer; background-size:5px 2px; height:20px; margin:20px 0px 0px 0px; background-repeat:no-repeat;

width:150px; border-radius:20px; text-align:center; line-height:20px; }

#success3 {background-color:#2BACE0; color:#FFF; } /* Green */

#success2:hover { background-color: #03F; border-radius:20px; background-color: #03F; color: #FFF; transition:1s;}

.box1016

{width:1400px; height:45px; margin:-30px 0px 0px 350px; text-align: center; line-height:45px; column-rule:3px solid #09F; column-count:10; line-height:45px;}

.box1017

{width:1400px; height:45px; float:left;

margin:10px 0px 0px -10px; text-align:center; line-height:45px;}

.box1018 {width:1400px; height:45px; float:left;

margin:0px 0px -20px -10px; text-align:center; line-height:45px; float:left;}

Lectra Wilcom