Skip to content

Commit 21ffb17

Browse files
Daviddubucdevxwellstr
Daviddubucdev
and
xwellstr
committed
news & services update
Le main de news, ainsi services fait ... demande correction via https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjI3cfduqiDAxUeF1kFHXJZD3IQFnoECBUQAQ&url=https%3A%2F%2Fvalidator.w3.org%2F&usg=AOvVaw1WWNF9h0VHpCJlGM8dbPEp&opi=89978449 Co-Authored-By: xwellstr <[email protected]>
1 parent c2e524f commit 21ffb17

14 files changed

+267
-26
lines changed

‎.vscode/settings.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"cSpell.words": [
3+
"satisfaits"
4+
]
5+
}

‎Pages/contact.html

-12
This file was deleted.

‎Pages/news.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="fr-ca">
33

44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Nouvelles</title>
8-
<link rel="stylesheet" href="../style/news.css" />
8+
<link rel="stylesheet" href="../style/news.css" >
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
912
</head>
1013

1114
<body>

‎Pages/services.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="fr-ca">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Nos services</title>
8+
<link rel="stylesheet" href="../style/services.css" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
12+
</head>
13+
14+
<body>
15+
<header>
16+
</header>
17+
<main>
18+
<section class="main-section1">
19+
<h2 class="texte-box1">Nos Services</h2>
20+
<div class="parent-box-art">
21+
<article class="child-box-art">
22+
<div class="inception-box"><img src="../asset/img/news.png" alt="symbole de nouvelles en direct"></div>
23+
<em>Reportages exclusifs</em>
24+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat ipsam deleniti exercitationem au</p>
25+
</article>
26+
<article class="child-box-art">
27+
<div class="inception-box"><img src="../asset/img/encrypt.png" alt="symbole d'encryption"></div>
28+
<em>Analyse et décryptage</em>
29+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat ipsam deleniti exercitationem au</p>
30+
</article>
31+
<article class="child-box-art">
32+
<div class="inception-box"><img src="../asset/img/reportage.png" alt="un reporteur et un camera-man"></div>
33+
<em>Couverture en direct</em>
34+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat ipsam deleniti exercitationem au</p>
35+
</article>
36+
</div>
37+
</section>
38+
<section class="main-section2">
39+
<h3>Nos clients satisfaits.</h3>
40+
<div class="parent-box2">
41+
<div class="child-box2"><img class="mrbadnuggetimg"src="../asset/img/Clienttp2.png" alt="un poulet de profil" ><p>Mr Bad nugget <br> from Hell Chicken</p></div>
42+
<div class="child-box2"><img class="mrbadnuggetimg"src="../asset/img/Clienttp2.png" alt="un poulet de profil" ><p>Mr Bad nugget <br> from Hell Chicken</p></div>
43+
<div class="child-box2"><img class="mrbadnuggetimg"src="../asset/img/Clienttp2.png" alt="un poulet de profil" ><p>Mr Bad nugget <br> from Hell Chicken</p></div>
44+
<div class="child-box2"><img class="mrbadnuggetimg"src="../asset/img/Clienttp2.png" alt="un poulet de profil" ><p>Mr Bad nugget <br> from Hell Chicken</p></div>
45+
</div>
46+
</section>
47+
</main>
48+
<footer> </footer>
49+
</body>
50+
51+
</html>

‎asset/img/Clienttp2.png

4.46 KB
Loading

‎asset/img/encrypt.png

3.39 KB
Loading

‎asset/img/news.png

3.18 KB
Loading

‎asset/img/reportage.png

4.25 KB
Loading

‎asset/video/vidtp2.mp4

1.38 MB
Binary file not shown.

‎index.html

+40-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,55 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Journal de quoubec</title>
7-
<link rel="stylesheet" href="./style/accueil.css"/>
8+
<link rel="stylesheet" href="./style/style.css" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
812
</head>
13+
914
<body>
1015
<header>
1116
<div>
1217
<h1></h1>
1318
</div>
1419
</header>
15-
20+
<main>
21+
<section class=" index-main-container">
22+
<h2> <img class="svgjdq" src="./asset/img/jdq.svg" alt="image de 'Journal de Qoubec'"><a href="./Pages/services.html"> Nos Services</a>
23+
</h2>
24+
<article class="who-we-are">
25+
<div class="who-text">
26+
<p><h3><em>Bienvenue sur Le Journal de Qoubec!</em></h3> Nous sommes un journal en ligne qui a pour mission
27+
de
28+
parodier
29+
l'actualité qoubecois de manière humoristique. À travers nos articles et nos publications, nous
30+
vous offrons un regard décalé sur les événements qui animent la société québécoise.
31+
</p>
32+
<p>
33+
Notre équipe de rédacteurs talentueux, passionnés par l'écriture satirique, s'efforce de vous
34+
divertir en proposant des contenus drôles et imaginatifs. Chaque jour, nous racontons
35+
l'actualité
36+
avec une touche d'humour, tout en respectant l'intégrité des faits.
37+
</p>
38+
<h4><em>Le Journal de Qoubec, votre source d'actualité parodique et satirique préférée !</em></h4>
39+
</p>
40+
</div>
41+
<div class="video-right">
42+
<video width="320" height="240" controls>
43+
<source src="./asset/video/vidtp2.mp4" type="video/mp4">
44+
<source src="./asset/video/vidtp2.ogg" type="video/ogg">
45+
Your browser does not support the video tag.
46+
</video>
47+
</div>
48+
</article>
49+
</section>
50+
</main>
51+
1652
<footer></footer>
1753
</body>
18-
</html>
54+
55+
</html>

