/* Website template by freewebsitetemplates.com */
body {
background: #ffb744 url(../images/bg-body.jpg) repeat left bottom;
font-family: "Times New Roman", Times, serif;
margin: 0;
}
#background {
background: url(../images/bg-pattern.jpg) repeat-x center top;
min-height: 1318px;
}
#page {
width: 960px;
margin: 0 auto;
}
img {
border: 0;
}
/*------------------------------ Sprites ------------------------------*/
#navigation li, #navigation li a:hover, #navigation li.selected a {
background-image: url(../images/bg-menu.png);
background-repeat: repeat-x;
}
#contents div.box, #contents div.box > div, #contents div.body {
background-image: url(../images/content-box.png);
background-repeat: no-repeat;
}
#main div.box, #main div.box > div, #main div.box > div > div {
background-image: url(../images/bg-box.png);
background-repeat: no-repeat;
}
/*------------------------------ HEADER ------------------------------*/
#header {
margin-bottom: 20px;
padding-top: 20px;
}
/** Logo **/
#logo {
float: left;
margin-bottom: 20px;
margin-left: 49px;
}
/** Navigation **/
#navigation {
background: url(../images/bg-navigation.png) no-repeat;
clear: both;
height: 50px;
width: 860px;
margin: 0 auto;
padding: 1px;
}
#navigation ul {
display: inline-block;
width: 860px;
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-position: 0 -118px;
background-repeat: no-repeat;
height: 49px;
width: 122px;
margin: 0;
padding-left: 1px;
text-align: center;
}
#navigation li:first-child {
background: none;
margin-left: 0;
padding-left: 0;
}
#navigation li a {
color: #fff;
display: block;
font: bold 14px/48px Arial, Helvetica, sans-serif;
height: 49px;
text-decoration: none;
text-transform: uppercase;
}
#navigation li a:hover {
background-position: 0 -59px;
color: #6d6157;
}
#navigation li.selected a {
background-position: 0 0;
color: #e4e1bd;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
display: inline-block;
width: 865px;
padding: 0 47px;
}
#contents h1 {
color: #316e66;
font: 26px/30px "Times New Roman", Times, serif;
margin: 18px 0 20px;
padding-left: 2px;
text-transform: uppercase;
}
#contents div.body h1, #contents h2 {
color: #316e66;
font: 30px/30px "Times New Roman", Times, serif;
margin: 0 0 18px;
text-transform: uppercase;
}
#contents h2 {
font-size: 22px;
margin: 0 0 30px;
}
#contents h2 a {
color: #2c9688;
text-decoration: none;
}
#contents p {
color: #5a4535;
font-size: 15px;
line-height: 30px;
margin: 0;
padding: 0 0 24px 2px;
}
#contents p a {
color: #5a4535;
}
#contents p a:hover, #news div.sidebar ul li a:hover {
color: #917157;
}
/** box-shadow **/
#contents div.box {
background-position: left bottom;
margin-bottom: 20px;
margin-left: 1px;
padding: 0 0 6px;
}
#contents div.box > div {
background-position: -1745px top;
padding: 6px 0 0;
}
#contents div.body {
background-position: -871px top;
background-repeat: repeat-y;
min-height: 980px;
padding: 30px 40px 0;
}
/** Adbox **/
#adbox {
background: url(../images/bg-adbox.png) no-repeat left top;
width: 852px;
margin: 0 auto;
padding: 4px 5px 18px;
}
#adbox p {
font-size: 16px;
}
.ads {
float: right;
width: 220px;
border-left: 1px solid #bbbbbb;
margin-left: 20px;
padding-left: 20px;
}
hr {
border:0;
border-top: 1px solid #bbbbbb;
margin-bottom: 30px;
}
/** MAIN **/
#main {
float: left;
min-height: 100px;
width: 566px;
}
#main div.box {
background-position: left bottom;
margin-bottom: 12px;
padding: 0 0 6px;
}
#main div.box > div {
background-position: -1145px top;
padding: 6px 0 0;
}
#main div.box > div > div {
background-position: -572px top;
background-repeat: repeat-y;
padding: 17px;
}
#main div.box h3 {
color: #316e66;
font-weight: normal;
letter-spacing: 1px;
border-bottom: 1px dotted #9c8964;
margin: 0;
padding: 0 0 12px;
text-transform: uppercase;
}
#main div.box h4 {
font: 22px/24px "Times New Roman", Times, serif;
font-weight: normal;
margin: 6px 0 0;
}
#main div.box h4 a {
color: #5a4535;
text-decoration: none;
}
#main div.box ul {
list-style: none;
margin: 0;
padding: 0;
}
#main div.box ul li {
border-bottom: 1px dotted #9c8964;
}
#main div.box ul li span {
color: #5a4535;
display: block;
font-size: 14px;
margin-bottom: 12px;
}
#main div.box ul li p {
line-height: 24px;
padding: 0 0 3px;
}
/** SIDEBAR **/
#sidebar {
float: right;
height: auto;
width: 285px;
}
#sidebar div.section {
height: 144px;
margin-bottom: 12px;
}
#sidebar div.section:first-child {
padding: 3px 0 0;
}
#sidebar div.section > a:hover {
filter:alpha(opacity=60);
opacity: 0.6;
}
/** testimonials **/
#contents div#testimonials h3 {
color: #2c9688;
font-weight: normal;
letter-spacing: 1px;
border-bottom: 0;
padding-bottom: 0;
}
#testimonials p {
display: inline-block;
line-height: 24px;
padding-bottom: 3px;
}
#testimonials p span {
float: right;
}
#testimonials p span a {
color: #2c9688;
text-decoration: none;
}
#testimonials p span a:hover {
color: #2c9688;
}
/** Rooms, Foods Dive Sites **/
#rooms, #foods, #sites {
list-style: none;
margin: 0;
padding: 0;
}
#rooms li, #foods li, #sites li {
display: inline-block;
width: 784px;
border-top: 1px solid #b7b7b7;
padding: 30px 0;
position: relative;
}
#rooms li:first-child, #foods li:first-child, #sites li:first-child {
border-top: 0;
}
#rooms li img {
float: left;
border: 1px solid #2c9688;
margin-right: 15px;
}
#rooms .rate {
color: #316e66;
display: inline-block;
font: 16px/35px "Times New Roman", Times, serif;
height: 35px;
width: 138px;
border: 1px solid #5a4535;
text-align: center;
position: absolute;
bottom: 30px;
}
/** Food **/
#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", Times, serif;
}
#foods li > div.infos:hover span.cover {
background: url(../images/bg-foodInfos.png) repeat;
display: inline-block;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#foods li > div.infos:hover p {
display: block;
}
/** Dive Site **/
#sites li {
padding-bottom: 0;
}
#sites li img {
float: right;
border: 1px solid #2c9688;
margin-left: 15px;
}
/** News **/
#news {
display: inline-block;
width: 784px;
}
#news > div {
width: 560px;
border-right: 1px solid #bbbbbb;
padding-right: 35px;
}
#news > div img {
border: 1px solid #2c9688;
margin-bottom: 20px;
}
#news > div h2 {
margin-bottom: 12px;
}
#news > div span {
color: #5a4535;
display: block;
font: 15px/24px "Times New Roman", Times, serif;
margin-bottom: 30px;
}
#news > div span.author {
color: #2c9688;
display: block;
font-size: 14px;
margin-bottom: 20px;
}
#news div.sidebar {
float: right;
width: 160px;
border: 0;
padding: 0;
}
#news div.sidebar h3 {
color: #2c9688;
font-size: 20px;
font-weight: normal;
border-top: 1px solid #b7b7b7;
margin: 0 0 12px;
padding-top: 18px;
text-transform: uppercase;
}
#news div.sidebar h3:first-child {
border: 0;
padding-top: 0px;
}
#news div.sidebar ul {
list-style: none;
margin: 0 0 8px;
padding: 0;
}
#news div.sidebar ul li a {
color: #5a4535;
display: inline-block;
font-size: 15px;
margin-bottom: 6px;
text-decoration: none;
}
#news ul li {
margin-bottom: 12px;
}
/** Contact **/
#contact form {
float: right;
color: #5a4535;
height: 320px;
width: 420px;
border: 1px solid #5a4535;
padding: 19px 19px 6px;
}
#contact form table {
border-collapse: collapse;
}
#contact form table td {
padding-bottom: 6px;
}
#contact table td:first-child {
font-size: 14px;
line-height: 30px;
width: 180px;
text-transform: uppercase;
}
#contact table td.txtarea {
vertical-align: top;
}
#contact form input {
height: 17px;
line-height: 17px;
width: 278px;
border: 1px solid #5a4535;
border-radius: 2px;
}
#contact textarea {
height: 143px;
line-height: 17px;
width: 338px;
border: 1px solid #5a4535;
border-radius: 2px;
overflow: auto;
resize: none;
}
#contact input.btn {
background: url(../images/btn-send.png) no-repeat -70px 0;
cursor: pointer;
height: 26px;
width: 60px;
border: 0;
padding: 0;
margin: 0;
}
#contact input.btn:hover {
background-position: 0 0;
}
#contact p span {
display: block;
text-transform: uppercase;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
color: #594334;
font-size: 14px;
line-height: 48px;
margin: -38px 0 20px;
padding-top: 42px;
text-transform: uppercase;
}
#footer > div {
background-color: #ac9e94;
height: 48px;
width: 822px;
border-bottom: 1px solid #72675f;
border-top: 1px solid #cdbeb2;
margin: 0 auto;
padding: 0 20px;
text-align: right;
}
#footer ul.navigation {
float: left;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#footer ul.navigation li {
float: left;
margin-right: 10px;
}
#footer ul.navigation li a {
color: #594334;
padding: 0 5px;
text-decoration: none;
}
#footer ul.navigation li:first-child a {
border-left: 0;
padding-left: 0;
}
#footer ul.navigation li a:hover {
color: #eee7c3;
}
#footer ul.navigation li.active a {
color: #fff;
}
#footer p {
margin: 0;
text-align: center;
text-transform: none;
}
/** Connect **/
#connect {
float: right;
display: inline-block;
line-height: 26px;
margin: 12px 0 0;
}
#connect a {
background: url(../images/icons.png) no-repeat;
display: inline-block;
height: 23px;
width: 23px;
margin-left: 10px;
}
#connect a.pinterest {
background-position: 0 -33px;
}
#connect a.facebook {
background-position: 0 -98px;
}
#connect a.twitter {
background-position: 0 -164px;
width: 28px;
}
#connect a.googleplus {
background-position: 0 -230px;
}
#connect a.pinterest:hover {
background-position: 0 0;
}
#connect a.facebook:hover {
background-position: 0 -65px;
}
#connect a.twitter:hover {
background-position: 0 -131px;
}
#connect a.googleplus:hover {
background-position: 0 -197px;
}
<html>
<head>
<title>Bhaccasyoniztas Beach Resort Website Template</title>
<link href="css/style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<div id="background">
<div id="page">
<div id="header">
<div id="logo">
<a href="https://www.blogger.com/index.html"><img alt="LOGO" height="112" src="images/logo.png" width="118" /></a>
</div>
<div id="navigation">
<ul>
<li class="selected">
<a href="https://www.blogger.com/index.html">Home</a>
</li>
<li>
<a href="https://www.blogger.com/about.html">About</a>
</li>
<li>
<a href="https://www.blogger.com/rooms.html">Rooms</a>
</li>
<li>
<a href="https://www.blogger.com/dives.html">Dive Site</a>
</li>
<li>
<a href="https://www.blogger.com/foods.html">Food</a>
</li>
<li>
<a href="https://www.blogger.com/news.html">News</a>
</li>
<li>
<a href="https://www.blogger.com/contact.html">Contact</a>
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<img alt="Img" src="images/sea-sound.jpg" />
<h1>
Enjoy the Summer with Us!</h1>
This website template has been designed by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forums/">Forum</a>.
<br />
</div>
<div id="main">
<div class="box">
<div>
<div>
<h3>
Latest Blog</h3>
<ul>
<li>
<h4>
<a href="https://www.blogger.com/news.html">2023 Bikini Contest Winners</a></h4>
<span>April 02, 2023</span>
Integer magna leo, posuere et dignissim vitae, porttitor at odio. Pellentesque a metus nec magna placerat volutpat. Nunc nisi mi, elementum sit amet...
<br />
</li>
<li>
<h4>
<a href="https://www.blogger.com/news.html">Top 10 Diving Spots</a></h4>
<span>May 29, 2023</span>
Maecenas scelerisque odio quis arcu fringilla malesuada. Nulla facilisi. In libero nulla, fermentum ut pretium ac, pharetra et eros...
<br />
</li>
</ul>
</div>
</div>
</div>
<div class="box" id="testimonials">
<div>
<div>
<h3>
Testimonials</h3>
“In hac habitasse platea dictumst. Integer purus justo, egestas eu consectetur eu, cursus in tortor. Quisque nec nunc ac mi ultrices iaculis. Aenean quis elit mauris, nec vestibulum lorem.” <span>- <a href="https://www.blogger.com/index.html">Juan De La Cruz</a></span>
<br />
</div>
</div>
</div>
</div>
<div id="sidebar">
<div class="section">
<a href="https://www.blogger.com/rooms.html"><img alt="Img" src="images/rooms.png" /></a>
</div>
<div class="section">
<a href="https://www.blogger.com/dives.html"><img alt="Img" src="images/dive-site.png" /></a>
</div>
<div class="section">
<a href="https://www.blogger.com/foods.html"><img alt="Img" src="images/food.png" /></a>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<ul class="navigation">
<li class="active">
<a href="https://www.blogger.com/index.html">Home</a>
</li>
<li>
<a href="https://www.blogger.com/about.html">About</a>
</li>
<li>
<a href="https://www.blogger.com/rooms.html">Rooms</a>
</li>
<li>
<a href="https://www.blogger.com/dives.html">Dive Site</a>
</li>
<li>
<a href="https://www.blogger.com/foods.html">Food</a>
</li>
<li>
<a href="https://www.blogger.com/news.html">News</a>
</li>
<li>
<a href="https://www.blogger.com/contact.html">Contact</a>
</li>
</ul>
<div id="connect">
<a class="pinterest" href="http://pinterest.com/fwtemplates/" target="_blank"></a> <a class="facebook" href="http://freewebsitetemplates.com/go/facebook/" target="_blank"></a> <a class="twitter" href="http://freewebsitetemplates.com/go/twitter/" target="_blank"></a> <a class="googleplus" href="http://freewebsitetemplates.com/go/googleplus/" target="_blank"></a>
</div>
</div>
© 2023 by BHACCASYONIZTAS BEACH RESORT. All Rights Reserved
<br />
</div>
</div>
</body>
</html>
body {
background: #ffb744 url(../images/bg-body.jpg) repeat left bottom;
font-family: "Times New Roman", Times, serif;
margin: 0;
}
#background {
background: url(../images/bg-pattern.jpg) repeat-x center top;
min-height: 1318px;
}
#page {
width: 960px;
margin: 0 auto;
}
img {
border: 0;
}
/*------------------------------ Sprites ------------------------------*/
#navigation li, #navigation li a:hover, #navigation li.selected a {
background-image: url(../images/bg-menu.png);
background-repeat: repeat-x;
}
#contents div.box, #contents div.box > div, #contents div.body {
background-image: url(../images/content-box.png);
background-repeat: no-repeat;
}
#main div.box, #main div.box > div, #main div.box > div > div {
background-image: url(../images/bg-box.png);
background-repeat: no-repeat;
}
/*------------------------------ HEADER ------------------------------*/
#header {
margin-bottom: 20px;
padding-top: 20px;
}
/** Logo **/
#logo {
float: left;
margin-bottom: 20px;
margin-left: 49px;
}
/** Navigation **/
#navigation {
background: url(../images/bg-navigation.png) no-repeat;
clear: both;
height: 50px;
width: 860px;
margin: 0 auto;
padding: 1px;
}
#navigation ul {
display: inline-block;
width: 860px;
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-position: 0 -118px;
background-repeat: no-repeat;
height: 49px;
width: 122px;
margin: 0;
padding-left: 1px;
text-align: center;
}
#navigation li:first-child {
background: none;
margin-left: 0;
padding-left: 0;
}
#navigation li a {
color: #fff;
display: block;
font: bold 14px/48px Arial, Helvetica, sans-serif;
height: 49px;
text-decoration: none;
text-transform: uppercase;
}
#navigation li a:hover {
background-position: 0 -59px;
color: #6d6157;
}
#navigation li.selected a {
background-position: 0 0;
color: #e4e1bd;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
display: inline-block;
width: 865px;
padding: 0 47px;
}
#contents h1 {
color: #316e66;
font: 26px/30px "Times New Roman", Times, serif;
margin: 18px 0 20px;
padding-left: 2px;
text-transform: uppercase;
}
#contents div.body h1, #contents h2 {
color: #316e66;
font: 30px/30px "Times New Roman", Times, serif;
margin: 0 0 18px;
text-transform: uppercase;
}
#contents h2 {
font-size: 22px;
margin: 0 0 30px;
}
#contents h2 a {
color: #2c9688;
text-decoration: none;
}
#contents p {
color: #5a4535;
font-size: 15px;
line-height: 30px;
margin: 0;
padding: 0 0 24px 2px;
}
#contents p a {
color: #5a4535;
}
#contents p a:hover, #news div.sidebar ul li a:hover {
color: #917157;
}
/** box-shadow **/
#contents div.box {
background-position: left bottom;
margin-bottom: 20px;
margin-left: 1px;
padding: 0 0 6px;
}
#contents div.box > div {
background-position: -1745px top;
padding: 6px 0 0;
}
#contents div.body {
background-position: -871px top;
background-repeat: repeat-y;
min-height: 980px;
padding: 30px 40px 0;
}
/** Adbox **/
#adbox {
background: url(../images/bg-adbox.png) no-repeat left top;
width: 852px;
margin: 0 auto;
padding: 4px 5px 18px;
}
#adbox p {
font-size: 16px;
}
.ads {
float: right;
width: 220px;
border-left: 1px solid #bbbbbb;
margin-left: 20px;
padding-left: 20px;
}
hr {
border:0;
border-top: 1px solid #bbbbbb;
margin-bottom: 30px;
}
/** MAIN **/
#main {
float: left;
min-height: 100px;
width: 566px;
}
#main div.box {
background-position: left bottom;
margin-bottom: 12px;
padding: 0 0 6px;
}
#main div.box > div {
background-position: -1145px top;
padding: 6px 0 0;
}
#main div.box > div > div {
background-position: -572px top;
background-repeat: repeat-y;
padding: 17px;
}
#main div.box h3 {
color: #316e66;
font-weight: normal;
letter-spacing: 1px;
border-bottom: 1px dotted #9c8964;
margin: 0;
padding: 0 0 12px;
text-transform: uppercase;
}
#main div.box h4 {
font: 22px/24px "Times New Roman", Times, serif;
font-weight: normal;
margin: 6px 0 0;
}
#main div.box h4 a {
color: #5a4535;
text-decoration: none;
}
#main div.box ul {
list-style: none;
margin: 0;
padding: 0;
}
#main div.box ul li {
border-bottom: 1px dotted #9c8964;
}
#main div.box ul li span {
color: #5a4535;
display: block;
font-size: 14px;
margin-bottom: 12px;
}
#main div.box ul li p {
line-height: 24px;
padding: 0 0 3px;
}
/** SIDEBAR **/
#sidebar {
float: right;
height: auto;
width: 285px;
}
#sidebar div.section {
height: 144px;
margin-bottom: 12px;
}
#sidebar div.section:first-child {
padding: 3px 0 0;
}
#sidebar div.section > a:hover {
filter:alpha(opacity=60);
opacity: 0.6;
}
/** testimonials **/
#contents div#testimonials h3 {
color: #2c9688;
font-weight: normal;
letter-spacing: 1px;
border-bottom: 0;
padding-bottom: 0;
}
#testimonials p {
display: inline-block;
line-height: 24px;
padding-bottom: 3px;
}
#testimonials p span {
float: right;
}
#testimonials p span a {
color: #2c9688;
text-decoration: none;
}
#testimonials p span a:hover {
color: #2c9688;
}
/** Rooms, Foods Dive Sites **/
#rooms, #foods, #sites {
list-style: none;
margin: 0;
padding: 0;
}
#rooms li, #foods li, #sites li {
display: inline-block;
width: 784px;
border-top: 1px solid #b7b7b7;
padding: 30px 0;
position: relative;
}
#rooms li:first-child, #foods li:first-child, #sites li:first-child {
border-top: 0;
}
#rooms li img {
float: left;
border: 1px solid #2c9688;
margin-right: 15px;
}
#rooms .rate {
color: #316e66;
display: inline-block;
font: 16px/35px "Times New Roman", Times, serif;
height: 35px;
width: 138px;
border: 1px solid #5a4535;
text-align: center;
position: absolute;
bottom: 30px;
}
/** Food **/
#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", Times, serif;
}
#foods li > div.infos:hover span.cover {
background: url(../images/bg-foodInfos.png) repeat;
display: inline-block;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#foods li > div.infos:hover p {
display: block;
}
/** Dive Site **/
#sites li {
padding-bottom: 0;
}
#sites li img {
float: right;
border: 1px solid #2c9688;
margin-left: 15px;
}
/** News **/
#news {
display: inline-block;
width: 784px;
}
#news > div {
width: 560px;
border-right: 1px solid #bbbbbb;
padding-right: 35px;
}
#news > div img {
border: 1px solid #2c9688;
margin-bottom: 20px;
}
#news > div h2 {
margin-bottom: 12px;
}
#news > div span {
color: #5a4535;
display: block;
font: 15px/24px "Times New Roman", Times, serif;
margin-bottom: 30px;
}
#news > div span.author {
color: #2c9688;
display: block;
font-size: 14px;
margin-bottom: 20px;
}
#news div.sidebar {
float: right;
width: 160px;
border: 0;
padding: 0;
}
#news div.sidebar h3 {
color: #2c9688;
font-size: 20px;
font-weight: normal;
border-top: 1px solid #b7b7b7;
margin: 0 0 12px;
padding-top: 18px;
text-transform: uppercase;
}
#news div.sidebar h3:first-child {
border: 0;
padding-top: 0px;
}
#news div.sidebar ul {
list-style: none;
margin: 0 0 8px;
padding: 0;
}
#news div.sidebar ul li a {
color: #5a4535;
display: inline-block;
font-size: 15px;
margin-bottom: 6px;
text-decoration: none;
}
#news ul li {
margin-bottom: 12px;
}
/** Contact **/
#contact form {
float: right;
color: #5a4535;
height: 320px;
width: 420px;
border: 1px solid #5a4535;
padding: 19px 19px 6px;
}
#contact form table {
border-collapse: collapse;
}
#contact form table td {
padding-bottom: 6px;
}
#contact table td:first-child {
font-size: 14px;
line-height: 30px;
width: 180px;
text-transform: uppercase;
}
#contact table td.txtarea {
vertical-align: top;
}
#contact form input {
height: 17px;
line-height: 17px;
width: 278px;
border: 1px solid #5a4535;
border-radius: 2px;
}
#contact textarea {
height: 143px;
line-height: 17px;
width: 338px;
border: 1px solid #5a4535;
border-radius: 2px;
overflow: auto;
resize: none;
}
#contact input.btn {
background: url(../images/btn-send.png) no-repeat -70px 0;
cursor: pointer;
height: 26px;
width: 60px;
border: 0;
padding: 0;
margin: 0;
}
#contact input.btn:hover {
background-position: 0 0;
}
#contact p span {
display: block;
text-transform: uppercase;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
color: #594334;
font-size: 14px;
line-height: 48px;
margin: -38px 0 20px;
padding-top: 42px;
text-transform: uppercase;
}
#footer > div {
background-color: #ac9e94;
height: 48px;
width: 822px;
border-bottom: 1px solid #72675f;
border-top: 1px solid #cdbeb2;
margin: 0 auto;
padding: 0 20px;
text-align: right;
}
#footer ul.navigation {
float: left;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#footer ul.navigation li {
float: left;
margin-right: 10px;
}
#footer ul.navigation li a {
color: #594334;
padding: 0 5px;
text-decoration: none;
}
#footer ul.navigation li:first-child a {
border-left: 0;
padding-left: 0;
}
#footer ul.navigation li a:hover {
color: #eee7c3;
}
#footer ul.navigation li.active a {
color: #fff;
}
#footer p {
margin: 0;
text-align: center;
text-transform: none;
}
/** Connect **/
#connect {
float: right;
display: inline-block;
line-height: 26px;
margin: 12px 0 0;
}
#connect a {
background: url(../images/icons.png) no-repeat;
display: inline-block;
height: 23px;
width: 23px;
margin-left: 10px;
}
#connect a.pinterest {
background-position: 0 -33px;
}
#connect a.facebook {
background-position: 0 -98px;
}
#connect a.twitter {
background-position: 0 -164px;
width: 28px;
}
#connect a.googleplus {
background-position: 0 -230px;
}
#connect a.pinterest:hover {
background-position: 0 0;
}
#connect a.facebook:hover {
background-position: 0 -65px;
}
#connect a.twitter:hover {
background-position: 0 -131px;
}
#connect a.googleplus:hover {
background-position: 0 -197px;
}
<html>
<head>
<title>Bhaccasyoniztas Beach Resort Website Template</title>
<link href="css/style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<div id="background">
<div id="page">
<div id="header">
<div id="logo">
<a href="https://www.blogger.com/index.html"><img alt="LOGO" height="112" src="images/logo.png" width="118" /></a>
</div>
<div id="navigation">
<ul>
<li class="selected">
<a href="https://www.blogger.com/index.html">Home</a>
</li>
<li>
<a href="https://www.blogger.com/about.html">About</a>
</li>
<li>
<a href="https://www.blogger.com/rooms.html">Rooms</a>
</li>
<li>
<a href="https://www.blogger.com/dives.html">Dive Site</a>
</li>
<li>
<a href="https://www.blogger.com/foods.html">Food</a>
</li>
<li>
<a href="https://www.blogger.com/news.html">News</a>
</li>
<li>
<a href="https://www.blogger.com/contact.html">Contact</a>
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<img alt="Img" src="images/sea-sound.jpg" />
<h1>
Enjoy the Summer with Us!</h1>
This website template has been designed by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forums/">Forum</a>.
<br />
</div>
<div id="main">
<div class="box">
<div>
<div>
<h3>
Latest Blog</h3>
<ul>
<li>
<h4>
<a href="https://www.blogger.com/news.html">2023 Bikini Contest Winners</a></h4>
<span>April 02, 2023</span>
Integer magna leo, posuere et dignissim vitae, porttitor at odio. Pellentesque a metus nec magna placerat volutpat. Nunc nisi mi, elementum sit amet...
<br />
</li>
<li>
<h4>
<a href="https://www.blogger.com/news.html">Top 10 Diving Spots</a></h4>
<span>May 29, 2023</span>
Maecenas scelerisque odio quis arcu fringilla malesuada. Nulla facilisi. In libero nulla, fermentum ut pretium ac, pharetra et eros...
<br />
</li>
</ul>
</div>
</div>
</div>
<div class="box" id="testimonials">
<div>
<div>
<h3>
Testimonials</h3>
“In hac habitasse platea dictumst. Integer purus justo, egestas eu consectetur eu, cursus in tortor. Quisque nec nunc ac mi ultrices iaculis. Aenean quis elit mauris, nec vestibulum lorem.” <span>- <a href="https://www.blogger.com/index.html">Juan De La Cruz</a></span>
<br />
</div>
</div>
</div>
</div>
<div id="sidebar">
<div class="section">
<a href="https://www.blogger.com/rooms.html"><img alt="Img" src="images/rooms.png" /></a>
</div>
<div class="section">
<a href="https://www.blogger.com/dives.html"><img alt="Img" src="images/dive-site.png" /></a>
</div>
<div class="section">
<a href="https://www.blogger.com/foods.html"><img alt="Img" src="images/food.png" /></a>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<ul class="navigation">
<li class="active">
<a href="https://www.blogger.com/index.html">Home</a>
</li>
<li>
<a href="https://www.blogger.com/about.html">About</a>
</li>
<li>
<a href="https://www.blogger.com/rooms.html">Rooms</a>
</li>
<li>
<a href="https://www.blogger.com/dives.html">Dive Site</a>
</li>
<li>
<a href="https://www.blogger.com/foods.html">Food</a>
</li>
<li>
<a href="https://www.blogger.com/news.html">News</a>
</li>
<li>
<a href="https://www.blogger.com/contact.html">Contact</a>
</li>
</ul>
<div id="connect">
<a class="pinterest" href="http://pinterest.com/fwtemplates/" target="_blank"></a> <a class="facebook" href="http://freewebsitetemplates.com/go/facebook/" target="_blank"></a> <a class="twitter" href="http://freewebsitetemplates.com/go/twitter/" target="_blank"></a> <a class="googleplus" href="http://freewebsitetemplates.com/go/googleplus/" target="_blank"></a>
</div>
</div>
© 2023 by BHACCASYONIZTAS BEACH RESORT. All Rights Reserved
<br />
</div>
</div>
</body>
</html>
Komentar
Posting Komentar