commit 2c4d554b155cf61fb0378f98e984b2c5e07000c1 Author: Dan Date: Fri Sep 6 14:43:16 2019 +0200 First commit diff --git a/font/AldotheApache.woff b/font/AldotheApache.woff new file mode 100644 index 0000000..703bccd Binary files /dev/null and b/font/AldotheApache.woff differ diff --git a/font/eyelevation6.woff b/font/eyelevation6.woff new file mode 100644 index 0000000..dffd77c Binary files /dev/null and b/font/eyelevation6.woff differ diff --git a/img/Alt_Square/1.jpg b/img/Alt_Square/1.jpg new file mode 100644 index 0000000..6db466e Binary files /dev/null and b/img/Alt_Square/1.jpg differ diff --git a/img/Alt_Square/2.jpg b/img/Alt_Square/2.jpg new file mode 100644 index 0000000..dc6628a Binary files /dev/null and b/img/Alt_Square/2.jpg differ diff --git a/img/Alt_Square/3.jpg b/img/Alt_Square/3.jpg new file mode 100644 index 0000000..5f00442 Binary files /dev/null and b/img/Alt_Square/3.jpg differ diff --git a/img/Alt_Square/4.jpg b/img/Alt_Square/4.jpg new file mode 100644 index 0000000..2c65278 Binary files /dev/null and b/img/Alt_Square/4.jpg differ diff --git a/img/Alt_Square/5.jpg b/img/Alt_Square/5.jpg new file mode 100644 index 0000000..1bbd726 Binary files /dev/null and b/img/Alt_Square/5.jpg differ diff --git a/img/Alt_Square/altSquare.png b/img/Alt_Square/altSquare.png new file mode 100644 index 0000000..a46c83c Binary files /dev/null and b/img/Alt_Square/altSquare.png differ diff --git a/img/Glod/1.jpg b/img/Glod/1.jpg new file mode 100644 index 0000000..3918607 Binary files /dev/null and b/img/Glod/1.jpg differ diff --git a/img/Glod/2.jpg b/img/Glod/2.jpg new file mode 100644 index 0000000..1e8cf7c Binary files /dev/null and b/img/Glod/2.jpg differ diff --git a/img/Glod/3.jpg b/img/Glod/3.jpg new file mode 100644 index 0000000..b97e81a Binary files /dev/null and b/img/Glod/3.jpg differ diff --git a/img/Glod/4.jpg b/img/Glod/4.jpg new file mode 100644 index 0000000..9035e7e Binary files /dev/null and b/img/Glod/4.jpg differ diff --git a/img/Glod/5.jpg b/img/Glod/5.jpg new file mode 100644 index 0000000..0251b43 Binary files /dev/null and b/img/Glod/5.jpg differ diff --git a/img/Glod/glod.jpg b/img/Glod/glod.jpg new file mode 100644 index 0000000..5f27357 Binary files /dev/null and b/img/Glod/glod.jpg differ diff --git a/img/The_Square/1.jpg b/img/The_Square/1.jpg new file mode 100644 index 0000000..956114e Binary files /dev/null and b/img/The_Square/1.jpg differ diff --git a/img/The_Square/2.jpg b/img/The_Square/2.jpg new file mode 100644 index 0000000..4d0aa26 Binary files /dev/null and b/img/The_Square/2.jpg differ diff --git a/img/The_Square/3.jpg b/img/The_Square/3.jpg new file mode 100644 index 0000000..1f1e956 Binary files /dev/null and b/img/The_Square/3.jpg differ diff --git a/img/The_Square/4.jpg b/img/The_Square/4.jpg new file mode 100644 index 0000000..4392e12 Binary files /dev/null and b/img/The_Square/4.jpg differ diff --git a/img/The_Square/5.jpg b/img/The_Square/5.jpg new file mode 100644 index 0000000..312d621 Binary files /dev/null and b/img/The_Square/5.jpg differ diff --git a/img/The_Square/qr.jpg b/img/The_Square/qr.jpg new file mode 100644 index 0000000..857554a Binary files /dev/null and b/img/The_Square/qr.jpg differ diff --git a/img/The_Square/square.jpg b/img/The_Square/square.jpg new file mode 100644 index 0000000..529ba8b Binary files /dev/null and b/img/The_Square/square.jpg differ diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000..5dd754c Binary files /dev/null and b/img/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a61b1ef --- /dev/null +++ b/index.html @@ -0,0 +1,226 @@ + + + + + The Square | Alt Square | Glod + + + + + + + + + + + +
+ + + +
+
+
+

Welcome

+

to the fun side

+
+
+
+ The Square +
+
+ Alt Square +
+
+ Glod +
+
+ Contact +
+
+
© 2019 The Square™. All rights reserved.
+
+ + +
+ + × + +
+ +
+

"Good music, nice people, sometimes crowded!"

+
+
+
+ + +
+ + × + +
+ +
+

"Fun people, fun place, goooood cocktails!"

+
+
+
+ + +
+ + × + +
+ +
+

real food, really!

+
+
+
+ + + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..f4223c2 --- /dev/null +++ b/script.js @@ -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" + } + } +); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a9681b5 --- /dev/null +++ b/style.css @@ -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; +}