‎style/contact.css

Whitespace-only changes.

‎style/news.css

+7
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
body {
1111
background-color: #ffffff;
12+
font-family: 'Poppins', sans-serif;
1213

1314

1415
}
@@ -68,3 +69,9 @@ h2 a{
6869
a:active{
6970
color: #ff4b00;
7071
}
72+
73+
a:hover{
74+
color: #f8a433;
75+
76+
}
77+

‎style/services.css

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
:root {
2+
--couleur-principale: #003057;
3+
--couleur-secondaire: #f8a433;
4+
--couleur-tertiaire: #ffa90d;
5+
--couleur-texte: #333333;
6+
--couleur-fond: #ffffff;
7+
--couleur-surbrillance: #ff4b00;
8+
}
9+
main {
10+
font-family: 'Poppins', sans-serif;
11+
}
12+
.main-section1{
13+
display: flex;
14+
flex-direction:column;
15+
justify-content: center;
16+
width: 100%;
17+
height:25rem;
18+
}
19+
20+
.main-section2{
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: center;
24+
align-items: center;
25+
width: 100%;
26+
height:15rem;
27+
}
28+
29+
.parent-box-art{
30+
display:flex;
31+
flex:3;
32+
justify-content:center;
33+
align-items:center;
34+
width:100%;
35+
}
36+
37+
.child-box-art{
38+
display:flex;
39+
flex-direction: column;
40+
justify-content: space-around;
41+
align-items: center;
42+
text-align: center;
43+
margin:1rem;
44+
height:20rem;
45+
width:17rem;
46+
border:#333333 solid 1px;
47+
margin-bottom: 3%;
48+
}
49+
.inception-box{
50+
display:flex;
51+
justify-content: center;
52+
width:80%;
53+
height: 38%;
54+
}
55+
56+
.parent-box2{
57+
display:flex;
58+
flex:3;
59+
justify-content:center;
60+
align-items:center;
61+
border-top:#333333 solid 2px;
62+
width: 100%;
63+
padding-top: 1rem;
64+
65+
}
66+
67+
.child-box2{
68+
display:flex;
69+
justify-content:space-around;
70+
flex-direction: column;
71+
align-items: center;
72+
margin-left:5rem;
73+
height: 87%;
74+
background-color:#f8a433;
75+
border-start-end-radius: 25%;
76+
border-start-start-radius: 25%;
77+
border-end-end-radius:10%;
78+
border-end-start-radius:10%;
79+
80+
81+
}
82+
.mrbadnuggetimg{
83+
width: 100px;
84+
height: 100px;
85+
border-radius:3rem;
86+
}
87+
88+
89+
h2, h3 {
90+
margin-left:5rem;
91+
}

‎style/style.css

+68-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,68 @@
1-
:root{
2-
--primary:#0000C2;
3-
--dark:#141415;
4-
--grey: #3F3F40;
5-
--light-grey: #868686;
6-
--light-white:#F3F3F3;
7-
8-
9-
}
1+
:root {
2+
--couleur-principale: #003057;
3+
--couleur-secondaire: #f8a433;
4+
--couleur-tertiaire: #ffa90d;
5+
--couleur-texte: #333333;
6+
--couleur-fond: #ffffff;
7+
--couleur-surbrillance: #ff4b00;
8+
}
9+
10+
.index-main-container {
11+
display: flex;
12+
flex: 2;
13+
flex-direction: column;
14+
align-items: center;
15+
justify-content: space-around;
16+
margin-left: 4rem;
17+
margin-right: 4rem;
18+
font-family: 'Poppins', sans-serif;
19+
}
20+
21+
22+
h3{
23+
color: #333333;
24+
border-top: solid 0.7rem var(--couleur-surbrillance);
25+
border-top-style:groove;
26+
padding-bottom: 2rem;
27+
margin-right: 40%;
28+
padding-top: 2rem;
29+
}
30+
h4{
31+
color: #333333;
32+
border-top: solid 0.2rem groove, var(--couleur-surbrillance);
33+
34+
35+
}
36+
.who-we-are {
37+
display: flex;
38+
flex-direction: row;
39+
flex-wrap: wrap;
40+
width: 100%;
41+
}
42+
43+
.who-text {
44+
display: flex;
45+
flex-direction: column;
46+
flex-basis: 100%;
47+
flex: 1;
48+
height: 371px;
49+
width: 599px;
50+
color: #003057;
51+
}
52+
53+
.video-right {
54+
display: flex;
55+
flex-direction: column;
56+
flex-basis: 100%;
57+
flex: 1;
58+
height: 371px;
59+
width: 599px;
60+
margin: auto;
61+
padding-left: 25%;
62+
}
63+
64+
65+
66+
.svgjdq {
67+
width:500px;
68+
}

0 commit comments

Comments
 (0)