[RESPONSIVE] - jquery deja

master
frperalde 4 years ago
parent f8aff8fb52
commit a6179645c9

@ -3,11 +3,92 @@
/*PARTIE FORMES*/
.containform3 {
position: relative;
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
}
.containinte{
/*PROBLEME SIZE*/
top: calc((var(--y) - var(--z)) / 2);
left: calc((var(--y) - var(--z)) / 2);
height: var(--z);
width: var(--z);
z-index: 2;
position: absolute;
}
.cache{
top: calc((var(--x) - var(--y)) / 2.8);
left: calc((var(--x) - var(--y)) / 2.2);
height: calc(var(--y)*1.05);
width: calc(var(--y)*1.05);
z-index: 2;
position: absolute;
z-index: 15;
}
/*===========================================*/
#formSize{
margin : 0 auto;
width: 100%;
height: 3vw;
}
.slider-container .bar .fill {
display: block;
width: 50%;
height: 100%;
background-color: #6200ee;
}
.slider-container .slider {
position: relative;
z-index: 2;
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
outline: none;
background-color: transparent;
}
.slider.container{
position: relative;
}
.slider-container .bar {
position: absolute;
z-index: 1;
left: 0;
width: 100%;
height: 10px;
border-radius: 5px;
background-color: #c6aee7;
overflow: hidden;
}
/*Moz*/
.slider-container .slider::-moz-range-thumb {
-webkit-appearance: none;
width: 1vw;
height: 1vw;
background-color: #6200ee;
border-radius: 1vw;
cursor: pointer;
outline: none;
box-shadow: 0 0 0 0 rgba(98, 0 ,238, .1);
transition: .3s ease-in-out;
}
.slider-container .slider::-moz-range-thumb:hover {
box-shadow: 0 0 0 10px rgba(98,0,238,.1);
}
.slider-container .slider:active::-moz-range-thumb {
box-shadow: 0 0 0 20px rgba(98,0,238,.2);
}
/*===========================================*/
.logoboutton{
font-size: 2vw;
color: var(--lightprima);

@ -12,17 +12,6 @@
margin-left: 0.2vw;
}
.containform3 {
position: relative;
height: var(--x);
width: var(--x);
display: table-cell;
vertical-align: middle;
}
.containform2{
position: relative;
height: var(--x);
@ -44,84 +33,6 @@
display: none;
}
#formSize{
margin : 0 auto;
width: 100%;
height: 3vw;
}
.slider-container .bar .fill {
display: block;
width: 50%;
height: 100%;
background-color: #6200ee;
}
.slider-container .slider {
position: relative;
z-index: 2;
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
outline: none;
background-color: transparent;
}
.slider.container{
position: relative;
}
.slider-container .bar {
position: absolute;
z-index: 1;
left: 0;
width: 100%;
height: 10px;
border-radius: 5px;
background-color: #c6aee7;
overflow: hidden;
}
/*Moz*/
.slider-container .slider::-moz-range-thumb {
-webkit-appearance: none;
width: 1vw;
height: 1vw;
background-color: #6200ee;
border-radius: 1vw;
cursor: pointer;
outline: none;
box-shadow: 0 0 0 0 rgba(98, 0 ,238, .1);
transition: .3s ease-in-out;
}
.slider-container .slider::-moz-range-thumb:hover {
box-shadow: 0 0 0 10px rgba(98,0,238,.1);
}
.slider-container .slider:active::-moz-range-thumb {
box-shadow: 0 0 0 20px rgba(98,0,238,.2);
}
.containinte{
/*PROBLEME SIZE*/
top: calc((var(--y) - var(--z)) / 2);
left: calc((var(--y) - var(--z)) / 2);
height: var(--z);
width: var(--z);
z-index: 2;
position: absolute;
}
.cache{
top: calc((var(--x) - var(--y)) / 2.8);
left: calc((var(--x) - var(--y)) / 2.2);
height: calc(var(--y)*1.05);
width: calc(var(--y)*1.05);
z-index: 2;
position: absolute;
z-index: 15;
}
.rond{
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);

File diff suppressed because it is too large Load Diff

@ -1,8 +1,94 @@
/*DemTéléphone 1i Ecran*/
@media screen and (min-width: 669px) and (max-width: 992px) {
body{
background-color: red;
.containform3 {
position: relative;
height: calc(1.25*var(--x));
width: calc(2*var(--x));
display: table-cell;
vertical-align: middle;
left: -2vw;
}
.containinte{
/*PROBLEME SIZE*/
top: calc(1.5*((var(--y) - var(--z)) / 2));
left: calc(1.5*((var(--y) - var(--z)) / 2));
height: calc(1.5*var(--z));
width: calc(1.5*var(--z));
z-index: 2;
position: absolute;
}
.cache{
top: calc(0.91*((var(--x) - var(--y)) / 2.8));
left: calc(4.55*((var(--x) - var(--y)) / 2.2));
height: calc(1.5*var(--y)*1.05);
width: calc(1.5*var(--y)*1.05);
z-index: 2;
position: absolute;
z-index: 15;
}
#formSize{
margin : 0 auto;
width: 100%;
height: 3vw;
position: relative;
top: 3vw;
}
.slider-container .bar .fill {
display: block;
width: 50%;
height: 100%;
background-color: #6200ee;
}
.slider-container .slider {
position: relative;
z-index: 2;
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
outline: none;
top: -0.25vw;
background-color: transparent;
}
.slider.container{
position: relative;
}
.slider-container .bar {
position: absolute;
z-index: 1;
left: 0;
width: 100%;
height: 10px;
border-radius: 5px;
background-color: #c6aee7;
overflow: hidden;
}
/*Moz*/
.slider-container .slider::-moz-range-thumb {
-webkit-appearance: none;
width: 2vw;
height: 2vw;
background-color: #6200ee;
border-radius: 1vw;
cursor: pointer;
outline: none;
box-shadow: 0 0 0 0 rgba(98, 0 ,238, .1);
transition: .3s ease-in-out;
}
.slider-container .slider::-moz-range-thumb:hover {
box-shadow: 0 0 0 10px rgba(98,0,238,.1);
}
.slider-container .slider:active::-moz-range-thumb {
box-shadow: 0 0 0 20px rgba(98,0,238,.2);
}
.logop2 img {
width: 20vh;
padding-top: 1vh;

@ -16,9 +16,9 @@
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />
<script src="https://use.fontawesome.com/releases/v5.7.2/css/all.css"></script>
</head>

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save