Skip to content

GitLab

C
controle-tes-donnees.net
Commit ab4d3de9 authored by piks3l's avatar piks3l
Browse files
Options

Réparé l'image dans le header, le logo en fond et updaté le texte dans Les géants de l'Internet

parent 6ad4475d
Hide whitespace changes
Inline Side-by-side
Showing with 4 additions and 431 deletions
img/main.css deleted 100644 → 0
View file @ 6ad4475d
/* A faire : adapter pour Safari et smartphone
bleu-vert: #003948
/*Général*/
body, div, h1, h2, h3, a, bouton, p {
font-family:Verdana, Arial, "Arial Black", "Times New Roman", serif;
font-size:1em;
line-height:1.24em;
color:#003948;
margin:0;
padding:0;
}
body {background-color:white;}
em {font-style:normal;}
bouton {cursor:pointer;}
a {text-decoration:none;}
.color0 p a, .color1 p a, #tutoriel a, .color2 b {text-decoration:underline;}
@media only screen and (max-device-width:980px) {
body {font-size:120%; width:100%;}
}
/* ----------------------------------------------------- */
/* Bande haut --------------------*/
#stripeTop {
width:100%;
height:2em;
background-color: #497ED5;
}
/* Chapeau ------------------------*/
header {
background:url(Illu1.jpg);
background-size:93%;
background-repeat:no-repeat;
background-position: bottom center;
margin:1em auto 0em;
height: 550px;
/* margin-bottom:-20px; */
width:80%;
} @media only screen and (min-width:1000px) {header {width: 800px;}}
header h1 {
text-align:left;
float:left;
font-size:2em;
color:#003948;
line-height:1.1em;
margin-bottom:.1em;
}
header bouton {
float:right;
margin:.2em 0 0 0;
background:url(Illu0.png);
background-size:100%;
background-repeat:no-repeat;
padding:1em 1em 1.3em 3em;
}
header bouton:hover {
opacity:.9;
}
header bouton p {
font-size:1.4em;
line-height:.8em;
float:right;
text-align:center;
margin-right:.2em;
font-weight:bold;
color:#fff;
}
header bouton p span {
font-size:.8em;
}
header h2{
clear:both;
font-size:1em;
color:#497ED5;
font-weight:normal;
}
@media only screen and (max-device-width:980px) {
header {
width:95%;
margin-left: auto;
margin-right: auto;
height:400px;
}
header h1 {
float:none;
font-size: 1.8em;
}
header bouton {
display:none;
}
header h2 {
margin-top:.6em;
}
#header-img {
width:80%
}
}
#textIntro, #Act {
background-color:#497ED5;
padding: 2em;
}
#textIntro p, #textIntro b {
margin:0 auto;
line-height : 1.4em;
width:80%;
font-size:1em;
color:white;
white-space:normal;
} @media only screen and (min-width:1000px) {#textIntro p {width: 800px;}}
#textIntro h1, #Act h1 {
color:white;
line-height : 1em;
text-align:center;
font-size:1.4em;
}
/* ------------------------------------------------------------- */
/*Main --------------------------------------------------------- */
#main, #main2 {
margin: 2em auto 3em;
width:100%;
clear:both;
}@media only screen and (min-width:1000px) {#main {width: 1000px;}#main2 {width: 1000px;}}
@media only screen and (max-device-width:980px) {
#main, #main2 {width:95%; margin:.2em auto;}}
#main p, #main2 p {
text-align:justify;
font-size: .9em;
}
#main ul {
font-size: .9em;
}
/* Intro ---------------------*/
table {
border-collapse:collapse;
margin:0 auto;
}
td {
width : 20em;
padding : 0 2em;
vertical-align:top;
text-align:center;
}
tr td:first-of-type + td {
border-left: 1px solid #e0a63a;
border-right: 1px solid #e0a63a;
}
#intros bouton, #main2 bouton {
font-size:.9em;
padding:.5em 1.5em;
color: #fff;
}
/*Titres*/
#main .titres td {
vertical-align:bottom;
padding-bottom:1em;
transition: border-bottom 0.6s, top 0.3s;
}
#main .titres td:hover {
position:relative;
top:-5px;
cursor:pointer;
transition: border-bottom 0.6s, top 0.3s, opacity 0.3s;
}
.titres h1 {font-size: 1.3em;text-align:center;}
.titres img {width:95%;}
@media only screen and (max-device-width:980px) {
#intros {display:none;}
#main .titres td { width:33%; padding:0; vertical-align:top;}
#main .titres h1 {font-size:.9em; font-weight:normal; padding:.2em; vertical-align:top;}
}
.titreOn {opacity : 1;border-bottom: 1px solid #fff;}
.titreOff {opacity: 0.7;border-bottom: 1px solid #e0a63a;}
.titreOff:hover {opacity:1;}
/* Visibles */
.visible, .hidden {overflow: hidden;}
.visible {visibility: visible; opacity: 1; transition: visibility 0s 0.2s, opacity 0.2s 0.2s linear;}
.pageContent .visible {transition: visibility 0s, opacity 0.2s linear;}
.visible td p, .visible .pageContent {transition: margin-top 0s 0.2s;}
.pageContent .visible p, .visble .pageSection {transition: margin-top 0s;}
.hidden {visibility: hidden;opacity: 0;transition: visibility 0s 0.2s, opacity 0.2s linear;}
.hidden td p, .hidden .pageContent, .pageContent .hidden p, .hidden .pageSection {margin-top: -10000em;transition: margin-top 0s 0.2s;}
/*Couleurs*/
h1.color0, .color0 h1, .color0 h2, .color0 bouton, .color0 b, .color0 em {color: #497ED5;}
#intros .color0 bouton, .color0.pageContent h1, #main2 table .color0 bouton {background-color:#497ED5;}
#intros .color0 bouton:hover, #main2 table .color0 bouton:hover {background-color:#4170bd;}
h1.color1, .color1 h1, .color1 h2, .color1 bouton, .color b, .color1 em{color: #d99923;}
#intros .color1 bouton, .color1.pageContent h1, #main2 table .color1 bouton {background-color:#d99923;}
#intros .color1 bouton:hover, #main2 table .color1 bouton:hover {background-color:#bf871f;}
h1.color2, .color2 h1, .color2 h2, .color2 bouton, .color2 b, .color2 em{color: #D45B35;}
#intros .color2 bouton, .color2.pageContent h1, #main2 table .color2 bouton {background-color:#D45B35;}
#intros .color2 bouton:hover, #main2 table .color2 bouton:hover {background-color:#ba502f;}
/*Pages*/
.pageContent {
width:60%;
margin:2em auto 0;
} @media only screen and (min-width:1000px) {.pageContent {width:600px;}}
.pageContent h1 {
padding:.5em;
color:#fff;
font-size:1.3em;
font-weight:bold;
text-align:center;
}
.pageContent p {
padding:0 3em;
white-space:pre-line;
}
.pageContent bouton {
display:block;
font-size:.9em;
text-align:center;
}
.pageSection {
margin: 2em 0;
padding:1em 2em;
background-color:#eee;
}
.pageSection h2 {
font-size: 1.1em;
text-align:justify;
}
.pageSection p {
padding:0 1em;
}
.pageSection ul {
padding-right:1em;
}
.pageSection bouton{
text-align:left;
margin:0;
}
.pageSection p bouton {
font-size:1em;
display:inline;
}
@media only screen and (max-device-width:980px) {
.pageContent {width:100%;}
.pageSection {margin:1em 0; padding: 1em .4em;}
.pageSection p {padding: 0 .4em;}
#main h2 {text-align:left; font-size:1em;}
#imgBan img {display:none;}
}
/*Table loi*/
#tLoi td, div.tL{border:solid 1px #bbb;padding:1em 1em;margin:0; white-space:pre-line;}
#tLoi td {line-height : 1.2em;cursor:pointer; text-align:left;font-size:.8em;}
div.tL {text-align:justify; font-size:.85em; padding: 2em;}
.tL a {text-decoration:underline;}
#main div.tL ul {font-size:1em; padding:0 2em;}
#tLoi td:hover, div.tL {background:#fff;}
@media only screen and (max-device-width:980px) {
#tLoi td {display:block; white-space:pre-line; font-size:.7em; line-height : 1em;}
div.tL {font-size:.8em; padding: .4em;}
}
/* Tuto */
/*#fondTuto {
background-color:#ccc;
z-index:10;
height:100%;
opacity : .5;
width:100%;
position:fixed;
}
.tuto {
position:relative;
z-index:20;
background-color:white;
padding: 2em 4em;
margin:2em auto 2em;
border-radius : 2em;
-moz-box-shadow: 0px 0px 20px 10px #bbb;
-webkit-box-shadow: 0px 0px 20px 10px #bbb;
-o-box-shadow: 0px 0px 20px 10px #bbb;
box-shadow: 0px 0px 20px 10px #bbb;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbb, Direction=NaN, Strength=20);
}*/
/*Main2*/
@media only screen and (max-device-width:980px) {
#main2 .titres td {display:block; width:90%; padding:0; margin:0 auto; border:none;}
#main2 td img {width:70%; display:block; margin:0 auto;}
#main2 bouton {display:block; margin:0 2em;}
}
/* Footer */
footer {
margin-top:1em;
background-color: #497ED5;
padding:1.5em 0 3em;
}
footer p {
color:#fff;
margin: 0 auto;
} @media only screen and (min-width:1000px) {footer p {width: 1000px;}}
footer img {width:8em; border:.7em solid #fff; margin:0em 2em; float:left;}
@media only screen and (max-device-width:980px) {footer img{float:none; display:block; margin:0 auto 1em;} footer p {padding: 0 1em;}}
/* Tutoriel ------------------------------------------------------------------ */
#tutoriel {
margin: 0 auto;
padding: 2em 0;
width:60%;
}@media only screen and (min-width:1000px) {#tutoriel {width: 600px;}}
@media only screen and (max-device-width:980px) {
#tutoriel {width:95%; margin:.2em auto;}}
#tutoriel h1 {
padding:.5em;
color:#fff;
font-size:1.3em;
font-weight:bold;
text-align:center;
background-color:#D45B35;
}
#tutoriel h2, #tutoriel h3 {
font-size:1.2em; display:inline;
}
#tutoriel h3 {
font-weight:normal;
}
#tutoriel div {
margin: 2em auto;
padding:1em 3em;
background-color:#eee;
font-size:.9em;
text-align:justify;
white-space:pre-line;
}
#tutoriel ul, ol {
white-space: normal;
line-height : 1.4em;
}
#tutoriel b {line-height : 2em;}
#tutoriel div img {margin:0 auto; border:1px solid black; display:block; max-width:100%;}
#tutoriel em, .retourTuto, #tutoriel h2, #tutoriel h3 {color:#D45B35;}
#tutoriel .retourTuto, #tutoriel h2 {margin-left:-1em; text-decoration:none;}
#tutoriel #retourSite {margin-left:-4em;font-size:1.2em; color:#fff; text-decoration:none; font-weight:bold; background-color:#d99923; padding: .4em .8em;}
@media only screen and (max-device-width:980px) {
#tutoriel div {padding : .4em;}
#tutoriel #retourSite {margin-left:0em;}
#tutoriel .retourTuto, #tutoriel h2 {margin-left:0;}
}
\ No newline at end of file
index.html
View file @ ab4d3de9
......@@ -5,8 +5,8 @@
<meta charset="utf-8">
<title>Reprenez le contrôle de vos données !</title>
<link rel="shortcut icon" href="img/log.png">
<link rel="stylesheet" href="img/main.css" type="text/css" media="screen">
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
<script type="text/javascript" src="js/main.js"></script>
<meta name="viewport" content="width=device-width" />
<!-- Base des textes déroulant
......@@ -43,7 +43,6 @@
</p>
</div>
<div id="main">
<table>
......
js/main.js
View file @ ab4d3de9
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","compteur.php?timer=1",true); xmlhttp.send(null);
xmlhttp=new XMLHttpRequest();
// xmlhttp.open("GET","compteur.php?timer=1",true); xmlhttp.send(null);
function cinq() {xmlhttp.open("GET","compteur.php?timer=2",true); xmlhttp.send(null);}
window.setTimeout(cinq,1000*60*3);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment