Search…

X3 Photo Gallery Support Forums

Search…
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

New business photography website

27 May 2021, 08:33

Today my new website finally saw the day of light: www.danielbollinger.de

I am really happy about the result and would be honored to have it featured in the official examples list.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: New business photography website

28 May 2021, 00:40

Super smooth  :clap: and good job on the HTML and customization :star:

Added:
https://www.photo.gallery/showcase/
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: New business photography website

31 May 2021, 05:38

Thank you very much! Also for your outstanding support, I wouldn't have been able to achieve this without.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
Unblind
Experienced
Posts: 25
Joined: 05 Nov 2018, 04:28

Re: New business photography website

19 Oct 2021, 15:19

Saubere Arbeit!
liebe Grüße
Unblind
 
User avatar
GeoPal
Experienced
Posts: 227
Joined: 20 Dec 2007, 12:56

Re: New business photography website

26 Oct 2021, 02:41

Hi Daniel, great work on the website and great contennt! Congrats!
Karl/Daniel, can you add a tutorial how to mix gallery on top, then full page width text with background and then context? I will be interested in such setup. Also, on the front page the intro photo has the text on top in middle, but I could not get it to have this grey background on my website.
Nice work once again!
G
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: New business photography website

28 Oct 2021, 11:42

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:
Code
.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:
Code
<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).
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
GeoPal
Experienced
Posts: 227
Joined: 20 Dec 2007, 12:56

Re: New business photography website

28 Oct 2021, 14:59

Thank you very much, Daniel!
I will look into it! Again, great setup and content!
Kind regards, G