Columns and scroll effects
|
@ -1,39 +0,0 @@
|
||||||
---
|
|
||||||
template: index.html
|
|
||||||
---
|
|
||||||
<h2>About the "Godfather"</h2>
|
|
||||||
<p><b>The Godfather</b> is a 1972 American crime film directed by Francis Ford Coppola. A screenplay was written by Mario Puzo and Coppola; the film is based on Puzo's 1969 novel of the same name.</p>
|
|
||||||
|
|
||||||
<p><b>The Godfather</b> stars Marlon Brando and Al Pacino as the leaders of a fictional New York crime family. The film was the most popular at its time and acclaimed a strong cult following. There were two followups with Al Pacino as the lead; however, the first film of the series is more widely recognised and the figure of Marlon Brando as Don Corleone is a pop-icon.</p>
|
|
||||||
|
|
||||||
<p>The cinematography and ... are unique and one can tell a sound of the scene by simply looking at one shot. </p>
|
|
||||||
|
|
||||||
<p>That was the solid piece of inspiration for Mr. C.Woud.</p>
|
|
||||||
|
|
||||||
<h2>About the painter</h2>
|
|
||||||
|
|
||||||
<h2>Painting details</h2>
|
|
||||||
<div class="centered">
|
|
||||||
<a href="#" data-toggle="modal" data-target="#fullsize1" alt="Painting by C.Woud (detail)"><img class="img-thumbnail" src="images/godfather-painting-detail1_thumb.jpg" alt="Painting detail"></a>
|
|
||||||
<a href="#" data-toggle="modal" data-target="#fullsize2" alt="Painting by C.Woud (detail)"><img class="img-thumbnail" src="images/godfather-painting-detail2_thumb.jpg" alt="Painting detail"></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal fade" id="fullsize1">
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-body">
|
|
||||||
<img data-dismiss="modal" src="images/godfather-painting-detail1.jpg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal fade" id="fullsize2">
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-body">
|
|
||||||
<img data-dismiss="modal" src="images/godfather-painting-detail2.jpg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
Before Width: | Height: | Size: 702 KiB |
Before Width: | Height: | Size: 2 MiB |
Before Width: | Height: | Size: 441 KiB |
Before Width: | Height: | Size: 1.2 MiB |
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 279 KiB |
Before Width: | Height: | Size: 372 KiB After Width: | Height: | Size: 372 KiB |
|
@ -4,11 +4,12 @@ template: index.html
|
||||||
---
|
---
|
||||||
## The work
|
## The work
|
||||||
|
|
||||||
**Oil paintings** has a lot of popularity these days. But how can the art that is centuries old still be modern? Perhaps it's the visual quality of beautifully painted colors, something of a man's soul that can't be reproduced by a mere color printing mech.
|
<div class="columned">
|
||||||
|
<p><b>Oil paintings</b> has a lot of popularity these days. But how can the art that is centuries old still be modern? Perhaps it's the visual quality of beautifully painted colors, something of a man's soul that can't be reproduced by a mere color printing mech.</p>
|
||||||
|
|
||||||
In 1972, Francis Ford Coppola has shown the world The Godfather. The screen version of an epic Mario Puzo's novel immediately became a classic hit. The role of Don Corleone, the Godfather, was played brilliantly by sir Marlon Brando.
|
<p>In 1972, Francis Ford Coppola has shown the world The Godfather. The screen version of an epic Mario Puzo's novel immediately became a classic hit. The role of Don Corleone, the Godfather, was played brilliantly by sir Marlon Brando.</p>
|
||||||
|
|
||||||
In 21st century, a specialist artist C.Woud was inspired by the film. He painted an impressive painting using a special technique on scrim and wood, catching the Godfather in motion. Now you can buy a copy for yourself.
|
<p>In 21st century, a specialist artist C.Woud was inspired by the film. He painted an impressive painting using a special technique on scrim and wood, catching the Godfather in motion. Now you can buy a copy for yourself.</p>
|
||||||
|
|
||||||
<!--Unique selling points:
|
<!--Unique selling points:
|
||||||
|
|
||||||
|
@ -20,19 +21,60 @@ In 21st century, a specialist artist C.Woud was inspired by the film. He painted
|
||||||
- Price elsewhere: EUR 2200. Our price (including frame): EUR 1700.
|
- Price elsewhere: EUR 2200. Our price (including frame): EUR 1700.
|
||||||
-->
|
-->
|
||||||
|
|
||||||
You can buy a copy elsewhere for EUR 2200, or look at our price: EUR 1700, including frame. Also, if you're fast enough, you may still get a DVD collection of Francis Ford Coppola _for free_.
|
<p>You can buy a copy elsewhere for EUR 2200, or look at our price: EUR 1700, including frame. Also, if you're fast enough, you may still get a DVD collection of Francis Ford Coppola <i>for free</i>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
###**LIMITED OFFER** (only 3 left): Receive The Godfather - The Coppola Collection (5DVD) FREE with your order
|
###**LIMITED OFFER** (only 3 left): Receive The Godfather - The Coppola Collection (5DVD) FREE with your order
|
||||||
|
|
||||||
The boring details: 110x120cm, custom framed. Oil, scrim, wood.
|
The boring details: 110x120cm, custom framed. Oil, scrim, wood.
|
||||||
|
|
||||||
<div class="text-center">
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-lg-offset-3">
|
||||||
<a href="#" data-toggle="modal" data-target="#fullsize" alt="Painting by C.Woud"><img class="img-thumbnail" src="images/painting_thumb.jpg"></a>
|
<a href="#" data-toggle="modal" data-target="#fullsize" alt="Painting by C.Woud"><img class="img-thumbnail" src="images/painting_thumb.jpg"></a>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<a href="#" data-toggle="modal" data-target="#fullsize1" alt="Painting by C.Woud (detail)"><img class="img-thumbnail" src="images/godfather-painting-detail1_thumb.jpg" alt="Painting detail"></a><br>
|
||||||
|
<a href="#" data-toggle="modal" data-target="#fullsize2" alt="Painting by C.Woud (detail)"><img class="img-thumbnail" src="images/godfather-painting-detail2_thumb.jpg" alt="Painting detail"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row centered">
|
||||||
<p><small> click on the image to see a larger preview </small></p>
|
<p><small> click on the image to see a larger preview </small></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="reserve.html" class="link_reserve">Reserve your copy now!</a>
|
<a href="reserve.html" class="link_reserve">Reserve your copy now!</a>
|
||||||
|
|
||||||
|
<h2>About the "Godfather"</h2>
|
||||||
|
</div>
|
||||||
|
<div class="middle"></div>
|
||||||
|
<div class="container">
|
||||||
|
<p><b>The Godfather</b> is a 1972 American crime film directed by Francis Ford Coppola. A screenplay was written by Mario Puzo and Coppola; the film is based on Puzo's 1969 novel of the same name.</p>
|
||||||
|
|
||||||
|
<p><b>The Godfather</b> stars Marlon Brando and Al Pacino as the leaders of a fictional New York crime family. The film was the most popular at its time and acclaimed a strong cult following. There were two followups with Al Pacino as the lead; however, the first film of the series is more widely recognised and the figure of Marlon Brando as Don Corleone is a pop-icon.</p>
|
||||||
|
|
||||||
|
<p>The cinematography and ... are unique and one can tell a sound of the scene by simply looking at one shot. </p>
|
||||||
|
|
||||||
|
<p>That was the solid piece of inspiration for Mr. C.Woud.</p>
|
||||||
|
|
||||||
|
<div class="modal fade" id="fullsize1">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-body">
|
||||||
|
<img data-dismiss="modal" src="images/godfather-painting-detail1.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal fade" id="fullsize2">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-body">
|
||||||
|
<img data-dismiss="modal" src="images/godfather-painting-detail2.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal fade" id="fullsize">
|
<div class="modal fade" id="fullsize">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
26
contents/js/custom.js
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
jQuery(document).ready(function(){
|
||||||
|
var windowWidth = window.screen.width < (window.outerWidth ? window.screen.width : window.outerWidth);
|
||||||
|
var mobile = windowWidth < 500;
|
||||||
|
if(mobile)
|
||||||
|
{
|
||||||
|
jQuery(window).scroll(function() {
|
||||||
|
scroll_effect();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function scroll_effect() {
|
||||||
|
// Get the scroll position of the page
|
||||||
|
scrollPos = jQuery(this).scrollTop();
|
||||||
|
// Fade out the banner text
|
||||||
|
jQuery('.carousel-caption').css({
|
||||||
|
'margin-top' : -(scrollPos/3)+"px",
|
||||||
|
'opacity' : 1-(scrollPos/300)
|
||||||
|
});
|
||||||
|
if (scrollPos > 500)
|
||||||
|
{
|
||||||
|
jQuery('.middle').css({
|
||||||
|
'height': (scrollPos-500)+"px"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -30,6 +30,27 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.columns(@colcount: 0, @colwidth: 250px, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
|
||||||
|
-moz-column-width: @colwidth;
|
||||||
|
-moz-column-count: @colcount;
|
||||||
|
-moz-column-gap: @colgap;
|
||||||
|
-moz-column-rule-color: @columnRuleColor;
|
||||||
|
-moz-column-rule-style: @columnRuleStyle;
|
||||||
|
-moz-column-rule-width: @columnRuleWidth;
|
||||||
|
-webkit-column-width: @colwidth;
|
||||||
|
-webkit-column-count: @colcount;
|
||||||
|
-webkit-column-gap: @colgap;
|
||||||
|
-webkit-column-rule-color: @columnRuleColor;
|
||||||
|
-webkit-column-rule-style: @columnRuleStyle;
|
||||||
|
-webkit-column-rule-width: @columnRuleWidth;
|
||||||
|
column-width: @colwidth;
|
||||||
|
column-count: @colcount;
|
||||||
|
column-gap: @colgap;
|
||||||
|
column-rule-color: @columnRuleColor;
|
||||||
|
column-rule-style: @columnRuleStyle;
|
||||||
|
column-rule-width: @columnRuleWidth;
|
||||||
|
}
|
||||||
|
|
||||||
/******** VARIABLES ********/
|
/******** VARIABLES ********/
|
||||||
|
|
||||||
@FontAwesomePath: "../fonts";
|
@FontAwesomePath: "../fonts";
|
||||||
|
@ -66,24 +87,23 @@ html, body {
|
||||||
img, .img {
|
img, .img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-position: center;
|
background-position: top center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
.img-1 {
|
.img-1 {
|
||||||
background-image: url("../images/carousel_1.jpg");
|
background-image: url("../images/header.jpg");
|
||||||
background-position: top center !important;
|
|
||||||
}
|
}
|
||||||
.img-static {
|
.img-static {
|
||||||
background-image: url("../images/static.jpg");
|
background-image: url("../images/static.jpg");
|
||||||
background-position: top center !important;
|
|
||||||
}
|
|
||||||
.img-2 {
|
|
||||||
.at2x("../images/carousel_2.jpg");
|
|
||||||
}
|
|
||||||
.img-3 {
|
|
||||||
.at2x("../images/carousel_3.jpg");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.middle {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 500px;
|
||||||
|
background-image: url("../images/middle.jpg");
|
||||||
|
background-position: top center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
.item,
|
.item,
|
||||||
.active,
|
.active,
|
||||||
|
@ -114,3 +134,11 @@ html, body {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.order-button {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.columned {
|
||||||
|
.columns(3);
|
||||||
|
}
|
||||||
|
|
|
@ -25,7 +25,6 @@
|
||||||
{{!-- Collect the nav links, forms, and other content for toggling --}}
|
{{!-- Collect the nav links, forms, and other content for toggling --}}
|
||||||
<div class="collapse navbar-collapse navbar-ex1-collapse">
|
<div class="collapse navbar-collapse navbar-ex1-collapse">
|
||||||
<ul class="nav navbar-nav navbar-right">
|
<ul class="nav navbar-nav navbar-right">
|
||||||
<li><a href="about.html">About</a></li>
|
|
||||||
<li><a href="reserve.html">Reserve painting</a></li>
|
<li><a href="reserve.html">Reserve painting</a></li>
|
||||||
<li><a href="contact.html">Contact for information</a></li>
|
<li><a href="contact.html">Contact for information</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -66,5 +65,6 @@
|
||||||
|
|
||||||
<script src="js/jquery-2.0.3.min.js"></script>
|
<script src="js/jquery-2.0.3.min.js"></script>
|
||||||
<script async src="js/bootstrap.min.js"></script>
|
<script async src="js/bootstrap.min.js"></script>
|
||||||
|
<script async src="js/custom.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,47 +1,11 @@
|
||||||
{{#if page.metadata.carousel}}
|
{{#if page.metadata.carousel}}
|
||||||
<div id="carousel" class="carousel slide" data-ride="carousel">
|
<div id="carousel" class="carousel slide">
|
||||||
{{!-- Indicators --}}
|
{{!-- Wrapper for slides --}}
|
||||||
{{!
|
<div class="img-1 img"></div>
|
||||||
<ol class="carousel-indicators">
|
<div class="carousel-caption">
|
||||||
<li data-target="#carousel" data-slide-to="0" class="active"></li>
|
<input type="button" class="btn btn-primary btn-lg order-button" value="Order now">
|
||||||
<li data-target="#carousel" data-slide-to="1"></li>
|
<h1>Inspired by classic</h1>
|
||||||
<li data-target="#carousel" data-slide-to="2"></li>
|
</div>
|
||||||
</ol>
|
|
||||||
}}
|
|
||||||
|
|
||||||
{{!-- Wrapper for slides --}}
|
|
||||||
<div class="carousel-inner">
|
|
||||||
<div class="item active">
|
|
||||||
<div class="img-1 img"></div>
|
|
||||||
<div class="carousel-caption">
|
|
||||||
<h1>Cult classic by Francis Ford Coppola</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{!
|
|
||||||
<div class="item">
|
|
||||||
<div class="img-2 img"></div>
|
|
||||||
<div class="carousel-caption">
|
|
||||||
<h1>Now at your house</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="img-3 img"></div>
|
|
||||||
<div class="carousel-caption">
|
|
||||||
<h1>Hand painted</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{!-- Controls --}}
|
|
||||||
{{!
|
|
||||||
<a class="left carousel-control" href="#carousel" data-slide="prev">
|
|
||||||
<span class="icon-prev"></span>
|
|
||||||
</a>
|
|
||||||
<a class="right carousel-control" href="#carousel" data-slide="next">
|
|
||||||
<span class="icon-next"></span>
|
|
||||||
</a>
|
|
||||||
}}
|
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div id="carousel" class="carousel slide">
|
<div id="carousel" class="carousel slide">
|
||||||
|
|