226 lines
9.9 KiB
HTML
226 lines
9.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>The Square | Alt Square | Glod</title>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- particles.js container -->
|
|
<div id="particles-js"></div>
|
|
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
|
|
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-4 outer-div">
|
|
<h1 style="font-family: 'Aldo the Apache'">Welcome</h1>
|
|
<h2 style="font-family: 'Aldo the Apache'">to the fun side</h2>
|
|
</div>
|
|
<div class="col-md-8 outer-div">
|
|
<div onclick="openNav1(TheSquare)" class="row inner-div" style="font-family: 'Aldo the Apache'">
|
|
The Square
|
|
</div>
|
|
<div onclick="openNav2(AltSquare)" class="row inner-div">
|
|
<b style="font-family: 'eyelevation6'">Alt </b> <b style="font-family: 'Aldo the Apache'">Square</b>
|
|
</div>
|
|
<div onclick="openNav3(Glod)" class="row inner-div" style="font-family: 'eyelevation6'">
|
|
Glod
|
|
</div>
|
|
<div onclick="openNav4(Contact)" class="row inner-div" style="font-family: 'Aldo the Apache'">
|
|
Contact
|
|
</div>
|
|
</div>
|
|
<div class="copyright">© 2019 The Square™. All rights reserved.</div>
|
|
</div>
|
|
|
|
<!-- The Square overlay -->
|
|
<div id="TheSquare" class="overlay">
|
|
<!-- Button to close the overlay navigation -->
|
|
<a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">×</a>
|
|
<!-- Overlay content -->
|
|
<div class="overlay-content">
|
|
<div id="carouselTheSquare" class="carousel slide" data-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carouselTheSquare" data-slide-to="1" class="active"></li>
|
|
<li data-target="#carouselTheSquare" data-slide-to="2"></li>
|
|
<li data-target="#carouselTheSquare" data-slide-to="3"></li>
|
|
<li data-target="#carouselTheSquare" data-slide-to="4"></li>
|
|
<li data-target="#carouselTheSquare" data-slide-to="5"></li>
|
|
</ol>
|
|
<div class="carousel-inner" role="listbox">
|
|
<div class="carousel-item active">
|
|
<img src="img/The_Square/1.jpg" alt="First slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/The_Square/2.jpg" alt="Second slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/The_Square/3.jpg" alt="Third slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/The_Square/4.jpg" alt="Fourth slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/The_Square/5.jpg" alt="Fifth slide">
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselTheSquare" role="button" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselTheSquare" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h2>"Good music, nice people, sometimes crowded!"</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The AltSquare overlay -->
|
|
<div id="AltSquare" class="overlay">
|
|
<!-- Button to close the overlay navigation -->
|
|
<a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">×</a>
|
|
<!-- Overlay content -->
|
|
<div class="overlay-content">
|
|
<div id="carouselAltSquare" class="carousel slide" data-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carouselAltSquare" data-slide-to="1" class="active"></li>
|
|
<li data-target="#carouselAltSquare" data-slide-to="2"></li>
|
|
<li data-target="#carouselAltSquare" data-slide-to="3"></li>
|
|
<li data-target="#carouselAltSquare" data-slide-to="4"></li>
|
|
<li data-target="#carouselAltSquare" data-slide-to="5"></li>
|
|
</ol>
|
|
<div class="carousel-inner" role="listbox">
|
|
<div class="carousel-item active">
|
|
<img src="img/Alt_Square/1.jpg" alt="First slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/Alt_Square/2.jpg" alt="Second slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/Alt_Square/3.jpg" alt="Third slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/Alt_Square/4.jpg" alt="Fourth slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/Alt_Square/5.jpg" alt="Fifth slide">
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselAltSquare" role="button" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselAltSquare" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h2> "Fun people, fun place, goooood cocktails!"</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The Glod overlay -->
|
|
<div id="Glod" class="overlay">
|
|
<!-- Button to close the overlay navigation -->
|
|
<a href="javascript:void(0)" class="closebtn" onclick="closeNav3()">×</a>
|
|
<!-- Overlay content -->
|
|
<div class="overlay-content">
|
|
<div id="carouselGlod" class="carousel slide" data-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carouselGlod" data-slide-to="1" class="active"></li>
|
|
<li data-target="#carouselGlod" data-slide-to="2"></li>
|
|
<li data-target="#carouselGlod" data-slide-to="3"></li>
|
|
<li data-target="#carouselGlod" data-slide-to="4"></li>
|
|
<li data-target="#carouselGlod" data-slide-to="5"></li>
|
|
</ol>
|
|
<div class="carousel-inner" role="listbox">
|
|
<div class="carousel-item active">
|
|
<img src="img/Glod/1.jpg" alt="First slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/Glod/2.jpg" alt="Second slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/Glod/3.jpg" alt="Third slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/Glod/4.jpg" alt="Fourth slide">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="img/Glod/5.jpg" alt="Fifth slide">
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselGlod" role="button" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselGlod" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h2 style="font-family: 'eyelevation6'">real food, really!</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The Contact Section overlay -->
|
|
<div id="Contact" class="overlay">
|
|
<!-- Button to close the overlay navigation -->
|
|
<a href="javascript:void(0)" class="closebtn" onclick="closeNav4()">×</a>
|
|
<!-- Overlay content -->
|
|
<div class="overlay-content">
|
|
<div id="mapContainer">
|
|
<iframe id="map"
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d174.16865451587364!2d25.5910224590043!3d45.64309323416808!2m3!1f252.21083455344066!2f47.52286241481227!3f0!3m2!1i1024!2i768!4f35!3m3!1m2!1s0x40b35b7a8ddf4039%3A0x715bfccaa47e8732!2sPia%C8%9Ba%20Sfatului%2027%2C%20Bra%C8%99ov%20500025%2C%20Romania!5e1!3m2!1sen!2snl!4v1567698181701!5m2!1sen!2snl">
|
|
</iframe>
|
|
</div>
|
|
<div id="contactDetails">
|
|
<ul>
|
|
<li><a href="https://www.facebook.com/TheSqr/" target="_blank">
|
|
<i class="fab fa-facebook-square"></i>The Square</a>
|
|
</li>
|
|
<li><a href="https://www.facebook.com/AltSquare/" target="_blank">
|
|
<i class="fab fa-facebook-square"></i>Alt Square</a>
|
|
</li>
|
|
<li><a href="https://www.facebook.com/Glod.BistroSquare/" target="_blank">
|
|
<i class="fab fa-facebook-square"></i>Glod</a>
|
|
</li>
|
|
<li><a href="tel:+40736095969" target="_blank">
|
|
<i class="fas fa-phone-volume"></i>+40736095969</a>
|
|
</li>
|
|
<li><a href="mailto: thesquare.brasov@yahoo.com" target="_blank">
|
|
<i class="far fa-envelope"></i>thesquare.brasov@yahoo.com</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Optional JavaScript -->
|
|
<script src="script.js"></script>
|
|
<script src="https://kit.fontawesome.com/0eb0b05fee.js"></script>
|
|
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
|
</body>
|
|
|
|
</html> |