مراكش
Diese Vignette sind mit 'purem' html erstellt. Solche Absätze bieten die Möglichkeit, die Prokrustes-Korsetts von weblica zu sprengen.
Der zusätzliche Zeitaufwand lohnt sich, wenn neuartige Layout-Elemente erstellt werden und diese für weitere Verwendungen vorrätig gehalten werden.
Marrakesch
Hier kommt auch wieder die ' display:flex - Klammer ' zur Anwendung, um die Vorteile dieser Formatierung für die Darstellung der Vignette nutzen zu können.
Die wLc-HTML-Absätze bieten - leider - nicht wie die anderen Absätze, die Möglichkeit, ein umgebendes div-Element zu erstellten, das dann auch die AbsatzÜberschrift einschließt. Diese vakiert deshalb im Flex-Container (in der -Klammer) und beeinträchtigt die Formatierung der darin sich befindenden Element.
Marrakech
Der OriginalBanner wurde ocker-latterit-farbig gestaltet. Davor liegt ein Kopfbild ca. 2800 x 277, das auf ein teilweises opacity gestellt ist.
Die Kombination Banner * Kopfbild läuft bis auf Breiten, wie sie auf handhelds üblich sind.
Ob das nicht zu viel für den Browser ist, müsste noch getetest werden.
ⴰⵎⵓⵔⴰⴽⵓⵛ
Der LinkAnker "Erfahren Sie mehr" wird mit ' pos:absolute, bottom:10px ' nach unten katapultiert. Das geht in den üblichen Höhen der Vignette ganz gut. Es gibt allerdings auch Grenzen! Die bei einem ' vernünftigen ' Layout so gut wie nicht überschritten werden.
HTML für die Vignette
( 1 html-Absatz mit dem öffnenden < div-Tag oben,
1 html-Absatz mit schließenden </div -Tag unten)
< div class="flex-group">
... dazwischen befinden sich die einzelnen html-Absätze
< /div><!-- e:flex-group" >
Die einzelnen html-Absätze innerhab der Flex-Klammer:
< div class="vignettaA orange">
<h2>
مراكش
</h2>
<!-- ---- Bild-Attribute wie alt und title ergänzen --- -->
<a class="imgbg" href="http://www.where2go.world/" target="_blank//_self ...">
<img src="$(BildDatei_path)" alt="" title="" >
</a>
<div class="content">
<!-- ---- margin-bottom:#px kann in html individuell, gruppiert oder im CSS gesetzt werden --- -->
<p style=" margin-bottom:40px; ">Diese Vignette sind mit 'purem' html erstellt.
Solche Absätze bieten die Möglichkeit, die Prokrustes-Korsetts von weblica zu sprengen.<br>
Der zusätzliche Zeitaufwand lohnt sich, wenn neue Layout-Elemente erstellt werden und diese
für weitere Verwendungen vorrätig gehalten werden.</p>
</div>
<a class="more" style=" href="http://http://www.where2go.world/" target="_blank//_self ..." >Erfahren Sie mehr <span>»</span></a>
</div>
CSS für die Vignette
/* ---: beliebige Selektoren-Bezeichner; wie z.B. .flexContainer, usw. --------- */
.flex-group {
font: 13px/162% Arial, Helvetica, Helvetica Neue, sans-serif;
color: #6F6F6E;
display:flex; flex-flow:row wrap; justify-content:space-between;
}
.flex-group > a { display:none; } /* !! ahhhh, wie die a doch stören !! */
/* ------- Basics vignetta ------------------------------------- */
.vignettaA {
width: 23.5%; /* --:: 100% dividiert durch Anzahl minus was für den Abstand */
height:auto;
border-radius: 25px 25px 0 0;
position:relative;
color:#6F6F6E;
margin-bottom:5px;
}
/* ------- Basics html-Überschrift (nicht wLc-Absatz!) ----- */
.vignettaA h2 {
font-family: "Source Sans Pro";
font-style: normal;
line-height: 40px;
font-weight: 600;
font-size: 24px;
color: #ffffff ; /* #ffffff */
margin: 0 0 2px 0;
padding: 5px 10px 0;
text-transform: uppercase;
text-align: center;
font-size: 16px;
}
/* ------- b: Farben ------------------------------------- */
.vignettaA.orange {
/* - beide Eigenschaften immer zus. - */
background-color:#fbb71a;
border-radius: 10px 10px 0 0;
}
.vignettaA.orange h2 {
/* - beide Eigenschaften immer zus. - */
background:#f99a01;
border-radius: 5px 5px 0 0;
}
.vignettaA.apple {
background-color:#c7db54;
border-radius: 10px 10px 0 0;
}
.vignettaA.apple h2 {
background:#b8d02c;
border-radius: 5px 5px 0 0;
}
.vignettaA.noisette {
background-color:#974a28;
border-radius: 10px 10px 0 0;
}
.vignettaA.noisette h2 {
background:#65311b;
border-radius: 5px 5px 0 0;
}
.vignettaA.forst {
background-color:#43810d;
border-radius: 10px 10px 0 0;
}
.vignettaA.forst h2 {
background:#244510;
border-radius: 5px 5px 0 0;
}
/* ------- e: Farben ------------------------------------- */
/* -------Bild und BildLink ------------------------------ */
.vignettaA a.imgbg {
display:block;
background: red;
width:100%;
border-top:3px solid white;
border-bottom:3px solid white;
}
.vignettaA a img{
width:100%;
height:auto;
}
/* ------- Textbereich
hier könnte event. auch Format für .vignettaA .content < p > sein
------------------------------------------------------------------------------------- */
.vignettaA .content {
padding: 10px 10px 35px;
height: auto;
color: #ffffff;
position:relative;
}
.vignettaA .content p {
/*letter-spacing:0.1em;*/
margin-bottom:20px;
}
/* ------- Link auf Text ------------------------------------- */
.vignettaA a.more {
color: white;
font-family: "Source Sans Pro";
font-size: 17px;
text-transform: uppercase;
text-decoration: none;
font-weight: 600;
display:block;
position:absolute; bottom:10px;
margin-left:10px;
}
/* ---# Größen an Motive anpassen --------------- */
@media only screen and (max-width:54em) {
.vignettaA {
width:46%;
margin-left:10px;
margin-right:10px;
}
}
/* ---# Größen an Motive anpassen --------------- */
@media only screen and (max-width:40em) {
.vignettaA {
width: 90%;
margin-left:auto;
margin-right:auto;
}
.vignettaA .content p {
/*letter-spacing:0.1em;*/
margin-bottom:10px;
}
}
</style>