Created
October 3, 2016 07:58
-
-
Save OlgaCoin/d3c495628ad3cab429aad0c0fd1bf739 to your computer and use it in GitHub Desktop.
Image full-screen-sized
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .image { | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| height: 650px; | |
| width:100%; | |
| overflow: hidden; | |
| } | |
| .img__content { | |
| height: 100%; | |
| margin: 0 auto; | |
| width: 1140px; | |
| position: relative; | |
| } | |
| .img__content h1 { | |
| padding-top: 300px; | |
| color: #fff; | |
| font: 65px/70px sans-serif; | |
| } | |
| .img__content p { | |
| margin-top: 28px; | |
| margin-bottom: 42px; | |
| font: 18px/28px sans-serif; | |
| color: #cecece; | |
| } | |
| .image2 { | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| height: 650px; | |
| width:100%; | |
| overflow: hidden; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="test"> | |
| <div class="image" style="background-image: url(img/slider/1.jpg)"> | |
| <div class="img__content"> | |
| <h1>Hello world</a></h1> | |
| <p>Широкий ассортимент коллекций ведущих производителей<br> | |
| Ежедневное поступление товара</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!--Bootstrap--> | |
| <div class="test2"> | |
| <div class="image2" style="background-image: url(img/slider/2.jpg)"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="img__content"> | |
| <h1>Hello world</a></h1> | |
| <p>Широкий ассортимент коллекций ведущих производителей<br> | |
| Ежедневное поступление товара</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen and (max-width:1279px){ | |
| .image, .image2 {height: 542px;} | |
| .img__content h1{padding-top:300px;font-size:60px;line-height:.5} | |
| .img__content p{margin-top:32px;margin-bottom:38px} | |
| } | |
| /* Medium Devices, Desktops */ | |
| @media only screen and (max-width : 992px) { | |
| .image, .image2 {height: 407px;} | |
| .img__content h1{padding-top:150px;font-size:46px;line-height:.6} | |
| .img__content p{margin-bottom:29px;font-size:16px} | |
| } | |
| /* Small Devices, Tablets */ | |
| @media only screen and (max-width : 768px) { | |
| .image, .image2 {height: 304px;} | |
| .img__content h1{padding-top:80px;font-size:38px;line-height:.8} | |
| .img__content p{font-size:14px;line-height:1.4;margin-top:21px} | |
| } | |
| /* Extra Small Devices, Phones */ | |
| @media only screen and (max-width : 480px) { | |
| .image, .image2 {height: 270px;} | |
| .img__content h1{padding-top:40px} | |
| .img__content p{display:none} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment