Merge branch 'master' of https://gitlab.iut-clermont.uca.fr/palafour/swish
algolfier
4 years ago
commit
bc62be1b7a
@ -1,8 +0,0 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Datasource local storage ignored files
|
||||
/../../../../../../:\wamp64\www\Test\TP2\.idea/dataSources/
|
||||
/dataSources.local.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
@ -1,5 +0,0 @@
|
||||
<component name="ProjectCodeStyleConfiguration">
|
||||
<state>
|
||||
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||
</state>
|
||||
</component>
|
||||
@ -1,14 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="PublishConfigData" remoteFilesAllowedToDisappearOnAutoupload="false">
|
||||
<serverData>
|
||||
<paths name="tesss">
|
||||
<serverdata>
|
||||
<mappings>
|
||||
<mapping local="$PROJECT_DIR$" web="/" />
|
||||
</mappings>
|
||||
</serverdata>
|
||||
</paths>
|
||||
</serverData>
|
||||
</component>
|
||||
</project>
|
||||
@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/.idea.iml" filepath="$PROJECT_DIR$/.idea/.idea.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
@ -1 +0,0 @@
|
||||
bddt.php
|
||||
@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
@ -1,5 +0,0 @@
|
||||
<component name="ProjectCodeStyleConfiguration">
|
||||
<state>
|
||||
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||
</state>
|
||||
</component>
|
||||
@ -1,134 +0,0 @@
|
||||
<link rel="stylesheet" href="css.css">
|
||||
<link rel="icon" href="test.ico" />
|
||||
<meta charset="UTF-8">
|
||||
|
||||
|
||||
<form>
|
||||
<button type="submit"><a href="DB.php?action=Creer">Creer Partie</a></button>
|
||||
</form>
|
||||
<form>
|
||||
<input type="" name="placer" id="MettreID" placeholder="Mettre ID partie">
|
||||
<button name="action" type="submit"><a href="DB.php?action=Rejoindre">Creer Partie</a></button>
|
||||
</form>
|
||||
<h1>Morpion</h1>
|
||||
|
||||
<form method="post">
|
||||
<input type="text" name="forme" required="required" placeholder="Mettre X ou O" maxlength="1">
|
||||
<input type="number" name="case" required="required" placeholder="Emplacement (1-9)" maxlength="1">
|
||||
<button type="submit" name="action">Inserer</button>
|
||||
</form>
|
||||
|
||||
|
||||
</p>
|
||||
|
||||
<?php
|
||||
require("MyDB.php");
|
||||
$db = new MyDB();
|
||||
|
||||
|
||||
$action = $_REQUEST['action'] ?? NULL;
|
||||
echo $action;
|
||||
|
||||
if($action=="Creer"){
|
||||
$partiecreer=genererChaineAleatoire();
|
||||
$db->query('INSERT INTO partie(Id) VALUES("'.$partiecreer.'")');
|
||||
$idpartie=$partiecreer;
|
||||
require("DB.php");
|
||||
}
|
||||
if($action=="Rejoindre"){
|
||||
$idpartie=$_POST['placer'];
|
||||
$idpartie=$partiecreer;
|
||||
require("DB.php");
|
||||
}
|
||||
|
||||
echo "<h2>Id : $idpartie</h2>" ;
|
||||
$colonne="";
|
||||
|
||||
if(isset($_POST['case'])){
|
||||
|
||||
if($_POST['case']=='1'){
|
||||
$colonne='un';
|
||||
}
|
||||
elseif ($_POST['case']=='2'){
|
||||
$colonne='deux';
|
||||
}
|
||||
elseif ($_POST['case']=='3'){
|
||||
$colonne='trois';
|
||||
}
|
||||
elseif ($_POST['case']=='4'){
|
||||
$colonne='quatre';
|
||||
}
|
||||
elseif ($_POST['case']=='5'){
|
||||
$colonne='cinq';
|
||||
}
|
||||
elseif ($_POST['case']=='6'){
|
||||
$colonne='six';
|
||||
}
|
||||
elseif ($_POST['case']=='7'){
|
||||
$colonne='sept';
|
||||
}
|
||||
elseif ($_POST['case']=='8'){
|
||||
$colonne='huit';
|
||||
}
|
||||
elseif ($_POST['case']=='9'){
|
||||
$colonne='neuf';
|
||||
}
|
||||
else{
|
||||
$colonne='null';
|
||||
}
|
||||
}
|
||||
$valeur="";
|
||||
if(isset($_POST['forme'])){
|
||||
$valeur=$_POST['forme'];
|
||||
}
|
||||
|
||||
|
||||
header("refresh: 2");
|
||||
//$db->exec('CREATE TABLE partie(Id STRING,un STRING,deux STRING,trois STRING, quatre STRING,cinq STRING,six STRING,sept STRING,huit STRING,neuf STRING)');
|
||||
if(isset($colonne)and $valeur!="" and $colonne!=''){
|
||||
|
||||
$aff=$db->query('SELECT "'.$colonne.'" FROM partie where Id="'.$idpartie.'" ');
|
||||
$res = $aff->fetchArray();
|
||||
|
||||
if(strlen($res[$colonne])==1){
|
||||
echo " <p> Insertion impossible une valeur est déjà à l'intérieur</p> <br>";
|
||||
}
|
||||
else{
|
||||
$update = $db->query('UPDATE partie SET "'.$colonne.'" = "'.$valeur.'" where Id="'.$idpartie.'" ');
|
||||
}
|
||||
}
|
||||
|
||||
$afficher = $db->query('SELECT * FROM partie where Id="'.$idpartie.'" ');
|
||||
while ($row = $afficher->fetchArray()) {
|
||||
|
||||
$un=$row['un'];
|
||||
$deux=$row['deux'];
|
||||
$trois=$row['trois'];
|
||||
$quatre=$row['quatre'];
|
||||
$cinq=$row['cinq'];
|
||||
$six=$row['six'];
|
||||
$sept=$row['sept'];
|
||||
$huit=$row['huit'];
|
||||
$neuf=$row['neuf'];
|
||||
}
|
||||
echo "
|
||||
<table>
|
||||
<tr>
|
||||
<td>$un</td>
|
||||
<td>$deux</td>
|
||||
<td>$trois</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$quatre</td>
|
||||
<td>$cinq</td>
|
||||
<td>$six</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$sept</td>
|
||||
<td>$huit</td>
|
||||
<td>$neuf</td>
|
||||
</tr>
|
||||
</table>
|
||||
";
|
||||
|
||||
?>
|
||||
@ -1,48 +0,0 @@
|
||||
<?php
|
||||
require("MyDB.php");
|
||||
|
||||
$db = new MyDB();
|
||||
|
||||
$chaine = genererChaineAleatoire(10);
|
||||
|
||||
|
||||
if(isset($_POST['id'])){
|
||||
$id=$_POST['id'];
|
||||
}
|
||||
$id=genererChaineAleatoire(10);
|
||||
|
||||
|
||||
function section()
|
||||
{
|
||||
echo 'coucou';
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="css.css">
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<p>
|
||||
<form method="post">
|
||||
<button type="submit" name="idd" value='<?php echo $id; ?>'><a href='DB.php?idd=<?php echo $id; $db->query('INSERT INTO partie(Id) VALUES("'.$id.'")');?>'>Créer une partie</a></button>
|
||||
<form>
|
||||
|
||||
<form method="post">
|
||||
<input type="text" required="required" placeholder="Mettre ID partie" maxlength="11">
|
||||
<button type="submit" name="idd" value=""><a href="DB.php?idd=">Rejoindre</a></button>
|
||||
</form>
|
||||
<form method="post">
|
||||
<button><a href="<?php echo "ss";?> ">FSS</a>FSS</button>
|
||||
</form>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
<?php
|
||||
header('Location: MyxDB.php');
|
||||
exit();
|
||||
?>
|
||||
Binary file not shown.
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="dataSourceStorageLocal">
|
||||
<data-source name="mysqlitedb" uuid="cbb882be-2348-4146-af52-dfba24062938">
|
||||
<database-info product="" version="" jdbc-version="" driver-name="" driver-version="" dbms="SQLITE" exact-version="0" />
|
||||
<auth-provider>no-auth</auth-provider>
|
||||
<schema-mapping />
|
||||
</data-source>
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="DataSourceManagerImpl" format="xml" multifile-model="true">
|
||||
<data-source source="LOCAL" name="mysqlitedb" uuid="cbb882be-2348-4146-af52-dfba24062938">
|
||||
<driver-ref>sqlite.xerial</driver-ref>
|
||||
<synchronize>true</synchronize>
|
||||
<jdbc-driver>org.sqlite.JDBC</jdbc-driver>
|
||||
<jdbc-url>jdbc:sqlite:D:\wamp64\www\Test\MorpionPhp\mysqlitedb.db</jdbc-url>
|
||||
<working-dir>$ProjectFileDir$</working-dir>
|
||||
</data-source>
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,7 @@
|
||||
<?php
|
||||
session_start();
|
||||
$idparte =$_SESSION['idpartie'];
|
||||
echo "<h2 id='ids'>Identifiant partie : <strong>$idparte</strong> <button onclick='myFunction()' type='button' class='btn btn-dark'>Copier Id</button></h2>" ;
|
||||
echo "<input type='text' class='myInput' value='$idparte' id='myInput'>";
|
||||
?>
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
<?php
|
||||
|
||||
class MyDB extends SQLite3
|
||||
{
|
||||
function __construct()
|
||||
{
|
||||
$this->open('mysqlitedb.db');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
session_start();
|
||||
$idpartie = $_SESSION['idpartie'];
|
||||
$db = new MyDB();
|
||||
|
||||
$rows = $db->query('SELECT COUNT(*) as count FROM partie where Id="'.$idpartie.'" ');
|
||||
$row = $rows->fetchArray();
|
||||
$numRows = $row['count'];
|
||||
|
||||
$afficher = $db->query('SELECT * FROM partie where Id="'.$idpartie.'" ');
|
||||
while ($row = $afficher->fetchArray()) {
|
||||
|
||||
$un=$row['un'];
|
||||
$deux=$row['deux'];
|
||||
$trois=$row['trois'];
|
||||
$quatre=$row['quatre'];
|
||||
$cinq=$row['cinq'];
|
||||
$six=$row['six'];
|
||||
$sept=$row['sept'];
|
||||
$huit=$row['huit'];
|
||||
$neuf=$row['neuf'];
|
||||
|
||||
|
||||
}
|
||||
if($numRows!=1){
|
||||
echo "<h1>Identifiant inconnu<h1>";
|
||||
}
|
||||
else{
|
||||
echo "
|
||||
<table>
|
||||
<tr>
|
||||
<td>$un</td>
|
||||
<td>$deux</td>
|
||||
<td>$trois</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$quatre</td>
|
||||
<td>$cinq</td>
|
||||
<td>$six</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$sept</td>
|
||||
<td>$huit</td>
|
||||
<td>$neuf</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
";
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
@ -1,6 +1,4 @@
|
||||
<?php
|
||||
|
||||
|
||||
class MyDB extends SQLite3
|
||||
{
|
||||
function __construct()
|
||||
@ -0,0 +1,147 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Morpion</title>
|
||||
<script src="js.js"></script>
|
||||
<link rel="icon" href="test.ico" />
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="css.css">
|
||||
</head>
|
||||
|
||||
<h1>Morpion</h1>
|
||||
<body>
|
||||
<button id="buttons" type="button" class="btn btn-primary btn-lg">Réinitialiser / Creer partie</button>
|
||||
|
||||
<form method="post">
|
||||
<input name="rejoindre">
|
||||
<button type="submit" class="btn btn-secondary btn-lg">Rejoindre partie</button>
|
||||
</form>
|
||||
<?php
|
||||
require_once("MaDB.php");
|
||||
session_start();
|
||||
if(!isset($idpartie)){
|
||||
$idpartie = $_SESSION['idpartie'];
|
||||
}
|
||||
echo "<h2 id='ids'>Identifiant partie : <strong>$idpartie</strong></h2>";
|
||||
?>
|
||||
|
||||
|
||||
|
||||
<form method="post">
|
||||
<input type="text" name="forme" required="required" placeholder="Mettre X ou O" maxlength="1">
|
||||
<input type="number" name="case" required="required" placeholder="Emplacement (1-9)" maxlength="1">
|
||||
<button type="submit" class="btn btn-success">Inserer</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
setInterval(function(){
|
||||
$("#screen").load('ActualiserMorpion.php')
|
||||
}, 500);
|
||||
setInterval(function(){
|
||||
$("#ids").load('ActualiserIDPartie.php')
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="screen"></div>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#buttons").click(function(){
|
||||
|
||||
$("#div1").load('SupprimerPartieActuelEtCreer.php')
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function myFunction() {
|
||||
|
||||
var copyText = document.getElementById("myInput");
|
||||
copyText.select();
|
||||
copyText.setSelectionRange(0, 99999)
|
||||
document.execCommand("copy");
|
||||
|
||||
}
|
||||
</script>
|
||||
<div id="div1"></div>
|
||||
<br>
|
||||
<button id="supp" type="button" class="btn btn-danger">Supprimer partie</button>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#supp").click(function(){
|
||||
|
||||
$("#ids").load('SupprimerPartieActuelle.php')
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
<?php
|
||||
$db = new MyDB();
|
||||
$colonne="";
|
||||
if(isset($_POST['rejoindre'])){
|
||||
$_SESSION['idpartie']=$_POST['rejoindre'];
|
||||
}
|
||||
|
||||
if(isset($_POST['case'])){
|
||||
|
||||
if($_POST['case']=='1'){
|
||||
$colonne='un';
|
||||
}
|
||||
elseif ($_POST['case']=='2'){
|
||||
$colonne='deux';
|
||||
}
|
||||
elseif ($_POST['case']=='3'){
|
||||
$colonne='trois';
|
||||
}
|
||||
elseif ($_POST['case']=='4'){
|
||||
$colonne='quatre';
|
||||
}
|
||||
elseif ($_POST['case']=='5'){
|
||||
$colonne='cinq';
|
||||
}
|
||||
elseif ($_POST['case']=='6'){
|
||||
$colonne='six';
|
||||
}
|
||||
elseif ($_POST['case']=='7'){
|
||||
$colonne='sept';
|
||||
}
|
||||
elseif ($_POST['case']=='8'){
|
||||
$colonne='huit';
|
||||
}
|
||||
elseif ($_POST['case']=='9'){
|
||||
$colonne='neuf';
|
||||
}
|
||||
else{
|
||||
$colonne='null';
|
||||
}
|
||||
}
|
||||
$valeur="";
|
||||
if(isset($_POST['forme'])){
|
||||
$valeur=$_POST['forme'];
|
||||
}
|
||||
|
||||
|
||||
if(isset($colonne)and $valeur!="" and $colonne!=''){
|
||||
|
||||
$aff=$db->query('SELECT "'.$colonne.'" FROM partie where Id="'.$idpartie.'" ');
|
||||
$res = $aff->fetchArray();
|
||||
|
||||
if(strlen($res[$colonne])!=0){
|
||||
echo " <p> Insertion impossible une valeur est déjà à l'intérieur</p> <br>";
|
||||
}
|
||||
else{
|
||||
$update = $db->query('UPDATE partie SET "'.$colonne.'" = "'.$valeur.'" where Id="'.$idpartie.'" ');
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
<?php
|
||||
session_start();
|
||||
require_once("MaDB.php");
|
||||
$db = new MyDB();
|
||||
|
||||
$id=$_SESSION['idpartie'];
|
||||
$requete ="DELETE FROM partie where Id='".$id."'";
|
||||
$suppression = $db->query($requete);
|
||||
|
||||
$newid=genererChaineAleatoire(10);
|
||||
$_SESSION['idpartie']=$newid;
|
||||
$db->query('INSERT INTO partie(Id) VALUES("'.$newid.'")');
|
||||
@ -0,0 +1,10 @@
|
||||
<?php
|
||||
require_once("MaDB.php");
|
||||
session_start();
|
||||
$db = new MyDB();
|
||||
$id=$_SESSION['idpartie'];
|
||||
|
||||
$requete ="DELETE FROM partie where Id='".$id."'";
|
||||
$suppression = $db->query($requete);
|
||||
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
function myFunction() {
|
||||
/* Get the text field */
|
||||
var copyText = document.getElementById("myInput");
|
||||
|
||||
/* Select the text field */
|
||||
copyText.select();
|
||||
copyText.setSelectionRange(0, 99999); /* For mobile devices */
|
||||
|
||||
/* Copy the text inside the text field */
|
||||
document.execCommand("copy");
|
||||
|
||||
/* Alert the copied text */
|
||||
alert("Copied the text: " + copyText.value);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
@ -1,321 +0,0 @@
|
||||
/*Demi Ecran*/
|
||||
@media screen and (max-width: 960px) and (min-height: 600px) {
|
||||
.anneau {
|
||||
box-sizing: border-box;
|
||||
background-color: #FFD100;
|
||||
border-radius: 3vw;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.rondinterieur {
|
||||
background-color: var(--lighttercia);
|
||||
height: 3vw;
|
||||
width: 3vw;
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
border-radius: 3vw;
|
||||
}
|
||||
|
||||
.containform {
|
||||
box-sizing: content-box;
|
||||
height: 6vw;
|
||||
width: 6vw;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.rond {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background-color: #FFD100;
|
||||
height: 3vw;
|
||||
width: 3vw;
|
||||
border-radius: 3vw;
|
||||
}
|
||||
|
||||
/* PARTIE CARRE */
|
||||
.carre {
|
||||
background-color: #30C0DE;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
display: table-cell;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.carreinterieur {
|
||||
background-color: var(--lightsedonca);
|
||||
height: 3vw;
|
||||
width: 3vw;
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pcarre {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background-color: #30C0DE;
|
||||
height: 3vw;
|
||||
width: 3vw;
|
||||
}
|
||||
|
||||
/* PARTIE TRIANGLE */
|
||||
.triangle {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
border-left: 2.5vw solid transparent;
|
||||
border-right: 2.5vw solid transparent;
|
||||
border-bottom: 5vw solid #DEA430;
|
||||
}
|
||||
|
||||
.trianglerinterieur {
|
||||
position: absolute;
|
||||
margin-left: -1.5vw;
|
||||
margin-top: 1.25vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-bottom: 3vw solid var(--lightsedonca);
|
||||
}
|
||||
|
||||
.ptriangle {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.75vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-bottom: 3vw solid #DEA430;
|
||||
}
|
||||
|
||||
/* TRAPEZE */
|
||||
.trapeze {
|
||||
bottom: 0px;
|
||||
height: 0;
|
||||
margin-top: 2.58vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-top: 3vw solid #6FDE30;
|
||||
}
|
||||
|
||||
.triangletrapeze {
|
||||
padding-top: 0.1vw;
|
||||
position: absolute;
|
||||
border-left: 3vw solid transparent;
|
||||
border-right: 3vw solid transparent;
|
||||
border-bottom: 2.5vw solid #6FDE30;
|
||||
}
|
||||
|
||||
.trapezeinte {
|
||||
position: absolute;
|
||||
margin-top: 3vw;
|
||||
margin-left: 1.25vw;
|
||||
width: 2vw;
|
||||
border-left: 0.75vw solid transparent;
|
||||
border-right: 0.75vw solid transparent;
|
||||
border-top: 1.5vw solid var(--lightsedonca);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.triangletrapezeinte {
|
||||
position: absolute;
|
||||
margin-top: 1.45vw;
|
||||
margin-left: 1.25vw;
|
||||
padding-top: 0.1vw;
|
||||
border-left: 1.75vw solid transparent;
|
||||
border-right: 1.75vw solid transparent;
|
||||
border-bottom: 1.5vw solid var(--lightsedonca);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.trapezep {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-top: 2vw;
|
||||
width: 2vw;
|
||||
border-left: 0.75vw solid transparent;
|
||||
border-right: 0.75vw solid transparent;
|
||||
border-top: 1.5vw solid #6FDE30;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.triangletrapezep {
|
||||
position: absolute;
|
||||
margin-top: 0.55vw;
|
||||
margin-left: 1.25vw;
|
||||
border-left: 1.75vw solid transparent;
|
||||
border-right: 1.75vw solid transparent;
|
||||
border-bottom: 1.5vw solid #6FDE30;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.losangephaut {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-top: -3vw;
|
||||
border-left: 3vw solid transparent;
|
||||
border-right: 3vw solid transparent;
|
||||
border-bottom: 3vw solid #B130DE;
|
||||
}
|
||||
|
||||
.losangepbas {
|
||||
position: absolute;
|
||||
border-left: 3vw solid transparent;
|
||||
border-right: 3vw solid transparent;
|
||||
border-top: 3vw solid #B130DE;
|
||||
}
|
||||
|
||||
.losangephauti {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-top: -1.5vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-bottom: 1.5vw solid var(--lightsedonca);
|
||||
}
|
||||
|
||||
.losangepbasi {
|
||||
position: absolute;
|
||||
margin-left: 1.5vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-top: 1.5vw solid var(--lightsedonca);
|
||||
}
|
||||
|
||||
.losangephautc {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-top: -1.5vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-bottom: 1.5vw solid #B130DE;
|
||||
}
|
||||
|
||||
.losangepbasc {
|
||||
position: absolute;
|
||||
margin-left: 1.5vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-top: 1.5vw solid #B130DE;
|
||||
}
|
||||
|
||||
.buttonretour {
|
||||
position: relative;
|
||||
height: 4vh;
|
||||
width: 4vh;
|
||||
border-radius: 55vw;
|
||||
background-color: var(--lightsedonca);
|
||||
z-index: 5;
|
||||
margin-left: 2vw;
|
||||
top: 1.75vw;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
background: var(--lightsedonca);
|
||||
width: 10vw;
|
||||
height: 13vw;
|
||||
border-radius: 2vw;
|
||||
padding-right: 0.4vw;
|
||||
padding-left: 0.4vw;
|
||||
padding-bottom: 0.8vw;
|
||||
padding-top: 0.4vw;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin-right: 1.75vw;
|
||||
margin-left: 1.75vw;
|
||||
-webkit-flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.item-form {
|
||||
width: 4vw;
|
||||
padding-left: 0.1vw;
|
||||
margin-top: 0.25vw;
|
||||
height: 4vw;
|
||||
border-radius: 10px;
|
||||
background-color: var(--lighttercia);
|
||||
}
|
||||
|
||||
.containcards {
|
||||
height: 87vh;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 10vw;
|
||||
padding-top: 2.5vw;
|
||||
}
|
||||
|
||||
.logop2 img {
|
||||
width: 20vh;
|
||||
padding-top: 1vh;
|
||||
position: relative;
|
||||
left: 38vw;
|
||||
}
|
||||
|
||||
.txt {
|
||||
position: absolute;
|
||||
font-family: Arial Black;
|
||||
color: var(--lightprima);
|
||||
font-size: 2.5vw;
|
||||
left: 1vw;
|
||||
top: -1vh;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
left: 38vw;
|
||||
top: 13%;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.mounts img {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
margin-left: -1vw;
|
||||
margin-top: -1vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#contourbuttonvalider {
|
||||
position: absolute;
|
||||
border-radius: 45px;
|
||||
left: 3vw;
|
||||
top: 5.5vw;
|
||||
height: 9vw;
|
||||
width: 25vw;
|
||||
background-color: var(--lightsedonca);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.bouttonvalider {
|
||||
position: absolute;
|
||||
height: 6.8vw;
|
||||
width: 22.8vw;
|
||||
top: 1.1vw;
|
||||
left: 1.1vw;
|
||||
border-radius: 30px;
|
||||
background-color: #B130DE;
|
||||
}
|
||||
|
||||
.bouttonvalider2 {
|
||||
position: absolute;
|
||||
height: 6.8vw;
|
||||
width: 22.8vw;
|
||||
top: 1.1vw;
|
||||
left: 1.1vw;
|
||||
border-radius: 30px;
|
||||
background-color: #00CC66;
|
||||
}
|
||||
|
||||
#textjouer {
|
||||
font-family: Montserrat, impact, Arial Black;
|
||||
position: absolute;
|
||||
font-size: 5vw;
|
||||
margin-top: 0.2vw;
|
||||
margin-left: 5.5vw;
|
||||
color: var(--lightsedonca);
|
||||
}
|
||||
}
|
||||
@ -1,321 +0,0 @@
|
||||
/*DemTéléphone 1i Ecran*/
|
||||
@media screen and (max-width: 550px) and (max-height: 850px) {
|
||||
.anneau {
|
||||
box-sizing: border-box;
|
||||
background-color: #DE3030;
|
||||
border-radius: 3vw;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.rondinterieur {
|
||||
background-color: var(--lighttercia);
|
||||
height: 3vw;
|
||||
width: 3vw;
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
border-radius: 3vw;
|
||||
}
|
||||
|
||||
.containform {
|
||||
box-sizing: content-box;
|
||||
height: 6vw;
|
||||
width: 6vw;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.rond {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background-color: #DE3030;
|
||||
height: 3vw;
|
||||
width: 3vw;
|
||||
border-radius: 3vw;
|
||||
}
|
||||
|
||||
/* PARTIE CARRE */
|
||||
.carre {
|
||||
background-color: #30C0DE;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
display: table-cell;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.carreinterieur {
|
||||
background-color: var(--lightsedonca);
|
||||
height: 3vw;
|
||||
width: 3vw;
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pcarre {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background-color: #30C0DE;
|
||||
height: 3vw;
|
||||
width: 3vw;
|
||||
}
|
||||
|
||||
/* PARTIE TRIANGLE */
|
||||
.triangle {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
border-left: 2.5vw solid transparent;
|
||||
border-right: 2.5vw solid transparent;
|
||||
border-bottom: 5vw solid #DEA430;
|
||||
}
|
||||
|
||||
.trianglerinterieur {
|
||||
position: absolute;
|
||||
margin-left: -1.5vw;
|
||||
margin-top: 1.25vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-bottom: 3vw solid var(--lightsedonca);
|
||||
}
|
||||
|
||||
.ptriangle {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.75vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-bottom: 3vw solid #DEA430;
|
||||
}
|
||||
|
||||
/* TRAPEZE */
|
||||
.trapeze {
|
||||
bottom: 0px;
|
||||
height: 0;
|
||||
margin-top: 2.58vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-top: 3vw solid #6FDE30;
|
||||
}
|
||||
|
||||
.triangletrapeze {
|
||||
padding-top: 0.1vw;
|
||||
position: absolute;
|
||||
border-left: 3vw solid transparent;
|
||||
border-right: 3vw solid transparent;
|
||||
border-bottom: 2.5vw solid #6FDE30;
|
||||
}
|
||||
|
||||
.trapezeinte {
|
||||
position: absolute;
|
||||
margin-top: 3vw;
|
||||
margin-left: 1.25vw;
|
||||
width: 2vw;
|
||||
border-left: 0.75vw solid transparent;
|
||||
border-right: 0.75vw solid transparent;
|
||||
border-top: 1.5vw solid var(--lightsedonca);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.triangletrapezeinte {
|
||||
position: absolute;
|
||||
margin-top: 1.45vw;
|
||||
margin-left: 1.25vw;
|
||||
padding-top: 0.1vw;
|
||||
border-left: 1.75vw solid transparent;
|
||||
border-right: 1.75vw solid transparent;
|
||||
border-bottom: 1.5vw solid var(--lightsedonca);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.trapezep {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-top: 2vw;
|
||||
width: 2vw;
|
||||
border-left: 0.75vw solid transparent;
|
||||
border-right: 0.75vw solid transparent;
|
||||
border-top: 1.5vw solid #6FDE30;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.triangletrapezep {
|
||||
position: absolute;
|
||||
margin-top: 0.55vw;
|
||||
margin-left: 1.25vw;
|
||||
border-left: 1.75vw solid transparent;
|
||||
border-right: 1.75vw solid transparent;
|
||||
border-bottom: 1.5vw solid #6FDE30;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.losangephaut {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-top: -3vw;
|
||||
border-left: 3vw solid transparent;
|
||||
border-right: 3vw solid transparent;
|
||||
border-bottom: 3vw solid #B130DE;
|
||||
}
|
||||
|
||||
.losangepbas {
|
||||
position: absolute;
|
||||
border-left: 3vw solid transparent;
|
||||
border-right: 3vw solid transparent;
|
||||
border-top: 3vw solid #B130DE;
|
||||
}
|
||||
|
||||
.losangephauti {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-top: -1.5vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-bottom: 1.5vw solid var(--lightsedonca);
|
||||
}
|
||||
|
||||
.losangepbasi {
|
||||
position: absolute;
|
||||
margin-left: 1.5vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-top: 1.5vw solid var(--lightsedonca);
|
||||
}
|
||||
|
||||
.losangephautc {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
margin-top: -1.5vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-bottom: 1.5vw solid #B130DE;
|
||||
}
|
||||
|
||||
.losangepbasc {
|
||||
position: absolute;
|
||||
margin-left: 1.5vw;
|
||||
border-left: 1.5vw solid transparent;
|
||||
border-right: 1.5vw solid transparent;
|
||||
border-top: 1.5vw solid #B130DE;
|
||||
}
|
||||
|
||||
.buttonretour {
|
||||
position: relative;
|
||||
height: 4vh;
|
||||
width: 4vh;
|
||||
border-radius: 55vw;
|
||||
background-color: var(--lightsedonca);
|
||||
z-index: 5;
|
||||
margin-left: 9.5vw;
|
||||
top: 6.75vw;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
background: var(--lightsedonca);
|
||||
width: 10vw;
|
||||
height: 13vw;
|
||||
border-radius: 2vw;
|
||||
padding-right: 0.4vw;
|
||||
padding-left: 0.4vw;
|
||||
padding-bottom: 0.8vw;
|
||||
padding-top: 0.4vw;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin-right: 1.75vw;
|
||||
margin-left: 1.75vw;
|
||||
-webkit-flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.item-form {
|
||||
width: 5vw;
|
||||
padding-left: 0.1vw;
|
||||
margin-top: 0.25vw;
|
||||
height: 5vw;
|
||||
border-radius: 10px;
|
||||
background-color: var(--lighttercia);
|
||||
}
|
||||
|
||||
.containcards {
|
||||
height: 87vh;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 2.5vw;
|
||||
padding-top: 2.5vw;
|
||||
}
|
||||
|
||||
.logop2 img {
|
||||
width: 20vh;
|
||||
padding-top: 1vh;
|
||||
position: relative;
|
||||
left: 27vw;
|
||||
}
|
||||
|
||||
.txt {
|
||||
position: absolute;
|
||||
font-family: Arial Black;
|
||||
color: var(--lightprima);
|
||||
font-size: 5.5vw;
|
||||
left: 2.25vw;
|
||||
top: -1vh;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
position: absolute;
|
||||
width: 45vw;
|
||||
left: 28vw;
|
||||
top: 13%;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.mounts img {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
margin-left: -1vw;
|
||||
margin-top: -1vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#contourbuttonvalider {
|
||||
position: absolute;
|
||||
border-radius: 45px;
|
||||
left: -10vw;
|
||||
top: 5.5vw;
|
||||
height: 15vw;
|
||||
width: 50vw;
|
||||
background-color: var(--lightsedonca);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.bouttonvalider {
|
||||
position: absolute;
|
||||
height: 13vw;
|
||||
width: 47vw;
|
||||
top: 1.1vw;
|
||||
left: 1.5vw;
|
||||
border-radius: 30px;
|
||||
background-color: #B130DE;
|
||||
}
|
||||
|
||||
.bouttonvalider2 {
|
||||
position: absolute;
|
||||
height: 6.8vw;
|
||||
width: 22.8vw;
|
||||
top: 1.1vw;
|
||||
left: 1.1vw;
|
||||
border-radius: 30px;
|
||||
background-color: #00CC66;
|
||||
}
|
||||
|
||||
#textjouer {
|
||||
font-family: Montserrat, impact, Arial Black;
|
||||
position: absolute;
|
||||
font-size: 10vw;
|
||||
margin-top: 0.2vw;
|
||||
margin-left: 12.5vw;
|
||||
color: var(--lightsedonca);
|
||||
}
|
||||
}
|
||||
@ -1,566 +1,77 @@
|
||||
/*Ecran*/
|
||||
@media screen and (min-width: 960px) {
|
||||
|
||||
|
||||
/*PARTIE FORMES*/
|
||||
|
||||
|
||||
.containform {
|
||||
position: relative;
|
||||
height: var(--x);
|
||||
width: var(--x);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/*ROND*/
|
||||
.anneau {
|
||||
position: relative;
|
||||
background-color: var(--colorbase);
|
||||
border-radius: var(--y);
|
||||
height: var(--y);
|
||||
width: var(--y);
|
||||
border-radius: var(--v);
|
||||
height: var(--v);
|
||||
width: var(--v);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.anneau2 {
|
||||
position: relative;
|
||||
background-color: white;
|
||||
border-radius: var(--y);
|
||||
height: var(--y);
|
||||
width: var(--y);
|
||||
left : calc((var(--x) - var(--y))/2);
|
||||
border-radius: var(--v);
|
||||
height: var(--v);
|
||||
width: var(--v);
|
||||
left : calc((var(--u) - var(--v))/2);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.anneau3 {
|
||||
position: relative;
|
||||
background-color: var(--colorbase);
|
||||
border-radius: var(--y);
|
||||
height: var(--y);
|
||||
width: var(--y);
|
||||
border-radius: var(--v);
|
||||
height: var(--v);
|
||||
width: var(--v);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.rondinterieur {
|
||||
background-color: white;
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
background-color: var(--lighttercia);
|
||||
height: var(--w);
|
||||
width: var(--w);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
border-radius: var(--z);
|
||||
border-radius: var(--w);
|
||||
}
|
||||
.rond {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background-color: var(--colorbase);
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
border-radius: var(--z);
|
||||
height: var(--w);
|
||||
width: var(--w);
|
||||
border-radius: var(--w);
|
||||
}
|
||||
.rond2 {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
border-radius: var(--z);
|
||||
height: var(--w);
|
||||
width: var(--w);
|
||||
border-radius: var(--w);
|
||||
}
|
||||
.rond3 {
|
||||
position: relative;
|
||||
top : calc((var(--y) - var(--z))/ 2);
|
||||
left : calc((var(--y) - var(--z))/2);
|
||||
top : calc((var(--v) - var(--w))/ 2);
|
||||
left : calc((var(--v) - var(--w))/2);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
background-color: white;
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
border-radius: var(--z);
|
||||
height: var(--w);
|
||||
width: var(--w);
|
||||
border-radius: var(--w);
|
||||
}
|
||||
.rond4 {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background-color: var(--colorbase);
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
border-radius: var(--z);
|
||||
}
|
||||
|
||||
/* PARTIE CARRE */
|
||||
.carre {
|
||||
position: relative;
|
||||
background-color: blacke);
|
||||
height: var(--y);
|
||||
width: var(--y);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.carreinterieur {
|
||||
position: relative;
|
||||
top : calc((var(--y) - var(--z))/2);
|
||||
left : calc((var(--y) - var(--z))/2);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
background-color: white;
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
}
|
||||
.carre2 {
|
||||
background-color: blacke);
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.carreinterieur2 {
|
||||
background-color: white;
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
display: table;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.carreinterieur3 {
|
||||
position: relative;
|
||||
background-color: white;
|
||||
height: var(--y);
|
||||
width: var(--y);
|
||||
left : calc((var(--x) - var(--y))/2);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.carrev2 {
|
||||
position: relative;
|
||||
background-color: blacke);
|
||||
height: var(--y);
|
||||
width: var(--y);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.carreinterieur4 {
|
||||
position : relative;
|
||||
top : calc((var(--y) - var(--z)) / 2);
|
||||
left : calc((var(--y) - var(--z)) / 2);
|
||||
background-color: white;
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.carre3 {
|
||||
background-color: blacke);
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/*A SUPPRIMER
|
||||
===========================================
|
||||
*/
|
||||
.pcarre {
|
||||
background-color: blacke);
|
||||
height: var(--z);
|
||||
width: var(--z);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/*========================================*/
|
||||
|
||||
/* PARTIE TRIANGLE */
|
||||
.triangle {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
border-left: calc(var(--y) /2) solid transparent;
|
||||
border-right: calc(var(--y) /2) solid transparent;
|
||||
border-bottom: var(--y) solid var(--colortwo);
|
||||
}
|
||||
.trianglerinterieur {
|
||||
position: absolute;
|
||||
bottom: calc((var(--x) - var(--z))/2.2);
|
||||
left : calc((var(--x) - var(--z))/2);
|
||||
border-left: calc(var(--z) /2) solid transparent;
|
||||
border-right: calc(var(--z) /2) solid transparent;
|
||||
border-bottom: var(--z) solid white;
|
||||
}
|
||||
.trianglerinterieur2 {
|
||||
position: absolute;
|
||||
bottom: calc((var(--x) - var(--z))/2);
|
||||
left : calc((var(--x) - var(--z))/2);
|
||||
border-left: calc(var(--z) /2) solid transparent;
|
||||
border-right: calc(var(--z) /2) solid transparent;
|
||||
border-bottom: var(--z) solid white;
|
||||
}
|
||||
.ptriangle {
|
||||
position: absolute;
|
||||
bottom: calc(((var(--x) - var(--y))/1.5) + ((var(--y) - var(--z))/3));
|
||||
left : calc((var(--x) - var(--z))/2);
|
||||
border-left: calc(var(--z) /2) solid transparent;
|
||||
border-right: calc(var(--z) /2) solid transparent;
|
||||
border-bottom: var(--z) solid var(--colortwo);
|
||||
}
|
||||
.triangle2 {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
border-left: calc(var(--y) /2) solid transparent;
|
||||
border-right: calc(var(--y) /2) solid transparent;
|
||||
border-bottom: var(--y) solid white;
|
||||
}
|
||||
|
||||
/* Croix */
|
||||
.croix{
|
||||
position: absolute;
|
||||
left: calc((var(--x) - var(--y)) / 2);
|
||||
bottom: calc( ((var(--x) - var(--y))/2) + ((var(--y)) / 4) );
|
||||
}
|
||||
.croixinté{
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: calc((var(--x) - var(--z))/2);
|
||||
bottom: calc( ((var(--x) - var(--z))/2) + ((var(--z)) / 2.33) );
|
||||
}
|
||||
.croixgauche{
|
||||
position: relative;
|
||||
background-color: var(--couleur);
|
||||
height: calc(var(--y)/4);
|
||||
width: var(--y);
|
||||
top : calc(var(--y) / 8);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.croixdroite{
|
||||
position: relative;
|
||||
background-color: var(--couleur);
|
||||
height: calc(var(--y)/4);
|
||||
width: var(--y);
|
||||
bottom : calc(var(--y) / 8);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.croixgauche2{
|
||||
position: relative;
|
||||
background-color: white;
|
||||
height: calc(var(--y)/4);
|
||||
width: var(--y);
|
||||
top : calc(var(--y) / 8);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.croixdroite2{
|
||||
position: relative;
|
||||
background-color: white;
|
||||
height: calc(var(--y)/4);
|
||||
width: var(--y);
|
||||
bottom : calc(var(--y) / 8);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.croixgaucheinte{
|
||||
position: relative;
|
||||
background-color: white;
|
||||
height: calc(var(--z)/16);
|
||||
width: calc(var(--z));
|
||||
top : calc(var(--z) / 32);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.croixdroiteinte{
|
||||
position: relative;
|
||||
background-color: white;
|
||||
height: calc(var(--z)/16);
|
||||
width: calc(var(--z));
|
||||
bottom : calc(var(--z) / 32);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.croixgaucheinte2{
|
||||
position: relative;
|
||||
background-color: var(--couleur);
|
||||
height: calc(var(--z)/16);
|
||||
width: calc(var(--z));
|
||||
top : calc(var(--z) / 32);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.croixdroiteinte2{
|
||||
position: relative;
|
||||
background-color: var(--couleur);
|
||||
height: calc(var(--z)/16);
|
||||
width: calc(var(--z));
|
||||
bottom : calc(var(--z) / 32);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
/*LOSANGE*/
|
||||
.losange{
|
||||
width: var(--y);
|
||||
height: var(--y);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background: var(--couleur);
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
}
|
||||
.losange2{
|
||||
width: var(--y);
|
||||
height: var(--y);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
}
|
||||
.losangeinte{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: var(--z);
|
||||
height: var(--z);
|
||||
bottom : calc( ((var(--x) - var(--z))/2));
|
||||
left : calc((var(--x) - var(--z))/2);
|
||||
background: white;
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
}
|
||||
.losangeinte2{
|
||||
width: var(--z);
|
||||
height: var(--z);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background: var(--couleur);
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
}
|
||||
/*PENTA*/
|
||||
.trapeze{
|
||||
width: var(--y);
|
||||
height: var(--y);
|
||||
background: var(--couleur);
|
||||
position: relative;
|
||||
left: calc((var(--x) - var(--y)) / 2);
|
||||
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
||||
}
|
||||
.trapeze2{
|
||||
width: var(--y);
|
||||
height: var(--y);
|
||||
background: white;
|
||||
position: relative;
|
||||
left: calc((var(--x) - var(--y)) / 2);
|
||||
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
||||
}
|
||||
.trapezeinte{
|
||||
width: var(--z);
|
||||
height: var(--z);
|
||||
background: white;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom : calc( ((var(--x) - var(--z))/2));
|
||||
left: calc((var(--x) - var(--z))/2);
|
||||
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
||||
}
|
||||
.trapezeinte2{
|
||||
width: var(--z);
|
||||
height: var(--z);
|
||||
background: var(--couleur);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom : calc( ((var(--x) - var(--z))/2));
|
||||
left: calc((var(--x) - var(--z))/2);
|
||||
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
||||
}
|
||||
.octogon{
|
||||
width: var(--y);
|
||||
height: var(--y);
|
||||
background: var(--couleur);
|
||||
position: relative;
|
||||
left: calc((var(--x) - var(--y)) / 2);
|
||||
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
||||
}
|
||||
.octogon2{
|
||||
width: var(--y);
|
||||
height: var(--y);
|
||||
background: white;
|
||||
position: relative;
|
||||
left: calc((var(--x) - var(--y)) / 2);
|
||||
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
||||
}
|
||||
.octogoninte{
|
||||
width: var(--z);
|
||||
height: var(--z);
|
||||
background: white;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom : calc( ((var(--x) - var(--z))/2));
|
||||
left: calc((var(--x) - var(--z))/2);
|
||||
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
||||
}
|
||||
.octogoninte2{
|
||||
width: var(--z);
|
||||
height: var(--z);
|
||||
background: var(--couleur);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom : calc( ((var(--x) - var(--z))/2));
|
||||
left: calc((var(--x) - var(--z))/2);
|
||||
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
||||
}
|
||||
/*HEXAGONE*/
|
||||
.hexa{
|
||||
width: var(--y);
|
||||
height: var(--y);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background: var(--couleur);
|
||||
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
}
|
||||
.hexa2{
|
||||
width: var(--y);
|
||||
height: var(--y);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
}
|
||||
.hexainte{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: var(--z);
|
||||
height: var(--z);
|
||||
bottom : calc( ((var(--x) - var(--z))/2));
|
||||
left : calc((var(--x) - var(--z))/2);
|
||||
background: white;
|
||||
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
}
|
||||
.hexainte2{
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
width: var(--z);
|
||||
height: var(--z);
|
||||
background: var(--couleur);
|
||||
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*===========================================*/
|
||||
|
||||
|
||||
|
||||
|
||||
/*Externe*/
|
||||
|
||||
.buttonretour {
|
||||
position: relative;
|
||||
height: 4vh;
|
||||
width: 4vh;
|
||||
border-radius: 55vw;
|
||||
background-color: var(--lightsedonca);
|
||||
z-index: 5;
|
||||
margin-left: 2vw;
|
||||
top: 1.75vw;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
background: var(--lightsedonca);
|
||||
width: 10vw;
|
||||
height: 13vw;
|
||||
border-radius: 0.75vw;
|
||||
padding-right: 0.15vw;
|
||||
padding-left: 0.15vw;
|
||||
padding-bottom: 0.25vw;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin-right: 0.4vw;
|
||||
margin-left: 0.4vw;
|
||||
-webkit-flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.item-form {
|
||||
width: 3vw;
|
||||
padding-left: 0.1vw;
|
||||
margin-top: 0.25vw;
|
||||
height: 3vw;
|
||||
border-radius: 10px;
|
||||
background-color: var(--lighttercia);
|
||||
}
|
||||
|
||||
.containcards {
|
||||
height: 87vh;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 3vw;
|
||||
padding-top: 2.5vw;
|
||||
}
|
||||
|
||||
.logop2 img {
|
||||
width: 20vh;
|
||||
padding-top: 1vh;
|
||||
position: relative;
|
||||
left: 43.5vw;
|
||||
}
|
||||
|
||||
|
||||
.txt {
|
||||
position: absolute;
|
||||
font-family: Arial Black;
|
||||
color: var(--lightprima);
|
||||
font-size: 1.5vw;
|
||||
left: 0.4vw;
|
||||
top: -1.6vh;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
position: absolute;
|
||||
width: 12vw;
|
||||
left: 44vw;
|
||||
top: 13%;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.mounts img {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
#contourbuttonvalider {
|
||||
position: absolute;
|
||||
border-radius: 45px;
|
||||
left: 9.2vw;
|
||||
top: 5.5vw;
|
||||
height: 4vw;
|
||||
width: 12vw;
|
||||
background-color: var(--lightsedonca);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.bouttonvalider {
|
||||
position: absolute;
|
||||
height: 3.4vw;
|
||||
width: 11.4vw;
|
||||
top: 0.3vw;
|
||||
left: 0.3vw;
|
||||
border-radius: 30px;
|
||||
background-color: #B130DE;
|
||||
}
|
||||
|
||||
|
||||
.bouttonvalider2 {
|
||||
position: absolute;
|
||||
height: 3.4vw;
|
||||
width: 11.4vw;
|
||||
top: 0.3vw;
|
||||
left: 0.3vw;
|
||||
border-radius: 30px;
|
||||
background-color: #00CC66;
|
||||
}
|
||||
|
||||
#textjouer {
|
||||
font-family: Montserrat, impact, Arial Black;
|
||||
position: absolute;
|
||||
font-size: 2.5vw;
|
||||
margin-top: 0.2vw;
|
||||
margin-left: 2.7vw;
|
||||
color: var(--lightsedonca);
|
||||
text-align:center;
|
||||
height: var(--w);
|
||||
width: var(--w);
|
||||
border-radius: var(--w);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,134 @@
|
||||
/*Ecran*/
|
||||
@media screen and (min-width: 992px) {
|
||||
|
||||
|
||||
/*PARTIE FORMES*/
|
||||
|
||||
|
||||
/*===========================================*/
|
||||
|
||||
|
||||
|
||||
|
||||
/*Externe*/
|
||||
|
||||
.buttonretour {
|
||||
position: relative;
|
||||
height: 4vh;
|
||||
width: 4vh;
|
||||
border-radius: 55vw;
|
||||
background-color: var(--lightsedonca);
|
||||
z-index: 5;
|
||||
margin-left: 2vw;
|
||||
top: 1.75vw;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
background: var(--lightsedonca);
|
||||
width: 10vw;
|
||||
height: 13vw;
|
||||
border-radius: 0.75vw;
|
||||
padding-right: 0.15vw;
|
||||
padding-left: 0.15vw;
|
||||
padding-bottom: 0.25vw;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin-right: 0.4vw;
|
||||
margin-left: 0.4vw;
|
||||
-webkit-flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.item-form {
|
||||
width: 3vw;
|
||||
padding-left: 0.1vw;
|
||||
margin-top: 0.25vw;
|
||||
height: 3vw;
|
||||
border-radius: 10px;
|
||||
background-color: var(--lighttercia);
|
||||
}
|
||||
|
||||
.containcards {
|
||||
height: 87vh;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 3vw;
|
||||
padding-top: 2.5vw;
|
||||
}
|
||||
|
||||
.logop2 img {
|
||||
width: 20vh;
|
||||
padding-top: 1vh;
|
||||
position: relative;
|
||||
left: 43.5vw;
|
||||
}
|
||||
|
||||
|
||||
.txt {
|
||||
position: absolute;
|
||||
font-family: Arial Black;
|
||||
color: var(--lightprima);
|
||||
font-size: 1.5vw;
|
||||
left: 0.4vw;
|
||||
top: -1.6vh;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
position: absolute;
|
||||
width: 12vw;
|
||||
left: 44vw;
|
||||
top: 13%;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.mounts img {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
#contourbuttonvalider {
|
||||
position: absolute;
|
||||
border-radius: 45px;
|
||||
left: 9.2vw;
|
||||
top: 5.5vw;
|
||||
height: 4vw;
|
||||
width: 12vw;
|
||||
background-color: var(--lightsedonca);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.bouttonvalider {
|
||||
position: absolute;
|
||||
height: 3.4vw;
|
||||
width: 11.4vw;
|
||||
top: 0.3vw;
|
||||
left: 0.3vw;
|
||||
border-radius: 30px;
|
||||
background-color: #B130DE;
|
||||
}
|
||||
|
||||
|
||||
.bouttonvalider2 {
|
||||
position: absolute;
|
||||
height: 3.4vw;
|
||||
width: 11.4vw;
|
||||
top: 0.3vw;
|
||||
left: 0.3vw;
|
||||
border-radius: 30px;
|
||||
background-color: #00CC66;
|
||||
}
|
||||
|
||||
#textjouer {
|
||||
font-family: Montserrat, impact, Arial Black;
|
||||
position: absolute;
|
||||
font-size: 2.5vw;
|
||||
margin-top: 0.2vw;
|
||||
margin-left: 2.7vw;
|
||||
color: var(--lightsedonca);
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,191 @@
|
||||
.containform {
|
||||
position: relative;
|
||||
/*height: var(--x);
|
||||
width: var(--x);*/
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.containform3 {
|
||||
position: relative;
|
||||
height: var(--x);
|
||||
width: var(--x);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.containform2{
|
||||
position: relative;
|
||||
height: var(--x);
|
||||
width: var(--x);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
background-color: black;
|
||||
}
|
||||
/*ROND*/
|
||||
.containexte{
|
||||
height: var(--y);
|
||||
width: var(--y);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: calc(var(--x)/8);
|
||||
}
|
||||
|
||||
#cacherond{
|
||||
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%);
|
||||
}
|
||||
|
||||
.round{
|
||||
border-radius: 5vw;
|
||||
}
|
||||
|
||||
.cb{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.cn{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.formeinte{
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.formeexte{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.carre{
|
||||
-webkit-clip-path: inset(0 0 0 0);
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
|
||||
.triangle{
|
||||
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
.castriangle{
|
||||
margin-top: calc( (var(--y) - var(--z)) / 5);
|
||||
}
|
||||
|
||||
.caspenta{
|
||||
margin-top: calc( (var(--y) - var(--z)) / 10);
|
||||
}
|
||||
|
||||
.losange{
|
||||
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
}
|
||||
|
||||
.croix{
|
||||
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
||||
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
||||
}
|
||||
|
||||
.croixinte{
|
||||
-webkit-clip-path: polygon(26% 23%, 22% 27%, 45% 50%, 22% 74%, 27% 78%, 50% 55%, 74% 78%, 78% 73%, 55% 50%, 78% 27%, 73% 23%, 50% 46%);
|
||||
clip-path: polygon(26% 23%, 22% 27%, 45% 50%, 22% 74%, 27% 78%, 50% 55%, 74% 78%, 78% 73%, 55% 50%, 78% 27%, 73% 23%, 50% 46%);
|
||||
|
||||
}
|
||||
|
||||
.penta{
|
||||
-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
||||
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
||||
}
|
||||
|
||||
.hexa{
|
||||
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
}
|
||||
|
||||
.hocto{
|
||||
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
||||
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
||||
}
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
/*Demi Ecran*/
|
||||
@media screen and (max-width: 768px) {
|
||||
body{
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,79 @@
|
||||
/*DemTéléphone 1i Ecran*/
|
||||
@media screen and (min-width: 669px) and (max-width: 992px) {
|
||||
body{
|
||||
background-color: red;
|
||||
}
|
||||
.logop2 img {
|
||||
width: 20vh;
|
||||
padding-top: 1vh;
|
||||
position: relative;
|
||||
left: 27vw;
|
||||
}
|
||||
|
||||
.txt {
|
||||
position: absolute;
|
||||
font-family: Arial Black;
|
||||
color: var(--lightprima);
|
||||
font-size: 5.5vw;
|
||||
left: 2.25vw;
|
||||
top: -1vh;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
position: absolute;
|
||||
width: 45vw;
|
||||
left: 28vw;
|
||||
top: 13%;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.mounts img {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
margin-left: -1vw;
|
||||
margin-top: -1vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#contourbuttonvalider {
|
||||
position: absolute;
|
||||
border-radius: 45px;
|
||||
left: -10vw;
|
||||
top: 5.5vw;
|
||||
height: 15vw;
|
||||
width: 50vw;
|
||||
background-color: var(--lightsedonca);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.bouttonvalider {
|
||||
position: absolute;
|
||||
height: 13vw;
|
||||
width: 47vw;
|
||||
top: 1.1vw;
|
||||
left: 1.5vw;
|
||||
border-radius: 30px;
|
||||
background-color: #B130DE;
|
||||
}
|
||||
|
||||
.bouttonvalider2 {
|
||||
position: absolute;
|
||||
height: 6.8vw;
|
||||
width: 22.8vw;
|
||||
top: 1.1vw;
|
||||
left: 1.1vw;
|
||||
border-radius: 30px;
|
||||
background-color: #00CC66;
|
||||
}
|
||||
|
||||
#textjouer {
|
||||
font-family: Montserrat, impact, Arial Black;
|
||||
position: absolute;
|
||||
font-size: 10vw;
|
||||
margin-top: 0.2vw;
|
||||
margin-left: 12.5vw;
|
||||
color: var(--lightsedonca);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue