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

Revision

Revision 2 | Details | Vergleich mit vorheriger | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
2 lars 1 
<div class="home">
2 
 
7 lars 3 
    <div class="colspan-6" onclick="javascript:window.location.href='/1-Aussenborder/';">
4 
        <img src="/images/einstieg/Einstieg_Aussenborder.jpg" width="690" height="355" />
5 
        <div class="home_button uppercase"><h1>Aussen<strong>border</strong></h1></div>
2 lars 6 
        </div>
7 
 
7 lars 8 
    <div class="colspan-6 rowspan-2" onclick="javascript:window.location.href='/1822-Rettungswesten/';">
9 
        <img src="/images/einstieg/Einstieg_Rettungswesten.jpg" width="690" height="729" />
2 lars 10 
        <div class="home_button2">
7 lars 11 
            <div>
12 
                <p>Sicher unterwegs auf hoher See</p>
13 
                <h1 class="uppercase">Sicherheits<strong class="uppercase">ausr&uuml;stung</strong></h1>
14 
            </div>
2 lars 15 
        </div>
16 
 
17 
 
18 
    </div>
7 lars 19 
    <div class="colspan-6" onclick="javascript:window.location.href='/85-Schlauchboote/';">
20 
        <img src="/images/einstieg/Einstieg_Schlauchboote.jpg" width="690" height="355" />
2 lars 21 
        <div class="home_button uppercase">
7 lars 22 
            <h1>Schlauch<strong>boote</strong></h1>
2 lars 23 
        </div>
24 
 
25 
    </div>
7 lars 26 
    <div class="colspan-8 flex" onclick="javascript:window.location.href='/?mode=sonderangebote&a=sonderangebote'">
27 
        <div class="home_button3 uppercase w72">
2 lars 28 
            <div>
29 
                <p>Für Schnäppchenjäger</p>
30 
                <h1>Sonder<strong>Angebote</strong></h1>
31 
            </div>
32 
 
33 
        </div>
7 lars 34 
        <div><img src="/images/einstieg/Einstieg_Sonderangebote.jpg" width="868" height="350" /></div>
2 lars 35 
    </div>
7 lars 36 
    <div class="colspan-4" onclick="javascript:window.location.href='/blog/';"><img src="/images/einstieg/einstieg_blog.jpg" width="505" height="350" />
2 lars 37 
        <div class="home_button uppercase">
7 lars 38 
            <h1>Blog</h1>
2 lars 39 
        </div>
40 
 
41 
    </div>
42 
 
7 lars 43 
    {*
44 
    <div class="colspan-6"><img src="/images/einstieg/Neuheiten.jpg" width="690" height="450" />
2 lars 45 
        <div class="home_button2">
7 lars 46 
            <h1 class="uppercase"><strong>2022</strong></h1>
2 lars 47 
        </div>
48 
    </div>
49 
 
7 lars 50 
    <div class="colspan-6"><img src="/images/einstieg/Blog.jpg" width="690" height="450" />
2 lars 51 
        <div class="home_button2">
52 
            <h1 class="uppercase">Unser <strong class="uppercase">Blog</strong></h1>
53 
        </div>
54 
    </div>
55 
 
7 lars 56 
    <div class="colspan-3"><img src="/images/einstieg/Facebook.jpg" width="335" height="335" />
2 lars 57 
        <div class="home_button_center uppercase">
58 
            <h1>Facebook</h1>
59 
        </div>
60 
    </div>
7 lars 61 
    <div class="colspan-3"><img src="/images/einstieg/Instagram.jpg" width="335" height="335" />
2 lars 62 
        <div class="home_button_center uppercase">
63 
            <h1>Instagram</h1>
64 
        </div>
65 
    </div>
7 lars 66 
    <div class="colspan-6 flex">
67 
        <div class="home_button3 uppercase w72">
68 
            <h1>Sonder<strong>Angebote</strong></h1>
2 lars 69 
        </div>
70 
    <img src="/images/einstieg/Youtube.jpg" /></div>
7 lars 71 
    *}
2 lars 72 
</div>
73 
 
74 
<section>
75 
    <div class="inner">
76 
        {include file="newsletter_anmeldung.tpl"}
77 
    </div>
78 
</section>
79 
 
7 lars 80 
 
2 lars 81 
<style>
82 
    .home * {
83 
        box-sizing:border-box;
84 
    }
85 
    .home {
86 
        margin:0 auto;
87 
        width:100%;
88 
        max-width:1400px;
89 
        display:grid;
90 
        gap:19px;
91 
        grid-template-columns: repeat(12,1fr);
92 
        overflow:hidden;
93 
    }
