GitBlixt
teagles/ChoiceCastings.com

Saved: 2017-11-10 14:24

Torey Heinz committed Nov 10, 2017
commit 7c428d79d577d62d497f48774f24d7958f873afb
Showing 24 changed files with 278 additions and 89 deletions
app/views/pages/index.liquid +118 -61
@@ @@ -9,71 +9,128 @@ is_layout: false
{% extends 'layouts/application' %}
{% block 'main' %}
<div class="wide-layout">
- <div class="row">
- <div class="medium-8 columns">
- <h2>Why Choice Castings?</h2>
- <p>At Choice Castings, we are best in class at providing solutions for your casting needs. We work with many quality foundries giving us the opportunity to provide you the best choice for your casting requirements. With a firm understanding of your critical needs, Choice Castings can work on sourcing solutions, including, buying quality parts on time at the right price.</p>
- </div>
- <div class="medium-4 columns">
- <img class="thumbnail" src="http://placehold.it/250x250">
+ <div class="row expanded services text-center">
+ <h1>How can Choice Castings help you?</h1>
+ <div class="row wide gutter-small" data-equalizer>
+ <div class="medium-4 column">
+ <div class="card">
+ <div class="title card-divider" data-equalizer-watch>
+ <p class="lead">Need Expedited Service?</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco</p>
+ </div>
+ <img src="{{ 'need-expedited-service.jpg' | theme_image_url | resize: '600x300#' }}">
+ </div>
+ </div>
+ <div class="medium-4 column">
+ <div class="card">
+ <div class="title card-divider" data-equalizer-watch>
+ <p class="lead">Quality Concerns?</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ quis nostrud exercitation ullamco</p>
+ </div>
+ <img src="{{ 'quality-concerns.jpg' | theme_image_url | resize: '600x300#' }}">
+ </div>
+ </div>
+ <div class="medium-4 column">
+ <div class="card">
+ <div class="title card-divider" data-equalizer-watch>
+ <p class="lead">Offshoring Headaches?</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco</p>
+ </div>
+ <img src="{{ 'offshoring-headaches.jpg' | theme_image_url | resize: '600x300#' }}">
+ </div>
+ </div>
</div>
</div>
- <hr>
- <div class="row">
- <div class="medium-4 columns text-center">
- <h3>Need Expedited Service?</h3>
- <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
- </div>
- <div class="medium-4 columns text-center">
- <h3>Quality Concerns?</h3>
- <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
+ <div class="row expanded content">
+ <div class="row wide">
+ <div class="large-6 column">
+ <h2>Welcome to Choice Castings</h2>
+ <p>Opportunities for Foundries to add regular orders. Industrial and commercial casting solutions. Not just castings or machined parts, or . We provide metal castings when you need them at the price you need.</p>
+ <p>We focus on know-how, leverage and strategy. To allow you to focus on your manufacturing and sales.</p>
+ </div>
+ <div class="large-6 column">
+ <ul class="slides text-center">
+ <li class="slide" style="background: url('{{ 'slides/slide-1.jpg' | theme_image_url | resize: '600x300#' }}') top center no-repeat;">
+ <div class="content">
+ <p class="lead">Cast Threads</p>
+ <p>Malleable iron with cast internal NPT and ACME threads.</p>
+ </div>
+ </li>
+ <li class="slide" style="background: url('{{ 'slides/slide-2.jpg' | theme_image_url | resize: '600x300#' }}') top center no-repeat;">
+ <div class="content">
+ <p class="lead">Cast Threads</p>
+ <p>Malleable iron with cast internal NPT and ACME threads.</p>
+ </div>
+ </li>
+ <li class="slide" style="background: url('{{ 'slides/slide-3.jpg' | theme_image_url | resize: '600x300#' }}') top center no-repeat;">
+ <div class="content">
+ <p class="lead">Cast Threads</p>
+ <p>Malleable iron with cast internal NPT and ACME threads.</p>
+ </div>
+ </li>
+ <li class="slide" style="background: url('{{ 'slides/slide-4.jpg' | theme_image_url | resize: '600x300#' }}') top center no-repeat;">
+ <div class="content">
+ <p class="lead">Cast Threads</p>
+ <p>Malleable iron with cast internal NPT and ACME threads.</p>
+ </div>
+ </li>
+ <li class="slide" style="background: url('{{ 'slides/slide-5.jpg' | theme_image_url | resize: '600x300#' }}') top center no-repeat;">
+ <div class="content">
+ <p class="lead">Cast Threads</p>
+ <p>Malleable iron with cast internal NPT and ACME threads.</p>
+ </div>
+ </li>
+ <li class="slide" style="background: url('{{ 'slides/slide-6.jpg' | theme_image_url | resize: '600x300#' }}') top center no-repeat;">
+ <div class="content">
+ <p class="lead">Cast Threads</p>
+ <p>Malleable iron with cast internal NPT and ACME threads.</p>
+ </div>
+ </li>
+ </ul>
+ </div>
</div>
- <div class="medium-4 columns text-center">
- <h3>Offshoring Headaches?</h3>
- <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
- </div>
- </div>
- <hr>
- <div class="row column text-center">
- <h3>In Stock Items</h3>
</div>
- <div class="row medium-up-3 large-up-4">
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
- </div>
- <div class="column">
- <img class="thumbnail" src="http://placehold.it/550x550">
+ <div class="row stock-items expanded">
+ <div class="row wide small-up-2 large-up-4 text-center gutter-small">
+ <h3 class="">In Stock Items</h3>
+ <div class="column">
+ <div class="card">
+ <img src="{{ 'nest-caps.jpg' | theme_image_url | resize: '200x200#' }}">
+ <div class="title card-divider" data-equalizer-watch>
+ <p class="lead">NEST CAPS</p>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="card">
+ <img src="{{ 'wing-nuts.jpg' | theme_image_url | resize: '200x200#' }}">
+ <div class="title card-divider" data-equalizer-watch>
+ <p class="lead">WING NUTS</p>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="card">
+ <img src="{{ 'hand-wheel.jpg' | theme_image_url | resize: '200x200#' }}">
+ <div class="title card-divider" data-equalizer-watch>
+ <p class="lead">HAND WHEELS</p>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="card">
+ <img src="{{ 'spike-grid.jpg' | theme_image_url | resize: '200x200#' }}">
+ <div class="title card-divider" data-equalizer-watch>
+ <p class="lead">SPIKE GRIDS</p>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
- {% endblock %}
\ No newline at end of file
+ {% endblock %}
app/views/pages/layouts/application.liquid +15 -14
@@ @@ -29,7 +29,7 @@ is_layout: true
<div class="row">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu data-alignment="left">
- <li class="menu-text">Choice Castings</li>
+ <li class="menu-text logo"><img src="{{ 'ChoiceCastingsLogo-web.png' | theme_image_url }}"></li>
<li><a href="/">Home</a></li>
{% for page in site.pages %}
{% if page.depth == 1 and page.listed? %}
@@ @@ -50,22 +50,23 @@ is_layout: true
</div>
</div>
<!-- End Top Bar -->
- <div class="wrapper row column">
- <div class="callout large">
- <div class="row column text-center">
- <h1>
- <img src="{{ 'ChoiceCastingsLogo.png' | theme_image_url }}" style="width: 60px; margin-bottom: 10px">
- Choice Castings
- <img src="{{ 'ChoiceCastingsLogo.png' | theme_image_url }}" style="width: 60px; margin-bottom: 10px">
- </h1>
- <p class="lead">A Single Source for ALL of Your Casting Needs</p>
- </div>
+ <div class="row expanded text-center banner">
+ {% comment %}<img class="banner-image" src="{{ 'banner-1.jpg' | theme_image_url }}">{% endcomment %}
+ <p class="lead">A Single Source for ALL of Your Casting Needs</p>
</div>
- <div class="">
+ <div class="wrapper row expanded">
{% block main %}
+ <div class="row">
{% editable_text content %}Lorem ipsum{% endeditable_text %}
+ </div>
{% endblock %}
- </div>
+ <footer class="row expanded">
+ <div class="row wide text-center">
+ <p><img src="{{ 'ChoiceCastingsLogo-web.png' | theme_image_url }}"></p>
+ <p>Copyright © 2012, Choice Castings Inc. All rights reserved.</p>
+ </div>
+
+ </footer>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
{{ 'vendor/jquery.sticky.js' | javascript_tag }}
@@ @@ -73,4 +74,4 @@ is_layout: true
{{ 'vendor/foundation.min.js' | javascript_tag }}
{{ 'app.js' | javascript_tag }}
</body>
- </html>
\ No newline at end of file
+ </html>
log/server.log +12 -0
@@ @@ -29,3 +29,15 @@ I, [2017-10-30T16:35:09.464077 #37845] INFO -- : Listening on 0.0.0.0:3000, CTR
I, [2017-10-30T17:42:25.583427 #48451] INFO -- : Thin web server (v1.6.4 codename Gob Bluth)
I, [2017-10-30T17:42:25.583514 #48451] INFO -- : Maximum connections set to 1024
I, [2017-10-30T17:42:25.583532 #48451] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop
+ I, [2017-11-08T07:15:44.943208 #96691] INFO -- : Thin web server (v1.6.4 codename Gob Bluth)
+ I, [2017-11-08T07:15:44.943449 #96691] INFO -- : Maximum connections set to 1024
+ I, [2017-11-08T07:15:44.943471 #96691] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop
+ I, [2017-11-08T07:23:24.002088 #97599] INFO -- : Thin web server (v1.6.4 codename Gob Bluth)
+ I, [2017-11-08T07:23:24.002185 #97599] INFO -- : Maximum connections set to 1024
+ I, [2017-11-08T07:23:24.002203 #97599] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop
+ I, [2017-11-08T13:46:11.445980 #19957] INFO -- : Thin web server (v1.6.4 codename Gob Bluth)
+ I, [2017-11-08T13:46:11.446068 #19957] INFO -- : Maximum connections set to 1024
+ I, [2017-11-08T13:46:11.446100 #19957] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop
+ I, [2017-11-10T14:24:40.924428 #3476] INFO -- : Thin web server (v1.6.4 codename Gob Bluth)
+ I, [2017-11-10T14:24:40.924735 #3476] INFO -- : Maximum connections set to 1024
+ I, [2017-11-10T14:24:40.924767 #3476] INFO -- : Listening on 0.0.0.0:3000, CTRL+C to stop
public/images/ChoiceCastingsLogo-web.png +0 -0
public/images/banner-1.jpg +0 -0
public/images/banner-1.png +0 -0
public/images/body-bg.png +0 -0
public/images/hand-wheel.jpg +0 -0
public/images/need-expedited-service.jpg +0 -0
public/images/nest-caps.jpg +0 -0
public/images/offshoring-headaches.jpg +0 -0
public/images/quality-concerns.jpg +0 -0
public/images/slides/slide-1.jpg +0 -0
public/images/slides/slide-2.jpg +0 -0
public/images/slides/slide-3.jpg +0 -0
public/images/slides/slide-4.jpg +0 -0
public/images/slides/slide-5.jpg +0 -0
public/images/slides/slide-6.jpg +0 -0
public/images/spike-grid.jpg +0 -0
public/images/wing-nuts.jpg +0 -0
public/javascripts/app.js +12 -0
@@ @@ -3,3 +3,15 @@ $(document).foundation();
$('nav#top-nav > ul').addClass('dropdown menu')
$('nav#top-nav > ul ul').addClass('menu')
+
+ var slides = document.querySelectorAll('ul.slides .slide');
+ var currentSlide = Math.floor(Math.random() * slides.length);
+ slides[currentSlide].className = 'slide showing';
+
+ var slideInterval = setInterval(nextSlide, 3000);
+
+ function nextSlide() {
+ slides[currentSlide].className = 'slide';
+ currentSlide = (currentSlide+1)%slides.length;
+ slides[currentSlide].className = 'slide showing';
+ }
public/stylesheets/_settings.scss +8 -6
@@ @@ -66,11 +66,12 @@
// ---------
$global-font-size: 100%;
- $global-width: rem-calc(800);
+ $global-width: rem-calc(960);
$global-lineheight: 1.5;
$foundation-palette: (
- primary: #1779ba,
+ primary: #EE6500,
secondary: #767676,
+ // secondary: #EE6500,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
@@ @@ -82,7 +83,7 @@ $black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
- $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+ $body-font-family: Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
@@ @@ -122,6 +123,7 @@ $grid-column-count: 12;
$grid-column-gutter: (
small: 20px,
medium: 30px,
+ large: 50px,
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
@@ @@ -386,7 +388,7 @@ $dropdown-sizes: (
// -----------------
$dropdownmenu-arrows: true;
- $dropdownmenu-arrow-color: $anchor-color;
+ $dropdownmenu-arrow-color: $white;
$dropdownmenu-arrow-size: 6px;
$dropdownmenu-arrow-padding: 1.5rem;
$dropdownmenu-min-width: 300px;
@@ @@ -845,8 +847,8 @@ $tooltip-radius: $global-radius;
// 55. Top Bar
// -----------
- $topbar-padding: 0.5rem;
- $topbar-background: $light-gray;
+ $topbar-padding: 0.0rem;
+ $topbar-background: #201E1F;
$topbar-submenu-background: $topbar-background;
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
public/stylesheets/_slide-show.scss +38 -0
@@ @@ -0,0 +1,38 @@
+ ul.slides {
+ position: relative;
+ height: 300px;
+ padding: 0px;
+ margin: 0px;
+ list-style-type: none;
+ }
+
+ li.slide {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ z-index: 1;
+ background: #333;
+ background-size: cover;
+ color: #fff;
+
+ -webkit-transition: opacity 1s;
+ -moz-transition: opacity 1s;
+ -o-transition: opacity 1s;
+ transition: opacity 1s;
+
+ .content {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ background: rgba(0,0,0, 0.75);
+ }
+ }
+
+
+ li.showing {
+ opacity: 1;
+ z-index: 2;
+ }
public/stylesheets/app.scss +75 -8
@@ @@ -42,6 +42,7 @@
@include foundation-visibility-classes;
@include foundation-float-classes;
+ @import 'slide-show';
body, html {
height: 100%;
@@ @@ -49,20 +50,86 @@ body, html {
}
html {
- background: image-url('/images/body-bg.jpg') no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
+ background: image-url('/images/body-bg.png') repeat;
}
div.wrapper {
background: #fff;
- padding-top: rem-calc(10);
+ // padding-top: rem-calc(10);
+ // box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
body.index {
- .row {
- // max-width: rem-calc(1200);
+ .row.wide {
+ max-width: rem-calc(1200);
+ }
+ }
+
+ .top-bar {
+ box-shadow: 0 1px 2px rgba(0,0,0,0.24);
+ // background-color: #201E1F;
+
+ .logo img {
+ max-width: 225px;
+ }
+
+ a {
+ color: $white;
+ }
+
+ a:hover {
+ color: $primary-color;
+ }
+ }
+
+ .banner {
+ position: relative;
+ height: 350px;
+ background: image-url('/images/banner-1.jpg') top center no-repeat;
+ background-size: cover;
+
+ p.lead {
+ @include absolute-center;
+ color: $white;
+ font-weight: bold;
+ font-size: rem-calc(35);
+ background: rgba(0,0,0, 0.75);
+ padding: rem-calc(10);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+ }
+ }
+
+ .row.services {
+ background-color: #E1E2E4;
+ }
+
+ .row.content {
+ padding: rem-calc(10) 0;
+ }
+
+ .row.stock-items {
+ background-color: #E1E2E4;
+ }
+
+ footer {
+ padding-top: rem-calc(10);
+ background: $topbar-background;
+ color: $white;
+ }
+
+ .card {
+ .title {
+ background: linear-gradient(#4D5D66, #687B86); /* Standard syntax */
+ background: #4D5D66; /* For browsers that do not support gradients */
+ background: -webkit-linear-gradient(#4D5D66, #687B86); /* For Safari 5.1 to 6.0 */
+ background: -o-linear-gradient(#4D5D66, #687B86); /* For Opera 11.1 to 12.0 */
+ background: -moz-linear-gradient(#4D5D66, #687B86); /* For Firefox 3.6 to 15 */
+
+ color: $white;
+
+ p.lead {
+ font-weight: bold;
+ font-size: rem-calc(28);
+ }
}
}