Ajouter responsiveness au header #93
2 changed files with 53 additions and 23 deletions
|
@ -25,19 +25,58 @@ body{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
.heading1 {
|
||||||
.wrapper{
|
font-family: "Poppins";
|
||||||
max-width: 768px;
|
font-weight: 600; /*semi-bold*/
|
||||||
width: calc(100% - var(15px));
|
font-size: 3rem; /*48px*/
|
||||||
|
color: #394596; /*Bleu AGECEM*/
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.heading2 {
|
||||||
|
font-family: "Poppins";
|
||||||
|
font-weight: 300; /*light*/
|
||||||
|
font-size: 1rem; /*16px*/
|
||||||
|
color: #394596; /*Bleu AGECEM*/
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
|
||||||
|
.wrapper{
|
||||||
|
max-width: 768px;
|
||||||
|
width: calc(100% - var(15px));
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading1 {
|
||||||
|
font-size: 4rem; /*64px*/
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading2 {
|
||||||
|
font-size: 1.5rem; /*24px*/
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1140px) {
|
@media screen and (min-width: 1140px) {
|
||||||
|
|
||||||
.wrapper{
|
.wrapper{
|
||||||
max-width: 1140px;
|
max-width: 1140px;
|
||||||
width: calc(100% - var(30px));
|
width: calc(100% - var(30px));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.heading1 {
|
||||||
|
font-size: 4rem; /*64px*/
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading2 {
|
||||||
|
font-size: 1.5rem; /*24px*/
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Utilisation du css Layout Grid pour faire le wrapper*/
|
/*Utilisation du css Layout Grid pour faire le wrapper*/
|
||||||
|
@ -51,18 +90,7 @@ width: calc(100% - var(30px));
|
||||||
grid-column: 2/3;
|
grid-column: 2/3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heading1 {
|
|
||||||
font-family: "Poppins";
|
|
||||||
font-weight: 600; /*semi-bold*/
|
|
||||||
font-size: 6rem; /*96px*/
|
|
||||||
color: #394596; /*Bleu AGECEM*/
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading2 {
|
|
||||||
font-family: "Poppins";
|
|
||||||
font-weight: 600; /*semi-bold*/
|
|
||||||
font-size: 1.5rem; /*24px*/
|
|
||||||
color: #394596; /*Bleu AGECEM*/
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
|
@ -9,7 +9,9 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{{ template "header-html" }}
|
{{ template "header-html" }}
|
||||||
<h1 class="heading1">Association Générale Étudiante du Cégep Édouard-Montpetit</h1>
|
<h1 class="heading1">AGECEM</h1>
|
||||||
|
<h2 class="heading2">Association Générale Étudiante du Cégep Édouard-Montpetit</h2>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
Loading…
Reference in a new issue