layout/styling update
This commit is contained in:
ManjaroOne666
parent
707376d78c
commit
9ace5533ab
|
|
@ -1,44 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<ContentPage heading="The Services Page Heading">
|
<ContentPage heading="The Services Page Heading">
|
||||||
<ul class="services-list">
|
<ul class="services-list">
|
||||||
<li class="services-list__item">
|
<li v-for="(service, index) in services"
|
||||||
<h2 class="services-list__heading">Portraits</h2>
|
:key="index"
|
||||||
<figure class="services-list__figure">
|
class="services-list__item"
|
||||||
<img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
|
:style="{ 'z-index': services.length - index + 1}"
|
||||||
</figure>
|
>
|
||||||
<div class="services-list__body">
|
<div class="background background-image"
|
||||||
<p>Corporate portraits and publicity photos for printed materials, including annual reports and newsletters.</p>
|
:style="{ 'background-image': `url(${service.imageUrl})` }"
|
||||||
<a class="services-list__gallery-link" href="#">My Portraits</a>
|
>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
<div class="background background-overlay"></div>
|
||||||
<li class="services-list__item">
|
<div class="services-list__content">
|
||||||
<h2 class="services-list__heading">Dance</h2>
|
<h2 class="services-list__heading service-heading">{{ service.heading }}</h2>
|
||||||
<figure class="services-list__figure">
|
<div class="services-list__body" v-html="service.html">
|
||||||
<img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
|
|
||||||
</figure>
|
|
||||||
<div class="services-list__body">
|
|
||||||
<p>Photography and video production of dancers and performances for print, web, and promotion.</p>
|
|
||||||
<a class="services-list__gallery-link" href="#">My Dance</a>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
<a class="services-list__gallery-link" :href="service.linkUrl">My {{ service.heading }}</a>
|
||||||
<li class="services-list__item">
|
|
||||||
<h2 class="services-list__heading">Music</h2>
|
|
||||||
<figure class="services-list__figure">
|
|
||||||
<img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
|
|
||||||
</figure>
|
|
||||||
<div class="services-list__body">
|
|
||||||
<p>Photography and video of musical performances and portraits for print and the web, CD covers, and publicity photos.</p>
|
|
||||||
<a class="services-list__gallery-link" href="#">My Music</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="services-list__item">
|
|
||||||
<h2 class="services-list__heading">Events</h2>
|
|
||||||
<figure class="services-list__figure">
|
|
||||||
<img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
|
|
||||||
</figure>
|
|
||||||
<div class="services-list__body">
|
|
||||||
<p>Photography and video production for your corporate, organisational and personal events and celebrations.</p>
|
|
||||||
<a class="services-list__gallery-link" href="#">My Events</a>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -57,11 +34,171 @@ export default {
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
services: [
|
||||||
|
{
|
||||||
|
'heading': 'Portraits',
|
||||||
|
'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-portraits.jpg',
|
||||||
|
'html': '<p>Corporate portraits and publicity photos for printed materials, including annual reports and newsletters.</p>',
|
||||||
|
'linkUrl': '#',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'heading': 'Dance',
|
||||||
|
'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-dance.jpg',
|
||||||
|
'html': '<p>Photography and video production of dancers and performances for print, web, and promotion.</p>',
|
||||||
|
'linkUrl': '#',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'heading': 'Music',
|
||||||
|
'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-music.jpg',
|
||||||
|
'html': '<p>Photography and video of musical performances and portraits for print and the web, CD covers, and publicity photos.</p>',
|
||||||
|
'linkUrl': '#',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'heading': 'Events',
|
||||||
|
'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-events.jpg',
|
||||||
|
'html': '<p>Photography and video production for your corporate, organisational and personal events and celebrations.</p>',
|
||||||
|
'linkUrl': '#',
|
||||||
|
},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.services-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-list__item {
|
||||||
|
$min-height: 32rem;
|
||||||
|
$overlap: 4rem;
|
||||||
|
$padding-vertical: 2rem;
|
||||||
|
$color-overlay: $color__neutral-200;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
min-height: $min-height;
|
||||||
|
padding: $overlap + $padding-vertical 2rem $overlap;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: -1 * $overlap;
|
||||||
|
|
||||||
|
background-color: $color__neutral-200;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
&:nth-child(odd) {
|
||||||
|
clip-path: polygon(0 0, 100% 0, 100% calc(100% - #{$overlap}), 0 100%);
|
||||||
|
|
||||||
|
.background-overlay {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba($color-overlay, .1),
|
||||||
|
rgba($color-overlay, 1) 75%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-list__heading {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-list__body {
|
||||||
|
align-self: flex-end;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(even) {
|
||||||
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - #{$overlap}));
|
||||||
|
.background-overlay {
|
||||||
|
background: linear-gradient(
|
||||||
|
to left,
|
||||||
|
rgba($color-overlay, .1),
|
||||||
|
rgba($color-overlay, 1) 75%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-image {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-list__gallery-link {
|
||||||
|
left: auto;
|
||||||
|
right: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
min-height: $min-height - $overlap;
|
||||||
|
padding-top: $padding-vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: $padding-vertical;
|
||||||
|
clip-path: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-list__img {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
height: 20em;
|
||||||
|
width: auto;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
opacity: .4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-list__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-height: 20em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-list__body {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media (min-width: $bp__layout) {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 70em) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-list__gallery-link {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 3rem;
|
||||||
|
left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background {
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-image {
|
||||||
|
// opacity: .3;
|
||||||
|
background-size: cover;
|
||||||
|
filter: grayscale(.7);
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-heading {
|
||||||
|
@include font-title();
|
||||||
|
color: $color__neutral-900;
|
||||||
|
font-size: 2.0em;
|
||||||
|
// text-transform: uppercase;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue