Subversion-Projekte lars-tiefland.zeldi.de_alt

Revision

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

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