Columns and scroll effects
This commit is contained in:
parent
dcaf7dd5cb
commit
db84bd5e25
|
|
@ -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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 702 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 441 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
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
|
||||
|
||||
**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:
|
||||
|
||||
|
|
@ -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.
|
||||
-->
|
||||
|
||||
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
|
||||
|
||||
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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<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-dialog">
|
||||
<div class="modal-content">
|
||||
|
|
|
|||
26
contents/js/custom.js
Normal file
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 ********/
|
||||
|
||||
@FontAwesomePath: "../fonts";
|
||||
|
|
@ -66,24 +87,23 @@ html, body {
|
|||
img, .img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-position: top center;
|
||||
background-size: cover;
|
||||
}
|
||||
.img-1 {
|
||||
background-image: url("../images/carousel_1.jpg");
|
||||
background-position: top center !important;
|
||||
background-image: url("../images/header.jpg");
|
||||
}
|
||||
.img-static {
|
||||
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,
|
||||
.active,
|
||||
|
|
@ -114,3 +134,11 @@ html, body {
|
|||
font-size: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.order-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.columned {
|
||||
.columns(3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@
|
|||
{{!-- Collect the nav links, forms, and other content for toggling --}}
|
||||
<div class="collapse navbar-collapse navbar-ex1-collapse">
|
||||
<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="contact.html">Contact for information</a></li>
|
||||
</ul>
|
||||
|
|
@ -66,5 +65,6 @@
|
|||
|
||||
<script src="js/jquery-2.0.3.min.js"></script>
|
||||
<script async src="js/bootstrap.min.js"></script>
|
||||
<script async src="js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,11 @@
|
|||
{{#if page.metadata.carousel}}
|
||||
<div id="carousel" class="carousel slide" data-ride="carousel">
|
||||
{{!-- Indicators --}}
|
||||
{{!
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carousel" data-slide-to="1"></li>
|
||||
<li data-target="#carousel" data-slide-to="2"></li>
|
||||
</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 id="carousel" class="carousel slide">
|
||||
{{!-- Wrapper for slides --}}
|
||||
<div class="img-1 img"></div>
|
||||
<div class="carousel-caption">
|
||||
<input type="button" class="btn btn-primary btn-lg order-button" value="Order now">
|
||||
<h1>Inspired by classic</h1>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div id="carousel" class="carousel slide">
|
||||
|
|
|
|||
Loading…
Reference in a new issue