This article describes additional elements used for creating a demo content for the Hotel template.

Informations Hotel block

The hotel informations are based on the following HTML structure:

< ul class = "gk-info" >
< li class = "gk-info-col-2" >
<dl> <dt>Check-in:</dt>
<dd><strong>
</strong></dd> </dl>
02:00 pm
</li>
<li>
< dl class = "gk-info-col-2" >
<dt>Check-out:</dt> <dd><strong> </strong></dd> 12:00 am
</dl> </li>
<li>
< dl > <dt>Smoking:</dt> <dd>Non-Smoking</dd>
</dl> </li>
<li>
<dl>
<dt>Parking:</dt>
<dd> Self parking: € 30.00 </dd>
Valet <dd>: € 50.00 </dd>
</dl> </li>
<li>
<dl>
<dt> Pets : </dt>
<dd> Service animals allowed: Yes </dd>
<dd> Maximum Weight: 50 lbs </dd>
</dl> </li>
</ul>

Photo grids

Blocks with photos uses a photo grid structure:

< div class = "gk-photo-grid no-margin
figures < >" class = "gk-grid-data-1 sr =" scale up 10% ">
< img src =" images/demo/hotel1.jpg "alt =" "/>
< </figure> =" figures gk-grid-data-1 sr = "scale up 10% 0.15 s and wait" >
< img src = "images/demo/hotel2.jpg" alt = ""/>
</figure>
</div>

Other example of the photo grid:

< div class = "gk-photo-grid offset-left"
< > class = "figures gk-grid-data-1 sr =" scale up 10% ">
< img src =" images/demo/hotel3.jpg "alt =" "/>
Luxury rooms
</figcaption> <figcaption> </figure>

< figure class =" gk-grid-2 "-sr date =" scale up 10% and wait. "
> 15s < img src =" images/demo/hotel5.jpg "alt =" "/>

< </figure> <figcaption>Bathrooms</figcaption> figure class =" gk-grid-2 "-sr date =" scale up 10% and wait. "
> 3s < img src =" images/ Demo/hotel4.jpg "alt =" "/>
<figcaption>Jacuzzi</figcaption>
</figure>
</div>

Above example uses also the offset-left class which creates a negative left margin.

Newsletter popup

Newsletter popup is a Custom HTML module which uses the following code:

<h3>
     Sign up to keep in touch!
</h3>
<p>
     Be the first to hear about special offers and exclusive deals from Villa Badiei and our partners.
</p>
< form action = "index.php? option = com_acymailing & ctrl =" method = "post" > < input type =
     "email" required  id = "user_email" name = "user [email]" placeholder = "enter email address" > < input type =
     "submit" value = "Submit" id = "gk-newsletter-submit" >
     < input type = "hidden" name = "acyformname" value = "formAcymailing1"/>
     < input type = "hidden" name = "ctrl" value = ""/>
     < input type = "hidden" name = "task" value = "optin"/>
     < input type = "hidden" name = "option" value = "com_acymailing"/> < input type =
     " hidden "name =" visiblelists "value =" "/>
     < input type =" hidden "name =" hiddenlists "value =" 1 "/>
     < input type =" hidden "name =" user [html] "value =" 1 "/>
</form> <
!--Configuration details: https://www.acyba.com/acymailing/248-acymailing-external-subscription-form.html--> 

<small> Check out our < a href =" # "> Privacy Policy & </a> < a href =" # "> Terms of use </a> < br/>
You can unsubscribe from email list at any time </small>

Footer links

Links at the footer are based on the following HTML structure

< div class = "cols" gk-date-cols = "3" >
    <div> <h3> </h3>
        Quick Links
        < div class = "cols" gk-date-cols = "2" >
            <div> <ul> <li>
                < a href = "#" > Our Hotels </a></li> <li>
                    < a href = "#" > About </a></li> <li>
                    < a href = "#" > Press </a></li> <li>
                    < a href = "#" > Fact Sheet </a></li>
                </ul> </div>
            <div>

            <ul>
                    <li> < a href = "#" > Contact </a></li> <li>
                    < a href = "#" > Careers
                    < <li> </a></li> a href = "#" > Terms of Use
                    < <li> </a></li> a href = "#" > Privacy Policy </a></li>
                    <li> < a href = "#" > Our Best Rate Promise </a></li> 
                </ul> </div>
            </div>
    </div> <div>

    <h3>Contact</h3>
        < div class = "cols" gk-date-cols = "2" >
            <div>
                <p>Phone:</p> <p>Fax:</p>
                <p> Reservations : </p> </div>
            <div>
                <p> (123) 456-7898 </p>
                <p> (123) 456-7898 </p>
                <p> (123) 456-7898 </p>
            </div> </div>
    </div> <div>

    <h3>
        Villa </h3> <p> 844
        Belluci Linden Street Norwood, MA 02062 </p>
        <p> Template Design © by < a href = "https://www.gavick.com/" title = "GavickPro" rel = "nofollow" GavickPro > </a>. All rights reserved. </p> </div>
</div>

Social footer links

The social icons at the footer uses the following code:

< ul class = "gk-social-links" >
<li> < a href = "#" class = ">< gk-icon-twitter" </i></a></li> > <li> <
a href = "#" class = ">< gk-icon-fb" </i></a></li> > <li> <
a href = "#" class = ">< gk-icon-gplus" </i></a></li> > <li> <
a href = "#" class = ">< gk-icon-> linkedin </i></a></li>
<li> < a href = "#" class = ">< gk-icon-pinterest" </i></a></li> >
</ul>