<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" >
<title>...</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="contentC">
<!-- <div class="contentZ"> -->
<video width="358" height="634" preload="auto" controls="controls" poster="" src="" ></video>
<!-- </div> -->
</div>
<div class="cardC">
<div class="ca">
<p>Вопрос</p>
</div>
<div class="rd"> <a class="p2" href="/#">Ответ</a></div>
</div>
</div>
<footer>
<div> <ul>
<li><a class="navC" onclick="javascript:history.back(); return false;">Назад</a></li>
<li>
</li>
<li>
<div class="uk">
<span class="uk-left"></span>
<span class="uk-right"></span>
</div>
<script>$(document).ready(function() {
$('.uk').click(function() {
$(this).toggleClass('open');
$('.cardC').toggleClass('shown'); //например класс shown будет отвечать за состояние показан-скрыт
});
});</script>
<li><a class="navC" href="/index.html">В начало</a> </li>
</ul>
</div>
</footer>
</body>
</html>
</div>
</footer>
</body>
</html>
input,
textarea,
button,
select,
a {
tap-highlight-color: transparent;
}
@font-face{
font-family: "Russo_One";
src:("/fonts/Russo_One/RussoOne-Regular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
body {
background-color: rgb(43,57,86) /* #ffe795 */ ;
/* background-image: url(media/img/f/1.jpg);
background-repeat: no-repeat; background-position: center; background-attachment: fixed; */
padding-left: auto;
padding-right: auto;
margin: auto;
width: 375px;
min-width: 320px;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
text-decoration: none;
}
/* footer {
background-color: #365C5C5C;
align-items: center;
align-content: center;
position: fixed;
bottom: 0px;
max-width:400px;
min-width: 320px;
width: 100%;
height: 65px;
transform: translateY(-150%);
animation: ani 1s forwards;
}
*/
footer {
background: rgba(255, 255, 255, 0.192);
backdrop-filter: blur(10px);
align-items: center;
align-content: center;
position: fixed;
bottom: 0px;
max-width:400px;
min-width: 320px;
width: 100%;
height: 48px;
transform: translateY(-150%);
animation: ani 1s forwards;
}
@keyframes ani {
0% {transform: translateY(150%);}
100% {transform: translateY(0);}
}
.card{
color: #ffffff;
background-color: rgb(115,99,249) /*#365C5C5C*/;
font-size: 15px;
padding-bottom: 10px;
border-radius: 20px;
margin: 35px 10px 80px 10px;
box-shadow: -4px 3px 5px 3px rgba(0,0,0,0.87);
box-shadow: -4px 3px 5px 3px rgba(0,0,0,0.87);
box-shadow: -4px 3px 5px 1px rgba(0,0,0,0.87);
opacity:0; /*Элемент полностью прозрачный (невидимый)*/transition: 1s; /*Скорость перехода состояния элемента*/animation: show 0.7s 1; /* Указываем название анимации, её время и количество повторов*/animation-fill-mode: forwards; /* Чтобы элемент оставался в конечном состоянии анимации */ animation-delay: 0.5s; /* Задержка перед началом */
}
@keyframes show{ 0%{ opacity:0; } 100% { opacity:1; }}
/* @keyframes /* название анимации*\{
100%{/* действие анимации*\}
}
.div:hover{
animation-fill-mode: forwards;
animation-play-state: ;
animation-name: /* название анимации*\;
animation-duration: 15s;
animation-timing-functio: cubic-bezier(0, 0.1, 0.2, 1) ;
} */
.ca {
background-color: #202020;
border-radius: 20px;
padding: 8px;
}
.rd {
background-color: rgb(0,162,247) /* #202020*/;
/* border: 1px solid #fff ; */
border-radius: 20px;
padding: 5px;
margin: 5px 15px 5px 15px;
width: 310px;
}
.p2 {
/* border: 2px solid #fff ;
border-radius: 50px;*/
margin: 15px;
padding: 5px 15px 5px 15px;
}
.zag {
font-size: 20px;
background-color: rgb(115,99,249) /* #202020 */;
border-radius: 20px;
padding: 5px;
}
.contentZ {
font-size: 20px;
background-color: rgb(115,99,249) /* #202020 */;
/* border-radius: 0px 0px 20px 20px;*/
}
.contentC {
color: #ffffff;
background-color: rgb(115,99,249) /*#365C5C5C*/;
font-size: 15px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 20px 20px 20px 20px ;
margin: 8px 10px 8px 10px;
opacity:0; /*Элемент полностью прозрачный (невидимый)*/transition: 1s; /*Скорость перехода состояния элемента*/animation: show 0.7s 1; /* Указываем название анимации, её время и количество повторов*/animation-fill-mode: forwards; /* Чтобы элемент оставался в конечном состоянии анимации */ animation-delay: 0.5s; /* Задержка перед началом */
box-shadow: -4px 3px 5px 3px rgba(0,0,0,0.87);
box-shadow: -4px 3px 5px 3px rgba(0,0,0,0.87);
box-shadow: -4px 3px 5px 1px rgba(0,0,0,0.87);
position: relative;
}
@keyframes show{ 0%{ opacity:0; } 100% { opacity:1; }}
.p3 {
border: 2px solid #fff ;
border-radius: 50px;
margin: 15px;
padding: 5px 15px 5px 15px;
}
ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/
padding-left: 0; /*убираем левый отступ, равный 40px*/
}
li {display: inline-block;}
div.nav {
border: 2px solid #fff ;
border-radius: 50px;
margin: 2px 15px 2px 15px;
padding: 10px 30px 10px 30px;
text-decoration: none;
display: block;
}
a.nav {
border: 2px solid #fff ;
border-radius: 50px;
margin: 2px 15px 2px 15px;
padding: 10px 30px 10px 30px;
text-decoration: none;
display: block;
}
A:visited {
color: #fff;
background-color: #000; /* Цвет посещенных ссылок */
}
A:active {
color: #fff; /* Цвет активных ссылок */
}
A:hover{
color: #fff;
}
A {
display: block;
text-decoration: none;
/* height: 100%;
text-decoration: none;*/
color: #fff; /* Цвет ссылок */вет ссылок */
}
a.navC {
border: 2px solid #fff ;
border-radius: 50px;
margin: 2px 5px 2px 5px;
padding: 10px 30px 10px 30px;
text-decoration: none;
display: block;
}
.uk {
position: relative;
cursor: pointer;
margin: 2px 10px 2px 10px;
width: 45px;
height: 1px;
font-size: 25px;
border-radius: 50px;
/* margin: 2px auto 2px auto; */
padding: 10px 10px 10px 10px;
text-decoration: none;
display: block;
}
.uk-left{
position: absolute;
background-color: transparent;
top: 10px;
left: 0;
width: 40px;
height: 10px;
/* display: block; */
transform: rotate(-35deg);
float: right;
border-radius: 2px;
}
.uk-left:after{
content: "";
background-color: rgb(115,99,249);
width: 40px;
height: 10px;
/* display: block; */
float: right;
border-radius: 6px 10px 10px 6px;
transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
z-index: -1;
}
.uk-right {
position: absolute;
background-color: transparent;
top: 10px;
left: 26px;
width: 40px;
height: 10px;
/* display: block; */
transform: rotate(35deg);
float: right;
border-radius: 2px;
}
.uk-right:after {
content: "";
background-color: rgb(115,99,249);
width: 40px;
height: 10px;
/* display: block; */
float: right;
border-radius: 10px 6px 6px 10px;
transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
z-index: -1;
}
.open .uk-left:after {
transform-origin: center center;
transform: rotate(70deg);
}
.open .uk-right:after {
transform-origin: center center;
transform: rotate(-70deg);
}
.cardC{
color: #ffffff;
background-color: rgb(115,99,249) /*#365C5C5C*/;
font-size: 15px;
padding-bottom: 10px;
border-radius: 20px;
margin: 350px 25px 80px 25px;
transform: translateY(750%);
transition-duration: 1s;
transition-timing-function: ease-out;
position: absolute;
top: 0;
left: 0;
box-shadow: -4px 3px 5px 3px rgba(0,0,0,0.87);
box-shadow: -4px 3px 5px 3px rgba(0,0,0,0.87);
box-shadow: -4px 3px 5px 1px rgba(0,0,0,0.87);
}
.cardC.shown{
color: #ffffff;
background-color: rgb(115,99,249) /*#365C5C5C*/;
display: block;
font-size: 15px;
padding-bottom: 10px;
border-radius: 20px;
margin: 350px 25px 80px 25px;
transform: translateY(0%);
transition-duration: 2s;
transition-timing-function: ease-out;
position: absolute;
top: 0;
left: 0;
box-shadow: -4px 3px 5px 3px rgba(0,0,0,0.87);
box-shadow: -4px 3px 5px 3px rgba(0,0,0,0.87);
box-shadow: -4px 3px 5px 1px rgba(0,0,0,0.87);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.