fin de cours

master
Juan 3 years ago
parent 3948be354e
commit afa2293915

1
b2-cwd/.gitignore vendored

@ -0,0 +1 @@
*.css.map

@ -1,4 +1,3 @@
#main-menu
{
.menu-label
@ -21,3 +20,53 @@
}
}
}
////// FORUMULAIRE
.cf
{
&-label,&-input
{
min-width: auto;
width: auto;
}
&-label
{
float:left;
clear:left;
padding-right:20px;
}
&-input
{
min-height: 20px;
line-height: 20px;
min-width: 20vw;
float:right;
clear:right;
box-sizing: border-box;
}
&-textarea
{
margin:8px 0;
display:block;
width:100%;
clear: both;
}
&-input-group
{
padding:4px;
margin:4px;
}
&-close-wrap
{
margin:-20px -20px 0 -20px;
}
&-btn
{
background-color: black;
color:white;
padding-left:10px;
padding-right:10px;
}
}

@ -0,0 +1,16 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe9ce;" glyph-name="eye" d="M512 768c-223.318 0-416.882-130.042-512-320 95.118-189.958 288.682-320 512-320 223.312 0 416.876 130.042 512 320-95.116 189.958-288.688 320-512 320zM764.45 598.296c60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-89.56 0-176.858 25.486-252.452 73.704-60.158 38.372-111.138 89.772-149.432 150.296 38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.86 7.3-9.96-27.328-15.41-56.822-15.41-87.596 0-141.382 114.616-256 256-256 141.382 0 256 114.618 256 256 0 30.774-5.452 60.268-15.408 87.598 3.978-2.378 7.938-4.802 11.858-7.302v0zM512 544c0-53.020-42.98-96-96-96s-96 42.98-96 96 42.98 96 96 96 96-42.982 96-96z" />
<glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
<glyph unicode="&#xea0d;" glyph-name="close-circle" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416 416s186.25 416 416 416 416-186.25 416-416-186.25-416-416-416zM672 704l-160-160-160 160-96-96 160-160-160-160 96-96 160 160 160-160 96 96-160 160 160 160z" />
<glyph unicode="&#xea0f;" glyph-name="close" d="M1014.662 137.34c-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" />
<glyph unicode="&#xea54;" glyph-name="radio-checked" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 64c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.078 0 384-171.922 384-384s-171.922-384-384-384zM320 448c0 106.039 85.961 192 192 192s192-85.961 192-192c0-106.039-85.961-192-192-192s-192 85.961-192 192z" />
<glyph unicode="&#xea56;" glyph-name="radio-unchecked" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 64c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.078 0 384-171.922 384-384s-171.922-384-384-384z" />
</font></defs></svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

@ -1,103 +0,0 @@
/*
.contact-form-wrap
{
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background-color: black;
}
.cf
{
&-form
{
position: relative;
display:table;
border-radius:20px;
padding:20px;
width:auto;
margin:0 auto;
background-color: white;
top:50%;
transform:translateY(-50%);
}
&-input
{
border: solid 1px #666;
border-radius: 4px;
padding:4px;
}
&-label
{
line-height: 30px;
box-sizing: border-box;
}
&-label
{
float:left;
clear:left;
padding-right:20px;
}
&-input
{
min-height: 20px;
line-height: 20px;
float:right;
clear:right;
box-sizing: border-box;
}
&-textarea
{
margin:8px 0;
display:block;
width:100%;
clear: both;
}
&-input-group
{
&:after
{
content:"";
display: table;
clear:both;
overflow: auto;
}
padding:4px;
margin:4px;
}
&-btn
{
background-color: black;
color:white;
padding-left:10px;
padding-right:10px;
}
}
*/
/* <form id="cf-main-form" class="cf-form" method="get" action="">
<div class="cf-input-group">
<label for="nom" class="cf-label">Votre nom</label>
<input type="text" id="nom" name="Nom" class="cf-input cf-text" required>
</div>
<div class="cf-input-group">
<label for="email" class="cf-label">Votre courriel</label>
<input type="email" id="email" name="courriel" class="cf-input cf-email" required>
</div>
<div class="cf-input-group">
<label for="message" class="cf-label">Votre message</label>
<textarea id="message" name="message" class="cf-input cf-textarea" rows="6" maxlength="3000" required></textarea>
</div>
<div class="cf-input-group">
<button type="submit" id="cf-button" class="cf-input cf-btn">Envoyer</button>
</div>
</form>
*/

