覃冠森 / training · Commits

Commit 103c1f4eb36ce3c22354a9097ecdeb5b1f16aa64

Authored by 钟艺
1 parent 5ff27dbf

修改了index.html，布局基本完成，差hover和阴影盒子特效

Inline Side-by-side
Showing 1 changed file with 252 additions and 14 deletions
... ... @@ -13,7 +13,7 @@
13 13 <title>首页</title>
14 14 </head>
15 15 <body>
16   - <div class="page">
  16 + <div class="page index-page">
17 17 <div class="index-content">
18 18 <div class="index-top-box">
19 19 <div class="container">
... ... @@ -197,10 +197,10 @@
197 197 </div>
198 198 </div>
199 199 <div class="index-content-2" style="background-image: url('./img/band-1.jpg');">
200   - <div class="index-content-mar">
  200 + <div class="content-2-mar">
201 201 <div class="row">
202 202 <div class="col-xs-12 col-sm-3">
203   - <div class="content-2-1">
  203 + <div class="content-2-1 shop-box">
204 204 <div class="container">
205 205 <div class="title">
206 206 <a href="#">First Package</a>
... ... @@ -213,23 +213,244 @@
213 213 <div class="font-price">$199<p class="font-bold font-s-12">/month</p>
214 214 </div>
215 215 </div>
216   - <ul class="options">
217   - <li>Responsive Design</li>
218   - <li>Styled elements</li>
219   - <li>Easy Setup</li>
220   - </ul>
221 216 </div>
222   - <div class="bottom-box" style="background-color: rgb(255, 231, 231);">
  217 + <ul class="options">
  218 + <li>Responsive Design</li>
  219 + <li class="active">Styled elements</li>
  220 + <li>Easy Setup</li>
  221 + </ul>
  222 + <div class="bottom-box" style="background-color: rgb(255, 242, 242);">
  223 + <div class="container">
  224 + <div class="bottom-body">
  225 + <a href="#">Read More ></a>
  226 + <button type="submit">Buy Now</button>
  227 + </div>
  228 + </div>
  229 + </div>
  230 + </div>
  231 + </div>
  232 + <div class="col-xs-12 col-sm-3">
  233 + <div class="content-2-2 shop-box">
  234 + <div class="container">
  235 + <div class="title">
  236 + <a href="#">Second Package</a>
  237 + </div>
  238 + <div class="point-box">
  239 + <div class="circle-img">
  240 + <i class="fas fa-wrench"></i>
  241 + </div>
  242 + <div class="font-s-12">Starting at</div>
  243 + <div class="font-price">$299<p class="font-bold font-s-12">/month</p>
  244 + </div>
  245 + </div>
  246 + </div>
  247 + <ul class="options">
  248 + <li>Responsive Design</li>
  249 + <li class="active">Styled elements</li>
  250 + <li>Easy Setup</li>
  251 + </ul>
  252 + <div class="bottom-box">
  253 + <div class="container">
  254 + <div class="bottom-body">
  255 + <a href="#">Read More ></a>
  256 + <button type="submit">Buy Now</button>
  257 + </div>
  258 + </div>
  259 + </div>
  260 + </div>
  261 + </div>
  262 + <div class="col-xs-12 col-sm-3">
  263 + <div class="content-2-3 shop-box">
  264 + <div class="container">
  265 + <div class="title">
  266 + <a href="#">First Package</a>
  267 + </div>
  268 + <div class="point-box">
  269 + <div class="circle-img">
  270 + <i class="fas fa-piggy-bank"></i>
  271 + </div>
  272 + <div class="font-s-12">Starting at</div>
  273 + <div class="font-price">$199<p class="font-bold font-s-12">/month</p>
  274 + </div>
  275 + </div>
  276 + </div>
  277 + <ul class="options">
  278 + <li>Responsive Design</li>
  279 + <li class="active">Styled elements</li>
  280 + <li>Easy Setup</li>
  281 + </ul>
  282 + <div class="bottom-box">
  283 + <div class="container">
  284 + <div class="bottom-body">
  285 + <a href="#">Read More ></a>
  286 + <button type="submit">Buy Now</button>
  287 + </div>
  288 + </div>
  289 + </div>
  290 + </div>
  291 + </div>
  292 + <div class="col-xs-12 col-sm-3">
  293 + <div class="content-2-4 shop-box">
  294 + <div class="container">
  295 + <div class="title">
  296 + <a href="#">First Package</a>
  297 + </div>
  298 + <div class="point-box">
  299 + <div class="circle-img">
  300 + <i class="fas fa-key"></i>
  301 + </div>
  302 + <div class="font-s-12">Starting at</div>
  303 + <div class="font-price">$199<p class="font-bold font-s-12">/month</p>
  304 + </div>
  305 + </div>
  306 + </div>
  307 + <ul class="options">
  308 + <li>Responsive Design</li>
  309 + <li class="active">Styled elements</li>
  310 + <li>Easy Setup</li>
  311 + </ul>
  312 + <div class="bottom-box">
