layout/styling update
This commit is contained in:
ManjaroOne666
parent
707376d78c
commit
9ace5533ab
|
|
@ -1,44 +1,21 @@
|
|||
<template>
|
||||
<ContentPage heading="The Services Page Heading">
|
||||
<ul class="services-list">
|
||||
<li class="services-list__item">
|
||||
<h2 class="services-list__heading">Portraits</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>Corporate portraits and publicity photos for printed materials, including annual reports and newsletters.</p>
|
||||
<a class="services-list__gallery-link" href="#">My Portraits</a>
|
||||
<li v-for="(service, index) in services"
|
||||
:key="index"
|
||||
class="services-list__item"
|
||||
:style="{ 'z-index': services.length - index + 1}"
|
||||
>
|
||||
<div class="background background-image"
|
||||
:style="{ 'background-image': `url(${service.imageUrl})` }"
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li class="services-list__item">
|
||||
<h2 class="services-list__heading">Dance</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 of dancers and performances for print, web, and promotion.</p>
|
||||
<a class="services-list__gallery-link" href="#">My Dance</a>
|
||||
<div class="background background-overlay"></div>
|
||||
<div class="services-list__content">
|
||||
<h2 class="services-list__heading service-heading">{{ service.heading }}</h2>
|
||||
<div class="services-list__body" v-html="service.html">
|
||||
</div>
|
||||
</li>
|
||||
<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>
|
||||
<a class="services-list__gallery-link" :href="service.linkUrl">My {{ service.heading }}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -57,11 +34,171 @@ export default {
|
|||
|
||||
data() {
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue