First commit
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
+226
@@ -0,0 +1,226 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,140 @@
|
||||
/* Open when someone clicks on the span element */
|
||||
function openNav1() {
|
||||
document.getElementById("TheSquare").style.width = "100%";
|
||||
}
|
||||
function openNav2() {
|
||||
document.getElementById("AltSquare").style.width = "100%";
|
||||
}
|
||||
function openNav3() {
|
||||
document.getElementById("Glod").style.width = "100%";
|
||||
}
|
||||
function openNav4() {
|
||||
document.getElementById("Contact").style.width = "100%";
|
||||
}
|
||||
/* Close when someone clicks on the "x" symbol inside the overlay */
|
||||
function closeNav1() {
|
||||
document.getElementById("TheSquare").style.width = "0%";
|
||||
}
|
||||
function closeNav2() {
|
||||
document.getElementById("AltSquare").style.width = "0%";
|
||||
}
|
||||
function closeNav3() {
|
||||
document.getElementById("Glod").style.width = "0%";
|
||||
}
|
||||
function closeNav4() {
|
||||
document.getElementById("Contact").style.width = "0%";
|
||||
}
|
||||
/*Particles*/
|
||||
particlesJS('particles-js',
|
||||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "polygon",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 4
|
||||
},
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.5,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 10,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 150,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 2,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "window",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true,
|
||||
"config_demo": {
|
||||
"hide_card": false,
|
||||
"background_color": "#b61924",
|
||||
"background_image": "",
|
||||
"background_position": "50% 50%",
|
||||
"background_repeat": "no-repeat",
|
||||
"background_size": "cover"
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,204 @@
|
||||
#particles-js {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 0.5;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: black;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
background-size: cover;
|
||||
display: list-item;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
padding: 1vw;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 8vw;
|
||||
margin: 0px;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 4vw;
|
||||
font-size-adjust: inherit;
|
||||
margin: 0px;
|
||||
}
|
||||
.row {
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.outer-div {
|
||||
padding: 10px;
|
||||
display: table;
|
||||
max-width: 700px;
|
||||
align-self: center;
|
||||
max-height: 700px;
|
||||
position: relative;
|
||||
top: 1vw;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.inner-div {
|
||||
-webkit-text-fill-color: white;
|
||||
-webkit-text-stroke-width: 2px;
|
||||
-webkit-text-stroke-color: black;
|
||||
background-color: orange;
|
||||
opacity: 0.8;
|
||||
align-content: space-around;
|
||||
left: 40%;
|
||||
position: relative;
|
||||
border: 5vw;
|
||||
height: 15vh;
|
||||
font-size: 7vw;
|
||||
margin: 3vw;
|
||||
size: initial;
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
letter-spacing: 3px;
|
||||
line-height: 1.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
position: fixed;
|
||||
left: 3vw;
|
||||
bottom: 0;
|
||||
max-width: 50%;
|
||||
text-align: justify;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Aldo the Apache";
|
||||
src: url("font/AldotheApache.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "eyelevation6";
|
||||
src: url("font/eyelevation6.woff") format("woff");
|
||||
}
|
||||
|
||||
/* The Overlay (background) */
|
||||
.overlay {
|
||||
/* Height & width depends on how you want to reveal the overlay (see JS below) */
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgb(0, 0, 0); /* Black fallback color */
|
||||
background-color: rgba(0, 0, 0, 0.9); /* Black w/opacity */
|
||||
overflow-x: hidden; /* Disable horizontal scroll */
|
||||
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
|
||||
}
|
||||
|
||||
/* Position the content inside the overlay */
|
||||
.overlay-content {
|
||||
position: relative;
|
||||
top: 10%; /* 25% from the top */
|
||||
width: 100%; /* 100% width */
|
||||
|
||||
align-content: center; /* Centered text/links */
|
||||
margin-top: 20 px; /* 30px top margin to avoid conflict with the close button on smaller screens */
|
||||
}
|
||||
|
||||
/* The navigation links inside the overlay */
|
||||
.overlay a {
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 36px;
|
||||
color: #818181;
|
||||
display: block; /* Display block instead of inline */
|
||||
transition: 0.3s; /* Transition effects on hover (color) */
|
||||
}
|
||||
|
||||
/* When you mouse over the navigation links, change their color */
|
||||
.overlay a:hover,
|
||||
.overlay a:focus {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Position the close button (top right corner) */
|
||||
.overlay .closebtn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 45px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
|
||||
@media screen and (max-width: 600px) {
|
||||
.overlay a {
|
||||
font-size: 20px;
|
||||
}
|
||||
.overlay .closebtn {
|
||||
font-size: 40px;
|
||||
top: 15px;
|
||||
right: 35px;
|
||||
}
|
||||
}
|
||||
.carousel {
|
||||
object-fit: contain;
|
||||
block-size: auto;
|
||||
}
|
||||
|
||||
.carousel-inner img {
|
||||
width: 78vw;
|
||||
max-height: 78vh;
|
||||
}
|
||||
|
||||
#Contact {
|
||||
background-color: black;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
i {
|
||||
font-size: 3vw;
|
||||
color: white;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#mapContainer {
|
||||
height: 200px;
|
||||
align-content: center;
|
||||
}
|
||||
#contactDetails {
|
||||
display: block;
|
||||
|
||||
width: auto;
|
||||
max-height: 40vh;
|
||||
}
|
||||
#map {
|
||||
width: auto;
|
||||
max-height: 40vh;
|
||||
}
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
z-index: 1000;
|
||||
}
|
||||
Reference in New Issue
Block a user