Subversion-Projekte lars-tiefland.faltradxxs.de

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
2 lars 1 
<div class="home">
2 
 
3 
    <div class="colspan-6"  onclick="javascript:window.location.href='/produktfinder.html';">
4 
        <img src="/images/einstieg/FaltradBerater.jpg" width="690" height="355" />
5 
        <div class="home_button uppercase"><h1>Faltrad<strong>berater</strong></h1></div>
6 
        </div>
7 
 
8 
    <div class="colspan-6 rowspan-2" onclick="javascript:window.location.href='/1752-Brompton-Konfigurator/';">
9 
        <img src="/images/einstieg/Brompton-Konfigurator.jpg" width="690" height="729" />
10 
        <div class="home_button2">
11 
            <p>Für die, die genau wissen, was sie wollen</p>
12 
            <h1 class="uppercase">Brompton  <strong class="uppercase">Konfigurator</strong></h1>
13 
        </div>
14 
 
15 
 
16 
    </div>
17 
    <div class="colspan-6" onclick="javascript:window.location.href='/?id=60';"><img src="/images/einstieg/Filiale.jpg" width="690" height="355" />
18 
        <div class="home_button uppercase">
19 
            <h1>Faltradxxs <strong>Filiale</strong></h1>
20 
        </div>
21 
 
22 
    </div>
23 
    <div class="colspan-8 flex" onclick="javascript:window.location.href='/?mode=sonderangebote&a=Sonderangebote'">
24 
        <div class="home_button3 w72">
25 
            <div>
26 
                <p>Für Schnäppchenjäger</p>
27 
                <h1>Sonder<strong>Angebote</strong></h1>
28 
            </div>
29 
 
30 
        </div>
31 
        <div><img src="/images/einstieg/Sonderangebote.jpg" width="868" height="350" /></div>
32 
    </div>
33 
    <div class="colspan-4" onclick="javascript:window.location.href='/faltrad-sonderangebote.html?t=B-Ware'"><img src="/images/einstieg/B-Ware.jpg" width="505" height="350" />
34 
        <div class="home_button uppercase">
35 
            <h1>B-Ware</h1>
36 
        </div>
37 
 
38 
    </div>
39 
 
40 
    <div class="colspan-6" onclick="javascript:window.location.href='/2110-Neuheiten-2023/';"><img src="/images/einstieg/Neuheiten.jpg" width="690" height="450" />
41 
        <div class="home_button2">
42 
            <p>Unsere Neuheiten</p>
43 
            <h1 class="uppercase"><strong>2023</strong></h1>
44 
        </div>
45 
    </div>
46 
 
47 
    <div class="colspan-6" onclick="javascript:window.open('/blog/');"><img src="/images/einstieg/Blog.jpg" width="690" height="450" />
48 
        <div class="home_button2">
49 
            <p>Tipps, Trends und Neuheiten</p>
50 
            <h1 class="uppercase">Unser <strong class="uppercase">Blog</strong></h1>
51 
        </div>
52 
    </div>
53 
 
54 
    <div class="colspan-3" onclick="javascript:window.open('https://www.facebook.com/FaltradXXS/');"><img src="/images/einstieg/Facebook.jpg" width="335" height="335" />
55 
        <div class="home_button_center uppercase">
56 
            <h1>Facebook</h1>
57 
        </div>
58 
    </div>
59 
    <div class="colspan-3" onclick="javascript:window.open('https://www.instagram.com/faltradxxs.de/');"><img src="/images/einstieg/Instagram.jpg" width="335" height="335" />
60 
        <div class="home_button_center uppercase">
61 
            <h1>Instagram</h1>
62 
        </div>
63 
    </div>
64 
    <div class="colspan-6 flex" onclick="javascript:window.open('https://www.youtube.com/user/marinesalesde');">
65 
        <div class="home_button3 w72">
66 
            <div>
67 
                <p>Wir teilen unser Wissen mit dir</p>
68 
                <h1>You<strong>Tube</strong></h1>
69 
            </div>
70 
        </div>
71 
    <img src="/images/einstieg/Youtube.jpg" /></div>
72 
 
73 
</div>
74 
 
75 
<section>
76 
    <div class="inner">
77 
        {include file="newsletter_anmeldung.tpl"}
78 
    </div>
79 
</section>
80 
 
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 {
132 
        background: #EA5802;
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 {
144 
        background: #EA5802;
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 
     {
158 
        background:#FFB725;
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 {
171 
        background: #2FBABD;
172 
        color: #fff;
173 
        height:87px;
174 
        display: flex;
175 
        align-items: center;
176 
        justify-content: center;
177 
        position: unset;
178 
        flex-wrap: wrap;
179 
        margin-top: -87px;
180 
        position: relative;
181 
        flex-direction: column;
182 
    }
183 
 
184 
    .home .home_button3 {
185 
        background: #2FBABD;
186 
        color: #fff;
187 
        display: flex;
188 
        align-items: center;
189 
        justify-content: center;
190 
        position: unset;
191 
        flex-wrap: wrap;
192 
        position: relative;
193 
        z-index:1;
194 
        text-align:center;
195 
    }
196 
 
197 
    .home .home_button2 p,
198 
    .home .home_button3 p {
199 
        width: 100%;
200 
        height: auto;
201 
        color: #fff !important;
202 
        text-align:center;
203 
        font-size:1rem;
204 
        font-family:work_sanslight;
205 
    }
206 
 
207 
 
208 
    .home div:hover .home_button2,
209 
    .home div:focus .home_button2,
210 
    .home div:hover .home_button3,
211 
    .home div:focus .home_button3 {
212 
        background:#9CD9DA;
213 
    }
214 
    .home div:hover img,
215 
    .home div:focus img {
216 
        rotate:5deg;
217 
        scale:1.2;
218 
    }
219 
 
220 
    .flex {
221 
        display:flex;
222 
    }
223 
    .home .w72 {
224 
        width:72%!important;
225 
    }
226 
 
227 
    /* mobile */
228 
    @media screen and (max-width:768px) {
229 
        .home div.colspan-3 {
230 
            display:none;
231 
        }
232 
        .home div.colspan-3,
233 
        .home div.colspan-4,
234 
        .home div.colspan-6,
235 
        .home div.colspan-8 {
236 
            grid-column: span 12;
237 
        }
238 
    }
239 
 
240 
</style>
241