@ -0,0 +1,44 @@
@font-face {
font-family: 'icomoon';
src:
url('fonts/icomoon.ttf?k3kmik') format('truetype'),
url('fonts/icomoon.woff?k3kmik') format('woff'),
url('fonts/icomoon.svg?k3kmik#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-eye:before {
content: "\e9ce";
}
.icon-eye-blocked:before {
content: "\e9d1";
}
.icon-close-circle:before {
content: "\ea0d";
}
.icon-close:before {
content: "\ea0f";
}
.icon-radio-checked:before {
content: "\ea54";
}
.icon-radio-unchecked:before {
content: "\ea56";
}

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<title>A hompage</title>
<link rel="stylesheet" href="icon-style.css" />
<link rel="stylesheet" href="style-main.css" />
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 480px)" />
<link rel="stylesheet" href="print.css" media="print" />
@ -42,11 +43,17 @@
<p>ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</main>
<aside></aside>
<footer></footer>
<footer><i class="icon-close"></i<i class="icon-eye"></i</footer>
<input type="checkbox" checked id="show-contact" hidden />
<div class="contact-form-wrap">
<h3 class="h3">Contact us</h3>
<form id="cf-main-form" class="cf-form" method="get" action="">
<div class="cf-input-group cf-close-wrap">
<label for="show-contact" class="cf-close">
<i class="icon-close-circle"></i>
<span class="hidden">fermer</span>
</label>
</div>
<div class="cf-input-group">
<label for="nom" class="cf-label">Votre nom</label>
<input type="text" id="nom" name="Nom" class="cf-input cf-text">
@ -63,6 +70,26 @@
</div>
<div class="cf-input-group">
<label>S'abonner ?</label>
<span>
<input type="radio" hidden name="abonnement" id="abonnement-oui" value="oui">
<label for="abonnement-oui" class="ct-radio">
oui
<i class="icon-radio-unchecked"></i>
<i class="icon-radio-checked"></i>
</label>
</span>
<span>
<input type="radio" hidden name="abonnement" id="abonnement-non" value="non">
<label for="abonnement-non" class="ct-radio">
non
<i class="icon-radio-unchecked"></i>
<i class="icon-radio-checked"></i>
</label>
</span>
</div>
<div class="cf-input-group">
<button type="submit" id="cf-button" class="cf-input cf-btn">Envoyer</button>
</div>
</form>

@ -206,4 +206,66 @@ main, h1
transition: color 0.5s;
}
}
&-input-group
{
&:after
{
content:"";
display: table;
clear:both;
overflow: auto;
}
}
&-close-wrap
{
margin:-10px -10px 0 -20px;
}
&-close
{
display: block;
position:relative;
box-sizing: border-box;
float:right;
clear:both;
font-size:20px;
}
}
.icon-radio-checked
{
display:none;
color:green;
}
.icon-radio-unchecked
{
color:red;
}
#abonnement-oui:checked ~ .ct-radio
{
.icon-radio-checked
{
display:inline;
}
.icon-radio-unchecked
{
display:none;
}
}
#abonnement-non:checked ~ .ct-radio
{
.icon-radio-checked
{
display:inline;
}
.icon-radio-unchecked
{
display:none;
}
}
.hidden
{
display:none!important;
}

Loading…
Cancel
Save