edit: version html css propre pour version dégradé sans js + responsive pour écrans larges
This commit is contained in:
+19
-9
@@ -30,7 +30,7 @@ html, body{
|
||||
|
||||
header{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 93px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top:0;
|
||||
@@ -75,10 +75,11 @@ header{
|
||||
position: relative;
|
||||
z-index: -33;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav{
|
||||
nav > ul{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
@@ -87,6 +88,8 @@ header{
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-right: 7.77px;
|
||||
margin-top: 13.12px;
|
||||
|
||||
.textBtnStyle{
|
||||
border-radius: 0;
|
||||
@@ -96,9 +99,8 @@ header{
|
||||
|
||||
}
|
||||
|
||||
|
||||
video{
|
||||
height: 100vh;
|
||||
height: 110%;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -118,12 +120,13 @@ video{
|
||||
main{
|
||||
position: relative;
|
||||
z-index: -33;
|
||||
overflow: hidden;
|
||||
|
||||
#homeContent{
|
||||
height: 70vh;
|
||||
height: 80vh;
|
||||
width: 100%;
|
||||
position:relative;
|
||||
z-index: -33;
|
||||
z-index: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 2.5fr 2fr 1fr;
|
||||
grid-template-rows: 1fr 1.5fr;
|
||||
@@ -175,6 +178,7 @@ main{
|
||||
|
||||
padding: 3.33px;
|
||||
margin-bottom: 3.33px;
|
||||
box-sizing: border-box;
|
||||
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
@@ -204,18 +208,20 @@ main{
|
||||
grid-row: 1;
|
||||
width: 150%;
|
||||
font-size: 15px;
|
||||
padding-top: 33px;
|
||||
}
|
||||
|
||||
#planSection{
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 2;
|
||||
color: var(--back-color);
|
||||
justify-self: end;
|
||||
|
||||
#planContainer{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 13.12px;
|
||||
margin-top: 33px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
img{
|
||||
@@ -269,7 +275,7 @@ main{
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: 16.1vh;
|
||||
height: 20vh;
|
||||
|
||||
|
||||
#statusDesc{
|
||||
@@ -352,7 +358,7 @@ main{
|
||||
z-index: 33;
|
||||
|
||||
.iconBtnStyle{
|
||||
visibility: hidden;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
z-index: 34;
|
||||
width: 33px;
|
||||
@@ -360,6 +366,10 @@ main{
|
||||
right: 7.77px;
|
||||
top: 33px;
|
||||
}
|
||||
|
||||
.icon{
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
details{
|
||||
|
||||
@@ -0,0 +1,226 @@
|
||||
/*===========================Moyen format : Tablette et petite fenêtres PC ===*/
|
||||
@media(min-width: 650px){
|
||||
header{
|
||||
height: 60px;
|
||||
|
||||
h1{
|
||||
margin-bottom: 5px;
|
||||
|
||||
img{
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
nav > ul{
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
margin-top: 16.1px;
|
||||
margin-right: 13.12px;
|
||||
min-width: 444px;
|
||||
box-sizing: border-box;
|
||||
|
||||
li{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textBtnStyle{
|
||||
border-radius: 0;
|
||||
width: 93px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main{
|
||||
#homeContent{
|
||||
height: 77vh;
|
||||
grid-template-columns: 2fr 2fr 1fr;
|
||||
grid-template-rows: 0.7fr 2fr;
|
||||
|
||||
#titleSection{
|
||||
height: 110%;
|
||||
h2{
|
||||
font-size: 27px;
|
||||
small{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#hourSection{
|
||||
grid-column: 1;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
address{
|
||||
padding-top: 16.1px;
|
||||
}
|
||||
|
||||
#planSection{
|
||||
grid-column: 2 / 4;
|
||||
#planContainer{
|
||||
width: 110%;
|
||||
height: auto;
|
||||
margin-left: -88px;
|
||||
margin-top: -50px;
|
||||
|
||||
@media(min-width: 800px){
|
||||
margin-top: -88px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#extLinkSection{
|
||||
justify-content: flex-start;
|
||||
padding-top: 33px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#statuSection{
|
||||
|
||||
}
|
||||
|
||||
#extraContent{
|
||||
|
||||
|
||||
#aboutSection{
|
||||
|
||||
}
|
||||
|
||||
#eventSection{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*===========================Grand format : écrans larges et grands ===*/
|
||||
@media(min-width: 1300px){
|
||||
header{
|
||||
nav > ul{
|
||||
|
||||
font-size: 27px;
|
||||
|
||||
li{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textBtnStyle{
|
||||
padding-left: 16.1px;
|
||||
width: 133px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main{
|
||||
#homeContent{
|
||||
|
||||
|
||||
#titleSection{
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#hourSection{
|
||||
height: 77%;
|
||||
width: 44%;
|
||||
|
||||
h3{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
ol{
|
||||
font-size: 16.1px;
|
||||
strong{
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
address{
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#planSection{
|
||||
#planContainer{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-left: -88px;
|
||||
margin-top: -133px;
|
||||
}
|
||||
}
|
||||
|
||||
#extLinkSection{
|
||||
a img{
|
||||
height: 77px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#statuSection{
|
||||
#statusDesc{
|
||||
padding-left: 77px;
|
||||
font-size: 20px;
|
||||
}
|
||||
h3{
|
||||
font-size: 33px;
|
||||
padding-top: 7.77px;
|
||||
margin-left: -88px;
|
||||
}
|
||||
}
|
||||
|
||||
#extraContent{
|
||||
height: 90vh;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
|
||||
#aboutSection{
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#eventSection{
|
||||
#eventContent{
|
||||
li{
|
||||
.iconBtnStyle{
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
right: 13.12px;
|
||||
}
|
||||
|
||||
.icon{
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
details{
|
||||
summary{
|
||||
.title{
|
||||
font-size: 22px;
|
||||
|
||||
h4{
|
||||
font-size: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
.resume{
|
||||
font-size: 16.1px;
|
||||
}
|
||||
}
|
||||
.description{
|
||||
font-size: 16.1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user