Subversion-Projekte lars-tiefland.marine-sales.de

<div class="home">
    
    <div class="colspan-6" onclick="javascript:window.location.href='/1-Aussenborder/';">
        <img src="/images/einstieg/Einstieg_Aussenborder.jpg" width="690" height="355" />
        <div class="home_button uppercase"><h1>Aussen<strong>border</strong></h1></div>
        </div>
    
    <div class="colspan-6 rowspan-2" onclick="javascript:window.location.href='/1822-Rettungswesten/';">
        <img src="/images/einstieg/Einstieg_Rettungswesten.jpg" width="690" height="729" />
        <div class="home_button2">
            <div>
                <p>Sicher unterwegs auf hoher See</p>
                <h1 class="uppercase">Sicherheits<strong class="uppercase">ausr&uuml;stung</strong></h1>
            </div>
        </div>    
    
    
    </div>
    <div class="colspan-6" onclick="javascript:window.location.href='/85-Schlauchboote/';">
        <img src="/images/einstieg/Einstieg_Schlauchboote.jpg" width="690" height="355" />
        <div class="home_button uppercase">
            <h1>Schlauch<strong>boote</strong></h1>
        </div>    

    </div>
    <div class="colspan-8 flex" onclick="javascript:window.location.href='/?mode=sonderangebote&a=sonderangebote'">
        <div class="home_button3 uppercase w72">
            <div>
                <p>Für Schnäppchenjäger</p>
                <h1>Sonder<strong>Angebote</strong></h1>
            </div>
            
        </div>    
        <div><img src="/images/einstieg/Einstieg_Sonderangebote.jpg" width="868" height="350" /></div>
    </div>
    <div class="colspan-4" onclick="javascript:window.location.href='/blog/';"><img src="/images/einstieg/einstieg_blog.jpg" width="505" height="350" />
        <div class="home_button uppercase">
            <h1>Blog</h1>
        </div>    
    
    </div>
    
    {*
    <div class="colspan-6"><img src="/images/einstieg/Neuheiten.jpg" width="690" height="450" />
        <div class="home_button2">
            <h1 class="uppercase"><strong>2022</strong></h1>
        </div>    
    </div>
    
    <div class="colspan-6"><img src="/images/einstieg/Blog.jpg" width="690" height="450" />
        <div class="home_button2">
            <h1 class="uppercase">Unser <strong class="uppercase">Blog</strong></h1>
        </div>    
    </div>
    
    <div class="colspan-3"><img src="/images/einstieg/Facebook.jpg" width="335" height="335" />
        <div class="home_button_center uppercase">
            <h1>Facebook</h1>
        </div>    
    </div>
    <div class="colspan-3"><img src="/images/einstieg/Instagram.jpg" width="335" height="335" />
        <div class="home_button_center uppercase">
            <h1>Instagram</h1>
        </div>    
    </div>
    <div class="colspan-6 flex">
        <div class="home_button3 uppercase w72">
            <h1>Sonder<strong>Angebote</strong></h1>
        </div>    
    <img src="/images/einstieg/Youtube.jpg" /></div>
    *}
</div>

<section>
    <div class="inner">
        {include file="newsletter_anmeldung.tpl"}
    </div>
</section>


<style>
    .home * {
        box-sizing:border-box;
    }
    .home {
        margin:0 auto;
        width:100%;
        max-width:1400px;
        display:grid;
        gap:19px;
        grid-template-columns: repeat(12,1fr);
        overflow:hidden;        
    }
    .home > div {
        cursor:pointer;
    }
    .home img {
        transition:all 1000ms ease-in-out;
        max-width:100%;
        height:auto;
    }
    .home > div {
        font-size:0;
        overflow:hidden;
    }
    .home div.colspan-3 {
        grid-column: span 3;
    }
    
    .home div.colspan-4 {        
        grid-column: span 4;
    }
    .home div.colspan-5 {
        grid-column: span 5;
    }
    .home div.colspan-6 {
        grid-column: span 6;
    }
    .home div.colspan-7 {
        grid-column: span 7;
    }
    .home div.colspan-8 {
        grid-column: span 8;
    }
    
    .home div.rowspan-2 {
        grid-row:span 2;
    }
    
    /* fonts / buttons */
    .home .home_button {
        background: #113e93;
        border-radius: 10px;
        padding: 10px 20px;
        margin-top: -120px;
        margin-left: 40%;
        position: relative;
        width: fit-content;
        float:right;
        margin-right:7%;
        cursor:pointer;
    }
    .home .home_button_center {
        background: #113e93;
        border-radius: 10px;
        padding: 10px 20px;
        position: relative;
        width: fit-content;
        cursor: pointer;
        margin: -120px auto;        
    }
    .home div:hover .home_button_center,
    .home div:focus .home_button_center,
    .home div:hover .home_button,
    .home div:focus .home_button
    
     {
        background:#009fe3;
     }
    .home h1 {
        font-size:1.3rem;
        font-weight:normal;
        font-family:work_sansregular!important;
        color:#fff;
    }
    .home h1 strong {
        font-weight:normal;
        font-family:work_sanssemibold;
    }
    .home .home_button2 {
        background: #ffbe4a;
        color: #fff;
        height:131px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: unset;
        flex-wrap: wrap;
        margin-top: -131px;
        position: relative;
        text-align:center;
    }
    .home .home_button3 {
        background: #ffbe4a;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: unset;
        flex-wrap: wrap;
        position: relative;
        z-index:1;
        
    }
    
    .home .home_button2 p,
    .home .home_button3 p {
        width: 100%;
        height: auto;
        color: #fff !important;
        text-align:center;        
        font-size:1rem;
        font-family:work_sanslight;
    }
    
    .home div:hover .home_button2,
    .home div:focus .home_button2,
    .home div:hover .home_button3,
    .home div:focus .home_button3 {
        background:#ecaa32;
    }
    .home div:hover img,
    .home div:focus img {
        rotate:5deg; 
        scale:1.2;
    }
    
    .flex {
        display:flex;
    }
    .home .w72 {
        width:72%!important;
    }
    
    /* mobile */
    @media screen and (max-width:768px) {
        .home div.colspan-3 {
            display:none;
        }
        .home div.colspan-3,    
        .home div.colspan-4,
        .home div.colspan-6, 
        .home div.colspan-8 {
            grid-column: span 12;
        }
    }
    
</style>