-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpatriotisme.html
132 lines (122 loc) · 12 KB
/
patriotisme.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Belgacem Haba est un scientifique et inventeur renommé connu pour ses contributions aux microélectroniques et aux technologies d'emballage des semi-conducteurs. Découvrez sa vie, ses inventions et ses publications sur ce site Web.">
<meta name="keywords"
content="Belgacem Haba, scientifique, inventeur, microélectronique, emballage de semi-conducteurs, technologie, USTHB">
<title>Belgacem Haba: Patriotisme</title>
<link rel="stylesheet" href="./public/styles/fonts.css">
<link rel="stylesheet" href="./public/styles/global.css">
<link rel="stylesheet" href="./public/styles/patriotisme.css">
<!--Un petit script pour la responsiveness de notre header-->
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.querySelector('#mobile-menu');
const overlay = document.querySelector('.overlay');
const navbarLinks = document.querySelector('header > nav');
const header = document.querySelector("header")
toggleButton.addEventListener('click', function () {
navbarLinks.classList.toggle('active');
navbarLinks.classList.toggle('showUp');
overlay.classList.toggle('active');
});
overlay.addEventListener('click', function () {
navbarLinks.classList.remove('active');
navbarLinks.classList.remove('showUp');
overlay.classList.remove('active');
});
});
</script>
</head>
<body>
<!--On va mettre le header et le main dans un div pour les afficher en 100vh-->
<div class="screen-container">
<!--Le header de la page, qui va contenir le logo, les liens vers toutes les pages de site et la button Call to action-->
<header>
<img id="usthb-logo" src="./public/img/logo.png" alt="USTHB">
<nav>
<ul>
<li>
<!--On utilise les icons de cette façon pour controler leurs couleurs-->
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3041 5.53874C14.2226 5.46086 14.1143 5.41739 14.0016 5.41739C13.889 5.41739 13.7806 5.46086 13.6992 5.53874L3.63125 15.1566C3.58849 15.1975 3.55447 15.2467 3.53126 15.3011C3.50804 15.3555 3.4961 15.4141 3.49617 15.4733L3.49453 24.5C3.49453 24.9641 3.6789 25.4092 4.00709 25.7374C4.33528 26.0656 4.7804 26.25 5.24453 26.25H10.5C10.7321 26.25 10.9546 26.1578 11.1187 25.9937C11.2828 25.8296 11.375 25.6071 11.375 25.375V17.9375C11.375 17.8215 11.4211 17.7102 11.5031 17.6281C11.5852 17.5461 11.6965 17.5 11.8125 17.5H16.1875C16.3035 17.5 16.4148 17.5461 16.4969 17.6281C16.5789 17.7102 16.625 17.8215 16.625 17.9375V25.375C16.625 25.6071 16.7172 25.8296 16.8813 25.9937C17.0454 26.1578 17.2679 26.25 17.5 26.25H22.7533C23.2174 26.25 23.6625 26.0656 23.9907 25.7374C24.3189 25.4092 24.5033 24.9641 24.5033 24.5V15.4733C24.5033 15.4141 24.4914 15.3555 24.4682 15.3011C24.445 15.2467 24.411 15.1975 24.3682 15.1566L14.3041 5.53874Z"
fill="white" />
<path
d="M26.8466 13.352L22.756 9.43852V3.5C22.756 3.26794 22.6638 3.04538 22.4997 2.88128C22.3356 2.71719 22.1131 2.625 21.881 2.625H19.256C19.0239 2.625 18.8014 2.71719 18.6373 2.88128C18.4732 3.04538 18.381 3.26794 18.381 3.5V5.25L15.2135 2.22141C14.9171 1.92172 14.4763 1.75 14 1.75C13.5253 1.75 13.0856 1.92172 12.7892 2.22195L1.15719 13.3509C0.817029 13.679 0.774373 14.2188 1.0839 14.5742C1.16163 14.6639 1.2568 14.7369 1.36363 14.7887C1.47046 14.8405 1.5867 14.87 1.70529 14.8754C1.82387 14.8808 1.94232 14.862 2.05343 14.8202C2.16453 14.7784 2.26597 14.7144 2.35156 14.6322L13.6992 3.78875C13.7806 3.71086 13.889 3.66739 14.0016 3.66739C14.1143 3.66739 14.2226 3.71086 14.3041 3.78875L25.6528 14.6322C25.82 14.7925 26.0439 14.88 26.2755 14.8755C26.5071 14.871 26.7274 14.7748 26.8882 14.6081C27.224 14.2603 27.1961 13.6861 26.8466 13.352Z"
fill="white" />
</svg>
<a href="./index.html">Accueil</a>
</li>
<li>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.2083 19.4997C24.2082 19.5557 24.2027 19.6115 24.192 19.6665C24.2166 19.7932 24.2129 19.9237 24.1811 20.0487C24.1493 20.1738 24.0903 20.2903 24.0083 20.3898C23.9262 20.4894 23.8231 20.5696 23.7065 20.6247C23.5898 20.6797 23.4623 20.7083 23.3333 20.7083H6.99999C6.80848 20.7083 6.61884 20.7461 6.44191 20.8193C6.26498 20.8926 6.10421 21 5.96879 21.1355C5.83337 21.2709 5.72595 21.4317 5.65267 21.6086C5.57938 21.7855 5.54166 21.9752 5.54166 22.1667C5.54166 22.3582 5.57938 22.5478 5.65267 22.7247C5.72595 22.9017 5.83337 23.0624 5.96879 23.1979C6.10421 23.3333 6.26498 23.4407 6.44191 23.514C6.61884 23.5873 6.80848 23.625 6.99999 23.625H23.3333C23.5654 23.625 23.7879 23.7172 23.952 23.8813C24.1161 24.0454 24.2083 24.2679 24.2083 24.5C24.2083 24.7321 24.1161 24.9546 23.952 25.1187C23.7879 25.2828 23.5654 25.375 23.3333 25.375H6.99999C6.14909 25.375 5.33303 25.037 4.73136 24.4353C4.12968 23.8336 3.79166 23.0176 3.79166 22.1667V5.83333C3.79166 4.98243 4.12968 4.16638 4.73136 3.5647C5.33303 2.96302 6.14909 2.625 6.99999 2.625H22.6333C23.5037 2.625 24.2083 3.32967 24.2083 4.2V19.4997ZM10.5 7.29167C10.2679 7.29167 10.0454 7.38385 9.88127 7.54795C9.71718 7.71204 9.62499 7.9346 9.62499 8.16667C9.62499 8.39873 9.71718 8.62129 9.88127 8.78539C10.0454 8.94948 10.2679 9.04167 10.5 9.04167H17.5C17.7321 9.04167 17.9546 8.94948 18.1187 8.78539C18.2828 8.62129 18.375 8.39873 18.375 8.16667C18.375 7.9346 18.2828 7.71204 18.1187 7.54795C17.9546 7.38385 17.7321 7.29167 17.5 7.29167H10.5Z"
fill="white" />
</svg>
<a href="./biographie.html">Biographie</a>
</li>
<li>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.8333 17.7858V25.8032C19.8333 25.9064 19.806 26.0078 19.754 26.0969C19.7021 26.1861 19.6274 26.2599 19.5376 26.3108C19.4478 26.3617 19.3461 26.3878 19.2429 26.3866C19.1397 26.3853 19.0387 26.3567 18.9502 26.3037L14 23.3333L9.04982 26.3037C8.96121 26.3568 8.86008 26.3854 8.75677 26.3866C8.65347 26.3878 8.5517 26.3615 8.46187 26.3105C8.37204 26.2595 8.29738 26.1855 8.24551 26.0962C8.19364 26.0068 8.16643 25.9053 8.16666 25.802V17.787C6.65716 16.5784 5.56031 14.9309 5.02769 13.072C4.49507 11.2131 4.55297 9.23463 5.1934 7.41006C5.83382 5.58549 7.02515 4.00488 8.60274 2.88667C10.1803 1.76845 12.0663 1.16785 14 1.16785C15.9337 1.16785 17.8197 1.76845 19.3972 2.88667C20.9748 4.00488 22.1662 5.58549 22.8066 7.41006C23.447 9.23463 23.5049 11.2131 22.9723 13.072C22.4397 14.9309 21.3428 16.5784 19.8333 17.787M14 17.5C15.8565 17.5 17.637 16.7625 18.9497 15.4498C20.2625 14.137 21 12.3565 21 10.5C21 8.6435 20.2625 6.86302 18.9497 5.55026C17.637 4.23751 15.8565 3.50001 14 3.50001C12.1435 3.50001 10.363 4.23751 9.05024 5.55026C7.73749 6.86302 6.99999 8.6435 6.99999 10.5C6.99999 12.3565 7.73749 14.137 9.05024 15.4498C10.363 16.7625 12.1435 17.5 14 17.5ZM14 15.1667C12.7623 15.1667 11.5753 14.675 10.7002 13.7998C9.82499 12.9247 9.33332 11.7377 9.33332 10.5C9.33332 9.26233 9.82499 8.07535 10.7002 7.20018C11.5753 6.32501 12.7623 5.83334 14 5.83334C15.2377 5.83334 16.4247 6.32501 17.2998 7.20018C18.175 8.07535 18.6667 9.26233 18.6667 10.5C18.6667 11.7377 18.175 12.9247 17.2998 13.7998C16.4247 14.675 15.2377 15.1667 14 15.1667Z"
fill="white" />
</svg>
<a href="./honneurs.html">Honneurs</a>
</li>
<li class="is-active">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.1666 3.5C10.7683 3.5 7.22164 6.94167 6.99998 11.27L4.75998 14.2217C4.47998 14.5833 4.75998 15.1667 5.24998 15.1667H6.99998V18.6667C6.99998 19.9617 8.03831 21 9.33331 21H10.5V24.5H18.6666V19.0283C21.4316 17.7217 23.3333 14.9333 23.3333 11.6667C23.3333 7.16333 19.6933 3.5 15.1666 3.5ZM19.8333 10.3017C19.8333 12.0983 18.2466 13.5333 15.8433 15.715L15.1666 16.3333L14.49 15.715C12.0866 13.5333 10.5 12.0983 10.5 10.3017C10.5 8.90167 11.62 7.74667 13.02 7.735H13.0666C13.8716 7.735 14.6416 8.09667 15.1666 8.70333C15.6916 8.09667 16.4616 7.735 17.2666 7.735C18.6666 7.72333 19.8333 8.855 19.8333 10.255V10.3017Z"
fill="white" />
</svg>
<a href="./patriotisme.html">Patriotisme</a>
</li>
<a target="_blank" class="header-btn" href="https://haba-institute.com/">Incubation Ici!</a>
</ul>
</nav>
<!--Button Call to action qui émène à Haba Institute-->
<div class="overlay"></div>
<img id="mobile-menu" src="./public/icons/menu-icon.svg">
<!--Pas d'attribut alt puisque c'est que pour la décoration-->
</header>
<!--Fin de header-->
<!--main qui va contenir le contenu principale-->
<main>
<section id="bio-table">
<img src="public/img/patri_img.png" alt="Belgacem Haba">
</section>
<section id="bio-container1">
<h1>Patriotisme</h1>
<p>Belgacem Haba, d'origine algérienne, incarne <strong>le patriotisme</strong> avec une passion inégalée. Sa dévotion
envers son pays, l'Algérie, est <strong>palpable dans chacun de ses actes</strong>. Que ce soit par son engagement
civique, son amour pour <strong>la culture algérienne</strong> ou son soutien indéfectible à ses compatriotes,
Belgacem symbolise <strong>l'esprit patriotique</strong>. Sa volonté inébranlable de voir son pays prospérer et sa
fierté pour ses racines sont des traits qui inspirent ceux qui l'entourent. En tant que fervent
défenseur de son pays, Belgacem Haba illustre parfaitement ce que signifie être un patriote.
</a>
</section>
</main>
</div>
<section id="bio-suite">
<section id="bio-container2">
<h1>Conseils importants pour l’Algérien</h1>
<p>Dans une déclaration à la presse rapportée par <strong>l’Agence de presse algérienne (APS)</strong> à l’issue de la
cérémonie, Belgacem Haba a appelé <strong>les chercheurs</strong> et <strong>les étudiants algériens</strong> à déployer tous leurs
efforts pour réaliser leurs objectifs et à ne jamais baisser les bras devant les obstacles auxquels ils
font face.</p>
</section>
</section>
<footer>
<a href="https://github.com/coding-with-lounas/Portfolio-project-1" target="_blank">
<img id="github-icon" src="public/icons/github-icon.svg" alt="github repository">
</a>
<span>© 2024 ~ Ce site a été créé dans le cadre du projet de <strong>programmation web</strong>, offert par <a
target="_blank" href="https://www.usthb.dz"><strong>l'USTHB</strong></a>, sous la direction de
<strong>Madame Bouyakoub Samia</strong>.</span>
</footer>
</body>
</html>