parent
ef119a32e4
commit
f28db14896
@ -0,0 +1,17 @@
|
||||
Les plus :
|
||||
- lisibilité et modularité du CSS. Des classes, en complément ou en remplacement, pour le h1 et le p aurait été un parfait en terme de modularité.
|
||||
- bonne indentation et exploitation du scss, commentaires sont un plus.
|
||||
- menu responsive
|
||||
|
||||
|
||||
Les moins :
|
||||
- Un overlay aurait été un plus
|
||||
- la popin tout en violet est un peu raide, surtout avec un texte noir
|
||||
- certaines couleurs définies en variables ne sont pas utilisées.
|
||||
- il aurait fallut fusionner icon-style et main pour éviter un appel réseau
|
||||
- checkbox newsletter ko, checkbox popin ok
|
||||
- footer non responsive
|
||||
- type de l'input mail aurait du etre email
|
||||
- pourquoi une div dans le footer ?
|
||||
- manque de title, aria-
|
||||
- pas de description ni keywords
|
||||
@ -0,0 +1,15 @@
|
||||
.menu {
|
||||
flex-basis: auto;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.menu li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.menu-toggle, .menu-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=desktop.css.map */
|
||||
@ -0,0 +1,14 @@
|
||||
.menu {
|
||||
flex-basis: auto;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-toggle, .menu-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src:
|
||||
url('fonts/icomoon.ttf?l7lvwf') format('truetype'),
|
||||
url('fonts/icomoon.woff?l7lvwf') format('woff'),
|
||||
url('fonts/icomoon.svg?l7lvwf#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
i {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-cross:before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
@ -0,0 +1,135 @@
|
||||
.div-form {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
}
|
||||
.div-form #form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: Translate(-50%, -50%);
|
||||
left: 50%;
|
||||
height: 25%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
background-color: #663366;
|
||||
color: #330033;
|
||||
}
|
||||
.div-form #form .icon-cross {
|
||||
color: #fcfafc;
|
||||
float: right;
|
||||
}
|
||||
.div-form #form button {
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
border: 1px solid #a7a7a7;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.div-form #form button:hover {
|
||||
color: #eeaaee;
|
||||
background-color: lightgrey;
|
||||
}
|
||||
|
||||
#form-checkbox:checked ~ .div-form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.form-checkbox:checked ~ .menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
background-color: rgba(204, 204, 204, 0.159);
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
flex-basis: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
.menu li {
|
||||
padding: 15px;
|
||||
}
|
||||
.menu a, .menu .show-form {
|
||||
display: inline-block;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
color: #660066;
|
||||
}
|
||||
.menu a:hover, .menu .show-form:hover {
|
||||
color: #eeaaee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.menu-checkbox:checked ~ .menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
.menu-toggle:hover {
|
||||
color: #eeaaee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
color: #fcfafc;
|
||||
background-color: #663366;
|
||||
text-align: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
text-align: center;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
#foot {
|
||||
text-align: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #330033;
|
||||
font-size: 14px;
|
||||
padding: 25px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transform: Translate(-50%);
|
||||
left: 50%;
|
||||
}
|
||||
#foot span, #foot a {
|
||||
padding-left: 20px;
|
||||
}
|
||||
#foot a {
|
||||
color: #660066;
|
||||
text-decoration: none;
|
||||
}
|
||||
#foot a:hover {
|
||||
color: #eeaaee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.c_hebdo, .c_daily {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.s_daily, .s_hebdo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main-style.css.map */
|
||||
@ -0,0 +1,147 @@
|
||||
//déclaration des variables
|
||||
$font : Arial, Helvetica, sans-serif;
|
||||
$normalfontsize : 14px;
|
||||
$titlecrosscolor: #fcfafc;
|
||||
$linkcolor: #660066;
|
||||
$linkhovercolor:#eeaaee;
|
||||
$fontcolor:#330033;
|
||||
$inputcolor: white;
|
||||
$backgroundtitlecolor: #663366;
|
||||
|
||||
//Mise en form du formulaire
|
||||
.div-form{
|
||||
font-family: $font;
|
||||
font-size: $normalfontsize;
|
||||
display: none;
|
||||
#form{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: Translate(-50%, -50%);
|
||||
left: 50%;
|
||||
height: 25%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid black ;
|
||||
padding: 10px;
|
||||
background-color: #663366;
|
||||
color: $fontcolor;
|
||||
.icon-cross{
|
||||
color: $titlecrosscolor;
|
||||
float: right;
|
||||
}
|
||||
button{
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
border: 1px solid rgb(167, 167, 167);
|
||||
font-family: $font;
|
||||
&:hover{
|
||||
color: $linkhovercolor;
|
||||
background-color: lightgrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//fermeture du formulaire
|
||||
#form-checkbox:checked ~ .div-form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.form-checkbox:checked ~ .menu {
|
||||
display: none;
|
||||
}
|
||||
//Mise en form de la nav bar
|
||||
.main-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
background-color: rgba(204, 204, 204, 0.159);
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
.menu {
|
||||
display: none;
|
||||
flex-basis: 100%;
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
padding: 15px;
|
||||
}
|
||||
a, .show-form {
|
||||
display: inline-block;
|
||||
font-family: $font;
|
||||
font-size: $normalfontsize;
|
||||
text-decoration: none;
|
||||
color: $linkcolor;
|
||||
&:hover{
|
||||
color: $linkhovercolor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
//Mise en place de la navbar responsive
|
||||
.menu-checkbox:checked ~ .menu {
|
||||
display: block;
|
||||
}
|
||||
.menu-toggle {
|
||||
padding: 0.5em 1em;
|
||||
&:hover{
|
||||
color: $linkhovercolor;
|
||||
text-decoration: underline
|
||||
}
|
||||
}
|
||||
//style des liens
|
||||
input{
|
||||
background-color: $inputcolor;
|
||||
}
|
||||
//Style du titre
|
||||
h1{
|
||||
font-size: 35px;
|
||||
color: $titlecrosscolor;
|
||||
background-color: $backgroundtitlecolor;
|
||||
text-align: center;
|
||||
font-family: $font;
|
||||
padding: 15px;
|
||||
}
|
||||
//style du paragraphe
|
||||
p{
|
||||
font-size: $normalfontsize;
|
||||
font-family: $font;
|
||||
text-align: center;
|
||||
color: $fontcolor;
|
||||
}
|
||||
// Mise en form du footer
|
||||
#foot{
|
||||
text-align: center;
|
||||
font-family: $font;
|
||||
color: $fontcolor;
|
||||
font-size: $normalfontsize;
|
||||
padding: 25px;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
transform: Translate(-50%);
|
||||
left: 50%;
|
||||
span, a{
|
||||
padding-left: 20px;
|
||||
}
|
||||
a {
|
||||
color: $linkcolor;
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
color: $linkhovercolor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
//début affichage boutton
|
||||
.c_hebdo, .c_daily{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.s_daily, .s_hebdo{
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
Les plus :
|
||||
- footer responsive
|
||||
- overlay
|
||||
- type email sur champs email + pattern
|
||||
- lisibilité du code
|
||||
- utilisation d'icones font (même si pas icomoon)
|
||||
|
||||
Les moins :
|
||||
- manque un peu de padding dans certaines résolutions
|
||||
- menu un peu limite en petite résolutions
|
||||
- popin non ouvert au chargement
|
||||
- checkbox des newsletter ko
|
||||
- beaucoup de divs imbriquées
|
||||
- intégralité du contenu en h2 ?
|
||||
- manque de title, aria-
|
||||
- pas de description ni keywords
|
||||
|
||||
|
||||
@ -0,0 +1,343 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
/* Document
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
html {
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
hr {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
/* 1 */
|
||||
height: 0;
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
legend {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
display: table;
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
white-space: normal;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
/*# sourceMappingURL=normalize.css.map */
|
||||
@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,586 @@
|
||||
@charset "UTF-8";
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
/* Document
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap");
|
||||
html {
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
hr {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
/* 1 */
|
||||
height: 0;
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
legend {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
display: table;
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
white-space: normal;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/****************************************************
|
||||
VARIABLES COULEURS
|
||||
*****************************************************/
|
||||
:root {
|
||||
--fond-standard: #fcfafc;
|
||||
--couleur-liens: #660066;
|
||||
--couleur-ecriture: #330033;
|
||||
--liens-hover: #eeaaee;
|
||||
--couleur-white: #ffffff;
|
||||
--couleur-fond-titre: #663366;
|
||||
--fond: var(--fond-standard);
|
||||
--liens: var(--couleur-liens);
|
||||
--ecriture: var(--couleur-ecriture);
|
||||
--hover: var(--liens-hover);
|
||||
--white: var(--couleur-white);
|
||||
--fond-titre: var(--couleur-fond-titre);
|
||||
}
|
||||
|
||||
/****************************************************
|
||||
GLOBAL
|
||||
*****************************************************/
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html body, body body {
|
||||
display: table;
|
||||
width: 100%;
|
||||
background-color: var(--fond);
|
||||
font-family: "Rubik", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--liens);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/****************************************************
|
||||
HEADER
|
||||
*****************************************************/
|
||||
nav {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/****************************************************
|
||||
MAIN
|
||||
*****************************************************/
|
||||
h1, h2, h3 {
|
||||
background-color: var(--fond-titre);
|
||||
color: var(--fond);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--ecriture);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.haut, .millieu {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.haut a {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.modal-dialog .modal-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.row-form {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.row-form label {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-form input {
|
||||
width: 50%;
|
||||
height: 20%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideDownFadeIN {
|
||||
from {
|
||||
top: -100px;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownFadeIN {
|
||||
from {
|
||||
top: -100px;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
top: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
left: 0;
|
||||
top: 0;
|
||||
top: 130px;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
overflow: auto;
|
||||
background-color: black;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal:target {
|
||||
display: table;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.modal:target .modal-dialog {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.modal-dialog .modal-content {
|
||||
margin: auto;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 1px #777 solid;
|
||||
text-align: justify;
|
||||
height: 75%;
|
||||
-webkit-animation-name: slideDownFadeIN;
|
||||
animation-name: slideDownFadeIN;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.modal-dialog .modal-content .closebtn {
|
||||
text-decoration: none;
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
padding: -20px -20px 0 -20px;
|
||||
}
|
||||
|
||||
.container-contact {
|
||||
margin-top: 20px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/****************************************************
|
||||
FOOTER
|
||||
*****************************************************/
|
||||
footer {
|
||||
display: table-row;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
footer nav {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
/*=======================================================
|
||||
MEDIA QUERIES
|
||||
=========================================================*/
|
||||
/******************************************************************************/
|
||||
/*========================= RESPONSIVE TABLETTE ======================*/
|
||||
@media screen and (min-width: 768px) {
|
||||
/*s'applique à partir de 768px et au-delà*/
|
||||
/* ============ GLOBAL ==============*/
|
||||
/* ============ HEADER ==============*/
|
||||
/* ============ MAIN ==============*/
|
||||
.modal-dialog .modal-content {
|
||||
width: 50%;
|
||||
}
|
||||
.modal {
|
||||
top: 130px;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
/* ============ FOOTER ==============*/
|
||||
}
|
||||
|
||||
/*fermeture @media tablette*/
|
||||
/******************************************************************************/
|
||||
/*========================= RESPONSIVE DESKTOP ======================*/
|
||||
@media screen and (min-width: 1025px) {
|
||||
/*s'applique à partir de 1025px et au-delà*/
|
||||
/* ============ GLOBAL ==============*/
|
||||
/* ============ HEADER ==============*/
|
||||
/* ============ MAIN ==============*/
|
||||
/* ============ FOOTER ==============*/
|
||||
}
|
||||
|
||||
/*fermeture @media desktop*/
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
@ -0,0 +1,228 @@
|
||||
@import "normalize.scss";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
|
||||
$font: 'Rubik', sans-serif;
|
||||
|
||||
/****************************************************
|
||||
VARIABLES COULEURS
|
||||
*****************************************************/
|
||||
|
||||
:root {
|
||||
--fond-standard: #fcfafc;
|
||||
--couleur-liens: #660066;
|
||||
--couleur-ecriture: #330033;
|
||||
--liens-hover: #eeaaee;
|
||||
--couleur-white: #ffffff;
|
||||
--couleur-fond-titre: #663366;
|
||||
|
||||
--fond: var(--fond-standard);
|
||||
--liens: var(--couleur-liens);
|
||||
--ecriture: var(--couleur-ecriture);
|
||||
--hover: var(--liens-hover);
|
||||
--white: var(--couleur-white);
|
||||
--fond-titre: var(--couleur-fond-titre);
|
||||
}
|
||||
|
||||
/****************************************************
|
||||
GLOBAL
|
||||
*****************************************************/
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0; padding: 0;
|
||||
body {
|
||||
display : table;
|
||||
width: 100%;
|
||||
background-color: var(--fond);
|
||||
font-family: $font;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--liens);
|
||||
&:hover {
|
||||
color: var(--hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************************
|
||||
HEADER
|
||||
*****************************************************/
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************************
|
||||
MAIN
|
||||
*****************************************************/
|
||||
|
||||
h1, h2, h3 {
|
||||
background-color: var(--fond-titre);
|
||||
color: var(--fond);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--ecriture);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.haut, .millieu {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.haut {
|
||||
a {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog .modal-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.row-form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
label {
|
||||
width: 50%;
|
||||
}
|
||||
input {
|
||||
width: 50%;
|
||||
height: 20%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownFadeIN {
|
||||
from {top:-100px;opacity: 0;}
|
||||
to {top:0px;opacity:1;}
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
left: 0;
|
||||
top: 0;
|
||||
top: 130px;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.modal:target {
|
||||
display: table;
|
||||
position: absolute;
|
||||
.modal-dialog {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog .modal-content {
|
||||
margin: auto;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 1px #777 solid;
|
||||
text-align: justify;
|
||||
height: 75%;
|
||||
animation-name: slideDownFadeIN;
|
||||
animation-duration: 0.5s;
|
||||
border-radius: 30px;
|
||||
.closebtn {
|
||||
text-decoration: none;
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
padding: -20px -20px 0 -20px;
|
||||
}
|
||||
}
|
||||
|
||||
.container-contact {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/****************************************************
|
||||
FOOTER
|
||||
*****************************************************/
|
||||
|
||||
footer {
|
||||
display : table-row;
|
||||
height: 100px;
|
||||
nav {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
/*=======================================================
|
||||
MEDIA QUERIES
|
||||
=========================================================*/
|
||||
/******************************************************************************/
|
||||
|
||||
/*========================= RESPONSIVE TABLETTE ======================*/
|
||||
|
||||
@media screen and (min-width: 768px){ /*s'applique à partir de 768px et au-delà*/
|
||||
|
||||
/* ============ GLOBAL ==============*/
|
||||
|
||||
/* ============ HEADER ==============*/
|
||||
|
||||
/* ============ MAIN ==============*/
|
||||
|
||||
.modal-dialog .modal-content {
|
||||
width: 50%;
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
.modal {
|
||||
top: 130px;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
/* ============ FOOTER ==============*/
|
||||
|
||||
} /*fermeture @media tablette*/
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
/*========================= RESPONSIVE DESKTOP ======================*/
|
||||
|
||||
@media screen and (min-width: 1025px){ /*s'applique à partir de 1025px et au-delà*/
|
||||
|
||||
/* ============ GLOBAL ==============*/
|
||||
|
||||
/* ============ HEADER ==============*/
|
||||
|
||||
/* ============ MAIN ==============*/
|
||||
|
||||
/* ============ FOOTER ==============*/
|
||||
|
||||
} /*fermeture @media desktop*/
|
||||
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
Les plus :
|
||||
- switch newsletter ok
|
||||
- type email sur champs de saisie mail
|
||||
- menu responsive (mais pourquoi nos newsletters est pas dans le menu ?)
|
||||
- case à cocher masquage / affichage de la popin fonctionne (mais pas lié à un label ?)
|
||||
|
||||
Les moins :
|
||||
- il y a beaucoup de fichier inutiles à la racine
|
||||
- manque de title, aria-
|
||||
- pas de description ni keywords
|
||||
- pas de header / footer
|
||||
- pas de variables ni css ni scss
|
||||
- pas de commentaires
|
||||
- pas d'overlay
|
||||
- bleu des liens hors charte et non lisible sur le violet
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@ -0,0 +1,30 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?ppseg1');
|
||||
src: url('fonts/icomoon.eot?ppseg1#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?ppseg1') format('truetype'),
|
||||
url('fonts/icomoon.woff?ppseg1') format('woff'),
|
||||
url('fonts/icomoon.svg?ppseg1#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-cross:before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="style-main.css" />
|
||||
<link rel="stylesheet" href="crossform.css" />
|
||||
<title>Site d'informations culturelles et sportives</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav id="main-menu">
|
||||
<img src="burgermenu.PNG" alt="" id="menuburger">
|
||||
<input type="checkbox" id="switch" hidden />
|
||||
<label for="switch" class="menu-label">Menu</label>
|
||||
|
||||
<a href="https://www.google.fr/" class="boutons">Accueil</a><a href="https://www.google.fr/" class="boutons">A
|
||||
propos</a><a href="http://127.0.0.1:5500/index.html?mail=" class="">Nos newsletter</a>
|
||||
</nav>
|
||||
|
||||
<main id="mainpagetext">
|
||||
<h1><strong>Site d'informations culturelles et sportives</strong></h1>
|
||||
<p>
|
||||
Bonjour et bienvenu sur notre site,
|
||||
Depuis cette page nous vous invitons à choisir les abonnements aux newsletter qui vous conviennent.
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<input type="checkbox" id="formswitch">
|
||||
|
||||
<form id="formulairecontact" method="get" action="">
|
||||
<h4>S'abonner à <i class="icon-cross"></i></h4>
|
||||
<label for="formswitch" class="boutons">fermer</label>
|
||||
<span>fermer le formulaire</span>
|
||||
|
||||
<hr />
|
||||
<input type="checkbox" required name="sport" id="sport" /><label for="sport">sports et activités
|
||||
sportives</label>
|
||||
<input type="radio" required class="frequence1" name="sport_freq" value="hebdo" /><label class="frequence1"
|
||||
for="frequence1">Hebdomadaire</label>
|
||||
<input type="radio" required class="frequence1" name="sport_freq" value="daily" /><label class="frequence1"
|
||||
for="frequence1">Journalier</label>
|
||||
|
||||
<br />
|
||||
<input type="checkbox" name="culture" id="culture" /><label for="culture">arts et cultures</label>
|
||||
<input type="radio" required class="frequence2" name="culture_freq" value="hebdo" /><label class="frequence2"
|
||||
for="frequence2">Hebdomadaire</label>
|
||||
<input type="radio" required id="frequence2" name="culture_freq" value="daily" /><label class="frequence2"
|
||||
for="frequence2">Journalier</label>
|
||||
|
||||
<hr />
|
||||
<input type="email" required name="mail" placeholder="votre email" />
|
||||
<button id="valider" type="submit">Enregistrer mon abonnement</button>
|
||||
</form>
|
||||
<div id="basdepage">
|
||||
<p>
|
||||
© S&C diffusion 2021
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://www.instagram.com/s-et-c">Rejoindre notre communauté</a></li>
|
||||
<a href="contact@s-et-c.fr">Nous écrire</a></li>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,128 @@
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-family: sans-serif;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#menuburger {
|
||||
max-width: 10%;
|
||||
position: center;
|
||||
}
|
||||
|
||||
.boutons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#switch:checked ~ .boutons {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.frequence1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.frequence2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sport:checked ~ .frequence1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#culture:checked ~ .frequence2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#formulairecontact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fcfafc;
|
||||
color: #330033;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
#formswitch:checked ~ #formulairecontact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mainpagetext {
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
h4 {
|
||||
background-color: #663366;
|
||||
color: #fcfafc;
|
||||
}
|
||||
|
||||
label {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #660066;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
color: #eeaaee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.icon-cross {
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
#basdepage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background-color: #660066;
|
||||
color: white;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
#main-menu {
|
||||
margin: -6px;
|
||||
}
|
||||
|
||||
#main-menu .boutons {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin: 0;
|
||||
padding: 3px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main-menu #menuburger, #main-menu .menu-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style-main.css.map */
|
||||
@ -0,0 +1,125 @@
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-family: sans-serif;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#menuburger {
|
||||
max-width: 10%;
|
||||
position: center;
|
||||
}
|
||||
|
||||
.boutons{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#switch:checked ~ .boutons{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.frequence1{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.frequence2{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#sport:checked ~ .frequence1{
|
||||
display:block;
|
||||
}
|
||||
|
||||
#culture:checked ~ .frequence2{
|
||||
display:block;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#formulairecontact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fcfafc;
|
||||
color: #330033;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
max-width:70%;
|
||||
}
|
||||
|
||||
#formswitch:checked ~ #formulairecontact{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mainpagetext{
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
h4{
|
||||
background-color: #663366;
|
||||
color:#fcfafc;
|
||||
}
|
||||
|
||||
label{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
span{
|
||||
color: #660066;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
color:#eeaaee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.icon-cross{
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
#basdepage{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background-color: #660066;
|
||||
color:white;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
min-width:100%;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
#main-menu {
|
||||
margin: -6px;
|
||||
}
|
||||
#main-menu .boutons {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin: 0;
|
||||
padding: 3px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
#main-menu #menuburger, #main-menu .menu-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,125 @@
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-family: sans-serif;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#menuburger {
|
||||
max-width: 10%;
|
||||
position: center;
|
||||
}
|
||||
|
||||
.boutons{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#switch:checked ~ .boutons{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.frequence1{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.frequence2{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#sport:checked ~ .frequence1{
|
||||
display:block;
|
||||
}
|
||||
|
||||
#culture:checked ~ .frequence2{
|
||||
display:block;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#formulairecontact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fcfafc;
|
||||
color: #330033;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
max-width:70%;
|
||||
}
|
||||
|
||||
#formswitch:checked ~ #formulairecontact{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mainpagetext{
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
h4{
|
||||
background-color: #663366;
|
||||
color:#fcfafc;
|
||||
}
|
||||
|
||||
label{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
span{
|
||||
color: #660066;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
color:#eeaaee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.icon-cross{
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
#basdepage{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background-color: #660066;
|
||||
color:white;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
min-width:100%;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
#main-menu {
|
||||
margin: -6px;
|
||||
}
|
||||
#main-menu .boutons {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin: 0;
|
||||
padding: 3px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
#main-menu #menuburger, #main-menu .menu-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
Les plus :
|
||||
- variables scss, même si leur utilisation est partielle
|
||||
- l'utilisation du pattern (même si limitant)
|
||||
|
||||
Les moins :
|
||||
- pourquoi avoir laissé tous les fichiers icomoon à la racine ? c'est source de confusion
|
||||
- manque de title, aria-
|
||||
- pas de description ni keywords
|
||||
- pas de police sans serif, pas de reponsive
|
||||
- contenu de la page pas dans le main ?
|
||||
- impossible de fermer la popin
|
||||
- pattern de l'email n'autorisent que les mails globex ??? un type email aurait été un plus
|
||||
- style css aurait put être inclu...
|
||||
@ -0,0 +1,7 @@
|
||||
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
|
||||
|
||||
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
|
||||
|
||||
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
|
||||
|
||||
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
|
||||
@ -0,0 +1,152 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
background: #fff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
small {
|
||||
font-size: .66666667em;
|
||||
}
|
||||
a {
|
||||
color: #e74c3c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
box-shadow: 0 1px #e74c3c;
|
||||
}
|
||||
.bshadow0, input {
|
||||
box-shadow: inset 0 -2px #e7e7e7;
|
||||
}
|
||||
input:hover {
|
||||
box-shadow: inset 0 -2px #ccc;
|
||||
}
|
||||
input, fieldset {
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
input {
|
||||
color: inherit;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
padding: .25em 0;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 -2px #449fdb;
|
||||
}
|
||||
.glyph {
|
||||
font-size: 16px;
|
||||
width: 15em;
|
||||
padding-bottom: 1em;
|
||||
margin-right: 4em;
|
||||
margin-bottom: 1em;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.liga {
|
||||
width: 80%;
|
||||
width: calc(100% - 2.5em);
|
||||
}
|
||||
.talign-right {
|
||||
text-align: right;
|
||||
}
|
||||
.talign-center {
|
||||
text-align: center;
|
||||
}
|
||||
.bgc1 {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.fgc1 {
|
||||
color: #999;
|
||||
}
|
||||
.fgc0 {
|
||||
color: #000;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.mvm {
|
||||
margin-top: .75em;
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
.mtn {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mtl, .mal {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.mbl, .mal {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.mal, .mhl {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.mhmm {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.mls {
|
||||
margin-left: .25em;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
.pbs, .pvs {
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
.pvs, .pts {
|
||||
padding-top: .25em;
|
||||
}
|
||||
.unit {
|
||||
float: left;
|
||||
}
|
||||
.unitRight {
|
||||
float: right;
|
||||
}
|
||||
.size1of2 {
|
||||
width: 50%;
|
||||
}
|
||||
.size1of1 {
|
||||
width: 100%;
|
||||
}
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.hidden-true {
|
||||
display: none;
|
||||
}
|
||||
.textbox0 {
|
||||
width: 3em;
|
||||
background: #f1f1f1;
|
||||
padding: .25em .5em;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
}
|
||||
#testDrive {
|
||||
display: block;
|
||||
padding-top: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.fs0 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fs1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
if (!('boxShadow' in document.body.style)) {
|
||||
document.body.setAttribute('class', 'noBoxShadow');
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", function(e) {
|
||||
var target = e.target;
|
||||
if (target.tagName === "INPUT" &&
|
||||
target.getAttribute('class').indexOf('liga') === -1) {
|
||||
target.select();
|
||||
}
|
||||
});
|
||||
|
||||
(function() {
|
||||
var fontSize = document.getElementById('fontSize'),
|
||||
testDrive = document.getElementById('testDrive'),
|
||||
testText = document.getElementById('testText');
|
||||
function updateTest() {
|
||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||
if (window.icomoonLiga) {
|
||||
window.icomoonLiga(testDrive);
|
||||
}
|
||||
}
|
||||
function updateSize() {
|
||||
testDrive.style.fontSize = fontSize.value + 'px';
|
||||
}
|
||||
fontSize.addEventListener('change', updateSize, false);
|
||||
testText.addEventListener('input', updateTest, false);
|
||||
testText.addEventListener('change', updateTest, false);
|
||||
updateSize();
|
||||
}());
|
||||
@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IcoMoon Demo</title>
|
||||
<meta name="description" content="An Icon Font Generated By IcoMoon.io">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="demo-files/demo.css">
|
||||
<link rel="stylesheet" href="style.css"></head>
|
||||
<body>
|
||||
<div class="bgc1 clearfix">
|
||||
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs: 1)</small></h1>
|
||||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: 16</h1>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<i class="icon-cross"></i>
|
||||
<span class="mls"> icon-cross</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="ea0f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="cross, cancel" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--[if gt IE 8]><!-->
|
||||
<div class="mhl clearfix mbl">
|
||||
<h1>Font Test Drive</h1>
|
||||
<label>
|
||||
Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
|
||||
min="8" value="48" />
|
||||
px
|
||||
</label>
|
||||
<input id="testText" type="text" class="phl size1of1 mvl"
|
||||
placeholder="Type some text to test..." value=""/>
|
||||
<div id="testDrive" class="icomoon-liga" style="font-family: icomoon">
|
||||
</div>
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
<div class="bgc1 clearfix">
|
||||
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
|
||||
</div>
|
||||
|
||||
<script src="demo-files/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1 @@
|
||||
{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M1014.662 822.66c-0.004-0.004-0.008-0.008-0.012-0.010l-310.644-310.65 310.644-310.65c0.004-0.004 0.008-0.006 0.012-0.010 3.344-3.346 5.762-7.254 7.312-11.416 4.246-11.376 1.824-24.682-7.324-33.83l-146.746-146.746c-9.148-9.146-22.45-11.566-33.828-7.32-4.16 1.55-8.070 3.968-11.418 7.31 0 0.004-0.004 0.006-0.008 0.010l-310.648 310.652-310.648-310.65c-0.004-0.004-0.006-0.006-0.010-0.010-3.346-3.342-7.254-5.76-11.414-7.31-11.38-4.248-24.682-1.826-33.83 7.32l-146.748 146.748c-9.148 9.148-11.568 22.452-7.322 33.828 1.552 4.16 3.97 8.072 7.312 11.416 0.004 0.002 0.006 0.006 0.010 0.010l310.65 310.648-310.65 310.652c-0.002 0.004-0.006 0.006-0.008 0.010-3.342 3.346-5.76 7.254-7.314 11.414-4.248 11.376-1.826 24.682 7.322 33.83l146.748 146.746c9.15 9.148 22.452 11.568 33.83 7.322 4.16-1.552 8.070-3.97 11.416-7.312 0.002-0.004 0.006-0.006 0.010-0.010l310.648-310.65 310.648 310.65c0.004 0.002 0.008 0.006 0.012 0.008 3.348 3.344 7.254 5.762 11.414 7.314 11.378 4.246 24.684 1.826 33.828-7.322l146.746-146.748c9.148-9.148 11.57-22.454 7.324-33.83-1.552-4.16-3.97-8.068-7.314-11.414z"],"tags":["cross","cancel","close","quit","remove"],"defaultCode":59919,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"cross, cancel","name":"cross","order":6,"id":272,"prevSize":32,"code":59919},"setIdx":0,"setId":1,"iconIdx":271}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"showSelector":true,"selector":"i"},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"icomoon"},"historySize":50,"showCodes":true,"gridSize":16}}
|
||||
@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src:
|
||||
url('fonts/icomoon.ttf?tm4k0u') format('truetype'),
|
||||
url('fonts/icomoon.woff?tm4k0u') format('woff'),
|
||||
url('fonts/icomoon.svg?tm4k0u#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
i {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-cross:before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
@ -0,0 +1,106 @@
|
||||
body {
|
||||
font-style: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container form {
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
background-color: #fcfafc;
|
||||
}
|
||||
|
||||
.container form .icon-cross {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background-color: #663366;
|
||||
text-align: center;
|
||||
color: #fcfafc;
|
||||
}
|
||||
|
||||
h4 {
|
||||
background-color: #663366;
|
||||
color: #fcfafc;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.expandable {
|
||||
visibility: collapse;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
#sport:checked ~ * .expandable {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#sport:checked ~ #expand-btn {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
#culture:checked ~ * .expandable {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#culture:checked ~ #expand-btn {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #330033;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #eeaaee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
@ -0,0 +1,100 @@
|
||||
///////////////variables/////////////////////////////////
|
||||
|
||||
$background_principal: #fcfafc;
|
||||
$couleur_police_standard: #330033;
|
||||
$couleur_liens: #660066;
|
||||
$couleur_liens_hover: #eeaaee;
|
||||
$couleur_champs_fond_form: white;
|
||||
$text_titre: #fcfafc;
|
||||
$couleur_titre_fond: #663366;
|
||||
$font_sans_serif: sans-serif;
|
||||
|
||||
///////////////////////////////////////////////////////
|
||||
|
||||
body {
|
||||
font-style: $font_sans_serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
form {
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
background-color: $background_principal;
|
||||
.icon-cross {
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
background-color: $couleur_titre_fond;
|
||||
text-align: center;
|
||||
color: $text_titre;
|
||||
}
|
||||
h4 {
|
||||
background-color: $couleur_titre_fond;
|
||||
color: $text_titre;
|
||||
}
|
||||
label {
|
||||
color: $couleur_police_standard;
|
||||
}
|
||||
nav {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.expandable {
|
||||
visibility: collapse;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
#sport:checked ~ * .expandable {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#sport:checked ~ #expand-btn {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
#culture:checked ~ * .expandable {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#culture:checked ~ #expand-btn {
|
||||
background-color: #ccc;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
ul {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $couleur_police_standard;
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: $couleur_liens_hover;
|
||||
text-decoration: underline;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
Les plus :
|
||||
- éléments sémantiques présents
|
||||
- élément figure utilisé
|
||||
|
||||
Les moins :
|
||||
- pas de description ni keywords ni title...
|
||||
- pas de scss
|
||||
- fichier icomoon manquants
|
||||
- pas de type email sur saisie du mail
|
||||
- pas de responsive
|
||||
- pas de couleurs de la charte
|
||||
@ -0,0 +1,54 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?oqewlq');
|
||||
src: url('fonts/icomoon.eot?oqewlq#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?oqewlq') format('truetype'),
|
||||
url('fonts/icomoon.woff?oqewlq') format('woff'),
|
||||
url('fonts/icomoon.svg?oqewlq#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak-as: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-cheveron-outline-left:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-cheveron-outline-right:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-cross:before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
.icon-circle-down:before {
|
||||
content: "\ea43";
|
||||
}
|
||||
.icon-checkbox-checked:before {
|
||||
content: "\ea52";
|
||||
}
|
||||
.icon-checkbox-unchecked:before {
|
||||
content: "\ea53";
|
||||
}
|
||||
.icon-radio-checked:before {
|
||||
content: "\ea54";
|
||||
}
|
||||
.icon-radio-checked2:before {
|
||||
content: "\ea55";
|
||||
}
|
||||
.icon-radio-unchecked:before {
|
||||
content: "\ea56";
|
||||
}
|
||||
|
After Width: | Height: | Size: 412 KiB |
@ -0,0 +1,18 @@
|
||||
*{
|
||||
font-family: 'Lato';
|
||||
}
|
||||
button {
|
||||
background-color: black;
|
||||
border: solid 2px black;
|
||||
border-radius: 4px;
|
||||
padding: 5px 20px;
|
||||
text-align: center;
|
||||
color:white;
|
||||
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: white;
|
||||
color: black;
|
||||
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
* {
|
||||
font-family: "Lato";
|
||||
}
|
||||
#navigation {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding-left: 1px;
|
||||
height: 40px;
|
||||
background-color: rgba(255, 207, 145, 0.815);
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-family: "Lato", bold;
|
||||
font-weight: 20px;
|
||||
margin-left: 20px;
|
||||
margin-inline: 30px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
#liens{
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-family: "Lato", bold;
|
||||
font-weight: 20px;
|
||||
margin-left: 20px;
|
||||
margin-inline: 30px;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#formulaire{
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
padding: 70px;
|
||||
margin: 40px;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 10%;
|
||||
border-right: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
button {
|
||||
background-color: black;
|
||||
border: solid 2px black;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color:white;
|
||||
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: white;
|
||||
color: black;
|
||||
|
||||
}
|
||||
img {
|
||||
width: 90vw;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 30px;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
Les plus :
|
||||
- media queries
|
||||
- respect des couleurs
|
||||
- switchs newsletters fonctionnels
|
||||
- si le css généré avait utilisé : hovers ok (mais couleurs incorrectes)
|
||||
|
||||
Les moins :
|
||||
- pas de header, pas de main
|
||||
- pas de description ni keywords ni title...
|
||||
- selecteurs principaux sur balises et pas sur classes
|
||||
- html utilise le scss directement ... ce qui ne fonctionne que partiellement
|
||||
- pas de type email sur saisie du mail
|
||||
- inclure le icon.css dans le scss aurait permi un appel réseau de moins
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src:
|
||||
url('fonts/icomoon.ttf?hzi61v') format('truetype'),
|
||||
url('fonts/icomoon.woff?hzi61v') format('woff'),
|
||||
url('fonts/icomoon.svg?hzi61v#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-cross:before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="icon.css">
|
||||
<title></title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Retour à l'accueil</a></li>
|
||||
<li><a href="#">A propos</a></li>
|
||||
<li><a href="#">Nos newsletter</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1>Sport et culture</h1>
|
||||
<p>Bonjour et bienvenu sur notre site,
|
||||
Depuis cette page nous vous invitons à choisir les abonnements aux newsletter qui vous conviennent.</p>
|
||||
|
||||
<div id="abonnement">
|
||||
<label for="open" id="ouvrir">S'abonner à une newsletter</label>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" name="fermer" id="close" hidden>
|
||||
<input type="checkbox" name="ouvrir" id="open" hidden checked>
|
||||
|
||||
<div id="modal">
|
||||
<form method="get">
|
||||
<h4>S'abonner à <span for="close" class="icon-cross"></span> </h4>
|
||||
|
||||
<hr />
|
||||
<div>
|
||||
<input type="checkbox" name="sport" id="sport" required /><label for="sport">sports et activités
|
||||
sportives</label>
|
||||
<input type="radio" id="s_hebdo" class="sport_abo" name="sport_freq" value="hebdo" /><label
|
||||
for="s_hebdo" class="sport_abo">Hebdomadaire</label>
|
||||
<input type="radio" id="s_daily" class="sport_abo" name="sport_freq" value="daily" /><label
|
||||
for="s_daily" class="sport_abo">Journalier</label>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<input type="checkbox" name="culture" id="culture" required /><label for="culture">arts et
|
||||
cultures</label>
|
||||
<input type="radio" id="c_hebdo" class="culture_abo" name="culture_freq" value="hebdo" /><label
|
||||
for="c_hebdo" class="culture_abo">Hebdomadaire</label>
|
||||
<input type="radio" id="c_daily" class="culture_abo" name="culture_freq" value="daily" /><label
|
||||
for="c_daily" class="culture_abo">Journalier</label>
|
||||
</div>
|
||||
<hr />
|
||||
<input type="text" name="mail" required placeholder="votre email" /><button type="submit">Enregistrer mon
|
||||
abonnement</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>rejoigner notre communauté</p>
|
||||
<a href="https://www.instagram.com/s-et-c">instagram</a>
|
||||
<a href="mailto:contact@s-et-c.fr">mail</a>
|
||||
<p>© S&C diffusion 2021</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,136 @@
|
||||
@media (max-width: 778px) {
|
||||
#modal {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 386px) {
|
||||
#modal {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #fcfafc;
|
||||
color: #330033;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h4 {
|
||||
background-color: #663366;
|
||||
color: #fcfafc;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #660066;
|
||||
}
|
||||
a:hover {
|
||||
color: #aaeed7;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
form > div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#modal {
|
||||
width: 50%;
|
||||
height: 30%;
|
||||
border-radius: 20px;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.sport_abo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.culture_abo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sport:checked ~ .sport_abo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#culture:checked ~ .culture_abo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#close:checked ~ #modal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#close:checked + #open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#open:checked + #modal {
|
||||
width: 50%;
|
||||
height: 30%;
|
||||
border-radius: 20px;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#abonnement {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
padding: 10px;
|
||||
background-color: #663366;
|
||||
color: #fcfafc;
|
||||
margin-top: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
footer > a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
@ -0,0 +1,149 @@
|
||||
@media (max-width: 778px) {
|
||||
#modal{
|
||||
width: 50%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 386px) {
|
||||
#modal{
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
background-color: #fcfafc;
|
||||
color: #330033;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h4{
|
||||
background-color: #663366;
|
||||
color: #fcfafc;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
||||
ul{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
li{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a{
|
||||
color: #660066;
|
||||
|
||||
&:hover{
|
||||
color: #aaeed7;
|
||||
text-decoration: underline;
|
||||
}
|
||||
// le hover ne marche pas en css mais pas en scss //
|
||||
}
|
||||
|
||||
p{
|
||||
text-align: center;
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
// mise en forme de la modal //
|
||||
|
||||
form>div{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#modal{
|
||||
width: 50%;
|
||||
height: 30%;
|
||||
border-radius: 20px;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
}
|
||||
|
||||
input{
|
||||
background-color: white;
|
||||
}
|
||||
.sport_abo{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.culture_abo{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sport:checked ~ .sport_abo{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#culture:checked ~ .culture_abo{
|
||||
display: block;
|
||||
}
|
||||
|
||||
// fermeture et ouverture de la modal//
|
||||
|
||||
#close:checked ~#modal{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#close:checked + #open{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#open:checked + #modal{
|
||||
width: 50%;
|
||||
height: 30%;
|
||||
border-radius: 20px;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
#abonnement{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left:50%;
|
||||
transform: translate(-50%);
|
||||
padding: 10px;
|
||||
background-color: #663366;
|
||||
color: #fcfafc;
|
||||
margin-top: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
span{
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
footer{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
footer>a{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
Les plus :
|
||||
- elements SEO
|
||||
- ensemble des éléments fonctionels faits
|
||||
- menu responsive
|
||||
- type email sur champs email
|
||||
- centrage et overlay
|
||||
|
||||
|
||||
Les moins :
|
||||
- pourquoi du js pour la modale ?
|
||||
- un footer aurait été un plus
|
||||
- fusionner css icomoon et css de base aurait évité un appel réseau.
|
||||
- manque de title, aria-
|
||||
- pas de variables
|
||||
- pas de commentaires
|
||||
- appels externes inutiles
|
||||
- un peu de padding / margin sur le body aurait été un plus
|
||||
@ -0,0 +1,128 @@
|
||||
body
|
||||
margin: 0
|
||||
padding: 0
|
||||
font-family: 'Poppins', sans-serif
|
||||
|
||||
.modal-background
|
||||
background-color: rgba(0, 0, 0, 0.4)
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100vh
|
||||
|
||||
.modal
|
||||
background-color: #fcfafc
|
||||
color: #330033
|
||||
width: 40%
|
||||
margin: 50vh auto
|
||||
transform: translateY(-50%)
|
||||
padding: 60px 40px
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
|
||||
border-radius: 2px
|
||||
position: relative
|
||||
|
||||
h4
|
||||
font-size: 22px
|
||||
|
||||
.cursor-pointer
|
||||
cursor: pointer
|
||||
float: right
|
||||
padding-top: 5px
|
||||
padding-right: 2px
|
||||
|
||||
.modal-btn
|
||||
float: right
|
||||
font-family: 'Poppins', sans-serif
|
||||
padding: 6px 10px
|
||||
|
||||
.modal-mail
|
||||
display: block
|
||||
width: 100%
|
||||
margin: 20px 0
|
||||
padding: 10px 6px
|
||||
font-family: 'Poppins', sans-serif
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
|
||||
.hidden-radio ~ .hides
|
||||
display: none
|
||||
|
||||
.hidden-radio:checked ~ .hides
|
||||
display: inline-block
|
||||
|
||||
.hidden
|
||||
display: none
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
background-color: #663366
|
||||
color: #fcfafc
|
||||
|
||||
a
|
||||
color: #660066
|
||||
text-decoration: none
|
||||
|
||||
.active
|
||||
color: #eeaaee
|
||||
text-decoration: underline
|
||||
|
||||
a:hover
|
||||
color: #eeaaee
|
||||
text-decoration: underline
|
||||
|
||||
nav
|
||||
background-color: #eeeeee
|
||||
|
||||
.burger-btn
|
||||
flex-direction: column
|
||||
gap: 3px
|
||||
align-items: center
|
||||
display: none
|
||||
justify-content: center
|
||||
|
||||
&:hover
|
||||
cursor: pointer
|
||||
|
||||
.burger-btn-bar
|
||||
height: 3px
|
||||
display: block
|
||||
width: 20px
|
||||
background-color: black
|
||||
|
||||
|
||||
ul
|
||||
display: flex
|
||||
gap: 30px
|
||||
margin: 0 30px
|
||||
padding: 0
|
||||
height: 50px
|
||||
align-items: center
|
||||
|
||||
li
|
||||
list-style-type: none
|
||||
|
||||
@media (max-width: 1000px)
|
||||
.modal
|
||||
width: 60%!important
|
||||
|
||||
@media (max-width: 560px)
|
||||
.modal
|
||||
width: 80%!important
|
||||
|
||||
nav
|
||||
|
||||
.burger-btn
|
||||
display: flex
|
||||
height: 30px
|
||||
|
||||
ul
|
||||
max-height: 0
|
||||
overflow: hidden
|
||||
transition: 300ms ease
|
||||
display: block
|
||||
height: auto
|
||||
|
||||
#burger:checked ~ ul
|
||||
max-height: 300px
|
||||
padding-bottom: 30px
|
||||
@ -0,0 +1,139 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
.modal-background .modal {
|
||||
background-color: #fcfafc;
|
||||
color: #330033;
|
||||
width: 40%;
|
||||
margin: 50vh auto;
|
||||
transform: translateY(-50%);
|
||||
padding: 60px 40px;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.modal-background .modal h4 {
|
||||
font-size: 22px;
|
||||
}
|
||||
.modal-background .modal h4 .cursor-pointer {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
padding-top: 5px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
.modal-background .modal .modal-btn {
|
||||
float: right;
|
||||
font-family: "Poppins", sans-serif;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
.modal-background .modal .modal-mail {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
padding: 10px 6px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
.modal-background .modal .modal-mail:focus {
|
||||
outline: none;
|
||||
}
|
||||
.modal-background .modal .hidden-radio ~ .hides {
|
||||
display: none;
|
||||
}
|
||||
.modal-background .modal .hidden-radio:checked ~ .hides {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
background-color: #663366;
|
||||
color: #fcfafc;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #660066;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #eeaaee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #eeaaee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
nav .burger-btn {
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
align-items: center;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
}
|
||||
nav .burger-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
nav .burger-btn .burger-btn-bar {
|
||||
height: 3px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
background-color: black;
|
||||
}
|
||||
nav ul {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin: 0 30px;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
nav ul li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.modal {
|
||||
width: 60% !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.modal {
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
nav .burger-btn {
|
||||
display: flex;
|
||||
height: 30px;
|
||||
}
|
||||
nav ul {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: 300ms ease;
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
nav #burger:checked ~ ul {
|
||||
max-height: 300px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
@ -0,0 +1,7 @@
|
||||
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
|
||||
|
||||
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
|
||||
|
||||
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
|
||||
|
||||
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
|
||||
@ -0,0 +1,152 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
background: #fff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
small {
|
||||
font-size: .66666667em;
|
||||
}
|
||||
a {
|
||||
color: #e74c3c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
box-shadow: 0 1px #e74c3c;
|
||||
}
|
||||
.bshadow0, input {
|
||||
box-shadow: inset 0 -2px #e7e7e7;
|
||||
}
|
||||
input:hover {
|
||||
box-shadow: inset 0 -2px #ccc;
|
||||
}
|
||||
input, fieldset {
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
input {
|
||||
color: inherit;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
padding: .25em 0;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 -2px #449fdb;
|
||||
}
|
||||
.glyph {
|
||||
font-size: 16px;
|
||||
width: 15em;
|
||||
padding-bottom: 1em;
|
||||
margin-right: 4em;
|
||||
margin-bottom: 1em;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.liga {
|
||||
width: 80%;
|
||||
width: calc(100% - 2.5em);
|
||||
}
|
||||
.talign-right {
|
||||
text-align: right;
|
||||
}
|
||||
.talign-center {
|
||||
text-align: center;
|
||||
}
|
||||
.bgc1 {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.fgc1 {
|
||||
color: #999;
|
||||
}
|
||||
.fgc0 {
|
||||
color: #000;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.mvm {
|
||||
margin-top: .75em;
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
.mtn {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mtl, .mal {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.mbl, .mal {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.mal, .mhl {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.mhmm {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.mls {
|
||||
margin-left: .25em;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
.pbs, .pvs {
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
.pvs, .pts {
|
||||
padding-top: .25em;
|
||||
}
|
||||
.unit {
|
||||
float: left;
|
||||
}
|
||||
.unitRight {
|
||||
float: right;
|
||||
}
|
||||
.size1of2 {
|
||||
width: 50%;
|
||||
}
|
||||
.size1of1 {
|
||||
width: 100%;
|
||||
}
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.hidden-true {
|
||||
display: none;
|
||||
}
|
||||
.textbox0 {
|
||||
width: 3em;
|
||||
background: #f1f1f1;
|
||||
padding: .25em .5em;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
}
|
||||
#testDrive {
|
||||
display: block;
|
||||
padding-top: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.fs0 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fs1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
if (!('boxShadow' in document.body.style)) {
|
||||
document.body.setAttribute('class', 'noBoxShadow');
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", function(e) {
|
||||
var target = e.target;
|
||||
if (target.tagName === "INPUT" &&
|
||||
target.getAttribute('class').indexOf('liga') === -1) {
|
||||
target.select();
|
||||
}
|
||||
});
|
||||
|
||||
(function() {
|
||||
var fontSize = document.getElementById('fontSize'),
|
||||
testDrive = document.getElementById('testDrive'),
|
||||
testText = document.getElementById('testText');
|
||||
function updateTest() {
|
||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||
if (window.icomoonLiga) {
|
||||
window.icomoonLiga(testDrive);
|
||||
}
|
||||
}
|
||||
function updateSize() {
|
||||
testDrive.style.fontSize = fontSize.value + 'px';
|
||||
}
|
||||
fontSize.addEventListener('change', updateSize, false);
|
||||
testText.addEventListener('input', updateTest, false);
|
||||
testText.addEventListener('change', updateTest, false);
|
||||
updateSize();
|
||||
}());
|
||||
@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IcoMoon Demo</title>
|
||||
<meta name="description" content="An Icon Font Generated By IcoMoon.io">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="demo-files/demo.css">
|
||||
<link rel="stylesheet" href="style.css"></head>
|
||||
<body>
|
||||
<div class="bgc1 clearfix">
|
||||
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs: 1)</small></h1>
|
||||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: 16</h1>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-cross"></span>
|
||||
<span class="mls"> icon-cross</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="ea0f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="cross, cancel" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--[if gt IE 8]><!-->
|
||||
<div class="mhl clearfix mbl">
|
||||
<h1>Font Test Drive</h1>
|
||||
<label>
|
||||
Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
|
||||
min="8" value="48" />
|
||||
px
|
||||
</label>
|
||||
<input id="testText" type="text" class="phl size1of1 mvl"
|
||||
placeholder="Type some text to test..." value=""/>
|
||||
<div id="testDrive" class="icon-" style="font-family: icomoon">
|
||||
</div>
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
<div class="bgc1 clearfix">
|
||||
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
|
||||
</div>
|
||||
|
||||
<script src="demo-files/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1 @@
|
||||
{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M1014.662 822.66c-0.004-0.004-0.008-0.008-0.012-0.010l-310.644-310.65 310.644-310.65c0.004-0.004 0.008-0.006 0.012-0.010 3.344-3.346 5.762-7.254 7.312-11.416 4.246-11.376 1.824-24.682-7.324-33.83l-146.746-146.746c-9.148-9.146-22.45-11.566-33.828-7.32-4.16 1.55-8.070 3.968-11.418 7.31 0 0.004-0.004 0.006-0.008 0.010l-310.648 310.652-310.648-310.65c-0.004-0.004-0.006-0.006-0.010-0.010-3.346-3.342-7.254-5.76-11.414-7.31-11.38-4.248-24.682-1.826-33.83 7.32l-146.748 146.748c-9.148 9.148-11.568 22.452-7.322 33.828 1.552 4.16 3.97 8.072 7.312 11.416 0.004 0.002 0.006 0.006 0.010 0.010l310.65 310.648-310.65 310.652c-0.002 0.004-0.006 0.006-0.008 0.010-3.342 3.346-5.76 7.254-7.314 11.414-4.248 11.376-1.826 24.682 7.322 33.83l146.748 146.746c9.15 9.148 22.452 11.568 33.83 7.322 4.16-1.552 8.070-3.97 11.416-7.312 0.002-0.004 0.006-0.006 0.010-0.010l310.648-310.65 310.648 310.65c0.004 0.002 0.008 0.006 0.012 0.008 3.348 3.344 7.254 5.762 11.414 7.314 11.378 4.246 24.684 1.826 33.828-7.322l146.746-146.748c9.148-9.148 11.57-22.454 7.324-33.83-1.552-4.16-3.97-8.068-7.314-11.414z"],"tags":["cross","cancel","close","quit","remove"],"defaultCode":59919,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"cross, cancel","name":"cross","order":2,"id":272,"prevSize":32,"code":59919},"setIdx":0,"setId":1,"iconIdx":271}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16}}
|
||||
@ -0,0 +1,30 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?q7a1t3');
|
||||
src: url('fonts/icomoon.eot?q7a1t3#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?q7a1t3') format('truetype'),
|
||||
url('fonts/icomoon.woff?q7a1t3') format('woff'),
|
||||
url('fonts/icomoon.svg?q7a1t3#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-cross:before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Site d'information culturelle et sportive</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="icomoon/style.css">
|
||||
|
||||
<meta name="description" content="Site avec newsletter sur le sport et la culture" />
|
||||
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<meta name="keywords" content="sports, actus, culture, newsletter" />
|
||||
</head>
|
||||
<body lang="fr">
|
||||
<header>
|
||||
<nav>
|
||||
<input type="checkbox" id="burger" hidden>
|
||||
<label for="burger" class="burger-btn">
|
||||
<span class="burger-btn-bar"></span>
|
||||
<span class="burger-btn-bar"></span>
|
||||
<span class="burger-btn-bar"></span>
|
||||
</label>
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Accueil</a></li>
|
||||
<li><a href="#">À Propos</a></li>
|
||||
<li><a href="#" class="active">Nos newsletters</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h1>Site d'information culturelles et sportives.</h1>
|
||||
<a href="#" onclick="toggleModal()" class="openModal">S'inscrire à notre newsletter</a>
|
||||
<p>Bonjour et bienvenu sur notre site, <br>
|
||||
Depuis cette page nous vous invitons à choisir les abonnements aux newsletter qui vous conviennent. <br>
|
||||
© S&C diffusion 2021 <br>
|
||||
<a href="https://www.instagram.com/s-et-c">Rejoignez notre communauté</a> <br>
|
||||
<a href="mailto:contact@s-et-c.fr">Nous écrire</a>
|
||||
</main>
|
||||
|
||||
<div class="modal-background" id="modal">
|
||||
<div class="modal">
|
||||
<form method="get">
|
||||
<h4>S'abonner à <span class="icon-cross cursor-pointer" onclick="toggleModal()"></span></h4>
|
||||
<hr/>
|
||||
<div>
|
||||
<input type="checkbox" name="test" id="sport" class="hidden-radio"/>
|
||||
<label for="sport">sports et activités sportives</label>
|
||||
|
||||
<input type="radio" id="s_hebdo" name="sport_freq" value="hebdo" class="hides"/>
|
||||
<label for="s_hebdo" class="hides">Hebdomadaire</label>
|
||||
|
||||
<input type="radio" id="s_daily" name="sport_freq" value="daily" class="hides" />
|
||||
<label for="s_daily" class="hides">Journalier</label>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<div>
|
||||
<input type="checkbox" name="test" id="culture" class="hidden-radio"/>
|
||||
<label for="culture">arts et cultures</label>
|
||||
|
||||
<input type="radio" id="c_hebdo" name="culture_freq" value="hebdo" class="hides"/>
|
||||
<label for="c_hebdo" class="hides">Hebdomadaire</label>
|
||||
|
||||
<input type="radio" id="c_daily" name="culture_freq" value="daily" class="hides" />
|
||||
<label for="c_daily" class="hides">Journalier</label>
|
||||
</div>
|
||||
<hr/>
|
||||
|
||||
<input type="email" name="mail" placeholder="E-mail" class="modal-mail" required/>
|
||||
<button type="submit" class="modal-btn">Enregistrer mon abonnement</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,10 @@
|
||||
function toggleModal()
|
||||
{
|
||||
document.getElementById('modal').classList.toggle('hidden');
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
if(!document.getElementById('modal').classList.contains('hidden') && !event.target.closest('.modal') && !event.target.closest('.openModal')){
|
||||
toggleModal()
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,13 @@
|
||||
Les plus :
|
||||
- switchs newsletters fonctionnels
|
||||
- centrage ok
|
||||
|
||||
Les moins :
|
||||
- pas de description ni keywords
|
||||
- pas de scss
|
||||
- pas de commentaires
|
||||
- pas d'icones
|
||||
- pas de responsive
|
||||
- bleu sur violet non lisible
|
||||
- que des titres pas de main ?
|
||||
- pas de type email sur input mail
|
||||
@ -0,0 +1,116 @@
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
color: #330033;
|
||||
background-color: #fcfafc;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #fcfafc;
|
||||
color: #330033;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
border-color: #330033;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 5px;
|
||||
padding: 6.4px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color:#663366;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
float: left;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
display: inline;
|
||||
color: white;
|
||||
background-color: #663366;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 15px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
footer a {
|
||||
margin: 25px;
|
||||
}
|
||||
|
||||
html{
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.choix-1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sport:checked ~ .choix-1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.choix-2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#culture:checked ~ .choix-2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
Les plus :
|
||||
- modularité (beaucoup de classes et d'id)
|
||||
- un certain respect des couleurs
|
||||
- fermeture popin ok
|
||||
|
||||
Les moins :
|
||||
- pas de main
|
||||
- pas de mots-clef ni description
|
||||
- pas de variables
|
||||
- switch inline et js
|
||||
- impossible de réouvrir la popin si fermée
|
||||
- pas de scss pas de variables
|
||||
- même pas un require sur l'email, qui aurait du être de type email
|
||||
- x pour un bouton fermer n'est pas accessible
|
||||
|
||||
@ -0,0 +1,144 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fcfafc;
|
||||
background-color: #663366;
|
||||
font-size: 1.4em;
|
||||
padding: 0.9em;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #330033;
|
||||
font-size: 1.4em;
|
||||
padding: 0.9em;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fcfafc;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-right: 2rem;
|
||||
text-decoration: uppercase;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
.nav-item:first-child{
|
||||
margin-right: auto;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 560px;
|
||||
height: 270px;
|
||||
padding: 20px 30px;
|
||||
background: #fff;
|
||||
box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.15);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.popup .close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 15px;
|
||||
background: #888;
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup.closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h4{
|
||||
color: #330033;
|
||||
font-size: 1.4em;
|
||||
padding: 0.1em;
|
||||
}
|
||||
|
||||
#culture {
|
||||
margin: 0.9em;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
#sport {
|
||||
margin: 0.9em;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
#s_hebdo {
|
||||
margin: 0.9em;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
#s_daily {
|
||||
margin: 0.9em;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
#c_hebdo {
|
||||
margin: 0.9em;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
#c_daily {
|
||||
margin: 0.9em;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1em;
|
||||
color: #330033;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #fcfafc;
|
||||
background-color: #663366;
|
||||
margin: 0.1em;
|
||||
margin-left: 10em;
|
||||
padding: 0.5em;
|
||||
border-radius: 10px;
|
||||
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
h3{
|
||||
margin-top: 650px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
Les plus :
|
||||
- modularité (beaucoup de classes et d'id)
|
||||
- un certain respect des couleurs
|
||||
- switch fonctionnels
|
||||
- centrage
|
||||
|
||||
Les moins :
|
||||
- impossible de réouvrir la popin si fermée
|
||||
- pas de type email sur input mail
|
||||
- À majuscule dans menu
|
||||
- un peu plus de responsive aurait été apprécié
|
||||
- pas de scss
|
||||
- pas d'alternative sur la croix de fermeture
|
||||
- footer gris non lisible
|
||||
- pas de description ni keywords ni title...
|
||||
|
After Width: | Height: | Size: 260 B |
@ -0,0 +1,102 @@
|
||||
body {
|
||||
background-color: #fcfafc;
|
||||
color: #330033;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin: 3% 0;
|
||||
}
|
||||
header a{
|
||||
color: #330033;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
margin: 0 5%;
|
||||
}
|
||||
#title {
|
||||
color: #fcfafc;
|
||||
background-color: #663366;
|
||||
text-align: center;
|
||||
padding: 4% 0;
|
||||
}
|
||||
div#form {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background-color: rgba(0,0,0, 0.3);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
#formswitch:checked ~ div#form {
|
||||
display: block;
|
||||
}
|
||||
#popup {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
left: 50%;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
form span{
|
||||
margin-left: 95%;
|
||||
}
|
||||
form h4 {
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
}
|
||||
hr {
|
||||
margin: 3% 0;
|
||||
background-color: black;
|
||||
height: 1.5px;
|
||||
border: none;
|
||||
}
|
||||
form .choix {
|
||||
display: none;
|
||||
}
|
||||
#sport:checked ~ div.choix {
|
||||
display: inline-block;
|
||||
}
|
||||
#culture:checked ~ div.choix {
|
||||
display: inline-block;
|
||||
}
|
||||
input#mail {
|
||||
width: 100%;
|
||||
margin: 2% 0;
|
||||
border: solid black 1px;
|
||||
border-radius: 5px;
|
||||
padding: 1% 0.8%;
|
||||
}
|
||||
form button {
|
||||
border: solid 1px;
|
||||
border-radius: 10px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 2.5% 12%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
form button:hover {
|
||||
background-color: white;
|
||||
color: black;
|
||||
transition: color 1s;
|
||||
border: solid black 1px;
|
||||
}
|
||||
footer {
|
||||
background-color: grey;
|
||||
padding: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
footer a {
|
||||
color: #660066;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a:hover {
|
||||
color: #eeaaee;
|
||||
text-decoration: underline;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
footer a, span {
|
||||
margin: 0 7%;
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
Les plus :
|
||||
- style présentable
|
||||
- centrage ok
|
||||
- switch popin ok
|
||||
|
||||
Les moins :
|
||||
- pas de description ni keywords
|
||||
- title sans raport avec le contenu
|
||||
- pas de main pas de footer
|
||||
- pas de switchs checkbox
|
||||
- pages apropos et accueil non demandées
|
||||
- croix de femeture non accessible
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<ul>
|
||||
<li><a href="accueil.html">Accueil</a></li>
|
||||
<li><a href="apropos.html">À propos</a></li>
|
||||
<li><a href="index.html">Nos newsletters</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<h1>Bienvenue à l'accueil</h1>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<ul>
|
||||
<li><a href="accueil.html">Retour à l'accueil</a></li>
|
||||
<li><a href="apropos.html">À propos</a></li>
|
||||
<li><a href="index.html">Nos newsletters</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<h1>À propos de nous</h1>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,101 @@
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #330033;
|
||||
background-color: #fcfafc;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #663366;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
color: #fcfafc;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
background-color:#eeaaee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 1em;
|
||||
background-color: #660066;
|
||||
color: #fcfafc;
|
||||
}
|
||||
|
||||
.formulaire {
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
background-color: #660066;
|
||||
border-radius: 5px;
|
||||
text-transform: uppercase;
|
||||
color: #fcfafc;
|
||||
}
|
||||
|
||||
.form {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0; right: 0;
|
||||
bottom: 0; left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(77, 77, 77, .7);
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
.form:target {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form_content {
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
width: 500px;
|
||||
max-width: 90%;
|
||||
background: white;
|
||||
padding: 1.5em 2em;
|
||||
}
|
||||
|
||||
.form_close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: #330033;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.email {
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.enregistrer {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
background-color: #660066;
|
||||
border-radius: 5px;
|
||||
text-transform: uppercase;
|
||||
color: #fcfafc;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: #660066;
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
Les plus :
|
||||
- style présentable
|
||||
|
||||
|
||||
Les moins :
|
||||
- pas de sémantique
|
||||
- pas de seo
|
||||
- pas de popin
|
||||
- pas de switch
|
||||
- les css auraient pu être fusionnés
|
||||
- pas de variables
|
||||
- fichiers icomoon à la racine sont source de confusion
|
||||
@ -0,0 +1,7 @@
|
||||
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
|
||||
|
||||
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
|
||||
|
||||
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
|
||||
|
||||
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
|
||||
@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IcoMoon Demo</title>
|
||||
<meta name="description" content="An Icon Font Generated By IcoMoon.io">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="demo-files/demo.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="bgc1 clearfix">
|
||||
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs: 1)</small>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: 16</h1>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<i class="icon-cross"></i>
|
||||
<span class="mls"> icon-cross</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="ea0f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="cross, cancel" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--[if gt IE 8]><!-->
|
||||
<div class="mhl clearfix mbl">
|
||||
<h1>Font Test Drive</h1>
|
||||
<label>
|
||||
Font Size: <input id="fontSize" type="number" class="textbox0 mbm" min="8" value="48" />
|
||||
px
|
||||
</label>
|
||||
<input id="testText" type="text" class="phl size1of1 mvl" placeholder="Type some text to test..." value="" />
|
||||
<div id="testDrive" class="icomoon-liga" style="font-family: icomoon">
|
||||
</div>
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
<div class="bgc1 clearfix">
|
||||
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
|
||||
</div>
|
||||
|
||||
<script src="demo-files/demo.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Site d'information culturelles et sportives</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style2.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form method="get" id="form">
|
||||
<h1>Site d'information culturelles et sportives</h1>
|
||||
<h4>S'abonner à </h4>
|
||||
<p>Bonjour et bienvenu sur notre site, Depuis cette page nous vous invitons à choisir les abonnements aux
|
||||
newsletter qui vous conviennent.</p>
|
||||
<span id="fermer">fermer le formulaire</span> <span for="form" id="icon"><i class="icon-cross"></i></span>
|
||||
<hr />
|
||||
<input type="checkbox" checked name="sport" id="sport" /><label for="sport">sports et activités
|
||||
sportives</label>
|
||||
<input type="radio" id="s_hebdo" name="sport_freq" value="hebdo" /><label for="s_hebdo">Hebdomadaire</label>
|
||||
<input type="radio" id="s_daily" name="sport_freq" value="daily" /><label for="s_daily">Journalier</label>
|
||||
<br />
|
||||
<input type="checkbox" checked name="culture" id="culture" /><label for="culture">arts et cultures</label>
|
||||
<input type="radio" id="c_hebdo" name="culture_freq" value="hebdo" /><label for="c_hebdo">Hebdomadaire</label>
|
||||
<input type="radio" id="c_daily" name="culture_freq" value="daily" /><label for="c_daily">Journalier</label>
|
||||
<hr />
|
||||
<input type="text" id="mail" name="mail" placeholder="votre email" /><button id="mail" type="submit">Enregistrer
|
||||
mon
|
||||
abonnement</button>
|
||||
</form>
|
||||
<p>rejoigner notre communauté (lien vers <a href="https://www.instagram.com">https://www.instagram.com)</a></p>
|
||||
<p>nous écrire (lien vers <a href="contact@s-et-c.fr">contact@s-et-c.fr)</a></p>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1 @@
|
||||
{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M1014.662 822.66c-0.004-0.004-0.008-0.008-0.012-0.010l-310.644-310.65 310.644-310.65c0.004-0.004 0.008-0.006 0.012-0.010 3.344-3.346 5.762-7.254 7.312-11.416 4.246-11.376 1.824-24.682-7.324-33.83l-146.746-146.746c-9.148-9.146-22.45-11.566-33.828-7.32-4.16 1.55-8.070 3.968-11.418 7.31 0 0.004-0.004 0.006-0.008 0.010l-310.648 310.652-310.648-310.65c-0.004-0.004-0.006-0.006-0.010-0.010-3.346-3.342-7.254-5.76-11.414-7.31-11.38-4.248-24.682-1.826-33.83 7.32l-146.748 146.748c-9.148 9.148-11.568 22.452-7.322 33.828 1.552 4.16 3.97 8.072 7.312 11.416 0.004 0.002 0.006 0.006 0.010 0.010l310.65 310.648-310.65 310.652c-0.002 0.004-0.006 0.006-0.008 0.010-3.342 3.346-5.76 7.254-7.314 11.414-4.248 11.376-1.826 24.682 7.322 33.83l146.748 146.746c9.15 9.148 22.452 11.568 33.83 7.322 4.16-1.552 8.070-3.97 11.416-7.312 0.002-0.004 0.006-0.006 0.010-0.010l310.648-310.65 310.648 310.65c0.004 0.002 0.008 0.006 0.012 0.008 3.348 3.344 7.254 5.762 11.414 7.314 11.378 4.246 24.684 1.826 33.828-7.322l146.746-146.748c9.148-9.148 11.57-22.454 7.324-33.83-1.552-4.16-3.97-8.068-7.314-11.414z"],"tags":["cross","cancel","close","quit","remove"],"defaultCode":59919,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"cross, cancel","name":"cross","order":15,"id":272,"prevSize":32,"code":59919},"setIdx":0,"setId":1,"iconIdx":271}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"showSelector":true,"selector":"i"},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16}}
|
||||
@ -0,0 +1,30 @@
|
||||
body {
|
||||
color: #330033;
|
||||
font: 1em sans-serif;
|
||||
background-color: #fcfafc;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: #660066;
|
||||
}
|
||||
a:hover {
|
||||
color: #eeaaee;
|
||||
}
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
background-color: #663366;
|
||||
color: #fcfafc;
|
||||
margin: auto;
|
||||
block-size: 45px;
|
||||
text-align: center;
|
||||
}
|
||||
#icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
#fermer {
|
||||
font-size: 19px;
|
||||
}
|
||||
#mail {
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src:
|
||||
url('fonts/icomoon.ttf?dgzgp6') format('truetype'),
|
||||
url('fonts/icomoon.woff?dgzgp6') format('woff'),
|
||||
url('fonts/icomoon.svg?dgzgp6#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
i {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-cross:before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
# SESSION 5 : sujets traités.
|
||||
- evaluation
|
||||
- le carrousel en javascript: une solution
|
||||
- 2 exemple de carousel CSS pur
|
||||
- rappel sur les variable en CSS
|
||||
|
||||
Loading…
Reference in new issue