version mobile
This commit is contained in:
parent
ed5024c667
commit
d628f0c2f8
@ -80,7 +80,7 @@
|
||||
</a>
|
||||
<a id="THEMATIQUES" class="parcour">
|
||||
<div class="icone">
|
||||
<svg preserveAspectRatio="xMidYMid meet" data-bbox="20 20 160 160" xmlns="http://www.w3.org/2000/svg" viewBox="55 55 95 95" role="img">
|
||||
<svg preserveAspectRatio="xMidYMid meet" data-bbox="20 20 160 160" xmlns="http://www.w3.org/2000/svg" viewBox="60 55 90 90" role="img">
|
||||
<g>
|
||||
<path d="M106.5 118h-21c-.8 0-1.5.7-1.5 1.5v12c0 .8.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5v-12c0-.8-.7-1.5-1.5-1.5zm-1.5 12H87v-9h18v9z"></path>
|
||||
<path d="M106.5 97h-21c-.8 0-1.5.7-1.5 1.5v12c0 .8.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5v-12c0-.8-.7-1.5-1.5-1.5zm-1.5 12H87v-9h18v9z"></path>
|
||||
@ -95,7 +95,7 @@
|
||||
</a>
|
||||
<a id="LUDIQUES" class="parcour">
|
||||
<div class="icone">
|
||||
<svg preserveAspectRatio="xMidYMid meet" data-bbox="-459 301 160 160" xmlns="http://www.w3.org/2000/svg" viewBox="-427 336 95 95" role="img">
|
||||
<svg preserveAspectRatio="xMidYMid meet" data-bbox="-459 301 160 160" xmlns="http://www.w3.org/2000/svg" viewBox="-419 341 81 81" role="img">
|
||||
<g>
|
||||
<path d="M-350.5 369.5c-.8 0-1.5-.7-1.5-1.5 0-14.6-11.8-26.4-26.4-26.4-15.5 0-27.1 10.5-27.1 24.4 0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5c0-15.6 12.9-27.4 30.1-27.4 16.2 0 29.4 13.2 29.4 29.4 0 .8-.7 1.5-1.5 1.5z"></path>
|
||||
<path d="M-378 374.9c-13.7 0-24.4-1.7-29.2-4.8-.7-.4-.9-1.4-.5-2.1.4-.7 1.4-.9 2.1-.5 1.6 1 8.3 4.3 27.6 4.3 18.3 0 24.7-3 26.6-4.3.7-.5 1.6-.3 2.1.4s.3 1.6-.4 2.1c-2.6 1.9-9.8 4.9-28.3 4.9z"></path>
|
||||
|
||||
@ -1,13 +1,22 @@
|
||||
#parcours {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 -5px;
|
||||
}
|
||||
|
||||
.parcour {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 22%;
|
||||
width: 33%;
|
||||
margin: 0 20px;
|
||||
text-align: center;
|
||||
max-width: 230px;
|
||||
}
|
||||
|
||||
#parcours {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@media (max-width: 600px) {
|
||||
.parcour{
|
||||
width: calc(33% - 10px);
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
@ -19,12 +19,11 @@ body {
|
||||
margin-right: auto;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
-webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
|
||||
-moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
|
||||
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
|
||||
margin-bottom: 25px;
|
||||
width: 90%;
|
||||
width: calc(95% - 20px);
|
||||
}
|
||||
h1,h2,h3,h4,nav {
|
||||
font-family: roboto, sans-serif;
|
||||
@ -62,6 +61,7 @@ h2::after {
|
||||
margin: auto 0;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
text-shadow: rgba(0, 0, 0, 0.25) 1px 0px 1px, rgba(0, 0, 0, 0.25) 0.540302px 0.841471px 1px, rgba(0, 0, 0, 0.25) -0.416147px 0.909297px 1px, rgba(0, 0, 0, 0.25) -0.989993px 0.14112px 1px, rgba(0, 0, 0, 0.25) -0.653644px -0.756803px 1px, rgba(0, 0, 0, 0.25) 0.283662px -0.958924px 1px, rgba(0, 0, 0, 0.25) 0.96017px -0.279416px 0px;
|
||||
}
|
||||
#titre h1{
|
||||
font-size: 68px;
|
||||
@ -78,10 +78,10 @@ h2::after {
|
||||
border: 3px solid black;
|
||||
border-color: inherit;
|
||||
border-radius: 50%;
|
||||
padding: 20px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
img, svg {
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
@ -89,6 +89,8 @@ img, svg {
|
||||
svg {
|
||||
fill: white;
|
||||
stroke-width: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -116,7 +118,7 @@ nav ul li {
|
||||
}
|
||||
|
||||
nav ol li{
|
||||
padding: 0 2px;
|
||||
padding: 0px;
|
||||
border-right: 1px solid #504F4F;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
@ -130,7 +132,7 @@ li a {
|
||||
}
|
||||
|
||||
ol li a {
|
||||
padding: 0 15px;
|
||||
padding: 0 17px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -159,7 +161,7 @@ section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
nav div {
|
||||
@ -188,6 +190,7 @@ nav div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#contact > div > form > div {
|
||||
@ -195,15 +198,12 @@ nav div {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#contact .section, #qui .section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#contact .section, #qui .section {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
padding: 30px 0;
|
||||
padding: 30px 10px;
|
||||
margin: -30px 0;
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
max-width: 950px;
|
||||
}
|
||||
|
||||
#contact .section form {
|
||||
@ -255,3 +255,53 @@ form button, form input[type="submit"] {
|
||||
margin: 0px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.175em;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
nav ul {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
nav div{
|
||||
padding: 8px 0px;
|
||||
}
|
||||
ol li a {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin: auto 4px;
|
||||
}
|
||||
|
||||
nav ul li:first-child {
|
||||
margin-left:7px;
|
||||
}
|
||||
|
||||
#titre h1 {
|
||||
font-size: 56px;
|
||||
}
|
||||
|
||||
#titre span {
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
section {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 100%;
|
||||
}
|
||||
#contact .section form {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#contact div > div:first-child {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user