Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- font-family: Verdana, sans-serif;
- margin: 0 auto;
- }
- h4, h3, h2 {
- text-transform: uppercase;
- }
- h4 {
- font-size: 24px;
- }
- h3 {
- font-size: 30px;
- }
- h2 {
- font-size: 48px;
- }
- .title {
- font-size: 50px;
- color: #ffc022;
- margin-top: 1%;
- }
- .title span {
- color: #525252;
- }
- .inv-title {
- font-size: 50px;
- color: #ffc022;
- }
- .inv-title span {
- color: white;
- }
- a {
- text-transform: uppercase;
- text-decoration: none;
- color: white;
- transition-duration: .4s;
- }
- a:focus {
- outline: none;
- }
- input:focus {
- outline: none;
- }
- ul {
- list-style: none;
- }
- .row {
- display: flex;
- flex-direction: row;
- }
- .column {
- display: flex;
- flex-direction: column;
- }
- .active {
- color: #ffc022;
- }
- .fixed {
- position: fixed;
- top: 0;
- z-index: 999999;
- width: 100%;
- }
- .wrapper {
- width: 1440px;
- margin: 0 auto;
- }
- /* Конец общих стилей */
- /* Навигация */
- header {
- background: #191e22;
- box-shadow: 0px 3px 12.48px 0.52px rgba(0, 0, 0, 0.63);
- }
- nav li {
- flex-grow: 1;
- }
- ul {
- text-transform: uppercase;
- justify-content: flex-end;
- margin: 0;
- }
- li {
- padding-top: 20px;
- padding-left: 10px;
- padding-right: 10px;
- padding-bottom: 10px;
- font-weight: bold;
- }
- .logo {
- flex-grow: 3;
- }
- .btn {
- border: 2px solid white;
- border-radius: 5px;
- padding: 10px;
- font-weight: bold;
- transition-duration: .4s;
- }
- .btn:hover {
- border-color: #ffc022;
- background: #ffc022;
- transition-duration: .4s;
- }
- li a:hover {
- color: #ffc022;
- }
- .inv-btn {
- border: 2px solid #ffc022;
- border-radius: 5px;
- background: #ffc022;
- padding: 10px;
- transition-duration: .4s;
- }
- .inv-btn:hover {
- filter: brightness(110%);
- transition-duration: .4s;
- }
- /* Конец навигации*/
- /* Начало слайдера */
- .slider {
- position: relative;
- overflow: hidden;
- }
- .slide {
- position: relative;
- flex-shrink: 0;
- }
- .slide img {
- width: 100%;
- top: 0;
- left: 0;
- z-index: 9;
- }
- .slide h3 {
- position: absolute;
- top: 15%;
- left: 10%;
- z-index: 99;
- color: #ffc022;
- }
- .slide h2 {
- position: absolute;
- top: 20%;
- left: 10%;
- z-index: 99;
- color: white;
- }
- .slide p {
- position: absolute;
- top: 40%;
- left: 10%;
- z-index: 99;
- padding-right: 35%;
- color: rgba(255, 255, 255, 0.7);
- }
- .slide a {
- position: absolute;
- top: 70%;
- left: 10%;
- }
- .controls {
- /*position: absolute;*/
- /*bottom: 10%;*/
- /*left: 50%;*/
- /*z-index: 99;*/
- }
- .control,
- .prev,
- .next {
- height: 5px;
- width: 20px;
- background: green;
- z-index: 99;
- border-radius: 5px;
- margin-left: 10px;
- }
- .hidden {
- display: none;
- }
- .active-bar {
- background: #ffc022;
- }
- /* Конец слайдера */
- /* Наши мероприятия */
- .events {
- justify-content: center;
- align-items: center;
- }
- .current {
- position: relative;
- width: 800px;
- height: 300px;
- box-shadow: 0px 3px 12.48px 0.52px rgba(0, 0, 0, 0.63);
- overflow: hidden;
- }
- .current img {
- position: absolute;
- top: 6%;
- left: 3%;
- z-index: 9;
- }
- .current h4 {
- position: absolute;
- color: #ffc022;
- left: 50%;
- z-index: 99;
- }
- .current p {
- position: absolute;
- color: #525252;
- top: 30%;
- left: 50%;
- z-index: 99;
- }
- .current a {
- position: absolute;
- bottom: 6%;
- left: 50%;
- z-index: 99;
- }
- .preview {
- margin: 25px;
- border: 10px solid white;
- box-shadow: 0px 3px 12.48px 0.52px rgba(0, 0, 0, 0.63);
- }
- .preview h4 {
- display: none;
- }
- .preview p {
- display: none;
- }
- .preview a {
- display: none;
- }
- /* Конец меропрятий */
- /* Капитаны */
- .captains {
- background: url('../img/covers/1.jpg') no-repeat;
- justify-content: center;
- align-items: center;
- background-size: cover;
- }
- .volunteer h4{
- color: #ffc022;
- font-size: 18px;
- margin-bottom: 0;
- }
- .volunteer img {
- border: 3px solid white;
- }
- .volunteer p {
- color: white;
- font-size: 14px;
- font-weight: bold;
- text-transform: uppercase;
- }
- .volunteer {
- position: relative;
- text-align: center;
- margin: 1%;
- }
- .overlay {
- position: absolute;
- bottom: 23.5%;
- height: 76.5%;
- width: 100%;
- background-color: rgba(255, 192, 34, 0);
- }
- .vk {
- position: absolute;
- top: 30%;
- left: 40%;
- background-color: rgba(255, 255, 255, 1);
- border: 2px solid rgba(255, 255, 255, 1);
- opacity: 0;
- border-radius: 10px;
- padding: 10px;
- font-size: 20px;
- font-weight: bold;
- text-transform: uppercase;
- color: rgba(255, 192, 34, 1);
- transition-duration: .5s;
- }
- .vk:hover {
- color: rgba(255, 255, 255, 1);
- background-color: rgba(255, 255, 255, 0);
- transition-duration: .5s;
- }
- .volunteer:hover .vk {
- opacity: 1;
- transition-duration: .5s;
- }
- .volunteer:hover .overlay {
- background-color: rgba(255, 192, 34, 0.75);
- }
- /* Конец капитаны */
- /* Галерея */
- .gallery {
- justify-content: center;
- align-items: center;
- }
- .gallery-item {
- position: relative;
- margin: 2%;
- }
- .gallery-item img {
- box-shadow: 0px 3px 12.48px 0.52px rgba(0, 0, 0, 0.63);
- }
- .item-overlay {
- position: absolute;
- background-color: rgba(255, 192, 34, 0);
- bottom: 1%;
- width: 100%;
- height: 25%;
- z-index: 9;
- transition-duration: .5s;
- }
- .gallery-item h4 {
- bottom: 3%;
- left: 20%;
- font-size: 24px;
- position: absolute;
- color: rgba(255, 255, 255, 0);
- z-index: 99;
- }
- .gallery-item p {
- bottom: 0;
- left: 35%;
- position: absolute;
- text-transform: uppercase;
- color: rgba(82, 82, 82, 0);
- z-index: 99;
- }
- .gallery-item:hover h4 {
- color: rgba(255, 255, 255, 1);
- transition-duration: .5s;
- }
- .gallery-item:hover p {
- color: rgba(82, 82, 82, 1);
- transition-duration: .5s;
- }
- .gallery-item:hover .item-overlay {
- background-color: rgba(255, 192, 34, 0.75);
- transition-duration: .5s;
- }
- /* Регистрация */
- .join {
- background: url("../img/covers/2.jpg") no-repeat;
- background-size: cover;
- align-items: center;
- justify-content: center;
- }
- .join img {
- border: 4px solid white;
- border-radius: 2px;
- width: 50%;
- height: 30%;
- margin-right: 50px;
- margin-bottom: 3%;
- }
- .join .row {
- justify-content: space-around;
- }
- .join input {
- background: #484848;
- border: none;
- border-radius: 5px;
- color: white;
- padding: 8px;
- margin: 5px;
- }
- .join form {
- background-color: #191e22;
- padding: 25px;
- text-align: center;
- height: 100%;
- margin-left: 50px;
- }
- .join form h4 {
- font-size: 18px;
- color: white;
- margin-top: 0;
- margin-bottom: 5px;
- }
- label {
- font-size: 14px;
- color: white;
- margin: 5px;
- }
- footer {
- background: #111416;
- justify-content: center;
- align-items: center;
- }
- footer a {
- margin: 10px;
- }
- footer .btn {
- padding: 5px;
- }
- .out {
- transform: scale(0);
- transition: 1s;
- transition-property: transform;
- }
- .change-img{
- animation: bobLeft;
- animation-duration: 1s;
- }
- .change-h2{
- animation: bobUp;
- animation-duration: 1s;
- }
- .change-p {
- animation: bobRight;
- animation-duration: 1s;
- }
- .change-button {
- animation: bobDown;
- animation-duration: 1s;
- }
- @keyframes bobUp {
- 0% {
- transform: translateY(-2000px);
- }
- 70% {
- transform: translateY(30px);
- }
- 90% {
- transform: translateY(-10px);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @keyframes bobDown {
- 0% {
- transform: translateY(2000px);
- }
- 70% {
- transform: translateY(-30px);
- }
- 90% {
- transform: translateY(10px);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @keyframes bobRight {
- 0% {
- transform: translateX(2000px);
- }
- 70% {
- transform: translateX(-30px);
- }
- 90% {
- transform: translateX(10px);
- }
- 100% {
- transform: translateX(0);
- }
- }
- @keyframes bobLeft {
- 0% {
- transform: translateX(-100px);
- }
- 70% {
- transform: translateX(30px);
- }
- 90% {
- transform: translateX(-10px);
- }
- 100% {
- transform: translateX(0);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement