Compare commits
4 commits
0dbb5224b2
...
6d6dfc5dce
| Author | SHA1 | Date | |
|---|---|---|---|
 bsod
|
6d6dfc5dce | ||
|
bsod
|
4f8e9c504a | ||
|
bsod
|
57bb90c510 | ||
|
bsod
|
18e31e50bd |
83
css/projects.css
Normal file
83
css/projects.css
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
|
||||
div.collection_container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
div.collection {
|
||||
background-color: #1f1f1f;
|
||||
border: #444 2px solid;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
div.collection {
|
||||
width: calc(33.3333% - 8px);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 600px) and (max-width: 999px) {
|
||||
div.collection {
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 599px) {
|
||||
div.collection {
|
||||
width: calc(100% - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
div.collection h1 {
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.collection div.col-desc {
|
||||
padding: 10px;
|
||||
font-family: sans-serif; /* FIXME: find suitable font */
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
section.cta h2 {
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
/* Slide in stuff */
|
||||
|
||||
.col-img-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.col-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.col-img-desc {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(51, 51, 51, 0.4);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: .5s ease;
|
||||
}
|
||||
|
||||
.col-img-container:hover .col-img-desc {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.col-img-desc div {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,700,900");
|
||||
@import url("stylesheet.css");
|
||||
@import url("projects.css");
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -11,6 +12,7 @@ body {
|
|||
font-family: "dominican_small_capsregular";
|
||||
text-align: center;
|
||||
background-color: #000;
|
||||
color: #f9f9ed;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -353,7 +355,7 @@ header {
|
|||
=================== */
|
||||
|
||||
.home-hero {
|
||||
background-image: url(../img/hero-bg.jpg);
|
||||
background-image: url(/images/backgroud_img/hero-bg.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 10em 0;
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@
|
|||
<link href="css/styles.css" rel="stylesheet" type="text/css">
|
||||
<link rel="icon"
|
||||
type="image/png"
|
||||
href="/img/myicon.png" />
|
||||
href="/img/favicon.png" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<img src="img/logo.png" alt="bricabracomania logo" class="logo" />
|
||||
<img src="images/logo_button/logo_ivory.png" alt="bricabracomania logo" class="logo" />
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<section class="home-hero parallax--bg">
|
||||
<div class="container">
|
||||
<h1 class="title parallax--box"><span><img src="img/title.png" alt="bricabracomania metalworks"></span>
|
||||
<h1 class="title parallax--box"><span><img src="images/logo_button/title_ivory.png" alt="bricabracomania metalworks"></span>
|
||||
</h1>
|
||||
<a href="/projects" class="button button-accent">See Our Work</a>
|
||||
</div>
|
||||
|
|
|
|||
179
projects.php
179
projects.php
|
|
@ -1,164 +1,39 @@
|
|||
<?php include('header.tpl'); ?>
|
||||
<div id="project_margin">
|
||||
<figure class="button button-accent-projects" onclick="galleryFilter('all')"> SHOW ALL</figure> </p>
|
||||
<figure class="button button-accent-projects" onclick="galleryFilter('cabinet')">CABINET OF CURIOSITIES</figure>
|
||||
<figure class="button button-accent-projects" onclick="galleryFilter('chest')">INSPECTING THE DEAD MAN'S CHEST</figure>
|
||||
<figure class="button button-accent-projects" onclick="galleryFilter('heart')">TELL TALE HEART</figure>
|
||||
<figure class="button button-accent-projects" onclick="galleryFilter('madman')">MADMAN'S BASEMENT</figure>
|
||||
</div>
|
||||
<div id="project_margin">
|
||||
<?php include('projects_data/project_items.php'); ?>
|
||||
<div class="collection_container">
|
||||
<?php
|
||||
$index = 0;
|
||||
foreach($collections as $c) {
|
||||
$html = '
|
||||
<div class="collection">
|
||||
<h1>' . $c["name"] . '</h1>
|
||||
|
||||
<div style="color: #f9f9ed" 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: #f9f9ed" 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: #f9f9ed" 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: #f9f9ed" 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: #f9f9ed">blind Text</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: #f9f9ed">Blind text</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: #f9f9ed">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: #f9f9ed">Ultramarine & almandine (2/13)</p>
|
||||
<p style="color: #f9f9ed">925 Silver, 18K gold, almandine garnet, enamelling and gold plating</p>
|
||||
<p style="color: #f9f9ed">Yellow gold bezel, royal blue hot enamel, fine gold gilding</p>
|
||||
<p style="color: #f9f9ed">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: #f9f9ed">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: #f9f9ed">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 class="col-img-container">
|
||||
<img class="col-image" src="projects_data/img/' . $c['preview_image_url'] . '" alt="example image for ' . $c['name'] .'">
|
||||
<div class="col-img-desc">
|
||||
<div>
|
||||
<img src="img/projects/amanita.jpg" alt="Amanita" class="hover-shadow cursor">
|
||||
<h2 style="color: #f9f9ed">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>
|
||||
<p>' . $c['name'] . '</p>
|
||||
<a href="show_gallery.php?id=' . $index .'" class="button button-accent button-small">Details</a>
|
||||
</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: #f9f9ed">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: #f9f9ed">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: #f9f9ed">Teeth ring</h2>
|
||||
<p class="p1">Description<br>Measurements:</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<figure class="button button-accent-projects" onclick="galleryFilter('all')"> SHOW ALL</figure> <!--Hinzugefügt für bessere Bedienbarkeit-->
|
||||
|
||||
<section class="cta">
|
||||
</div>
|
||||
<div class="col-desc">
|
||||
' . $c['collection_description'] . '
|
||||
</div>
|
||||
</div>
|
||||
';
|
||||
print($html);
|
||||
$index += 1;
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<section class="cta" style="clear: both;">
|
||||
<div class="container">
|
||||
<h2 class="title title-cta">Order your piece now!
|
||||
</h2>
|
||||
<a href="contacts.html" class="button button-dark">Order</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<?php include('footer.tpl'); ?>
|
||||
|
Before Width: | Height: | Size: 217 KiB After Width: | Height: | Size: 217 KiB |
|
Before Width: | Height: | Size: 207 KiB After Width: | Height: | Size: 207 KiB |
BIN
projects_data/img/cabinet_of_curiosities/diretmus_argenteus.jpg
Normal file
BIN
projects_data/img/cabinet_of_curiosities/diretmus_argenteus.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
|
Before Width: | Height: | Size: 154 KiB After Width: | Height: | Size: 154 KiB |
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 242 KiB After Width: | Height: | Size: 242 KiB |
BIN
projects_data/img/madmans_basement/teeth_ring.jpg
Normal file
BIN
projects_data/img/madmans_basement/teeth_ring.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
|
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 226 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
117
projects_data/project_items.php
Normal file
117
projects_data/project_items.php
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<?php
|
||||
|
||||
$collections = array(
|
||||
|
||||
array(
|
||||
"name" => "The dead mans chest",
|
||||
"preview_image_url" => "dead_mans_chest/cover.jpg",
|
||||
"collection_description" =>
|
||||
<<<endstring
|
||||
<p>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>
|
||||
endstring,
|
||||
|
||||
"items" => array(
|
||||
array(
|
||||
"name" => "Escudo Charm",
|
||||
"description" => "Based on a replica of a shipwreck spanish escudo coin",
|
||||
"material" => "Silver, sapphirres",
|
||||
"measurements" => "Measurements: 2,5x2cm",
|
||||
"images" => array(
|
||||
"dead_mans_chest/cover.jpg",
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
array(
|
||||
"name" => "Tell Tale Heart",
|
||||
"preview_image_url" => "tell_tale_heart/cover.jpg",
|
||||
"collection_description" =>
|
||||
<<<endstring
|
||||
<p>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>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>
|
||||
endstring,
|
||||
|
||||
"items" => array(
|
||||
array(
|
||||
"name" => "Tell tale heart",
|
||||
"description" => "Ultramarine & almandine (2/13)",
|
||||
"material" => "Silver, 18K gold, almandine garnet, enamelling and gold plating",
|
||||
"measurements" => "4x3,5cm",
|
||||
"images" => array(
|
||||
"tell_tale_heart/img1.jpg",
|
||||
"tell_tale_heart/img2.jpg",
|
||||
"tell_tale_heart/img3.jpg",
|
||||
"tell_tale_heart/img4.jpg",
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
array(
|
||||
"name" => "Cabinet Of Curiosities",
|
||||
"preview_image_url" => "cabinet_of_curiosities/cover.jpg",
|
||||
"collection_description" =>
|
||||
<<<endstring
|
||||
<p>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>
|
||||
endstring,
|
||||
|
||||
"items" => array(
|
||||
array(
|
||||
"name" => "Diretmus Argenteus",
|
||||
"description" => "meeh",
|
||||
"material" => "Sterling silver, london blue topaz",
|
||||
"measurements" => "meeh",
|
||||
"images" => array(
|
||||
"cabinet_of_curiosities/diretmus_argenteus.jpg",
|
||||
),
|
||||
),
|
||||
array(
|
||||
"name" => "Psathyrella Gracilis",
|
||||
"description" => "Statement pendant for a thick cord",
|
||||
"material" => "Bronze, verdigris patina",
|
||||
"measurements" => "8x3,5cm",
|
||||
"images" => array(
|
||||
"cabinet_of_curiosities/psathyrella_gracilis.jpg",
|
||||
),
|
||||
),
|
||||
array(
|
||||
"name" => "Amanita phalloides",
|
||||
"description" => "Statement pendant for a thick cord or chain up to 3mm thick",
|
||||
"material" => "Silver, 18K gold, 24K gold plating",
|
||||
"measurements" => "5x3,5cm",
|
||||
"images" => array(
|
||||
"cabinet_of_curiosities/amanita.jpg",
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
array(
|
||||
"name" => "Madman's Basement",
|
||||
"preview_image_url" => "madmans_basement/cover.jpg",
|
||||
"collection_description" =>
|
||||
<<<endstring
|
||||
<p>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>
|
||||
endstring,
|
||||
|
||||
"items" => array(
|
||||
array(
|
||||
"name" => "Teeth ring",
|
||||
"description" => "meeh",
|
||||
"material" => "Teeth or something",
|
||||
"measurements" => "meeh",
|
||||
"images" => array(
|
||||
"madmans_basement/teeth_ring.jpg",
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
);
|
||||
|
||||
?>
|
||||
Loading…
Reference in a new issue