223 313 <div class="container">
224   - <a href="#">Read More ></a>
225   - <button type="button">Buy Now</button>
  314 + <div class="bottom-body">
  315 + <a href="#">Read More ></a>
  316 + <button type="submit">Buy Now</button>
  317 + </div>
  318 + </div>
  319 + </div>
  320 + </div>
  321 + </div>
  322 + </div>
  323 + </div>
  324 + </div>
  325 + <div class="index-content-3">
  326 + <div class="container">
  327 + <div class="content-3-1">
  328 + <div class="content-box" style="text-align: center;">
  329 + <p><span style="font-size: 16px">Welcome to our site. There are many variations alteration in some form, by injected humour, or randomised words which don't look even slightly believable. Donec pharetra, lectus nec dignissim pharetra quis libero.</span></p>
  330 + <button type="button">Read More</button>
  331 + <button type="button">Join Now</button>
  332 + </div>
  333 + </div>
  334 + </div>
  335 + </div>
  336 + <div class="index-content-4" style="background-image: url(./img/band-12.jpg);">
  337 + <div class="content-4-1">
  338 + <div class="wrapper-3">
  339 + <div class="slick" id="wrapper-3-1">
  340 + <div>
  341 + <a href="">
  342 + <div class="content-4-hover" style="background-image: url('img/slide-1.jpg')">
  343 + </div>
  344 + </a>
  345 + </div>
  346 + <div>
  347 + <a href="">
  348 + <div class="content-4-hover" style="background-image: url('img/slide-2.jpg')">
  349 + </div>
  350 + </a>
  351 + </div>
  352 + <div>
  353 + <a href="">
  354 + <div class="content-4-hover" style="background-image: url('img/slide-3.jpg')">
  355 + </div>
  356 + </a>
  357 + </div>
  358 + <div>
  359 + <a href="">
  360 + <div class="content-4-hover" style="background-image: url('img/slide-4.jpg')">
  361 + </div>
  362 + </a>
  363 + </div>
  364 + <div>
  365 + <a href="">
  366 + <div class="content-4-hover" style="background-image: url('img/slide-5.jpg')">
  367 + </div>
  368 + </a>
  369 + </div>
  370 + <div>
  371 + <a href="">
  372 + <div class="content-4-hover" style="background-image: url('img/slide-1.jpg')">
  373 + </div>
  374 + </a>
  375 + </div>
  376 + <div>
  377 + <a href="">
  378 + <div class="content-4-hover" style="background-image: url('img/slide-2.jpg')">