94 
    .home > div {
95 
        cursor:pointer;
96 
    }
97 
    .home img {
98 
        transition:all 1000ms ease-in-out;
99 
        max-width:100%;
100 
        height:auto;
101 
    }
102 
    .home > div {
103 
        font-size:0;
104 
        overflow:hidden;
105 
    }
106 
    .home div.colspan-3 {
107 
        grid-column: span 3;
108 
    }
109 
 
110 
    .home div.colspan-4 {
111 
        grid-column: span 4;
112 
    }
113 
    .home div.colspan-5 {
114 
        grid-column: span 5;
115 
    }
116 
    .home div.colspan-6 {
117 
        grid-column: span 6;
118 
    }
119 
    .home div.colspan-7 {
120 
        grid-column: span 7;
121 
    }
122 
    .home div.colspan-8 {
123 
        grid-column: span 8;
124 
    }
125 
 
126 
    .home div.rowspan-2 {
127 
        grid-row:span 2;
128 
    }
129 
 
130 
    /* fonts / buttons */
131 
    .home .home_button {
7 lars 132 
        background: #113e93;
2 lars 133 
        border-radius: 10px;
134 
        padding: 10px 20px;
135 
        margin-top: -120px;
136 
        margin-left: 40%;
137 
        position: relative;
138 
        width: fit-content;
139 
        float:right;
140 
        margin-right:7%;
141 
        cursor:pointer;
142 
    }
143 
    .home .home_button_center {
7 lars 144 
        background: #113e93;
2 lars 145 
        border-radius: 10px;
146 
        padding: 10px 20px;
147 
        position: relative;
148 
        width: fit-content;
149 
        cursor: pointer;
150 
        margin: -120px auto;
151 
    }
152 
    .home div:hover .home_button_center,
153 
    .home div:focus .home_button_center,
154 
    .home div:hover .home_button,
155 
    .home div:focus .home_button
156 
 
157 
     {
7 lars 158 
        background:#009fe3;
2 lars 159 
     }
160 
    .home h1 {
161 
        font-size:1.3rem;
162 
        font-weight:normal;
163 
        font-family:work_sansregular!important;
164 
        color:#fff;
165 
    }
166 
    .home h1 strong {
167 
        font-weight:normal;
168 
        font-family:work_sanssemibold;
169 
    }
170 
    .home .home_button2 {
7 lars 171 
        background: #ffbe4a;
2 lars 172 
        color: #fff;
7 lars 173 
        height:131px;
2 lars 174 
        display: flex;
175 
        align-items: center;
176 
        justify-content: center;
177 
        position: unset;
178 
        flex-wrap: wrap;
7 lars 179 
        margin-top: -131px;
2 lars 180 
        position: relative;
7 lars 181 
        text-align:center;
2 lars 182 
    }
183 
    .home .home_button3 {
7 lars 184 
        background: #ffbe4a;
2 lars 185 
        color: #fff;
186 
        display: flex;
187 
        align-items: center;
188 
        justify-content: center;
189 
        position: unset;
190 
        flex-wrap: wrap;
191 
        position: relative;
192 
        z-index:1;
7 lars 193 
 
2 lars 194 
    }
7 lars 195 
 
2 lars 196 
    .home .home_button2 p,
197 
    .home .home_button3 p {
198 
        width: 100%;
199 
        height: auto;
200 
        color: #fff !important;
201 
        text-align:center;
202 
        font-size:1rem;
203 
        font-family:work_sanslight;
204 
    }
7 lars 205 
 
2 lars 206 
    .home div:hover .home_button2,
207 
    .home div:focus .home_button2,
208 
    .home div:hover .home_button3,
209 
    .home div:focus .home_button3 {
7 lars 210 
        background:#ecaa32;
2 lars 211 
    }
212 
    .home div:hover img,
213 
    .home div:focus img {
214 
        rotate:5deg;
215 
        scale:1.2;
216 
    }
217 
 
218 
    .flex {
219 
        display:flex;
220 
    }
221 
    .home .w72 {
222 
        width:72%!important;
223 
    }
224 
 
225 
    /* mobile */
226 
    @media screen and (max-width:768px) {
227 
        .home div.colspan-3 {
228 
            display:none;
229 
        }
230 
        .home div.colspan-3,
231 
        .home div.colspan-4,
232 
        .home div.colspan-6,
233 
        .home div.colspan-8 {
234 
            grid-column: span 12;
235 
        }
236 
    }
237 
 
238 
</style>
239