responsivité

This commit is contained in:
Hugo IZANIC 2024-01-19 10:33:58 +01:00
parent 0123b6916e
commit 58f13d1d95
8 changed files with 67 additions and 17 deletions

View File

@ -80,21 +80,33 @@ outline: none;
margin: 1%;
}
@media only screen and (max-width: 800px){
body{
width: 100vw;
h2{
margin-bottom: 10vh;
}
#img_droite_txt_gauche{
width: 100vw;
#presentation{
height: 50vh;
}
.img_main{
width: 75vw;
margin-bottom: 20vh;
}
#menu-ordi{
display: none;
#img-txt p {
width: 100vw;
margin-bottom: 10vh;
}
#img-txt div{
flex-direction: column;
padding-bottom: 0;
}
#menu-mobile{
position: fixed;
display: block;
#img_gauche_txt_droite{
flex-direction: column;
}
#fond_2 video{
width: 95vw;
}
}

View File

@ -4,7 +4,7 @@ h1,h2,h3,h4,h5{
}
#cv{
.cv{
display: inline-block;
border: 1px solid red;
padding: 1rem 1rem;

View File

@ -210,8 +210,8 @@ footer #reseaux p{
}
footer #reseaux li img{
width: 3vw;
height: 3vh;
width: 5vw;
height: 5vh;
}
footer #reseaux li img:not(:hover){
@ -247,3 +247,25 @@ footer #autres a:hover{
display: none;
}
@media only screen and (max-width: 800px){
*{
overflow-x: hidden;
}
footer a,footer p {
font-size: 7px;
}
#reseaux p{
display: none;
}
#menu-ordi{
display: none;
}
#menu-mobile{
position: fixed;
display: block;
}
}

View File

@ -3,8 +3,10 @@
<head>
<title> Casino du coeur </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
<link rel = "stylesheet" type = "text/css" href = "../CSS/contact.css">
<meta name="keywords" content="casino">
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
</head>
@ -12,6 +14,12 @@
<header>
<div id="menu-mobile">
<button>
a
</button>
</div>
<div id="menu-ordi">
<nav>

View File

@ -4,6 +4,7 @@
<title> Casino du coeur </title>
<meta charset="utf-8">
<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="casino">
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
</head>

View File

@ -5,11 +5,17 @@
<meta charset="utf-8">
<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
<link rel = "stylesheet" type = "text/css" href = "../CSS/partenaire.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="casino">
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
</head>
<body>
<header>
<div id="menu-mobile">
<button>
a
</button>
</div>
<div id="menu-ordi">

View File

@ -5,6 +5,7 @@
<meta charset="utf-8">
<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
<link rel = "stylesheet" type = "text/css" href = "../CSS/propos.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = "../CSS/print.css" media="print">
<meta name="keywords" content="casino">
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
@ -28,7 +29,7 @@
</div>
</header>
<main>
<div id="cv" class="cv-1">
<div id="cv-1" class="cv">
<aside id="marge">
<ul>
<li> hugo.izanic@etu.u-pec.fr</li>
@ -96,7 +97,7 @@
</div>
<div id="cv" class="cv-2">
<div id="cv-2" class="cv">
<aside id="marge">
<ul>
<li> hugo.izanic@etu.u-pec.fr</li>
@ -182,8 +183,8 @@
<ul>
<li><a href="" target="_blank">Mentions légales</a></li>
<li><a href="" target="_blank">Conditions générales d'utilisation</a></li>
<li><a href="credits.txt" target="_blank">Crédits</a></li>
<li><a href="charte_graphique" target="_blank">Charte graphique</a></li>
<li><a href="../credits.txt" target="_blank">Crédits</a></li>
<li><a href="../charte_graphique" target="_blank">Charte graphique</a></li>
</ul>
</div>

View File

@ -9,7 +9,7 @@
<link rel = "stylesheet" type = "text/css" href = "CSS/styles.css" media="all">
<link rel = "stylesheet" type = "text/css" href = "CSS/accueil.css" media="all">
<meta name="keywords" content="casino">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "icon" type = "image/png" href = "img/logo.svg">
</head>