changement de taille de h1 et h2 aux breakpoints

This commit is contained in:
Alexel 2023-08-14 16:42:55 -04:00
parent 1fed4e9a8e
commit 0d09c1d10d
2 changed files with 53 additions and 23 deletions

View file

@ -25,19 +25,58 @@ body{
margin: 0 auto; margin: 0 auto;
} }
.heading1 {
font-family: "Poppins";
font-weight: 600; /*semi-bold*/
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) { @media screen and (min-width: 768px) {
.wrapper{ .wrapper{
max-width: 768px; max-width: 768px;
width: calc(100% - var(15px)); 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;
}

View file

@ -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 }}