View file Structura/Template/pages/index-rectangle.html

File size: 57.5Kb
<!DOCTYPE html>
<!--[if lt IE 10]> <html  lang="en" class="iex"> <![endif]-->
<!--[if (gt IE 10)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Rectangle | Home | Structura</title>
    <meta name="description" content="Multipurpose HTML template.">
    <link rel="stylesheet" href="../HTWF/scripts/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../HTWF/style.css">
    <link rel="stylesheet" href="../HTWF/css/content-box.css">
    <link rel="stylesheet" href="../HTWF/css/image-box.css">
    <link rel="stylesheet" href="../HTWF/css/animations.css">
    <link rel="stylesheet" href="../HTWF/css/components.css">
    <link rel="stylesheet" href="../HTWF/scripts/flexslider/flexslider.css">
    <link rel="stylesheet" href="../HTWF/scripts/magnific-popup.css">
    <link rel="stylesheet" href="../HTWF/scripts/php/contact-form.css">
    <link rel="stylesheet" href="../HTWF/scripts/social.stream.css">
    <link rel="icon" href="../images/favicon.png">
    <link rel="stylesheet" href="../skin.css">
</head>
<body class="background-lines-2" data-spy="scroll" data-target="#menu" data-offset="250">
    <div id="preloader"></div>
    <div class="footer-parallax-container">
        <div id="home" class="section-empty bg-transparent">
            <div class="container content">
                <div class="row">
                    <div class="col-md-9" data-anima="fade-bottom" data-timeline="asc">
                        <h1 class="text-xl text-black anima">Best minimal and design tips executed by true experts</h1>
                        <hr class="space m" />
                        <p class="anima">
                            Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                            Utenim ad minim veniam quis nostrud exercitation ullamco.
                        </p>
                    </div>
                </div>
                <hr class="space" />
                <div class="row">
                    <div class="col-md-5 col-sm-12 pull-right" data-anima="fade-bottom">
                        <div class="navbar navbar-inner ">
                            <div class="navbar-toggle"><i class="fa fa-bars"></i><span>Menu</span><i class="fa fa-angle-down"></i></div>
                            <div class="collapse navbar-collapse">
                                <ul class="nav navbar-nav inner">
                                    <li class="current-active active"><a href="#home">Home</a></li>
                                    <li><a href="#portfolio">Portfolio</a></li>
                                    <li><a href="#services">Services</a></li>
                                    <li><a href="#about">About</a></li>
                                    <li><a href="#contacts">Contacts</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="space" />
                <div class="flexslider carousel outer-navs" data-options="minWidth:150,itemMargin:50,numItems:4,controlNav:false,directionNav:true" data-anima="fade-bottom">
                    <ul class="slides">
                        <li>
                            <div class="advs-box advs-box-side-icon" data-anima="scale-up" data-trigger="hover">
                                <div class="icon-box">
                                    <i class="im-heart icon anima"></i>
                                </div>
                                <div class="caption-box">
                                    <h3>Design</h3>
                                    <p>
                                        Lorem ipsum dolor consetuer adipo icingo arteso bito.
                                    </p>
                                    <a href="#" class="btn-text">Take a look</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="advs-box advs-box-side-icon" data-anima="scale-up" data-trigger="hover">
                                <div class="icon-box">
                                    <i class="im-music-note4 icon anima"></i>
                                </div>
                                <div class="caption-box">
                                    <h3>Lecterature</h3>
                                    <p>
                                        Lorem ipsum dolor consetuer adipo icingo arteso bito.
                                    </p>
                                    <a href="#" class="btn-text">Take a look</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="advs-box advs-box-side-icon" data-anima="scale-up" data-trigger="hover">
                                <div class="icon-box">
                                    <i class="im-monitor-analytics icon anima"></i>
                                </div>
                                <div class="caption-box">
                                    <h3>Technology</h3>
                                    <p>
                                        Lorem ipsum dolor consetuer adipo icingo arteso bito.
                                    </p>
                                    <a href="#" class="btn-text">Take a look</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="advs-box advs-box-side-icon" data-anima="scale-up" data-trigger="hover">
                                <div class="icon-box">
                                    <i class="im-paper-plane icon anima"></i>
                                </div>
                                <div class="caption-box">
                                    <h3>Freelance</h3>
                                    <p>
                                        Lorem ipsum dolor consetuer adipo icingo arteso bito.
                                    </p>
                                    <a href="#" class="btn-text">Take a look</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="advs-box advs-box-side-icon" data-anima="scale-up" data-trigger="hover">
                                <div class="icon-box">
                                    <i class="im-microphone-4 icon anima"></i>
                                </div>
                                <div class="caption-box">
                                    <h3>Society</h3>
                                    <p>
                                        Lorem ipsum dolor consetuer adipo icingo arteso bito.
                                    </p>
                                    <a href="#" class="btn-text">Take a look</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <hr class="space" />
                <div class="row" data-anima="fade-bottom">
                    <div class="col-md-6 col-sm-12">
                        <hr class="space m" />
                        <div class="title-base text-left">
                            <hr />
                            <h2>Burning wind .</h2>
                            <p>
                                Duis aute irure dolor in reprehenderit  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                                in voluptate velit esse cillum dolore eu fugiat nulla pariature.  In voluptate velit esse cillum dolore eu fugiat nulla pariaturea commodo consequato.
                            </p>
                        </div>
                        <a href="#" class="btn btn-sm">Discovery the wild</a>
                    </div>
                    <div class="col-md-4">
                        <hr class="space" />
                        <a class="img-box lightbox circle shadow" data-lightbox-anima="fade-right" href="http://via.placeholder.com/500x500">
                            <img src="http://via.placeholder.com/500x500" alt="">
                        </a>
                    </div>
                    <div class="col-md-2">
                        <hr class="space m" />
                        <a class="img-box lightbox circle shadow margin-40" data-lightbox-anima="fade-right" href="http://via.placeholder.com/500x500">
                            <img src="http://via.placeholder.com/500x500" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-empty">
            <div class="container content">
                <table class="grid-table border-table grid-table-xs-12">
                    <tbody>
                        <tr>
                            <td>
                                <div class="advs-box niche-box-testimonails-cloud">
                                    <p>
                                        Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
                                    </p>
                                    <div class="name-box vertical-row">
                                        <i class="vertical-col fa text-l circle onlycover" style="background-image:url('http://via.placeholder.com/450x450')"></i>
                                        <h5 class="vertical-col subtitle">Natasha Paun<span class="subtxt">Google</span></h5>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="advs-box niche-box-testimonails-cloud">
                                    <p>
                                        Lorem ipsum dolor sitamet consectetur adipisici artsongo elito sed do eiusmod incidi.
                                    </p>
                                    <div class="name-box vertical-row">
                                        <i class="vertical-col fa text-l circle onlycover" style="background-image:url('http://via.placeholder.com/450x450')"></i>
                                        <h5 class="vertical-col subtitle">Albert De Niro<span class="subtxt">Facebook</span></h5>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="advs-box niche-box-testimonails-cloud">
                                    <p>
                                        Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod temporo.
                                    </p>
                                    <div class="name-box vertical-row">
                                        <i class="vertical-col fa text-l circle onlycover" style="background-image:url('http://via.placeholder.com/450x450')"></i>
                                        <h5 class="vertical-col subtitle">Alissa William<span class="subtxt">Microsoft</span></h5>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="advs-box niche-box-testimonails-cloud">
                                    <p>
                                        Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore are.
                                    </p>
                                    <div class="name-box vertical-row">
                                        <i class="vertical-col fa text-l circle onlycover" style="background-image:url('http://via.placeholder.com/450x450')"></i>
                                        <h5 class="vertical-col subtitle">Alex Ferd<span class="subtxt">Uber</span></h5>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="section-empty">
            <div class="container content">
                <div class="row">
                    <div class="col-md-8 col-center" data-anima="fade-bottom">
                        <h2 class="text-center">We're creative minds .</h2>
                        <hr class="space m" />
                        <div class="collapse-box text-center" data-height="100">
                            <div class="panel">
                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                    Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                                    in voluptate velit esse cillum dolore eu fugiat nulla pariatu ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                    Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                                    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                </p>
                            </div>
                            <a class="collapse-button" data-button-open-text="Hide all" data-button-close-text="Show all">
                                <b>Show all</b> <span class="caret"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="portfolio" class="section-empty bg-transparent">
            <div class="container content">
                <div class="row">
                    <div class="col-md-12 col-center">
                        <h2 class="text-center">Projects works</h2>
                        <hr class="space m" />
                        <div class="maso-list gallery">
                            <div class="navbar navbar-inner navv-center">
                                <div class="navbar-toggle"><i class="fa fa-bars"></i><span>Menu</span><i class="fa fa-angle-down"></i></div>
                                <div class="collapse navbar-collapse">
                                    <ul class="nav navbar-nav nav-center over ms-minimal inner maso-filters">
                                        <li class="current-active active"><a data-filter="maso-item">All</a></li>
                                        <li><a data-filter="cat1">Creative</a></li>
                                        <li><a data-filter="cat2">Architecture</a></li>
                                        <li><a data-filter="cat3">Society</a></li>
                                        <li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="maso-box row">
                                <div data-sort="1" class="maso-item col-md-6 cat1 cat2">
                                    <div class="advs-box advs-box-side boxed-inverse" data-anima="fade-left" data-trigger="hover">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="img-box"><img src="../images/gallery/image-1.jpg" alt="" /></div>
                                            </div>
                                            <div class="col-md-8">
                                                <h3>Performance lights</h3>
                                                <hr class="anima">
                                                <p>
                                                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
                                                </p>
                                                <a class="btn-text" href="#">Open project</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-sort="1" class="maso-item col-md-6 cat2">
                                    <div class="advs-box advs-box-side boxed-inverse" data-anima="fade-left" data-trigger="hover">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="img-box"><img src="http://via.placeholder.com/800x600" alt="" /></div>
                                            </div>
                                            <div class="col-md-8">
                                                <h3>The lighting start</h3>
                                                <hr class="anima">
                                                <p>
                                                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
                                                </p>
                                                <a class="btn-text" href="#">Open project</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-sort="1" class="maso-item col-md-6 cat1 cat3">
                                    <div class="advs-box advs-box-side boxed-inverse" data-anima="fade-left" data-trigger="hover">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="img-box"><img src="http://via.placeholder.com/800x600" alt="" /></div>
                                            </div>
                                            <div class="col-md-8">
                                                <h3>Retro artisans</h3>
                                                <hr class="anima">
                                                <p>
                                                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
                                                </p>
                                                <a class="btn-text" href="#">Open project</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-sort="1" class="maso-item col-md-6 cat1 cat2">
                                    <div class="advs-box advs-box-side boxed-inverse" data-anima="fade-left" data-trigger="hover">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="img-box"><img src="http://via.placeholder.com/800x600" alt="" /></div>
                                            </div>
                                            <div class="col-md-8">
                                                <h3>Secret decors</h3>
                                                <hr class="anima">
                                                <p>
                                                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
                                                </p>
                                                <a class="btn-text" href="#">Open project</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-sort="1" class="maso-item col-md-6 cat2">
                                    <div class="advs-box advs-box-side boxed-inverse" data-anima="fade-left" data-trigger="hover">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="img-box"><img src="http://via.placeholder.com/800x600" alt="" /></div>
                                            </div>
                                            <div class="col-md-8">
                                                <h3>Queens and hourses</h3>
                                                <hr class="anima">
                                                <p>
                                                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
                                                </p>
                                                <a class="btn-text" href="#">Open project</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-sort="1" class="maso-item col-md-6 cat1 cat3">
                                    <div class="advs-box advs-box-side boxed-inverse" data-anima="fade-left" data-trigger="hover">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="img-box"><img src="http://via.placeholder.com/800x600" alt="" /></div>
                                            </div>
                                            <div class="col-md-8">
                                                <h3>Old fashion celebration</h3>
                                                <hr class="anima">
                                                <p>
                                                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
                                                </p>
                                                <a class="btn-text" href="#">Open project</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-sort="1" class="maso-item col-md-6 cat1">
                                    <div class="advs-box advs-box-side boxed-inverse" data-anima="fade-left" data-trigger="hover">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="img-box"><img src="http://via.placeholder.com/800x600" alt="" /></div>
                                            </div>
                                            <div class="col-md-8">
                                                <h3>Walking pieces</h3>
                                                <hr class="anima">
                                                <p>
                                                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
                                                </p>
                                                <a class="btn-text" href="#">Open project</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div data-sort="1" class="maso-item col-md-6 cat2 cat3">
                                    <div class="advs-box advs-box-side boxed-inverse" data-anima="fade-left" data-trigger="hover">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="img-box"><img src="http://via.placeholder.com/800x600" alt="" /></div>
                                            </div>
                                            <div class="col-md-8">
                                                <h3>Sunshine and rooftops</h3>
                                                <hr class="anima">
                                                <p>
                                                    Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
                                                </p>
                                                <a class="btn-text" href="#">Open project</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="list-nav">
                                <a href="#" class="btn-sm btn load-more-maso" data-page-items="6">Load More <i class="fa fa-arrow-down"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="services" class="section-empty" data-anima="fade-bottom" data-timeline="asc">
            <div class="container content">
                <div class="row anima">
                    <div class="col-md-4">
                        <div class="title-base text-left">
                            <hr />
                            <h2>Creative services</h2>
                            <p>No sea takimata sanctus esto bertollo<br /> lorem ipsum dolor sit ameto </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <ul class="list-texts list-texts-justified text-s">
                            <li><b>Paints</b> <span>Allamco laboris nisi</span></li>
                            <li><b>Music</b> <span>Masanctus esto bertollo</span></li>
                            <li><b>Photography</b> <span>Addolore site ameto</span></li>
                            <li><b>Art videos</b> <span>Rakimata denda artiuso</span></li>
                            <li><b>Graphics</b> <span>Commodo consequa per torne</span></li>
                            <li><b>Architectural</b> <span>Velite esse cillum dolore</span></li>
                            <li><b>Society</b> <span>Nostrud exercitation retro</span></li>
                            <li><b>Location</b> <span>Duis aute irure dolore</span></li>
                            <li><b>Surfing</b> <span>Consectetur adipiscing elitse</span></li>
                            <li><b>Tech</b> <span>Addolore site ameto</span></li>
                            <li><b>People</b> <span>Allamco laboris nisi</span></li>
                            <li><b>Internet</b> <span>Euis aute irure dolore</span></li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <ul class="list-texts list-texts-justified text-s">
                            <li><b>Web</b> <span>Allamco laboris nisi</span></li>
                            <li><b>Mental</b> <span>Masanctus esto bertollo</span></li>
                            <li><b>Sociology</b> <span>Addolore site ameto</span></li>
                            <li><b>Underground</b> <span>Rakimata denda artiuso</span></li>
                            <li><b>Marketing</b> <span>Commodo consequa per torne</span></li>
                            <li><b>Video</b> <span>Velite esse cillum dolore</span></li>
                            <li><b>Society</b> <span>Nostrud exercitation retro</span></li>
                            <li><b>Location</b> <span>Duis aute irure dolore</span></li>
                            <li><b>Business</b> <span>Consectetur adipiscing elitse</span></li>
                            <li><b>Expirience</b> <span>Addolore site ameto</span></li>
                            <li><b>People</b> <span>Allamco laboris nisi</span></li>
                            <li><b>Action</b> <span>Euis aute irure dolore</span></li>
                        </ul>
                    </div>
                </div>
                <hr class="space l" />
                <div class="flexslider carousel outer-navs visible-dir-nav anima" data-options="minWidth:200,itemMargin:30,numItems:5,controlNav:true,directionNav:true">
                    <ul class="slides">
                        <li>
                            <div class="icon-box icon-box-top-bottom">
                                <div class="icon-box-cell">
                                    <i class="im-video-4 text-l"></i>
                                </div>
                                <div class="icon-box-cell">
                                    <label class="text-m">Videos</label>
                                    <p class="text-s">Loremo ipsume dolorle</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="icon-box icon-box-top-bottom">
                                <div class="icon-box-cell">
                                    <i class=" im-cloud-music text-l"></i>
                                </div>
                                <div class="icon-box-cell">
                                    <label class="text-m">Music</label>
                                    <p class="text-s">Aeipsume dolorge</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="icon-box icon-box-top-bottom">
                                <div class="icon-box-cell">
                                    <i class="im-cloud-hail text-l"></i>
                                </div>
                                <div class="icon-box-cell">
                                    <label class="text-m">Society</label>
                                    <p class="text-s">Loreme ipsuma dolore</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="icon-box icon-box-top-bottom">
                                <div class="icon-box-cell">
                                    <i class="im-cool-guy text-l"></i>
                                </div>
                                <div class="icon-box-cell">
                                    <label class="text-m">People</label>
                                    <p class="text-s">Reipsume dolore auio</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="icon-box icon-box-top-bottom">
                                <div class="icon-box-cell">
                                    <i class="im-line-chart4 text-l"></i>
                                </div>
                                <div class="icon-box-cell">
                                    <label class="text-m">Marketing</label>
                                    <p class="text-s">Apsum dolore mento</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="icon-box icon-box-top-bottom">
                                <div class="icon-box-cell">
                                    <i class="im-penguin text-l"></i>
                                </div>
                                <div class="icon-box-cell">
                                    <label class="text-m">Graphics</label>
                                    <p class="text-s">Lorem ipsum dolor</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <hr class="space l" />
                <div class="row anima">
                    <div class="col-md-4 boxed-inverse">
                        <h2 class="text-m">Reduced price summer events until January</h2>
                        <p class="text-s">
                            Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
                        </p>
                        <a class="btn btn-xs" href="#"> Details</a>
                    </div>
                    <div class="col-md-4 boxed-inverse">
                        <h2 class="text-m">Boat tour buy one get two only for 48 hours</h2>
                        <p class="text-s">
                            Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
                        </p>
                        <a class="btn btn-xs" href="#"> Details</a>
                    </div>
                    <div class="col-md-4">
                        <hr class="space m visible-xs" />
                        <div class="title-base text-left">
                            <hr />
                            <h2>This month promotions</h2>
                            <p>No sea takimata sanctus esto bertollo<br /> lorem ipsum dolor sit ameto </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-empty bg-transparent">
            <div class="container content">
                <div class="row vertical-row">
                    <div class="col-md-2">
                        <a class="img-box lightbox circle shadow" href="http://via.placeholder.com/500x500" data-lightbox-anima="fade-top">
                            <img src="http://via.placeholder.com/500x500" alt="">
                        </a>
                    </div>
                    <div class="col-md-3 hidden-sm">
                        <a class="img-box lightbox circle shadow" href="http://via.placeholder.com/500x500" data-lightbox-anima="fade-top">
                            <img src="http://via.placeholder.com/500x500" alt="">
                        </a>
                    </div>
                    <div class="col-md-2">
                        <a class="img-box lightbox circle shadow" href="http://via.placeholder.com/500x500" data-lightbox-anima="fade-top">
                            <img src="http://via.placeholder.com/500x500" alt="">
                        </a>
                    </div>
                    <div class="col-md-2">
                        <a class="img-box lightbox circle shadow" href="http://via.placeholder.com/500x500" data-lightbox-anima="fade-top">
                            <img src="http://via.placeholder.com/500x500" alt="">
                        </a>
                    </div>
                    <div class="col-md-3 hidden-sm">
                        <a class="img-box lightbox circle shadow" href="http://via.placeholder.com/500x500" data-lightbox-anima="fade-top">
                            <img src="http://via.placeholder.com/500x500" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div id="about" class="section-empty">
            <div class="container content">
                <div class="title-base text-center">
                    <hr />
                    <h2>Process of development</h2>
                    <p>Aveniam quis nostrud exercitation dipiscing elitsed do eiusmod tempor incididunt utlabore ullamco laboriso</p>
                </div>
                <div class="row" data-anima="fade-bottom" data-timeline="asc">
                    <div class="col-md-4 anima">
                        <h3 class="text-black">Performance and exibitions</h3>
                        <hr class="space m" />
                        <div class="list-group accordion-list">
                            <div class="list-group-item">
                                <a href="#"> Can I ask for a full refund?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <a href="#"> What are the avarage shipping times?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <a href="#"> How many payment options do I have?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <a href="#"> Can I replace an item I bought?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 anima">
                        <h3 class="text-black">Technology and society</h3>
                        <hr class="space m" />
                        <div class="list-group accordion-list">
                            <div class="list-group-item">
                                <a href="#"> Can I ask for a full refund?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <a href="#"> What are the avarage shipping times?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <a href="#"> How many payment options do I have?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <a href="#"> Can I replace an item I bought?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 anima">
                        <h3 class="text-black">Architecture and building</h3>
                        <hr class="space m" />
                        <div class="list-group accordion-list">
                            <div class="list-group-item">
                                <a href="#"> Can I ask for a full refund?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <a href="#"> What are the avarage shipping times?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <a href="#"> How many payment options do I have?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <a href="#"> Can I replace an item I bought?</a>
                                <div class="panel">
                                    <div class="inner">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                                        Utenim ad minim veniam quis nostrud exercitation ullamco laboriso.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-empty bg-transparent">
            <div class="container content">
                <div class="row">
                    <div class="col-md-8 col-center text-center">
                        <h2>Our philosophy</h2>
                        <p>
                            Duis aute irure dolor in reprehenderit nisi ut aliquip ex ea commodo consequat. Duis aute irure doloreniano in reprehe nderito
                            Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor inviduntno sea takimata sanctus est Lorem ipsum dolor sit amet.  sed diam voluptua.   ut labore et dolore magna aliquyam erato.
                            At vero eos et accusam et justo duo dolores et ea rebum.
                        </p>
                        <hr class="space s" />
                        <img src="../images/sign-3.png" alt="Alternate Text" />
                    </div>
                </div>
            </div>
        </div>
        <div class="section-empty">
            <div class="container content">
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="progress-circle" data-color="#272727" data-progress="60" data-thickness="1" data-options="lineCap:square">
                            <div class="inner-circle">
                                <div class="inner-center">
                                    <div class="subtitle c">
                                        <p class="sub">Ginviduntno sea takimata sanctus esto leorem eda diam voluptua marose</p>
                                        <hr class="d">
                                        <span class="counter-circle"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <hr class="space m hidden-sm" />
                        <div class="progress-circle" data-color="#272727" data-progress="85" data-thickness="1" data-options="lineCap:square">
                            <div class="inner-circle">
                                <div class="inner-center">
                                    <span class="counter-circle text-m"></span>
                                </div>
                            </div>
                        </div>
                        <hr class="space s" />
                        <p class="text-s text-center">Adoloreniano in reprehe are</p>
                    </div>
                    <div class="col-md-3">
                        <hr class="space m" />
                        <h2 class="text-xl">Hall of super numbers</h2>
                    </div>
                    <div class="col-md-3">
                        <hr class="space m" />
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
                            Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
                        </p>
                    </div>
                </div>
                <hr class="space m" />
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <hr class="space l" />
                        <h2 class="text-xl">Numbers have life, they're not just symbols on paper.</h2>
                    </div>
                    <div class="col-md-5 col-sm-6">
                        <div class="progress-circle" data-color="#272727" data-progress="40" data-thickness="1" data-options="lineCap:square">
                            <div class="inner-circle">
                                <div class="inner-center">
                                    <div class="subtitle c">
                                        <p class="sub">Ginviduntno sea takimata sanctus estorante leortakimata sanctus estem eda diam voluptua marose aipsum dolor sit amet,  no sea takimata</p>
                                        <hr class="d">
                                        <span class="counter-circle"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <hr class="space l" />
                        <div class="progress-circle" data-color="#272727" data-progress="75" data-thickness="1" data-options="lineCap:square">
                            <div class="inner-circle">
                                <div class="inner-center">
                                    <p class="sub">Ginolu or sit amet,  no sea takimata</p>
                                    <hr class="space s" />
                                    <span class="counter-circle text-m"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="contacts" class="section-empty background-lines-2">
            <div class="container content">
                <div class="row proporzional-row" data-anima="fade-bottom">
                    <div class="col-md-6 boxed-inverse">
                        <form action="http://www.framework-y.com/scripts/php/contact-form.php" class="form-box form-ajax" method="post">
                            <div class="row">
                                <div class="col-md-4">
                                    <p>Your name</p>
                                    <input id="name" name="name" placeholder="" type="text" class="form-control form-value" required="">
                                </div>
                                <div class="col-md-4">
                                    <p>Email</p>
                                    <input id="email" name="email" placeholder="" type="email" class="form-control form-value" required="">
                                </div>
                                <div class="col-md-4">
                                    <p>Phone number</p>
                                    <input id="phone" name="phone" placeholder="" type="text" class="form-control form-value">
                                </div>
                                <div class="col-md-12">
                                    <p>Subject</p>
                                    <input id="subject" name="subject" placeholder="" type="text" class="form-control form-value">
                                </div>
                            </div>
                            <hr class="space xs">
                            <p>Your message</p>
                            <textarea id="messagge" name="messagge" placeholder="" class="form-control form-value" required=""></textarea>
                            <hr class="space s">
                            <a class="btn-xs btn">Send messagge</a>
                            <div class="success-box">
                                <div class="alert alert-success">Congratulations. Your message has been sent successfully</div>
                            </div>
                            <div class="error-box">
                                <div class="alert alert-warning">Error, please retry. Your message has not been sent</div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-3">
                        <hr class="space m visible-xs" />
                        <h2>Contact</h2>
                        <hr class="space s">
                        <p>
                            +1 (229) 346-1100<br>
                            +1 (619) 303-4455<br>
                            creative@example.com
                            explore@example.com
                        </p>
                        <hr class="space m">
                        <h2>Address</h2>
                        <hr class="space s">
                        <p>
                            2514 Glebe Rd, Lemon Grove<br>
                            CA, 91945
                        </p>

                    </div>
                    <div class="col-md-3">
                        <h2>Timetable</h2>
                        <hr class="space s">
                        <p>
                            Monday - Friday 8am to 12am<br>
                            Monday - Friday 2pm to 6pm<br>
                            Saturday 8am to 1pm<br>
                        </p>
                        <hr class="space l">
                        <a href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom" class="btn-border btn btn-sm lightbox" data-lightbox-anima="fade-left">View map</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <i class="scroll-top scroll-top-mobile show fa fa-sort-asc"></i>
    <footer class="footer-parallax bg-white">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="tag-row icon-row icon-row-square">
                            <span><a>About</a></span>
                            <span><a>Services</a></span>
                            <span><a>Support</a></span>
                            <span><a>Contacts</a></span>
                        </div>
                    </div>
                    <div class="col-md-6 text-right text-center-sm">
                        <div class="btn-group social-group btn-group-icons">
                            <a target="_blank" href="#" data-social="share-facebook" data-toggle="tooltip" data-placement="top" title="Facebook">
                                <i class="fa fa-facebook text-s"></i>
                            </a>
                            <a target="_blank" href="#" data-social="share-twitter" data-toggle="tooltip" data-placement="top" title="Twitter">
                                <i class="fa fa-twitter text-s"></i>
                            </a>
                            <a target="_blank" href="#" data-social="share-google" data-toggle="tooltip" data-placement="top" title="Google+">
                                <i class="fa fa-google-plus text-s"></i>
                            </a>
                            <a target="_blank" href="#" data-social="share-linkedin" data-toggle="tooltip" data-placement="top" title="LinkedIn">
                                <i class="fa fa-linkedin text-s"></i>
                            </a>
                        </div>

                    </div>
                </div>
                <div class="row copy-row">
                    <div class="col-md-12 copy-text">
                        © 2018 Structura - One page minimal template <span>Handmade by <a href="http://schiocco.com/">schiocco.com</a></span>
                    </div>
                </div>
            </div>
        </div>
        <script src="../HTWF/scripts/jquery.min.js"></script>
        <script src="../HTWF/scripts/script.js"></script>
        <link rel="stylesheet" href="../HTWF/scripts/iconsmind/line-icons.min.css">
        <script src="../HTWF/scripts/bootstrap/js/bootstrap.min.js"></script>
        <script src="../HTWF/scripts/imagesloaded.min.js"></script>
        <script src="../HTWF/scripts/parallax.min.js"></script>
        <script src="../HTWF/scripts/flexslider/jquery.flexslider-min.js"></script>
        <script src="../HTWF/scripts/isotope.min.js"></script>
        <script src="../HTWF/scripts/php/contact-form.js"></script>
        <script src="../HTWF/scripts/jquery.progress-counter.js"></script>
        <script src="../HTWF/scripts/jquery.tab-accordion.js"></script>
        <script src="../HTWF/scripts/bootstrap/js/bootstrap.popover.min.js"></script>
        <script src="../HTWF/scripts/jquery.magnific-popup.min.js"></script>
        <script src="../HTWF/scripts/social.stream.min.js"></script>
        <script src="../HTWF/scripts/google.maps.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script src="../HTWF/scripts/jquery.slimscroll.min.js"></script>
        <script src="../HTWF/scripts/smooth.scroll.min.js"></script>
    </footer>
</body>
</html>