226 379 </div>
  380 + </a>
  381 + </div>
  382 + <div>
  383 + <a href="">
  384 + <div class="content-4-hover" style="background-image: url('img/slide-3.jpg')">
  385 + </div>
  386 + </a>
  387 + </div>
  388 + </div>
  389 + </div>
  390 + </div>
  391 + </div>
  392 + <div class="index-content-5">
  393 + <div class="content-5-1 container">
  394 + <div class="row">
  395 + <div>
  396 + <div class="col-xs-12 col-sm-6">
  397 + <div class="pub_title">
  398 + <h3>Our partners</h3>
  399 + </div>
  400 + <ul class="row content-5-icon">
  401 + <li>
  402 + <a href="" class="make">
  403 + <img src="img/make-2.png" alt="img/make-2.png">
  404 + </a>
  405 + </li>
  406 + <li>
  407 + <a href="" class="make">
  408 + <img src="img/make-3.png" alt="img/make-3.png">
  409 + </a>
  410 + </li>
  411 + <li>
  412 + <a href="" class="make">
  413 + <img src="img/make-4.png" alt="img/make-4.png">
  414 + </a>
  415 + </li>
  416 + </ul>
  417 + <div class="content-5-p">
  418 + <p>Duis bibendum pulvinar laoreet. Ut eu arcu sit amet elit placerat pharetra sit amet a tortor. Fusce vestibulum auctor rhoncus. Nullam rhoncus, tellus a congue elementum, leo ipsum tincidunt justo, ut condimentum velit eros et lectus. Phasellus ultrices rhoncus vehicula.</p>
  419 + <p>Integer ultricies semper massa non condimentum. Phasellus eu ipsum justo. Nullam non pulvinar purus. Ut ante ipsum, venenatis at tristique quis, congue vitae felis. Aliquam cursus diam in massa dapibus auctor. In volutpat, risus non egestas luctus, justo tellus laoreet justo.</p>
227 420 </div>
228 421 </div>
  422 + <div class="col-xs-12 col-sm-6">
  423 + <div class="pub_title">
  424 + <h3>Latest Posts</h3>
  425 + </div>
  426 + <ul class="content-5-ul">
  427 + <li>
  428 + <img src="img/product-1.png" alt="img/product-1.png">
  429 + <span>Admin,</span>
  430 + <span class="time">17.06.2014, 23:53:</span>
  431 + <div class="content-5-a">
  432 + <a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi facere earum quis ipsa vitae qui minima esse ducimus dolorum</a>
  433 + </div>
  434 + </li>
  435 + <li>
  436 + <img src="img/product-2.png" alt="img/product-2.png">
  437 + <span>Admin,</span>
  438 + <span class="time"> 16.06.2014, 10:12</span>
  439 + <div class="content-5-a">
  440 + <a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi facere earum quis ipsa vitae qui minima esse ducimus dolorum</a>
  441 + </div>
  442 + </li>
  443 + <li>
  444 + <img src="img/product-3_1.png" alt="img/product-3_1.png">
  445 + <span>Admin</span>
  446 + <span class="time"> 16.06.2014, 10:11:</span>
  447 + <div class="content-5-a">
  448 + <a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi facere earum quis ipsa vitae qui minima esse ducimus dolorum</a>
  449 + </div>
  450 + </li>
  451 + </ul>
  452 + </div>
229 453 </div>
230   - <div class="col-xs-12 col-sm-3"></div>
231   - <div class="col-xs-12 col-sm-3"></div>
232   - <div class="col-xs-12 col-sm-3"></div>
233 454 </div>
234 455 </div>
235 456 </div>
... ... @@ -320,6 +541,15 @@
320 541 autoplay: false,
321 542 dots: true
322 543 });
  544 + $('#wrapper-3-1').slick({
  545 + slidesToShow: 4,
  546 + slidesToScroll: 1,
  547 + dots: true,
  548 + autoplay: true,
  549 + arrow: false,
  550 + swipe: false
  551 + });
  552 + $('.index-content-mar').removeClass();
323 553 }
324 554 else{
325 555 $('#wrapper-1-1').slick({
... ... @@ -337,6 +567,14 @@
337 567 autoplay: false,
338 568 dots: true
339 569 });
  570 + $('#wrapper-3-1').slick({
  571 + slidesToShow: 1,
  572 + slidesToScroll: 1,
  573 + dots: true,
  574 + autoplay: true,
  575 + arrow: false,
  576 + swipe: false
  577 + });
340 578 }
341 579 });
342 580
... ...
Please register or login to post a comment