totole/mpsfun
1
0
Fork 0
mirror of https://github.com/derron1/mpsfun.git synced 2026-01-11 18:04:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Front page update

Browse Source
This commit is contained in:
Derron carr
2017-06-08 18:14:22 +01:00
parent 335e3e09c8
commit 83a2456e8d
12 changed files with 200 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/confetti1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/assets/img/confetti2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/img/confetti3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/assets/img/fun2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/img/fun3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/img/fun4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/img/fun5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/img/fun6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/img/mps_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 536 KiB

BIN
src/assets/img/oc_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

234
src/components/Home.vue
View File

@@ -9,58 +9,141 @@
<div class="company_name">Motion Picture Solutions</div>
<div class="first_title">Welcome</div>
<div class="first_second">to</div>
<div class="first_third">MPS.Fun</div>
<div class="first_third"><span style="color:#fbdc00;">MPS</span>.Fun</div>
<div class="slogan"><p class="text-center">Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p></div>
<br>
<div class="row column text-center">
<button class="hollow button">PLAY NOW</button>
<p>Skip game, Maybe next time</p>
</div>
</div>
<img class="fetti" src="../assets/img/confetti1.png" alt="">
<img class="fettitwo" src="../assets/img/confetti2.png" alt="">
<img class="fettithree" src="../assets/img/confetti3.png" alt="">
</div>
<img class="shades" src="../assets/img/mps-glasses.png" alt="">
</div>
<div class="row align-middle card_info_one">
<div class="columns">
<h2>Direct KDM Automation</h2>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
<div class="large-expanded row"></div>
<div class="cards_info large-12 columns">
<div class="card_header">
<h2 class="text-center">Train Your Brain This New Years</h2>
<p class="text-center">Some small information about the cards and what they repersent</p>
</div>
<div class="expanded row large-expanded smal l-up-2 medium-up-3 large-up-4">
<div class="column vertical_block column-block">
<div class="column text-center">
<img class="mps_card_one thumbnail" src="../assets/img/fun1.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h3>Direct KDM Automation</h3>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
<div class="large-6 columns">
<img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
<div class="column vertical_block column-block">
<div class="column text-center">
<img class="mps_card_one thumbnail" src="../assets/img/fun2.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h3>Direct KDM Automation</h3>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
<div class="column vertical_block column-block">
<div class="column text-center">
<img class="mps_card_one thumbnail" src="../assets/img/fun3.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h3>Direct KDM Automation</h3>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
<div class="column vertical_block column-block">
<div class="column text-center">
<img class="mps_card_one thumbnail" src="../assets/img/fun5.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h3>Direct KDM Automation</h3>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
<!-- Second Row -->
<div class="column vertical_block column-block">
<div class="column text-center">
<img class="mps_card_one thumbnail" src="../assets/img/fun1.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h3>Direct KDM Automation</h3>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
<div class="column vertical_block column-block">
<div class="column text-center">
<img class="mps_card_one thumbnail" src="../assets/img/fun2.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h3>Direct KDM Automation</h3>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
<div class="column vertical_block column-block">
<div class="column text-center">
<img class="mps_card_one thumbnail" src="../assets/img/fun3.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h3>Direct KDM Automation</h3>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
<div class="column vertical_block column-block">
<div class="column text-center">
<img class="mps_card_one thumbnail" src="../assets/img/fun6.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h3>Direct KDM Automation</h3>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
</div>
</div>
<div class="row align-middle card_info_two">
<div class="large-6 columns">
<img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h2>Direct KDM Automation</h2>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
<!-- Oncinema section -->
<div class="expanded row links">
<div class="small-12 large-6 columns mps">
<h3 class="text-center">Motion Picture solutions</h3>
<p class="text-center">MPS has been creating DCPs since the advent of digital cinema, giving us unparalleled expertise in the sector.</p>
<div class="text-center">
<a href="" class="button "> Find out More</a>
</div>
<div class="row align-middle card_info_three">
<div class="columns">
<h2>Direct KDM Automation</h2>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
<div class="large-6 columns">
<img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
</div>
</div>
<div class="small-12 large-6 columns oc">
<h3 class="text-center">Oncinema</h3>
<p class="text-center">MPS has been creating DCPs since the advent of digital cinema, giving us unparalleled expertise in the sector.</p>
<div class="text-center">
<a href="" class="button "> Find out More</a>
</div>
<div class="row align-middle card_info_four">
<div class="large-6 columns">
<img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h2>Direct KDM Automation</h2>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
</div>
<!--
<footer>
<div class="expanded row ">
<div class="large-6 columns">
<p class="large-4 columns">Motion Picture Solutions, is a forerunner in digital cinema and has been mastering and distributing theatrical content since 2006.</p>
</div>
<div class="large-2 columns"></div>
<div class="large-2 columns"></div>
<div class="large-2 columns"></div>
</div>
</footer>
-->
</div>
</template>
@@ -80,6 +163,47 @@
}
.first_window {
min-height:1060px;
position:relative;
.fetti, .fettitwo, .fettithree {
position:absolute;
top:10%;
width:200%;
}
}
.cards_info {
background-color:#FFF;
padding-top:rem-calc(120);
.card_header {
padding-bottom:rem-calc(90);
h2 {
font-weight:bolder;
}
}
.column-block {
padding-bottom:rem-calc(30);
}
.vertical_block {
text-align: center;
img {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
}
}
.oc {
.button {
background-color:#C33280;
}
}
.mps {
.button {
background-color:#080E1A;
}
}
.card_info_one, .card_info_two, .card_info_three, .card_info_four {
color:#fff;
img {
max-width:40%;
}
}
.intro_text {
padding-top:rem-calc(250);
@@ -111,10 +235,48 @@
}
.shades {
position:absolute;
bottom:-10;
bottom:-10px;
}
.links {
.mps {
background: url('../assets/img/mps_bg.jpg') no-repeat left bottom fixed;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto;
background-size: auto;
max-height:rem-calc(190);
min-height:rem-calc(567);
padding-right:0 !important;
padding-left:0 !important;
color:#161624;
h3 {
font-weight:bolder;
padding-top:rem-calc(250);
}
}
.oc {
background: url('../assets/img/oc_bg.jpg') no-repeat right bottom fixed;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto;
background-size: auto;
max-height:rem-calc(190);
min-height:rem-calc(567);
padding-right:0 !important;
padding-left:0 !important;
color:#fff;
h3 {
font-weight:bolder;
padding-top:rem-calc(250);
}
}
}
footer {
padding-top:rem-calc(90);
padding-bottom:rem-calc(90);
}
</style>

2
src/styles/_settings.scss
View File

@@ -59,6 +59,8 @@ $foundation-palette: (
success: #4fc08d,
warning: #FCB738,
alert: #DA5961,
mps: #161624,
oc: #C33280,
);
$light-gray: #f8f8f8;
$medium-gray: #cacaca;