Um die Ästhetik auch mit für Gäste ersetzten Bildern zu wahren, würden wir euch bitten, auf eines dieser Templates zurückzugreifen. Außerdem stehen euch die Formatierungen aus unseren HTML-Codes zur Verfügung.
Ihr könnt eigene Codes verwenden, solange die Bilder NICHT! als Hintergrundbilder eingefügt sind und die Bilder sich an die Containergröße anpassen oder ihr AI-Bilder verwendet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
LALALALLORUM
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
S
Info 1DetailDetailDetailDetailDetailMoreSpec
Right Aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et dolor eget nunc tincidunt scelerisque. Nullam sit amet erat nec nulla accumsan aliquam. Suspendisse potenti. Duis pharetra varius eros, nec venenatis nisl. Nulla facilisi. Phasellus vitae venenatis urna. In hac habitasse platea dictumst. Vivamus tincidunt nisl eu neque facilisis, at elementum lectus auctor. Nulla facilisi. Donec ullamcorper enim at nisi hendrerit, nec tincidunt leo fringilla. Suspendisse potenti. Duis tempor magna et libero sollicitudin, ac cursus ligula ullamcorper. Maecenas imperdiet nisl ut lectus fermentum, ac consequat metus aliquam. Integer ut purus eros. Ut semper semper libero, ut scelerisque ligula dignissim sit amet. Morbi in ante enim. Curabitur aliquam purus eu ante ornare, a fringilla urna gravida.
Right Aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et dolor eget nunc tincidunt scelerisque. Nullam sit amet erat nec nulla accumsan aliquam. Suspendisse potenti. Duis pharetra varius eros, nec venenatis nisl. Nulla facilisi. Phasellus vitae venenatis urna. In hac habitasse platea dictumst. Vivamus tincidunt nisl eu neque facilisis, at elementum lectus auctor. Nulla facilisi. Donec ullamcorper enim at nisi hendrerit, nec tincidunt leo fringilla. Suspendisse potenti. Duis tempor magna et libero sollicitudin, ac cursus ligula ullamcorper. Maecenas imperdiet nisl ut lectus fermentum, ac consequat metus aliquam. Integer ut purus eros. Ut semper semper libero, ut scelerisque ligula dignissim sit amet. Morbi in ante enim. Curabitur aliquam purus eu ante ornare, a fringilla urna gravida.
S
Info 1DetailDetailDetailDetailDetailMoreSpec
Right Aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et dolor eget nunc tincidunt scelerisque. Nullam sit amet erat nec nulla accumsan aliquam. Suspendisse potenti. Duis pharetra varius eros, nec venenatis nisl. Nulla facilisi. Phasellus vitae venenatis urna. In hac habitasse platea dictumst. Vivamus tincidunt nisl eu neque facilisis, at elementum lectus auctor. Nulla facilisi. Donec ullamcorper enim at nisi hendrerit, nec tincidunt leo fringilla. Suspendisse potenti. Duis tempor magna et libero sollicitudin, ac cursus ligula ullamcorper. Maecenas imperdiet nisl ut lectus fermentum, ac consequat metus aliquam. Integer ut purus eros. Ut semper semper libero, ut scelerisque ligula dignissim sit amet. Morbi in ante enim. Curabitur aliquam purus eu ante ornare, a fringilla urna gravida.
Right Aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et dolor eget nunc tincidunt scelerisque. Nullam sit amet erat nec nulla accumsan aliquam. Suspendisse potenti. Duis pharetra varius eros, nec venenatis nisl. Nulla facilisi. Phasellus vitae venenatis urna. In hac habitasse platea dictumst. Vivamus tincidunt nisl eu neque facilisis, at elementum lectus auctor. Nulla facilisi. Donec ullamcorper enim at nisi hendrerit, nec tincidunt leo fringilla. Suspendisse potenti. Duis tempor magna et libero sollicitudin, ac cursus ligula ullamcorper. Maecenas imperdiet nisl ut lectus fermentum, ac consequat metus aliquam. Integer ut purus eros. Ut semper semper libero, ut scelerisque ligula dignissim sit amet. Morbi in ante enim. Curabitur aliquam purus eu ante ornare, a fringilla urna gravida.
LALALALLORUM
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Code:
<style>.canon_wrapper,.canon_wrapper *{box-sizing:border-box}.canon-wrapper{max-width:700px;margin:auto;background:#0a0a0a;position:relative}.canon_header{background-image:url("https://images.unsplash.com/photo-1574182245530-967d9b3831af?q=80&w=3737&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");background-size:cover;background-position:center;background-blend-mode:multiply;background-color:#2a2625;height:500px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:white;overflow:hidden}.canon_headeroverlay{position:relative;z-index:2;max-width:90%;padding:1rem}.canon_heading{font-size:90px;letter-spacing:.1rem;margin:0;font-family:"Calora"}.canon_heading span{color:#375746}.canon_header p{margin-top:20px;font-size:12px;line-height:120%;max-width:500px;margin-left:auto;margin-right:auto;font-family:"Lato",sans-serif;text-transform:uppercase}.canon_oval_container{position:absolute;top:50%;left:50%;width:250px;height:420px;transform:translate(-50%,-50%);border-radius:999px;overflow:hidden;box-sizing:border-box;z-index:1}.canon_oval_container img{max-width:none!important;width:100%;height:100%;object-fit:cover;z-index:0}.canon_oval_overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);z-index:1}.canon_oval_border{position:absolute;inset:0;border:2px solid #375746;border-radius:999px;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 6px #110710,inset 0 0 0 8px #375746}.canon_section{padding:45px 50px;color:#fff;max-width:900px;margin:auto}.canon_threecol{display:flex;flex-direction:row;gap:32px;border-top:1px solid #375746;border-bottom:1px solid #375746}.canon_col{flex:1;padding:32px 16px;border-right:1px solid #375746;font-family:"EB Garamond",serif;text-align:justify}.canon_col:last-child{border-right:0}.canon_col_heading{font-size:14px;letter-spacing:1.5px;font-weight:600;margin-bottom:10px;color:#e0e0e0;text-transform:uppercase}.canon_col p{font-size:13px;line-height:24px;color:#ccc}.canon_col p b{padding:4px;font-style:normal;font-weight:700;font-size:11px;text-decoration:none;letter-spacing:.21em;border-bottom:4px solid #375746;background:rgba(239,239,239,0.1);color:#fff}.canon_col p i{padding:4px;font-style:italic;font-weight:400;font-size:11px;text-transform:lowercase;text-decoration:none;letter-spacing:.21em;color:#375746}.canon_col p a{padding:4px;font-style:italic;color:#375746;text-decoration:none}.canon_twocol_inner a:hover{padding:4px;font-style:italic;color:#fff;text-decoration:none}.canon_twocol{display:flex;width:100%;min-height:400px;margin:0;padding:0;border-top:1px solid #375746}.canon_twocol_image,.canon_twocol_text{flex:1;min-height:400px;width:50%;}.canon_twocol_image{background-image:url("https://images.unsplash.com/photo-1574182245530-967d9b3831af?q=80&w=3737&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");background-size:cover;background-position:center;background-blend-mode:multiply;background-color:#2a2625}.canon_twocol_text{position:relative;height:100%;background:transparent;color:#fff;display:flex;align-items:stretch}.canon_scroll_columns{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;width:100%;height:100%;box-sizing:border-box}.canon_twocol_inner{flex:0 0 100%;padding:40px;box-sizing:border-box;text-align:justify;font-family:"EB Garamond",serif;font-size:13px;line-height:24px;color:#ccc}.canon_twocol_inner b{padding:4px;font-style:normal;font-weight:700;font-size:11px;text-decoration:none;letter-spacing:.21em;border-bottom:4px solid #375746;background:rgba(239,239,239,0.1);color:#fff}.canon_twocol_inner i{padding:4px;font-style:italic;font-weight:400;font-size:11px;text-transform:lowercase;text-decoration:none;letter-spacing:.21em;color:#375746}.canon_twocol_inner a{padding:4px;font-style:italic;color:#375746;text-decoration:none}.canon_twocol_inner a:hover{padding:4px;font-style:italic;color:#fff;text-decoration:none}.canon_scroll_columns::-webkit-scrollbar{height:8px !important}.canon_scroll_columns::-webkit-scrollbar-thumb{background:#375746 !important;border-radius:10px !important}.canon_scroll_columns::-webkit-scrollbar-track{background:#1a1a1a !important}.canon_twocol--reverse{flex-direction:row-reverse}.canon_twocol_image{position:relative}.canon_oval_small_container{position:absolute;top:50%;left:50%;width:150px;height:280px;transform:translate(-50%,-50%);z-index:1;box-sizing:border-box}.canon_oval_small_visual{width:100%;height:100%;border-radius:999px;overflow:hidden;position:relative}.canon_oval_small_img{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;transform:translate(-50%,-50%);z-index:0}.canon_oval_small_overlay{position:absolute;inset:0;background:rgba(0,0,0,0.3);z-index:1}.canon_oval_small_border{position:absolute;inset:0;border:2px solid #375746;border-radius:999px;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 6px #110710,inset 0 0 0 8px #375746}.canon_oval_decor{position:absolute;top:140px;left:60%;transform:translateX(-50%);display:flex;align-items:flex-start;justify-content:flex-start;gap:16px;z-index:3;width:auto;padding:0 12px;box-sizing:border-box}.canon_decor_letter{font-size:160px;font-family:"Calora",serif;color:#375746;line-height:1;white-space:nowrap}.canon_info_badges{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:flex-start;max-width:250px;margin-top:30px}.canon_info_badge{background:#fff;color:#110710;font-family:"Lato";text-transform:uppercase;font-size:10px;padding:6px 12px;border-radius:999px;font-weight:500;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:background .2s ease;cursor:pointer}.canon_info_badge:hover{background:#eee}</style><link href="https://dl.dropboxusercontent.com/scl/fi/os2925rpysr3u17l94qdn/Calora.css?rlkey=kdfklertinadqg8p6co8aesyh&dl=0"rel=stylesheet><div class=canon-wrapper><header class=canon_header><div class=canon_oval_container><img src=https://placehold.co/500><div class=canon_oval_overlay></div><div class=canon_oval_border></div></div><div class=canon_headeroverlay><div class=canon_heading>LOREM I<span>P</span>SUM</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></header><section class="canon_section canon_threecol"><div class=canon_col><div class=canon_col_heading>LALALALLORUM</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <b>dolore magna</b> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></section><section class=canon_twocol><div class=canon_twocol_image><div class=canon_oval_small_container><div class=canon_oval_small_visual><img src=https://placehold.co/500 class=canon_oval_small_img><div class=canon_oval_small_overlay></div><div class=canon_oval_small_border></div></div><div class=canon_oval_decor><span class=canon_decor_letter>S</span><div class=canon_info_badges><span class=canon_info_badge>Info 1</span> <span class=canon_info_badge>DetailDetailDetailDetailDetail</span> <span class=canon_info_badge>More</span> <span class=canon_info_badge>Spec</span></div></div></div></div><div class=canon_twocol_text><div class=canon_scroll_columns><div class=canon_twocol_inner><h2>Right Aligned</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et dolor eget nunc tincidunt <b>scelerisque</b>. Nullam sit amet erat nec nulla accumsan aliquam. Suspendisse potenti. Duis pharetra varius eros, nec venenatis nisl. Nulla facilisi. Phasellus vitae venenatis urna. In hac habitasse <i>platea dictumst</i>. Vivamus tincidunt nisl eu neque facilisis, at elementum lectus auctor. Nulla facilisi. Donec ullamcorper enim at nisi hendrerit, nec tincidunt leo fringilla. Suspendisse potenti. Duis tempor magna et libero sollicitudin, ac cursus ligula ullamcorper. Maecenas imperdiet nisl ut lectus fermentum, ac consequat metus aliquam. Integer ut purus eros. Ut semper semper libero, ut scelerisque ligula dignissim sit amet. Morbi in ante enim. Curabitur aliquam purus eu ante ornare, a fringilla urna gravida.</div><div class=canon_twocol_inner><h2>Right Aligned</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et dolor eget nunc tincidunt scelerisque. Nullam sit amet erat nec nulla accumsan aliquam. Suspendisse potenti. Duis pharetra varius eros, nec venenatis nisl. Nulla facilisi. Phasellus vitae venenatis urna. In hac habitasse platea dictumst. Vivamus tincidunt nisl eu neque facilisis, at elementum lectus auctor. Nulla facilisi. Donec ullamcorper enim at nisi hendrerit, nec tincidunt leo fringilla. Suspendisse potenti. Duis tempor magna et libero sollicitudin, ac cursus ligula ullamcorper. Maecenas imperdiet nisl ut lectus fermentum, ac consequat metus aliquam. Integer ut purus eros. Ut semper semper libero, ut scelerisque ligula dignissim sit amet. Morbi in ante enim. Curabitur aliquam purus eu ante ornare, a fringilla urna gravida.</div></div></div></section><section class="canon_twocol canon_twocol--reverse"><div class=canon_twocol_image><div class=canon_oval_small_container><div class=canon_oval_small_visual><img src=https://placehold.co/500 class=canon_oval_small_img><div class=canon_oval_small_overlay></div><div class=canon_oval_small_border></div></div><div class=canon_oval_decor><span class=canon_decor_letter>S</span><div class=canon_info_badges><span class=canon_info_badge>Info 1</span> <span class=canon_info_badge>DetailDetailDetailDetailDetail</span> <span class=canon_info_badge>More</span> <span class=canon_info_badge>Spec</span></div></div></div></div><div class=canon_twocol_text><div class=canon_scroll_columns><div class=canon_twocol_inner><h2>Right Aligned</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et dolor eget nunc tincidunt scelerisque. Nullam sit amet erat nec nulla accumsan aliquam. Suspendisse potenti. Duis pharetra varius eros, nec venenatis nisl. Nulla facilisi. Phasellus vitae venenatis urna. In hac habitasse platea dictumst. Vivamus tincidunt nisl eu neque facilisis, at elementum lectus auctor. Nulla facilisi. Donec ullamcorper enim at nisi hendrerit, nec tincidunt leo fringilla. Suspendisse potenti. Duis tempor magna et libero sollicitudin, ac cursus ligula ullamcorper. Maecenas imperdiet nisl ut lectus fermentum, ac consequat metus aliquam. Integer ut purus eros. Ut semper semper libero, ut scelerisque ligula dignissim sit amet. Morbi in ante enim. Curabitur aliquam purus eu ante ornare, a fringilla urna gravida.</div><div class=canon_twocol_inner><h2>Right Aligned</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et dolor eget nunc tincidunt scelerisque. Nullam sit amet erat nec nulla accumsan aliquam. Suspendisse potenti. Duis pharetra varius eros, nec venenatis nisl. Nulla facilisi. Phasellus vitae venenatis urna. In hac habitasse platea dictumst. Vivamus tincidunt nisl eu neque facilisis, at elementum lectus auctor. Nulla facilisi. Donec ullamcorper enim at nisi hendrerit, nec tincidunt leo fringilla. Suspendisse potenti. Duis tempor magna et libero sollicitudin, ac cursus ligula ullamcorper. Maecenas imperdiet nisl ut lectus fermentum, ac consequat metus aliquam. Integer ut purus eros. Ut semper semper libero, ut scelerisque ligula dignissim sit amet. Morbi in ante enim. Curabitur aliquam purus eu ante ornare, a fringilla urna gravida.</div></div></div></section><section class="canon_section canon_threecol"><div class=canon_col><div class=canon_col_heading>LALALALLORUM</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <b>dolore magna</b> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></section></div><link href=https://fonts.googleapis.com rel=preconnect><link href=https://fonts.gstatic.com rel=preconnect crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"rel=stylesheet>
