123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346 |
- html, body{
- position: relative;
- font-family: 'Roboto Slab', serif;
- color: #6B6B6B;
- margin: 0;
- padding: 0;
- }
- li{
- list-style: none;
- }
- header{
-
-
- background: #363636;
- width: 100%;
- justify-content: space-between;
- height: 16vh;
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- }
- .pos_blk{
- padding: 27% 5%;
- }
- .menu{
- padding: 0;
- display: flex;
- height: 3.5vh;
- width: 50%;
- justify-content: flex-end;
- flex-wrap: wrap;
- }
- .menu li{
- margin-right: 2%;
- height: 3.5vh;
- }
- .modul{
-
- font-size: 3.3vh;
- color: white;
- margin-left: 2vw;
- }
- .menu li a{
- color: #fff;
- text-decoration: none;
- text-transform: uppercase;
- font-size: 2.5vh;
- }
- .menu li a:hover{
- color: #eca187;
- }
- .in{
- color: #da4453 !important;
- }
- section{
- background: url(img/bg_img.jpg) no-repeat;
- background-size: cover;
- width: 100%;
- height: 84vh;
- }
- .part2 h1{
- width: 36vw;
- color: #fff;
- font-size: 3.3vh;
- margin-bottom: 2vh;
- background-color: rgba(218, 68, 83, 0.8);
- }
- .part2 p{
- background-color: rgba(59,59,59,.8);
- color: #ddd;
- font-size: 2vh;
- width: 36vw;
- }
- .part3{
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: -o-flex;
- display: flex;
- justify-content: center;
- margin-top: 2vh;
- }
- .a_block{
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: -o-flex;
- display: flex;
- justify-content: space-around;
- max-width: 100%;
- flex-wrap: wrap;
- width: 70%;
- }
- .article{
- margin-bottom: 30px;
- float: left;
- box-sizing: border-box;
- border: 1px solid #dadada;
- max-width: 100%;
- width: 60%;
- }
- .img1{
- margin-top: 2vh;
- width: 92%;
- margin-left: 3.5%;
- }
- .Layout {
- color: #444444;
- margin-left: 3.5%;
- font-size: 3.4vh;
- }
- .inform{
- padding-left: 0;
- margin-left: 9%;
- font-size: 1vh;
- }
- .inform li{
- font-size: 2.1vh;
- padding-left: 5%;
- display: inline;
- }
- .inform li:nth-child(1){
- background: url(img/clndr.png) no-repeat;
- background-size: 18% auto;
- }
- .inform li:nth-child(2){
- background: url(img/ppl.jpg) no-repeat;
- background-size: 28% auto;
- }
- .inform li:nth-child(3){
- background: url(img/Content.png) no-repeat;
- background-size: 17% auto;
- }
- .main_txt{
- margin-bottom: 30px;
- font-size: 2.5vh;
- margin-left: 3.5%;
- width: 90%;
- color: #6b6b6b;
- }
- .display_a{
- font-size: 3vh;
- margin-bottom: 50px;
- font-family: Arial;
- color: #fff;
- text-decoration: none;
- text-transform: uppercase;
- padding: 10px 2%;
- background:#da4453;
- display: inline-block;
- margin-left: 70%;
- }
- .display_a:hover{
- color:#fff;
- }
- .general{
- border-radius: 2px;
- border: 1px solid #dadada;
- box-sizing: border-box;
- width: 34%;
- }
- .general h2{
- text-transform: uppercase;
- font-size: 2.4vh;
- margin-left:5%;
- }
- .litter{
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: -o-flex;
- display: flex;
- width: 93%;
- justify-content: space-around;
- height: 3%;
- }
- .litter a i{
- padding: 10px;
- border-radius: 20%;
- font-size: 20px;
- color: #fff;
- background: #c1c0c0;
- height: 100%;
- width: 100%;
- text-align: center;
- }
- .litter a :hover{opacity: .7
-
- }
- .ppl_lt{
- width: 20px;
- height: 20px;
- }
- .smth_wt{display: flex;
- -webkit-flex-direction: column;
- -moz-flex-direction: column;
- -ms-flex-direction: column;
- -o-flex-direction: column;
- flex-direction: column;
- margin-left: 10%;
- }
- .smth_wt a{
- font-size: .9em;
- text-decoration: none;
- color: #fff;
- border-radius: 5px;
- margin-right: 2%;
- padding: 0 2%;
-
- background: #dadada;
- margin-top: 2vh;
- height: 33px;
- display: flex;
- align-items: center;
- }
- .smth_wt a:hover{
- opacity: .8;
- }
- .beta{
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: -o-flex;
- display: flex;
- -webkit-flex-direction: column;
- -moz-flex-direction: column;
- -ms-flex-direction: column;
- -o-flex-direction: column;
- flex-direction: column;
- color: #cfc2c4;
- }
- .alpha{
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: -o-flex;
- display: flex;
- -webkit-flex-direction: column;
- -moz-flex-direction: column;
- -ms-flex-direction: column;
- -o-flex-direction: column;
- flex-direction: column;
- width: 80%;
- margin-left: 10%;
- }
- .tags1{
- display: flex;
- flex-wrap: wrap;
- }
- .tags2{
- }
- .ppl_name{
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: -o-flex;
- display: flex;
- -webkit-flex-direction: row;
- -moz-flex-direction: row;
- -ms-flex-direction: row;
- -o-flex-direction: row;
- flex-direction: row;
- align-items: center;
- }
- .comment{
- height: 60%;
- }
- .username{
-
- padding-left: 1vh;
- font-weight: bold;
- font-size: 0.9em;
- margin: 0;
- }
- .mb_text{
- padding: 2vh 0;
- font-size: .9em;
- border-bottom: 1px solid;
- }
- .tags2{margin: 3vh 0;
- }
- footer{
- background: #363636;
- width: 100%;
- justify-content: space-around;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- }
- footer .nav{
- margin-left: 1.5%;
- }
- footer h2{
- color: #fff;
- font-size: 3vh;
- }
- footer h2 span{
- color: #999999;
- }
- @media screen and (max-width: 1024px) {
- .article{width: 100%;
- }
- .a_block{
- width: 100%
- }
- .general{
- width: 100%;
- }
- .litter{
- height: 9vh
- }
- .tags1{
- display: flex;
- margin-bottom: 1vh
-
- }
- .menu{
-
- width: 100%;
- }
-
- .part2 h1{
- padding: 0;
- width: 100%;
- font-size:20px;
- }
- .part2 p{
- width: 100%;
- font-size: 15px;
- }
- }
-
|