we are not using a lot of laravel features. let's try if we can make it work without php
This commit is contained in:
BuildTools
parent
fce473207a
commit
b3ac8cffca
67
brc_static/about.html
Normal file
67
brc_static/about.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>bricabracomania.</title>
|
||||
<link href="css/styles.css" rel="stylesheet" type="text/css">
|
||||
<link rel="icon"
|
||||
type="image/png"
|
||||
href="/img/myicon.png" />
|
||||
</head>
|
||||
|
||||
<body style="background-color:black;">
|
||||
<header>
|
||||
<img src="img/logo.png" alt="bricabracomania logo" class="logo" />
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="about">About</a></li>
|
||||
<li><a href="projects">Projects</a></li>
|
||||
<li><a href="contacts">Contacts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<video autoplay playsinline nofullscreen nodownload autoplay loop mute style="pointer-events: none" src="video/Heart.m4v" width="80%" height="auto" ></video>
|
||||
|
||||
<div class="home-about-textbox parallax--box">
|
||||
<h1>THE STORY</h1>
|
||||
<p><i>Here we have the story of brc</i></p>
|
||||
<p><strong>How was brc made?</strong></p>
|
||||
<p>Video? Text?</p>
|
||||
</div>
|
||||
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<h2 class="title title-cta">Order your piece now!
|
||||
</h2>
|
||||
<a href="contacts" class="button button-dark">Order</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="col-3">
|
||||
<ul class="unstyled-list" style="text-align:center;">
|
||||
<li><strong>Hancarved jewellery loved and produced by</strong></li>
|
||||
<li>Bricabracomania Metalworks</li>
|
||||
<li>2020</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<ul class="unstyled-list" style="text-align:center;">
|
||||
<li><strong>Follow us</strong></li>
|
||||
<a href="https://www.facebook.com/bricabracomania" target="popup"><img src="/images/fb.png" style ="width:50px; height:50px;"/></a> <a href="https://www.etsy.com/shop/BricabracomaniaCraft" target="popup"><img src="/images/etsy.png" style ="width:50px; height:50px;"/></a> <a href="https://www.instagram.com/bricabracomania_metalworks" target="popup"><img src="/images/instagram.png" style ="width:50px; height:50px;"/></a>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-2.2.4.min.js"
|
||||
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script src="js/parallax.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
59
brc_static/contacts.html
Normal file
59
brc_static/contacts.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>bricabracomania.</title>
|
||||
<link href="css/styles.css" rel="stylesheet" type="text/css">
|
||||
<link rel="icon"
|
||||
type="image/png"
|
||||
href="/img/myicon.png" />
|
||||
</head>
|
||||
|
||||
<body style="background-color:black;">
|
||||
<header>
|
||||
<img src="img/logo.png" alt="bricabracomania logo" class="logo" />
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="about">About</a></li>
|
||||
<li><a href="projects">Projects</a></li>
|
||||
<li><a href="contacts">Contacts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="contact-wrapper">
|
||||
<div class="contact-bg">
|
||||
<div class="contact-info">
|
||||
<h2 style="text-align:center; color: #fff">TELL US WHAT YOU WANT</h2>
|
||||
<p class="p1">+37067476916</p>
|
||||
<p class="p1">bricabracomania@gmail.com</p>
|
||||
<p class="p1">PayPal?</p>
|
||||
<p class="p1">Vilnius, Lithuania</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="col-3">
|
||||
<ul class="unstyled-list" style="text-align:center;">
|
||||
<li><strong>Hancarved jewellery loved and produced by</strong></li>
|
||||
<li>Bricabracomania Metalworks</li>
|
||||
<li>2020</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<ul class="unstyled-list" style="text-align:center;">
|
||||
<li><strong>Follow us</strong></li>
|
||||
<a href="https://www.facebook.com/bricabracomania" target="popup"><img src="images/fb.png" style ="width:50px; height:50px;"/></a> <a href="https://www.etsy.com/shop/BricabracomaniaCraft" target="popup"><img src="images/etsy.png" style ="width:50px; height:50px;"/></a> <a href="https://www.instagram.com/bricabracomania_metalworks" target="popup"><img src="images/instagram.png" style ="width:50px; height:50px;"/></a>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-2.2.4.min.js"
|
||||
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
204
brc_static/css/lightbox.css
Normal file
204
brc_static/css/lightbox.css
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
body.lb-disable-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background-color: black;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
font-weight: normal;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.lightbox .lb-image {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: inherit;
|
||||
max-height: none;
|
||||
border-radius: 3px;
|
||||
|
||||
/* Image border */
|
||||
border: 4px solid white;
|
||||
}
|
||||
|
||||
.lightbox a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.lb-outerContainer {
|
||||
position: relative;
|
||||
*zoom: 1;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
|
||||
/* Background color behind image.
|
||||
This is visible during transitions. */
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.lb-outerContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-loader {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 0;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
background: url(../images/loading.gif) no-repeat;
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lb-container > .nav {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lb-nav a {
|
||||
outline: none;
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
|
||||
}
|
||||
|
||||
.lb-prev, .lb-next {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev {
|
||||
width: 34%;
|
||||
left: 0;
|
||||
float: left;
|
||||
background: url(../images/prev.png) left 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next {
|
||||
width: 64%;
|
||||
right: 0;
|
||||
float: right;
|
||||
background: url(../images/next.png) right 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0 auto;
|
||||
padding-top: 5px;
|
||||
*zoom: 1;
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.lb-dataContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-data {
|
||||
padding: 0 4px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.lb-data .lb-details {
|
||||
width: 85%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption a {
|
||||
color: #4ae;
|
||||
}
|
||||
|
||||
.lb-data .lb-number {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1em;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.lb-data .lb-close {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../images/close.png) top right no-repeat;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.lb-data .lb-close:hover {
|
||||
cursor: pointer;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
584
brc_static/css/styles.css
Normal file
584
brc_static/css/styles.css
Normal file
|
|
@ -0,0 +1,584 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,700,900");
|
||||
@import url("stylesheet.css");
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
transition: all ease-in-out 250ms;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "dominican_small_capsregular";
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.images {
|
||||
filter: grayscale(100%);
|
||||
transition: height 0.5s ease-out, filter 0.3s ease 0.5s, width 0.3s ease-out;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.images:hover {
|
||||
-webkit-filter: grayscale(0%);
|
||||
filter: grayscale(0%);
|
||||
transition: filter 0.8s ease-out;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.clearfix::after,
|
||||
section::after,
|
||||
footer::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Column system
|
||||
=================== */
|
||||
|
||||
[class^="col-"] {
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
[class^="col-"]:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
width: 33.333334%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
[class^="col-"] {
|
||||
float: left;
|
||||
padding: 0 0.5em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
[class^="col-"]:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[class^="col-"]:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
width: 16.6666%;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
display: none; /* Hide all elements by default */
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 10px -16px;
|
||||
}
|
||||
|
||||
|
||||
.row,
|
||||
.row > .column {
|
||||
padding: 0.8px;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* typography
|
||||
=================== */
|
||||
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
font-size: 1.7rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.p1 {
|
||||
color: #fff;
|
||||
padding-top: 20px;
|
||||
padding-right: 100px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.5em;
|
||||
font-weight: 900;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.title span {
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.title-cta {
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
.unstyled-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
font-size: 1.15rem;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
padding: 0.5em 1.75em;
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
.button {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button.active {
|
||||
background-color: #ffffff;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.button-accent {
|
||||
color: #ffffff;
|
||||
border-color: #ffffff;
|
||||
cursor:pointer
|
||||
}
|
||||
|
||||
.button-accent:hover,
|
||||
.button-accent:focus {
|
||||
background: #ffffff;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.button-dark {
|
||||
color: #232323;
|
||||
border-color: #232323;
|
||||
}
|
||||
|
||||
.button-dark:hover,
|
||||
.button-dark:focus {
|
||||
background: #232323;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn {
|
||||
/* border: none;
|
||||
outline: none;
|
||||
padding: 12px 16px; */
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1.15rem;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
padding: 0.5em 1.75em;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
background-color: #666;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Parallax
|
||||
=================== */
|
||||
|
||||
.parallax--bg {
|
||||
width: auto;
|
||||
}
|
||||
/* header
|
||||
=================== */
|
||||
|
||||
header {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
font-weight: 900;
|
||||
text-decoration: none;
|
||||
padding: 0.5em;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
||||
.nav a:hover,
|
||||
.nav a:focus {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* hero-home
|
||||
=================== */
|
||||
|
||||
.home-hero {
|
||||
background-image: url(../img/hero-bg.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 10em 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
.home-hero {
|
||||
height: 100vh;
|
||||
padding-top: 35vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* hero-home
|
||||
=================== */
|
||||
|
||||
.home-about-textbox {
|
||||
background-color: #232323;
|
||||
padding: 10em 20%;
|
||||
width: 100%;
|
||||
outline: 2px solid#ffffff;
|
||||
outline-offset: -2.5em;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.home-about-textbox h1 {
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.75em;
|
||||
background: #232323;
|
||||
padding: 0 0.145em;
|
||||
}
|
||||
|
||||
@media (min-width: 25rem) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.home-about-textbox h1 {
|
||||
top: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.home-about {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.home-about-textbox {
|
||||
width: 100%;
|
||||
outline-offset: -3.75em;
|
||||
/* margin-left: -2.5%; */
|
||||
text-align: left;
|
||||
box-shadow: 0 0 4em 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.home-about-textbox h1 {
|
||||
top: 0.75em;
|
||||
left: 6rem;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* portfolio
|
||||
=================== */
|
||||
|
||||
/* .portfolio {
|
||||
margin: 3em 0 0;
|
||||
} */
|
||||
|
||||
.port-item {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.port-item img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.port-desc {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
bottom: 0em;
|
||||
left: 0em;
|
||||
right: 0em;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.port-desc p {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
@media (min-width: 37rem) {
|
||||
.port-item {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
.port-item {
|
||||
width: 33.3333334%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.port-desc {
|
||||
transform: translateY(150%);
|
||||
}
|
||||
|
||||
.port-item:hover .port-desc {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
/* display flex */
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;}
|
||||
|
||||
.gallery-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.gallery-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Contact
|
||||
=================== */
|
||||
.contact-bg {
|
||||
align-items: center;
|
||||
background: url('../img/who-we-are.jpg');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
background: #80808090;
|
||||
margin: 25vmin 0;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.contact-info h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-gallery-all {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.modal-gallery-txt-img-container {
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.modal-gallery-all-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.modal-all-img {
|
||||
width: 260px;
|
||||
max-width: 90%;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.modal-gallery {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
padding: 15% 0;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.modal-gallery-outer-cont {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-gallery-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-gallery-image {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.modal-gallery-button-prev {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
margin: auto 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.modal-gallery-button-prev:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-gallery-button-next {
|
||||
margin: auto 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.modal-gallery-button-next:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-gallery-close {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.modal-gallery-close:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CTA
|
||||
=================== */
|
||||
|
||||
.cta {
|
||||
background-color: #ffffff;
|
||||
padding: 5em 0;
|
||||
}
|
||||
|
||||
/* Footer
|
||||
=================== */
|
||||
|
||||
footer {
|
||||
background: #232323;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
padding: 5em 0;
|
||||
}
|
||||
body { background-color: #eee; }
|
||||
|
||||
25
brc_static/css/stylesheet.css
Normal file
25
brc_static/css/stylesheet.css
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on June 17, 2020 */
|
||||
|
||||
@font-face {
|
||||
font-family: "dominican_italicregular";
|
||||
src: url("../fonts/domii___-webfont.woff2") format("woff2"),
|
||||
url("../fonts/domii___-webfont.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "dominicanregular";
|
||||
src: url("../fonts/dominica-webfont.woff2") format("woff2"),
|
||||
url("../fonts/dominica-webfont.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "dominican_small_capsregular";
|
||||
src: url("../fonts/domisc__-webfont.woff2") format("woff2"),
|
||||
url("../fonts/domisc__-webfont.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
BIN
brc_static/fonts/domii___-webfont.woff
Normal file
BIN
brc_static/fonts/domii___-webfont.woff
Normal file
Binary file not shown.
BIN
brc_static/fonts/domii___-webfont.woff2
Normal file
BIN
brc_static/fonts/domii___-webfont.woff2
Normal file
Binary file not shown.
BIN
brc_static/fonts/dominica-webfont.woff
Normal file
BIN
brc_static/fonts/dominica-webfont.woff
Normal file
Binary file not shown.
BIN
brc_static/fonts/dominica-webfont.woff2
Normal file
BIN
brc_static/fonts/dominica-webfont.woff2
Normal file
Binary file not shown.
BIN
brc_static/fonts/domisc__-webfont.woff
Normal file
BIN
brc_static/fonts/domisc__-webfont.woff
Normal file
Binary file not shown.
BIN
brc_static/fonts/domisc__-webfont.woff2
Normal file
BIN
brc_static/fonts/domisc__-webfont.woff2
Normal file
Binary file not shown.
5
brc_static/fonts/generator_config.txt
Normal file
5
brc_static/fonts/generator_config.txt
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# Font Squirrel Font-face Generator Configuration File
|
||||
# Upload this file to the generator to recreate the settings
|
||||
# you used to create these fonts.
|
||||
|
||||
{"mode":"optimal","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
|
||||
BIN
brc_static/images/close.png
Normal file
BIN
brc_static/images/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
BIN
brc_static/images/etsy.png
Normal file
BIN
brc_static/images/etsy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
brc_static/images/fb.png
Normal file
BIN
brc_static/images/fb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
brc_static/images/instagram.png
Normal file
BIN
brc_static/images/instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
brc_static/images/loading.gif
Normal file
BIN
brc_static/images/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
brc_static/images/next.png
Normal file
BIN
brc_static/images/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
brc_static/images/prev.png
Normal file
BIN
brc_static/images/prev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
brc_static/img/hero-bg.jpg
Normal file
BIN
brc_static/img/hero-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 591 KiB |
BIN
brc_static/img/logo.png
Normal file
BIN
brc_static/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
brc_static/img/myicon.png
Normal file
BIN
brc_static/img/myicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
brc_static/img/portfolio-01.jpg
Normal file
BIN
brc_static/img/portfolio-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
brc_static/img/portfolio-02.jpg
Normal file
BIN
brc_static/img/portfolio-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
brc_static/img/portfolio-03.jpg
Normal file
BIN
brc_static/img/portfolio-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
BIN
brc_static/img/portfolio-04.jpg
Normal file
BIN
brc_static/img/portfolio-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
brc_static/img/portfolio-05.jpg
Normal file
BIN
brc_static/img/portfolio-05.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
brc_static/img/projects-bg.jpg
Normal file
BIN
brc_static/img/projects-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 562 KiB |
BIN
brc_static/img/projects/amanita.jpg
Normal file
BIN
brc_static/img/projects/amanita.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
BIN
brc_static/img/projects/diretmus-argenteus.jpg
Normal file
BIN
brc_static/img/projects/diretmus-argenteus.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
brc_static/img/projects/pics/tell_tale_heart.png
Normal file
BIN
brc_static/img/projects/pics/tell_tale_heart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 623 KiB |
BIN
brc_static/img/projects/pics/tell_tale_hearts (1).png
Normal file
BIN
brc_static/img/projects/pics/tell_tale_hearts (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 575 KiB |
BIN
brc_static/img/projects/pics/tell_tale_hearts (2).png
Normal file
BIN
brc_static/img/projects/pics/tell_tale_hearts (2).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 521 KiB |
BIN
brc_static/img/projects/pics/tell_tale_hearts (3).png
Normal file
BIN
brc_static/img/projects/pics/tell_tale_hearts (3).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
BIN
brc_static/img/projects/psathyrella-gracilis.jpg
Normal file
BIN
brc_static/img/projects/psathyrella-gracilis.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
BIN
brc_static/img/projects/teeth-ring.jpg
Normal file
BIN
brc_static/img/projects/teeth-ring.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
brc_static/img/projects/tell-tale.jpg
Normal file
BIN
brc_static/img/projects/tell-tale.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
BIN
brc_static/img/title.png
Normal file
BIN
brc_static/img/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
brc_static/img/who-we-are.jpg
Normal file
BIN
brc_static/img/who-we-are.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 689 KiB |
155
brc_static/index.html
Normal file
155
brc_static/index.html
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>bricabracomania.</title>
|
||||
<link href="css/styles.css" rel="stylesheet" type="text/css">
|
||||
<link rel="icon"
|
||||
type="image/png"
|
||||
href="/img/myicon.png" />
|
||||
</head>
|
||||
|
||||
<body style="background-color:black;">
|
||||
<header>
|
||||
<img src="img/logo.png" alt="bricabracomania logo" class="logo" />
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="projects">Projects</a></li>
|
||||
<li><a href="contacts">Contacts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="home-hero parallax--bg">
|
||||
<div class="container">
|
||||
<h1 class="title parallax--box"><span><img src="img/title.png" alt="title"></span>
|
||||
</h1>
|
||||
<a href="/projects" class="button button-accent">See Our Work</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container">
|
||||
<section class="home-about">
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function show_posts(myArr) {
|
||||
var ar = myArr.graphql.user.edge_owner_to_timeline_media.edges;
|
||||
var images = [];
|
||||
var thumb_html;
|
||||
var index = 0;
|
||||
|
||||
ar.forEach(element => {
|
||||
image = {
|
||||
thumb_url: element.node.thumbnail_resources[1].src,
|
||||
url: "https://instagram.com/p/" + element.node.shortcode
|
||||
}
|
||||
console.log(element);
|
||||
if (index < 7) {
|
||||
images.push(image)
|
||||
}
|
||||
index += 1
|
||||
});
|
||||
|
||||
images.forEach(e => {
|
||||
thumb_html += '<a href="' + e.url + '"><img class="insta_thumb" src="'+ e.thumb_url + '"/></a>'
|
||||
})
|
||||
|
||||
document.getElementById('ig_container').innerHTML = thumb_html;
|
||||
}
|
||||
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
var url = "https://www.instagram.com/bricabracomania_metalworks/?__a=1";
|
||||
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var myArr = JSON.parse(this.responseText);
|
||||
show_posts(myArr)
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", url, true);
|
||||
xmlhttp.send();
|
||||
|
||||
</script>
|
||||
|
||||
<div class="home-about-textbox parallax--box">
|
||||
<h1>Who we are</h1>
|
||||
<p><i>Bricabracomania metalworks is home of antique-inspired, alternative jewelry with an obscure, sculptural twist.</i></p>
|
||||
<p><strong>Every design is created with passion and devotion in the best traditions of wax carving by hand, experimenting with forms and textures, as well as unconventional material combinations and patinas.</strong></p>
|
||||
<p>We celebrate statement pieces, bold designs and mix of eras – from classical forms of ancient Rome to intricate details of Victorian memorabilia. Inspired by legends, religious motives and the occult, pirate tales and cabinets of curiosities, these creations are meant to become life companions and talismans for their owners.</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="portfolio">
|
||||
<!-- portfolio item 01 -->
|
||||
<figure class="port-item">
|
||||
<img src="img/portfolio-01.jpg" alt="portfolio item">
|
||||
<figcaption class="port-desc">
|
||||
<p>Project title</p>
|
||||
<a href="projects" class="button button-accent button-small">Project details</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- portfolio item 03 -->
|
||||
<figure class="port-item">
|
||||
<img src="img/portfolio-03.jpg" alt="portfolio item">
|
||||
<figcaption class="port-desc">
|
||||
<p>TELL TALE HEARTS</p>
|
||||
<a href="projects" class="button button-accent button-small">Project details</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- portfolio item 05 -->
|
||||
<figure class="port-item">
|
||||
<img src="img/portfolio-05.jpg" alt="portfolio item">
|
||||
<figcaption class="port-desc">
|
||||
<p>INSPECTING THE DEAD MAN'S CHEST</p>
|
||||
<a href="projects" class="button button-accent button-small">Project details</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<h2 class="title title-cta">Order your piece now!
|
||||
</h2>
|
||||
<a href="contacts" class="button button-dark">Order</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p><a style="color: #fff; text-decoration: none;" href="https://www.instagram.com/bricabracomania_metalworks/">Check out our instagram page</a></p>
|
||||
<div id="ig_container"><!-- instagram posts will be inserted here --></div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="col-3">
|
||||
<ul class="unstyled-list" style="text-align:center;">
|
||||
<li><strong>Hancarved jewellery loved and produced by</strong></li>
|
||||
<li>Bricabracomania Metalworks</li>
|
||||
<li>2020</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<ul class="unstyled-list" style="text-align:center;">
|
||||
<li><strong>Follow us</strong></li>
|
||||
<a href="https://www.facebook.com/bricabracomania" target="popup"><img src="images/fb.png" style ="width:50px; height:50px;"/></a> <a href="https://www.etsy.com/shop/BricabracomaniaCraft" target="popup"><img src="images/etsy.png" style ="width:50px; height:50px;"/></a> <a href="https://www.instagram.com/bricabracomania_metalworks" target="popup"><img src="images/instagram.png" style ="width:50px; height:50px;"/></a>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-2.2.4.min.js"
|
||||
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
131
brc_static/js/galleryDisplay.js
Normal file
131
brc_static/js/galleryDisplay.js
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
function galleryFilter(showValue) {
|
||||
const elems = document.getElementsByClassName("gallery-item");
|
||||
const dElems = document.getElementsByClassName("gallery-description");
|
||||
const showElems = document.getElementsByClassName(showValue);
|
||||
|
||||
for(let i = 0; i < dElems.length; i++){
|
||||
const dElem = dElems[i];
|
||||
dElem.style.display='none';
|
||||
}
|
||||
|
||||
for(let i = 0; i < elems.length; i++){
|
||||
const elem = elems[i];
|
||||
elem.style.display='none';
|
||||
}
|
||||
|
||||
for(let i = 0; i < showElems.length; i++){
|
||||
const sElem = showElems[i];
|
||||
sElem.style.display='initial';
|
||||
}
|
||||
}
|
||||
|
||||
let currImgArr = [];
|
||||
|
||||
let currImgInd = 0;
|
||||
|
||||
let currImg = 'img/portfolio-01.jpg';
|
||||
|
||||
function openModalAll(className, imgArr) {
|
||||
const elems = document.getElementsByClassName(className);
|
||||
|
||||
elems[0].style.display = imgArr ? 'flex' : 'none';
|
||||
|
||||
currImgArr = imgArr;
|
||||
}
|
||||
|
||||
function zoomModal(initIndex) {
|
||||
const elems = document.getElementsByClassName("modal-gallery");
|
||||
|
||||
elems[0].style.display = initIndex === false ? 'none' : 'flex';
|
||||
|
||||
currImgInd = initIndex;
|
||||
|
||||
currImg = 'img/' + currImgArr[currImgInd];
|
||||
|
||||
const imgElems = document.getElementsByClassName("modal-gallery-image");
|
||||
|
||||
imgElems[0].src = currImg;
|
||||
|
||||
const nextElems = document.getElementsByClassName("modal-gallery-button-next");
|
||||
if(currImgInd === (currImgArr.length - 1)){
|
||||
nextElems[0].style.visibility = 'hidden';
|
||||
nextElems[0].style.pointerEvents = 'none';
|
||||
} else {
|
||||
nextElems[0].style.visibility = 'visible';
|
||||
nextElems[0].style.pointerEvents = 'initial';
|
||||
}
|
||||
|
||||
const prevElems = document.getElementsByClassName("modal-gallery-button-prev");
|
||||
if(currImgInd === 0){
|
||||
prevElems[0].style.visibility = 'hidden';
|
||||
prevElems[0].style.pointerEvents = 'none';
|
||||
} else {
|
||||
prevElems[0].style.visibility = 'visible';
|
||||
prevElems[0].style.pointerEvents = 'initial';
|
||||
}
|
||||
|
||||
if(imgArr.length === 1){
|
||||
nextElems[0].style.visibility = 'hidden';
|
||||
nextElems[0].style.pointerEvents = 'none';
|
||||
} else {
|
||||
nextElems[0].style.visibility = 'visible';
|
||||
nextElems[0].style.pointerEvents = 'initial';
|
||||
}
|
||||
}
|
||||
|
||||
function nextImg() {
|
||||
currImgInd += 1;
|
||||
|
||||
currImg = 'img/' + currImgArr[currImgInd];
|
||||
|
||||
const imgElems = document.getElementsByClassName("modal-gallery-image");
|
||||
|
||||
imgElems[0].src = currImg;
|
||||
|
||||
const nextElems = document.getElementsByClassName("modal-gallery-button-next");
|
||||
if(currImgInd === (currImgArr.length - 1)){
|
||||
nextElems[0].style.visibility = 'hidden';
|
||||
nextElems[0].style.pointerEvents = 'none';
|
||||
} else {
|
||||
nextElems[0].style.visibility = 'visible';
|
||||
nextElems[0].style.pointerEvents = 'initial';
|
||||
}
|
||||
|
||||
const prevElems = document.getElementsByClassName("modal-gallery-button-prev");
|
||||
if(currImgInd === 0){
|
||||
prevElems[0].style.visibility = 'hidden';
|
||||
prevElems[0].style.pointerEvents = 'none';
|
||||
} else {
|
||||
prevElems[0].style.visibility = 'visible';
|
||||
prevElems[0].style.pointerEvents = 'initial';
|
||||
}
|
||||
}
|
||||
|
||||
function prevImg() {
|
||||
currImgInd -= 1;
|
||||
|
||||
currImg = 'img/' + currImgArr[currImgInd];
|
||||
|
||||
const imgElems = document.getElementsByClassName("modal-gallery-image");
|
||||
|
||||
imgElems[0].src = currImg;
|
||||
|
||||
const nextElems = document.getElementsByClassName("modal-gallery-button-next");
|
||||
if(currImgInd === (currImgArr.length - 1)){
|
||||
nextElems[0].style.visibility = 'hidden';
|
||||
nextElems[0].style.pointerEvents = 'none';
|
||||
} else {
|
||||
nextElems[0].style.visibility = 'visible';
|
||||
nextElems[0].style.pointerEvents = 'initial';
|
||||
}
|
||||
|
||||
const prevElems = document.getElementsByClassName("modal-gallery-button-prev");
|
||||
if(currImgInd === 0){
|
||||
prevElems[0].style.visibility = 'hidden';
|
||||
prevElems[0].style.pointerEvents = 'none';
|
||||
} else {
|
||||
prevElems[0].style.visibility = 'visible';
|
||||
prevElems[0].style.pointerEvents = 'initial';
|
||||
}
|
||||
}
|
||||
|
||||
161
brc_static/js/index.html
Normal file
161
brc_static/js/index.html
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>bricabracomania.</title>
|
||||
<link href="css/styles.css" rel="stylesheet" type="text/css">
|
||||
<link rel="icon"
|
||||
type="image/png"
|
||||
href="/img/myicon.png" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body style="background-color:black;">
|
||||
<header>
|
||||
<img src="img/logo.png" alt="bricabracomania logo" class="logo">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">About</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="home-hero parallax--bg">
|
||||
<div class="container">
|
||||
<h1 class="title parallax--box"><span><img src="img/title.png" alt="title"></span>
|
||||
</h1>
|
||||
<a href="" class="button button-accent">See Our Work</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container">
|
||||
<section class="home-about">
|
||||
|
||||
<div class="home-about-textbox parallax--box">
|
||||
<h1>Who we are</h1>
|
||||
<p><i>Bricabracomania metalworks is home of antique-inspired, alternative jewelry with an obscure, sculptural twist.</i></p>
|
||||
<p><strong>Every design is created with passion and devotion in the best traditions of wax carving by hand, experimenting with forms and textures, as well as unconventional material combinations and patinas.</strong> We celebrate statement pieces, bold designs and mix of eras – from classical forms of ancient Rome to intricate details of Victorian memorabilia. Our creations are inspired by legends, religious motives and occult, pirate tales and cabinets of curiosities; are meant to become life companions and talismans for their owners.</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="portfolio">
|
||||
<h1>Some of our work</h1>
|
||||
|
||||
<!-- portfolio item 01 -->
|
||||
<figure class="port-item">
|
||||
<img src="img/portfolio-01.jpg" alt="portfolio item">
|
||||
<figcaption class="port-desc">
|
||||
<p>Project title</p>
|
||||
<a href="" class="button button-accent button-small">Project details</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- portfolio item 02 -->
|
||||
<figure class="port-item">
|
||||
<img src="img/portfolio-02.jpg" alt="portfolio item">
|
||||
<figcaption class="port-desc">
|
||||
<p>Project title</p>
|
||||
<a href="" class="button button-accent button-small">Project details</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- portfolio item 03 -->
|
||||
<figure class="port-item">
|
||||
<img src="img/portfolio-03.jpg" alt="portfolio item">
|
||||
<figcaption class="port-desc">
|
||||
<p>Project title</p>
|
||||
<a href="" class="button button-accent button-small">Project details</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- portfolio item 04 -->
|
||||
<figure class="port-item">
|
||||
<img src="img/portfolio-04.jpg" alt="portfolio item">
|
||||
<figcaption class="port-desc">
|
||||
<p>Project title</p>
|
||||
<a href="" class="button button-accent button-small">Project details</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- portfolio item 05 -->
|
||||
<figure class="port-item">
|
||||
<img src="img/portfolio-05.jpg" alt="portfolio item">
|
||||
<figcaption class="port-desc">
|
||||
<p>Project title</p>
|
||||
<a href="" class="button button-accent button-small">Project details</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- portfolio item 06 -->
|
||||
<figure class="port-item">
|
||||
<img src="img/portfolio-06.jpg" alt="portfolio item">
|
||||
<figcaption class="port-desc">
|
||||
<p>Project title</p>
|
||||
<a href="" class="button button-accent button-small">Project details</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<h1 class="title title-cta">Want to order?
|
||||
<span>Then what are you waiting for?</span>
|
||||
</h1>
|
||||
<a href="" class="button button-dark">Order</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="col-3">
|
||||
<p>Hancarved jewellery loved and produced by</p>
|
||||
</div>
|
||||
|
||||
<div class="col-1">
|
||||
<ul class="unstyled-list">
|
||||
<li><strong>Brc</strong></li>
|
||||
<li>Metalworkds</li>
|
||||
<li>Unique</li>
|
||||
<li>Madman's</li>
|
||||
<li>Basement</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-1">
|
||||
<ul class="unstyled-list">
|
||||
<li><strong>Follow us</strong></li>
|
||||
<li>Instagram</li>
|
||||
<li>Etsy</li>
|
||||
<li>Whatever</li>
|
||||
<li>Floats your boat</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-1">
|
||||
<ul class="unstyled-list">
|
||||
<li><strong>Licensed by</strong></li>
|
||||
<li>Lietuvos</li>
|
||||
<li>Prabavimo</li>
|
||||
<li>Rumai</li>
|
||||
<li>LPR</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-2.2.4.min.js"
|
||||
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script src="js/parallax.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11153
brc_static/js/lightbox-plus-jquery.js
Normal file
11153
brc_static/js/lightbox-plus-jquery.js
Normal file
File diff suppressed because it is too large
Load diff
18
brc_static/js/parallax.js
Normal file
18
brc_static/js/parallax.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
$(window).scroll(function() {
|
||||
parallax();
|
||||
})
|
||||
|
||||
function parallax() {
|
||||
|
||||
var wScroll = $(window).scrollTop()
|
||||
|
||||
|
||||
// $('.parallax--bg').css('background-position', 'center ' + (wScroll*0.75)+'px');
|
||||
|
||||
|
||||
// $('.parallax--box').css('top', -5 + (wScroll*.005)+'em')
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
215
brc_static/projects.html
Normal file
215
brc_static/projects.html
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>bricabracomania.</title>
|
||||
<link href="css/styles.css" rel="stylesheet" type="text/css">
|
||||
<link rel="icon"
|
||||
type="image/png"
|
||||
href="/img/myicon.png" />
|
||||
</head>
|
||||
<body style="background-color:black;">
|
||||
<header>
|
||||
<img src="img/logo.png" alt="bricabracomania logo" class="logo" />
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="about">About</a></li>
|
||||
<li><a href="projects">Projects</a></li>
|
||||
<li><a href="contacts">Contacts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section class="parallax--bg">
|
||||
</section>
|
||||
<div>
|
||||
<figure class="button button-accent" onclick="galleryFilter('all')"> SHOW ALL</figure>
|
||||
<figure class="button button-accent" onclick="galleryFilter('cabinet')">CABINET OF CURIOSITIES</figure>
|
||||
<figure class="button button-accent" onclick="galleryFilter('chest')">INSPECTING THE DEAD MAN'S CHEST</figure>
|
||||
<figure class="button button-accent" onclick="galleryFilter('heart')">TELL TALE HEART</figure>
|
||||
<figure class="button button-accent" onclick="galleryFilter('madman')">MADMAN'S BASEMENT</figure>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="color: #fff" class="gallery-description cabinet">
|
||||
<h1>CABINET OF CURIOSITIES</h1>
|
||||
<p class="p1">This collection is a tribute to wonders of nature, the bizzare and incredible forms of life and death.<br>Exploring the forms and textures, the unseen and rare - its a tribute to once popular cabinets of naural and artistic curiosities, captured in metals and gems</p>
|
||||
</div>
|
||||
<div style="color: #fff" class="gallery-description chest" >
|
||||
<h1>INSPECTING THE DEAD MAN'S CHEST </h1>
|
||||
<p class="p1">Inspired by pirate tales, Blackbeard and the Whydah Gally, these pieces are the tribute to the long forgotten treasures and jewels that lay burried in a watery grave. This jewelry series is mostly based on replicated archeological artefacts from shipwrecks</p>
|
||||
</div>
|
||||
<div style="color: #fff" class="gallery-description heart" >
|
||||
<h1>TELL TALE HEART</h1>
|
||||
<p class="p1">The Sacred heart is an ultimate symbol of a passionate love for mankind. Here you shall find a variety of
|
||||
pendants and medalions inspired by this classical motive and explored beyond its original roots.
|
||||
These talismanic hearts represent a sensual and passionate side of its owners, a promise of love or an ode to inspiration - it is yet to be established</p>
|
||||
</div>
|
||||
<div style="color: #fff" class="gallery-description madman" >
|
||||
<h1>THE MADMAN'S BASEMENT</h1>
|
||||
<p class="p1">Ladies and gentlemen, feast your eyes! The sideshow of goldsmith's bench! Step out to see the creatures of experimental tecniques, designs and unconventional materials, the Frankentein's monsters of metalsmithing, insane projects and much, much more - all that is beyond description and scientific classification found its resting place right here, in Bricabracomania's very own Madman's Basement museum</p>
|
||||
</div>
|
||||
|
||||
|
||||
{{-- <div class="modal-gallery-all AmanitaPhalloides">
|
||||
<div class="modal-gallery-all-container">
|
||||
<div class="modal-all-img"><img src="img/projects/amanita.jpg" alt="Amanita"></div>
|
||||
<div class="modal-all-img"><img src="img/portfolio-05.jpg" alt="Escudo charm"></div>
|
||||
<div class="modal-all-img"><img src="img/projects/diretmus-argenteus.jpg" alt="Diretmus Argenteus"></div>
|
||||
<div class="modal-all-img"><img src="img/projects/amanita.jpg" alt="Amanita"></div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<div class="modal-gallery">
|
||||
<div class="modal-gallery-outer-cont">
|
||||
<img onclick="zoomModal(false)" class="modal-gallery-close" src="images/close.png">
|
||||
<div class="modal-gallery-container">
|
||||
<div class="modal-gallery-button-prev" onclick="prevImg()"> <img class="modal-gallery-button-img" src="images/prev.png"/> </div>
|
||||
<img class="modal-gallery-image" src="img/test.jpg">
|
||||
<div disabled class="modal-gallery-button-next" onclick="nextImg()"> <img class="modal-gallery-button-img" src="images/next.png"/> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- modal gallery zoom --}}
|
||||
{{-- <div class="modal-gallery-all EscudoCharm">
|
||||
<img onclick="openModalAll('EscudoCharm', false)" class="modal-gallery-close" src="images/close.png">
|
||||
<div class="modal-gallery-txt-img-container">
|
||||
<div style="color: #fff">Penis</div>
|
||||
<div class="modal-gallery-all-container">
|
||||
<div class="modal-all-img" onclick="zoomModal(0)">
|
||||
<img src="img/projects/amanita.jpg" alt="Amanita">
|
||||
</div>
|
||||
<div class="modal-all-img" onclick="zoomModal(1)">
|
||||
<img src="img/portfolio-05.jpg" alt="Escudo charm">
|
||||
</div>
|
||||
<div class="modal-all-img" onclick="zoomModal(2)" >
|
||||
<img src="img/projects/diretmus-argenteus.jpg" alt="Diretmus Argenteus">
|
||||
</div>
|
||||
<div class="modal-all-img" onclick="zoomModal(3)">
|
||||
<img src="img/projects/amanita.jpg" alt="Amanita">
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: #fff">BIG sized</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
<div class="modal-gallery-all Heart">
|
||||
<img onclick="openModalAll('Heart', false)" class="modal-gallery-close" src="images/close.png">
|
||||
<div class="modal-gallery-txt-img-container">
|
||||
<h2 style="text-align:center; color: #fff">Enameled Sacred Heart necklace - TELL TALE HEART</h2>
|
||||
<div class="modal-gallery-all-container">
|
||||
<div class="modal-all-img" onclick="zoomModal(0)">
|
||||
<img src="img/projects/pics/tell_tale_heart.png" alt="Tell tale heart1">
|
||||
</div>
|
||||
<div class="modal-all-img" onclick="zoomModal(1)">
|
||||
<img src="img/projects/pics/tell_tale_hearts (1).png" alt="Tell tale heart2">
|
||||
</div>
|
||||
<div class="modal-all-img" onclick="zoomModal(2)" >
|
||||
<img src="img/projects/pics/tell_tale_hearts (2).png" alt="Tell tale heart3">
|
||||
</div>
|
||||
<div class="modal-all-img" onclick="zoomModal(3)">
|
||||
<img src="img/projects/pics/tell_tale_hearts (3).png" alt="Tell tale heart4">
|
||||
</div>
|
||||
</div>
|
||||
<p style="color: #fff">Ultramarine & almandine (2/13)</p>
|
||||
<p style="color: #fff">925 Silver, 18K gold, almandine garnet, enamelling and gold plating</p>
|
||||
<p style="color: #fff">Yellow gold bezel, royal blue hot enamel, fine gold gilding</p>
|
||||
<p style="color: #fff">Measurements: about 4 cm x 3.5 cm</p>
|
||||
<p class="p1">The Sacred heart is an ultimate symbol of a passionate love for mankind.
|
||||
Inspired by this classical motive and explored beyond its original roots, enameled sacred heart necklace is going to charm it's way into Your life together with You.</p>
|
||||
<p class="p1">Enameled sacred heart necklace is limited edition piece of variety of pendants and medallions from the collection "Tell tale hearts".
|
||||
These talismanic hearts represent a sensual and passionate side of its owners, a promise of love or an ode to inspiration - it is yet to be established.
|
||||
Being one of a kind piece, second out of thirteen different interpretations of this model, the colors, textures and stones will not repeat itself in any other one.
|
||||
All 13 hearts are unique and no copies can be produced.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="gallery-container">
|
||||
<div class="gallery-item chest all pointer">
|
||||
<div onclick="openModalAll('EscudoCharm', ['projects/amanita.jpg', 'portfolio-05.jpg', 'projects/diretmus-argenteus.jpg', 'projects/amanita.jpg'])">
|
||||
<img src="img/portfolio-05.jpg" alt="Escudo charm" class="hover-shadow cursor">
|
||||
<h2 style="color: #fff">Escudo Charm</h2>
|
||||
<p class="p1">Based on a replica of a shipwreck spanish escudo coin<br>Silver, sapphirres<br>Measurements: 2,5x2cm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item heart all">
|
||||
<div onclick="openModalAll('Heart', ['projects/pics/tell_tale_heart.png', 'projects/pics/tell_tale_hearts (1).png', 'projects/pics/tell_tale_hearts (2).png', 'projects/pics/tell_tale_hearts (3).png'])">
|
||||
<div>
|
||||
<img src="img/projects/tell-tale.jpg" alt="Tell tale heart" class="hover-shadow cursor">
|
||||
<h2 style="color: #fff">Tell tale heart</h2>
|
||||
<p class="p1">Ultramarine & almandine (2/13)<br>Silver, 18K gold, almandine garnet, enamelling and gold plating<br>Measurements: 4x3,5cm</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item cabinet all" >
|
||||
<div>
|
||||
<img src="img/projects/amanita.jpg" alt="Amanita" class="hover-shadow cursor">
|
||||
<h2 style="color: #fff">Amanita phalloides</h2>
|
||||
<p class="p1">Silver, 18K gold, 24K gold plating<br>Statement pendant for a thick cord or chain up to 3mm thick<br>Measurements: 5x3,5cm</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-item cabinet all" >
|
||||
<div>
|
||||
<img src="img/projects/diretmus-argenteus.jpg" alt="Diretmus Argenteus" class="hover-shadow cursor">
|
||||
<h2 style="color: #fff">Diretmus Argenteus</h2>
|
||||
<p class="p1">Sterling silver, london blue topaz<br>Statement brooch<br>Measurments:</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-item cabinet all" >
|
||||
<div>
|
||||
<img src="img/projects/psathyrella-gracilis.jpg" alt="Psathyrella Gracilis" class="hover-shadow cursor">
|
||||
<h2 style="color: #fff">Psathyrella Gracilis</h2>
|
||||
<p class="p1">Bronze, verdigris patina<br>Statement pendant for a thick cord<br>Measurements: 8x3,5cm</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-item madman all" >
|
||||
<div>
|
||||
<img src="img/projects/teeth-ring.jpg" alt="Teeth ring" class="hover-shadow cursor">
|
||||
<h2 style="color: #fff">Teeth ring</h2>
|
||||
<p class="p1">Description<br>Measurements:</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<h2 class="title title-cta">Order your piece now!
|
||||
</h2>
|
||||
<a href="contacts" class="button button-dark">Order</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="col-3">
|
||||
<ul class="unstyled-list" style="text-align:center;">
|
||||
<li><strong>Hancarved jewellery loved and produced by</strong></li>
|
||||
<li>Bricabracomania Metalworks</li>
|
||||
<li>2020</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<ul class="unstyled-list" style="text-align:center;">
|
||||
<li><strong>Follow us</strong></li>
|
||||
<a href="https://www.facebook.com/bricabracomania" target="popup"><img src="/images/fb.png" style ="width:50px; height:50px;"/></a> <a href="https://www.etsy.com/shop/BricabracomaniaCraft" target="popup"><img src="/images/etsy.png" style ="width:50px; height:50px;"/></a> <a href="https://www.instagram.com/bricabracomania_metalworks" target="popup"><img src="/images/instagram.png" style ="width:50px; height:50px;"/></a>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-2.2.4.min.js"
|
||||
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script src="js/parallax.js"></script>
|
||||
<script src="js/lightbox-plus-jquery.js"></script>
|
||||
<script src="js/galleryDisplay.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
56
brc_static/resizeImage.blade.php
Normal file
56
brc_static/resizeImage.blade.php
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<h1>Resize Image Uploading Demo</h1>
|
||||
@if (count($errors) > 0)
|
||||
<div class="alert alert-danger">
|
||||
<strong>Whoops!</strong> There were some problems with your input.<br><br>
|
||||
<ul>
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
@if ($message = Session::get('success'))
|
||||
<div class="alert alert-success alert-block">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>{{ $message }}</strong>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<strong>Original Image:</strong>
|
||||
<br/>
|
||||
<img src="/images/{{ Session::get('imageName') }}" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<strong>Thumbnail Image:</strong>
|
||||
<br/>
|
||||
<img src="/thumbnail/{{ Session::get('imageName') }}" />
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
{!! Form::open(array('route' => 'resizeImagePost','enctype' => 'multipart/form-data')) !!}
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<br/>
|
||||
{!! Form::text('title', null,array('class' => 'form-control','placeholder'=>'Add Title')) !!}
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<br/>
|
||||
{!! Form::file('image', array('class' => 'image')) !!}
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<br/>
|
||||
<button type="submit" class="btn btn-success">Upload Image</button>
|
||||
</div>
|
||||
</div>
|
||||
{!! Form::close() !!}
|
||||
</div>
|
||||
@endsection
|
||||
BIN
brc_static/video/Heart.m4v
Normal file
BIN
brc_static/video/Heart.m4v
Normal file
Binary file not shown.
Loading…
Reference in a new issue