Skip to content

Instantly share code, notes, and snippets.

@ennjoy
Created July 3, 2019 17:59
Show Gist options
  • Save ennjoy/23090fd6545288edb4006fd88c75a88b to your computer and use it in GitHub Desktop.
Save ennjoy/23090fd6545288edb4006fd88c75a88b to your computer and use it in GitHub Desktop.
primerp.css
* {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 15px;
}
html, body {
background: url('/img/background.png');
background-repeat: repeat-x;
height: 100%;
}
a {
text-decoration: none
}
h1 {
max-width: 500px;
}
.white {
color: white
}
.red {
color: red
}
.mt-200 {
margin-top: 80px !important
}
.mt-300 {
margin-top: 300px !important
}
.w100 {
width: 100%
}
.w120 {
width: 120px
}
.pt-12 {
padding-top: 12px
}
.mw200 {
max-width: 200px
}
.mw400 {
max-width: 400px
}
.mw480 {
max-width: 480px
}
.right {
float: right
}
.fs25 {
font-size: 25px !important;
}
.preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
z-index: 2;
transition: 1s all;
opacity: 1;
visibility: visible;
}
.loader {
width: 75px;
height: 75px;
border: 10px solid white;
border-radius: 50%;
border-top-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: 1s spin infinite linear;
}
.done {
opacity: 0;
visibility: hidden;
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
} to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.wrapper {
margin-top: 100px;
margin-bottom: 100px
}
.header {
background: #140404;
display: flex;
}
.header div {
flex: 1;
height: 20px;
text-align: center;
padding: 25px;
}
.header_left {
max-width: 600px;
}
.header_left {
color: #414141;
font-size: 20px;
}
.header_center a {
padding: 20px;
color: #ffffff;
}
.header_center a:hover {
border-bottom: 6px solid #BB0000;
color: #ffffff;
background: linear-gradient(to top, #2C0303 50%, #140404 90%, #140404 80%);
}
.header .header_left .logo {
width: 120px;
margin-top: -5px;
}
.block {
max-width: 1000px;
margin: 0 auto;
}
.block_nav .nav_img {
margin-left: -10px;
}
.block_title {
font-size: 45px;
font-weight: 800;
}
.block_desc {
color: #DE7070;
font-size: 17px;
font-weight: 500;
max-width: 510px
}
.block_button {
background: #C20000;
color: #ffffff;
padding: 8px;
width: 180px;
height: 45px;
border: none;
font-size: 15px;
font-weight: 600;
}
.start_block .img {
margin: -400px 60px 0 0;
float: right;
}
.start_block button {
margin-right: -650px;
margin-top: -55px;
float: right;
border: none;
background: none;
}
.center_block {
margin-left: calc(40% - 45%);
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.item .item_desc {
color: #ea6360;
font-size: 14px;
}
.item .item_title {
color: #ffffff;
font-size: 18px;
font-weight: 550;
}
.item .item_button {
background: linear-gradient(to right, #630d0c, #390909);
color:#fff;
font-size: 16px;
font-weight: 550;
width: 200px;
height: 50px;
border: none;
}
.center_block .item_one img {
width: 600px;
padding-right: 10px;
float: left;
margin-left: -35px;
}
.center_block .item_one .item {
margin-left: -300px;
margin-top: 140px;
float: left;
}
.center_block .item_one .item .item_title {
max-width: 195px;
margin-left: 70px;
text-align: right
}
.center_block .item_one .item .item_desc {
max-width: 270px;
text-align: right;
}
.center_block .item_one .item .item_button {
margin-left: 70px;
margin-top: 7px;
}
.center_block .item_two img {
float: right;
width: 600px;
margin-right: 15px;
margin-top: 10px;
}
.center_block .item_two .item {
margin-left: -25px;
margin-top: -345px;
float: left;
}
.center_block .item_two .item .item_title {
max-width: 195px;
margin-left: 55px;
text-align: left
}
.center_block .item_two .item .item_desc {
max-width: 270px;
text-align: left;
margin-left: 55px
}
.center_block .item_two .item .item_button {
margin-left: 55px;
margin-top: 10px;
}
.center_block .item_three img {
width: 1200px;
margin-top: -70px;
margin-left: auto;
margin-right: auto;
}
.center_block .item_three .item {
margin-top: -250px;
}
.center_block .item_three .item .item_title {
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 200px;
}
.center_block .item_three .item .item_desc {
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 500px;
}
.center_block .item_three .item .item_button {
margin-left: 500px;
margin-top: 20px;
}
.telki_block_left {
display: block;
margin-left: 100px;
}
.telki_block_left img {
width: 500px;
}
.telki_block_right {
float: right;
margin: 0;
padding: 0 130px 0 0;
text-align: right;
}
.news_title {
text-align: center;
text-transform: uppercase;
font-size: 20px;
}
.news_slider {
max-width: 66.8%;
margin-bottom: 300px;
display: flex;
transition: transform 0.6s ease;
}
.news_block {
margin-left: 80px;
width: 300px;
float: left;
}
.news_block .cover img {
width: 300px;
height: auto;
}
.news_block .desc {
background: #290203;
margin-top: -20px;
}
.news_block .desc .news_title {
font-size: 15px;
font-weight: 550;
max-width: 180px;
text-align: left;
padding: 15px;
color: #ffffff;
}
.news_block .desc .news_content {
color: #bf7778;
font-size: 13px;
padding: 15px;
margin-top: -40px;
}
.slider_button {
text-align: center;
}
.slider_button .news_button {
position: absolute;
top: 50%;
border-radius: 30px;
background: #b80000;
color: #ffffff;
border: none;
}
.news_button_left {
left: 0
}
.slider_button .news_button_right {
right: 0
}
.slider_button .letter_button {
padding: 6px;
width: 40px;
margin: 0 200px 0 200px;
}
.slider {
position: relative;
overflow: hidden;
margin-bottom: -185px;
}
.slider__control {
position: absolute;
top: 50%;
display: none;
align-items: center;
justify-content: center;
width: 40px;
color: #fff;
text-align: center;
opacity: 0.5;
transform: translateY(-50%);
}
.slider__control_show {
display: flex;
}
.slider__control:hover, .slider__control:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: .9;
}
.donate {
background: url('/img/donate/bg.png');
background-repeat: repeat-y;
background-color: #990000;
width: 600px;
height: 600px;
margin: 0 auto;
border-radius: 10px;
}
.donate .donate_title {
color: #ffffff;
font-size: 30px;
font-weight: 550;
padding: 30px;
text-align: center;
margin-left: 5%;
text-transform: lowercase;
}
.donate .donate_desc {
text-align: center;
}
.donate_desc .item {
margin-bottom: 30px;
}
.donate_desc .item h3 {
font-size: 20px;
margin: 0 0 10px 130px;
color: #ffffff;
text-align: left;
}
.donate_desc select, .donate_desc input {
background: #ffffff !important;
color: #771313 !important;
font-weight: normal !important;
font-size: 18px !important;
width: 350px !important;
height: 50px !important;
border: 4px solid #880c0c !important;
border-radius: 10px !important;
}
.donate_desc .item button {
background: linear-gradient(to right, #c20000 20%, #960001 80%);
color: #ffffff;
font-size: 20px;
font-weight: 550;
text-transform: lowercase;
width: 350px;
height: 55px;
border: none;
}
.donate_desc .item h2 {
color: #ffffff;
font-size: 20px;
font-weight: bold;
}
.donate .donate_top {
background: #ffffffff;
margin: 0 auto;
margin-top: -40px;
margin-bottom: 40px;
width: 65px;
height: 11px;
}
.news_page {
margin: 0 auto;
width: 1000px;
height: 300px;
line-height: 15px;
}
.news_page .news_block {
margin-left: 20px !important;
margin-top: 20px !important;
}
.news_pages {
text-align: left;
font-weight: bold;
font-size: 30px;
margin-left: 230px;
}
.news_listing {
position: absolute;
}
.news_listing img {
margin-left: 230px;
width: 400px;
height: auto;
float: left;
}
.news_listing .desc {
color: #ffffff;
float: right;
margin-left: 40px;
max-width: 550px;
}
.content {
color: #ffffff;
margin: 0 auto;
max-width: 800px;
margin-top: 250px;
border-left: 4px solid red;
padding-left: 40px;
}
.social {
max-width: 900px !important
}
.social h1 {
margin-left: 70px;
}
.social .social_link a i {
font-size: 30px;
width: 60px;
color: #ffffff;
}
.social .social_link a .fa-youtube-play:hover {
color: red;
}
.social .social_link a .fa-vk:hover {
color: #4a76a8;
}
.social .social_link a .fa-telegram:hover {
color: #31abde;
}
.social .social_link a .fa-instagram:hover {
color: #6955c6;
}
.social_block {
margin-left: 20px;
width: 300px;
float: right;
}
.social_block .cover img {
width: 300px;
height: auto;
}
.social_block .desc {
background: #390b0b;
height: 120px;
margin-top: -7px;
border-radius: 0 0 8px 8px;
}
.social_block .desc .social_title {
color: #ffffff;
font-size: 16px;
font-weight: 550;
margin-left: auto;
margin-right: auto;
max-width: 20px;
float: left;
padding: 0 0 0 10px;
}
.social_block .desc .social_members {
color: #bf7778;
font-size: 14px;
float: right;
padding: 15px;
}
.social_block .desc .subscripes {
background: #b70100;
color: #ffffff;
width: 275px;
margin: 10px 0 0 10px;
border: none;
border-radius: 6px;
}
.footer_wrapper {
position: absolute;
margin-top: 50px;
width: 100%;
}
.footer {
height: 90px;
text-align: center;
color: #fff;
background: radial-gradient(at top, #2c0203, #0c0201);
}
.footer_logo {
padding-top: 30px;
}
.footer_center {
margin-top: -35px;
margin-left: 230px;
}
.footer_center a {
padding: 35px;
color: #fff;
font-size: 14px;
}
.footer_center a:hover {
color: #850504;
}
.copyright {
background: #0c0201;
color: #fff;
height: 40px;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment