Thanks for your kind feedback!
Here is the content and custom CSS for my index page. I hope you can figure things out from there (although not everything in there is related to the features you asked about). If not, feel free to ask for details.
CSS:
.green{
background-color: rgb(27,46,42);
padding: 2rem 1rem;
margin-bottom: 2rem;
color:rgb(212,215,219);
}
.green h1, .green h2{
color: rgb(212,215,219);
}
.content-narrow{
max-width: 71.25rem;
margin: auto;
}
.text-right{
text-align:right;
}
.about img{
max-width: 100%;
float: left;
margin-top: 52px;
}
@media screen and ( max-width: 624px ) {
.about img{
margin-top: 2rem;
}
}
.image-intro-content{
padding:20px!important;
line-height:1.7em;
top:53%;
max-width: 550px;
}
.module-first{
margin-top:0!important;
}
.slideshow-title{
font-size: 1.25em;
font-weight:normal;
line-height:1.25em;
}
.slideshow-description{
font-size: 2.5em;
font-weight:bold;
line-height:1.1em;
}
.folders {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.testimonials h2, .testimonials p, .testimonials a, .testimonials blockquote{
color: rgb(212,215,219) !important;
}
.testimonials{
padding-bottom:5rem;
}
.images a p {
font-size: 1rem;
}
@media screen and ( max-width: 624px ) {
.item{
padding: 0 .9375rem;
}
}
@media screen and ( max-width: 624px ) {
.figcaption{
font-style: italic;
font-size: 12px;
padding-top:0.6em;
margin-bottom:1.2em;
float: none;
}
}
button.more{
position:absolute;
top: calc(100% - 42px);
display:block;
border-radius:3px;
}
@media screen and ( max-width: 624px ) {
button.more{
position:static;
display:block;
margin:auto;
margin-top:1rem;
border-radius:3px;
}
}
.clients{
text-align:right;
}
Content:
<div class=image-intro-content>
<h1> Businessfotografie.<br> Für Ihren Erfolg.</h1></div>
<div class="testimonials green">
<div class=row content-narrow>
<h2>Kundenstimmen:</h2>
<div markdown=1 class="medium-6 columns">
<blockquote><img src="{{files}}/images/Anna-Hassemer-weisenburger-bau.jpg" alt="" />
"Daniel Bollinger fotografiert auf technisch höchstem Niveau. Ich schätze seinen Blick für die Bildkomposition und für das Detail. Er schafft es, Motive interessant und außergewöhnlich abzubilden, indem er Perspektiven wechselt und immer nach dem besten Resultat sucht. Wichtig sind mir auch die angenehme Shootingatmosphäre sowie die schnelle Bearbeitung der Bilder. Vielen Dank für die tollen Ergebnisse!"
<p markdown=1>Anna Hassemer, Leitung Marketing und Kommunikation, weisenburger bau GmbH</p>
</blockquote>
</div>
<div markdown=1 class="medium-6 columns">
<blockquote><img src="{{files}}/images/Jonas-Fartaczek-complus-media.jpg" alt="" />
"Dass die Bilder von Daniel absolut inspirierend, niveauvoll tiefgründig und harmonisch sind, sieht denke ich jeder sofort. Was aber nur wenige sehen, ist, mit welcher Detailverliebtheit und Präzision Daniel beim Shooting selbst arbeitet. Ich habe mit meiner Marketing Agentur schon mehrfach mit Daniel zusammengearbeitet und ich werde es wieder tun – definitiv!"
<p markdown=1>Jonas Fartaczek, Geschäftsführer, complus media GmbH</p>
</blockquote>
</div>
<div class=clients markdown=1>[Mehr Kundenstimmen](/referenzen/)</div>
</div>
</div>
</div>
<div class="row about">
<div class="medium-3 columns">
<figure><img src="{{files}}/images/Businessfotograf-Daniel-Bollinger-hochkant.jpg" alt="Portrait von Daniel Bollinger, Businessfotograf aus Karlsruhe" />
</figure>
<div class="figcaption">
Foto: Micha Roth
</div></div>
<div class="medium-5 columns">
<h2 style="padding-left: 0%">Hallo.</h2>
<p>Mein Name ist Daniel Bollinger. Als Businessfotograf mit Sitz in Karlsruhe unterstütze ich KMU und Selbstständige durch hochwertige Unternehmensfotografie in ihrer Außen- und Innendarstellung.
</p>
</div>
<div class="medium-4 columns">
<form data-abide class="contactform">
<h2>Wie kann ich Ihnen helfen? </h2>
<div>
<input type="text" name="name" placeholder="Name" required>
</div>
<div>
<input type="email" name="email" placeholder="E-Mail" required>
</div>
<div>
<textarea rows="4" name="message" placeholder="Nachricht" required></textarea>
</div>
<button type="submit">Senden</button>
</form>
</div>
</div>
Note this is not perfect because it has grown over time and I'm not at all a professional coder. E.g. the .content-narrow class is basically obsolete, the same could be achieved by using foundation grid on its own like I do elsewhere. More info on that here:
https://get.foundation/sites/docs-v5/co ... /grid.html
Intro image is pure X3 intro image plugin.
In Page > advanced "Page Layout Items" is set to: folders, context, gallery (the latter is hidden, anyways).