Липкий футер (рецепт от бутстрапа) Примеры графики с помощью ::after ::before и классический бордер со стилями. Ну и немножко эффектов css.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<style> .col-md-12.bg{ /*min-height: 1000px;*/ background-image: url('img/bg.jpg'); background-repeat: no-repeat; } .gradient{ background: linear-gradient(to top, #fefcea, rgba(236, 201, 133, 0.56)); height: 200px; /*position: absolute;*/ /*bottom: 0;*/ } .col-md-6 p{ padding: 20px } .firstRow p::after{ content: ""; background: #4E62FF; border-radius: 25px; display: block; height: 25px; width: 25px; margin: 3% 50%; } .twoRow p::after{ content: ""; background: #FB2828; transform: rotate(45deg); display: block; height: 25px; width: 25px; margin: 3% 50%; } .elem{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 40px solid red; border-bottom: 50px solid; transition: 1s; margin: 0 auto; } .elem:hover{ border-top: 100px solid red; transition: 1s; border-right: 100px solid transparent; border-bottom: 30px solid; } .elem2{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 40px solid red; margin: 0 auto; } .firstRow{ margin-top: 50px; } .twoRow{ margin-top: 50px; } /* рецепт липкого футера */ html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } .footer{ position: absolute; bottom: 0; width: 100%; height: 60px; background-color: #f5f5f5; } </style> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="container"> <div class="row"> <div class="col-md-12 bg"> <div class="row firstRow"> <div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias voluptatum ad, voluptas non repudiandae corporis similique quis, nemo quam perferendis at, quo totam. Temporibus placeat facere ducimus magnam odit ullam commodi adipisci, nam, veniam recusandae eius quas sequi sed reiciendis, ab laboriosam in harum eos perferendis. Corporis doloribus dolore, facere.</p></div> <div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quisquam asperiores sequi quod adipisci libero accusamus facilis quaerat inventore! Mollitia deleniti iste voluptas et ea nesciunt nostrum, aspernatur repudiandae. Consectetur omnis obcaecati sapiente ipsum consequuntur reprehenderit, facere recusandae, ad et libero quasi deserunt ullam dolorum explicabo, nobis praesentium quo eum.</p></div> </div> <div class="row twoRow"> <div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quis sequi illo neque tempore, eligendi tempora eos culpa, quam, quos temporibus quidem nobis ipsam animi dolor alias laudantium, rerum cum ut ex! Corporis, totam nobis vero nulla recusandae consequuntur consequatur, nostrum cum magnam reprehenderit accusantium similique modi voluptatibus tempore dolor.</p></div> <div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident maiores aliquam placeat tempore vero vel, fugit doloremque cum quos consequuntur iste ipsum omnis ipsa, mollitia impedit sint nesciunt? Voluptate earum similique cum laborum autem quisquam veniam ea aspernatur nesciunt, aperiam, perferendis at, fugit esse eaque ad dicta voluptates. Amet, sapiente.</p> </div> </div> <div class="row threeRow"> <div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quis sequi illo neque tempore, eligendi tempora eos culpa, quam, quos temporibus quidem nobis ipsam animi dolor alias laudantium, rerum cum ut ex! Corporis, totam nobis vero nulla recusandae consequuntur consequatur, nostrum cum magnam reprehenderit accusantium similique modi voluptatibus tempore dolor.</p><div class="elem" ></div></div> <div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident maiores aliquam placeat tempore vero vel, fugit doloremque cum quos consequuntur iste ipsum omnis ipsa, mollitia impedit sint nesciunt? Voluptate earum similique cum laborum autem quisquam veniam ea aspernatur nesciunt, aperiam, perferendis at, fugit esse eaque ad dicta voluptates. Amet, sapiente.</p><div class="elem2" ></div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In aspernatur laborum maxime vero ut a commodi repellat explicabo incidunt id itaque non est nobis provident reiciendis obcaecati eum ex molestiae expedita, consequuntur quae quod, dicta blanditiis voluptatibus. Amet nesciunt sit temporibus totam explicabo modi at unde eius quis recusandae, maxime, debitis ipsam odit nihil, quae fuga nobis placeat asperiores perspiciatis obcaecati. Porro dolore neque illum. Minima, quis vero corporis doloribus optio cum. Necessitatibus fugiat totam recusandae nihil facere tempora iusto debitis temporibus ipsam excepturi eveniet, ullam amet aspernatur, magnam obcaecati voluptates sapiente, modi quo nobis, delectus rem ex quasi et.</p></div> </footer> |
| Категория: CSS, HTML, Вёрстка
| Тэги: bootstrap / CSS / HTML / анимация / трансформация