move header to separate template and include it via php
This commit is contained in:
parent
6635c2a808
commit
d31d3607ef
2 changed files with 156 additions and 0 deletions
24
brc_static/header.tpl
Normal file
24
brc_static/header.tpl
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!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>
|
||||||
|
<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>
|
||||||
132
brc_static/index.php
Normal file
132
brc_static/index.php
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
<?php include('header.tpl'); ?>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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 < 8) {
|
||||||
|
images.push(image)
|
||||||
|
}
|
||||||
|
index += 1
|
||||||
|
});
|
||||||
|
|
||||||
|
images.forEach(e => {
|
||||||
|
thumb_html += '<a href="' + e.url + '"><img class="images" src="'+ e.thumb_url + '"/></a>' // Hier war die class falsch zugewiesen
|
||||||
|
}); // Muss hier ein ";" hin?
|
||||||
|
|
||||||
|
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(); // Muss hier ein ";" hin?
|
||||||
|
|
||||||
|
</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: #f9f9ed; 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>
|
||||||
Loading…
Reference in a new issue