To add the ability to click on names and go to another page with more information
about each person, you can use HTML links (`<a>` tags) and create separate HTML
pages for each person. Here is an example of how you can do this:
```html
<!DOCTYPE html>
<html>
<head>
<title>Family Tree</title>
</head>
<body>
<header>
<h1>Family Tree</h1>
<img src="logo.png" alt="Family Logo">
</header>
<main>
<h2>Grandparents</h2>
<ul>
<li><a href="ali-issor.html">Ali Issor</a></li>
<li><a href="khdoj-ahzam.html">Khdoj Ahzam</a></li>
</ul>
<h2>Children</h2>
<ul>
<li><a href="mbark-issor.html">Mbark Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li>Child 1: [Name]</li>
<li>Child 2: [Name]</li>
<li>Child 3: [Name]</li>
<li>Child 4: [Name]</li>
<li>Child 5: [Name]</li>
</ul>
</li><!DOCTYPE html>
<html>
<head>
<title>Family Tree</title>
<!-- Add some style to format the family tree chart nicely -->
<!-- You can add more styles or edit these styles to customize the appearance
of your chart -->
<!-- For example, you can change the font size, color, and style of the text --
>
<!-- You can also change the background color and border style of the boxes -->
<!-- You can also add styles for hover effects, transitions, and animations -->
<!-- Be creative and have fun with it! -->
<!-- Learn more about CSS at https://www.w3schools.com/css/ -->
<!-- Learn more about HTML at https://www.w3schools.com/html/ -->
<!-- Learn more about web development at https://www.freecodecamp.org/learn/ --
>
<!-- Happy coding! 😊 -->
<!-- Start of CSS styles -->
<style>
/* Add some margin and padding to the body */
body {
margin: 20px;
padding: 20px;
/* Style the header */
header {
text-align: center;
/* Style the family tree chart */
.tree ul {
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/* Style the lines between the nodes */
.tree li::before,
.tree li::after {
content: '';
position:
<li><a href="hmad-issor.html">Hmad Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li>Child 1: [Name]</li>
<li>Child 2: [Name]</li>
<li>Child 3: [Name]</li>
<li>Child 4: [Name]</li>
</ul>
</li>
<li><a href="mohamed-issor.html">Mohamed Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li><a href="houssam-issor.html">Houssam Issor</a></li>
<li><a href="amina-issor.html">Amina Issor</a></li>
<li><a href="hamza-issor.html">Hamza Issor</a></li>
</ul>
</li><!DOCTYPE html>
<html>
<head>
<title>Family Tree</title>
<!-- Add some style to format the family tree chart nicely -->
<!-- You can add more styles or edit these styles to customize the appearance
of your chart -->
<!-- For example, you can change the font size, color, and style of the text --
>
<!-- You can also change the background color and border style of the boxes -->
<!-- You can also add styles for hover effects, transitions, and animations -->
<!-- Be creative and have fun with it! -->
<!-- Learn more about CSS at https://www.w3schools.com/css/ -->
<!-- Learn more about HTML at https://www.w3schools.com/html/ -->
<!-- Learn more about web development at https://www.freecodecamp.org/learn/ --
>
<!-- Happy coding! 😊 -->
<!-- Start of CSS styles -->
<style>
/* Add some margin and padding to the body */
body {
margin: 20px;
padding: 20px;
/* Style the header */
header {
text-align: center;
/* Style the family tree chart */
.tree ul {
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition:
<li><a href="abdellah-issor.html">Abdellah Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li><a href="mohamed-issor2.html">Mohamed Issor</a></li>
<li><a href="jamal-issor.html">Jamal Issor</a></li>
<li><a href="abdelali-issor.html">Abdelali Issor</li>
<li><a href="redone-issor.html">Redone Issor</a></li>
</ul>
</li>
<li><a href="alhssn-issor.html">Alhssn Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li><a href="ayoub-issor.html">Ayoub Issor</a></li>
<li><a href="youssef-issor.html">Youssef Issor</a></li>
<li><a href="khadija-issor.html">Khadija Issor</a></li>
<li><a href="hassna-issor.html">Hassna Issor</a></li>
</ul>
</li>
<li><a href="alhosain-issor.html">Alhosain Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li><a href="samir-issor.html">Samir Issor</a></li>
<li><a href="mohamed-issor3.html">Mohamed Issor</a></li>
</ul>
</li>
<li><a href="fatima-issor.html">Fatima Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li>Child 1: [Name]</li>
<li>Child 2: [Name]</li>
<li>Child 3: [Name]</li>
<li>Child 4: [Name]</li>
<li>Child 5: [Name]</li>
</ul>
</li>
<li><a href="yamna-issor.html">Yamna Issor</a>
<ul>
<li>Spouse: [Name]</li>
<ul>
<l
<li>
<a href="abdellah-issor.html">Abdellah Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li>
<a href="mohamed-issor2.html">Mohamed Issor</a>
</li>
<li>
<a href="jamal-issor.html">Jamal Issor</a>
</li>
<li>
<a href="abdelali-issor.html">Abdelali Issor
</a>
</li>
<li>
<a href="redone-issor.html">Redone Issor</a>
</li>
</ul>
</li>
<li>
<a href="alhssn-issor.html">Alhssn Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li>
<a href="ayoub-issor.html">Ayoub Issor</a>
</li>
<li>
<a href="youssef-issor.html">Youssef Issor</a>
</li>
<li>
<a href="khadija-issor.html">Khadija Issor</a>
</li>
<li>
<a href="hassna-issor.html">Hassna Issor</a>
</li>
</ul>
</li>
<li>
<a href="alhosain-issor.html">Alhosain Issor
</a>
<ul>
<li>Spouse: [Name]</li>
<li>
<a href="samir-issor.html">Samir Issor</a>
</li>
<li>
<a href="mohamed-issor3.html">Mohamed Issor</a>
</li>
</ul>
</li>
<li>
<a href="fatima-issor.html">Fatima Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li>Child 1: [Name]</li>
<li>Child 2: [Name]</li>
<li>Child 3: [Name]</li>
<li>Child 4: [Name]</li>
<li>Child 5: [Name]</li>
</ul>
</li
> <li>
<a href="yamna-issor.html">Yamna Issor</a> <ul>
<li>Spouse: [Name]</li>
<ul>
<l
<li><a href="mohamed-lmsiah.html">Mohamed Lmsiah</a>
<ul>
<li><a href="rida-lmsaih.html">Rida Lmsaih</a></li>
<li><a href="salah-lmsaih.html">Salah Lmsaih</a></li>
<li><a href="abde-rahman-lmsaih.html">Abde Rahman Lmsaih</a></li>
</ul>
</li>
<li>Child 2: [Name]</li>
<li>Child 3: [Name]</li>
<li>Child 4: [Name]</li>
</ul>
</ul>
</li>
<li><a href="aicha-issor.html">Aicha Issor</a>
<ul>
<li>Spouse: [Name]</li>
<li>Child 1: [Name]</li>
<li>Child 2: [Name]</li>
<li>Child 3: [Name]</li>
<li>Child 4: [Name]</li>
</ul>
</li>
<li><a href="zahra-issor.html">Zahra Issor</a>
<ul>
<li>Spouse: [Name]</li>
<ul>
<li><a href="hafida-amrghich.html">Hafida Amrghich</a>
<ul>
<li>Spouse: [Name]</li>
<li>Child 1: [Name]</li>
<li>Child 2: [Name]</
<li>Child 3: [Name]</li>
<li>Child 4: [Name]</li>
</ul>
</li>
<li><a href="halima-amrghich.html">Halima Amrghich</a>
<ul>
<li>Spouse: [Name]</li>
<ul>
<li><a href="amina-elasri.html">Amina Elasri</a></li>
<li><a href="yassin-elasri.html">Yassin Elasri</a></li>
</ul>
</ul>
</li>
<li><a href="mohamed-amrghich.html">Mohamed Amrghich</a></li>
<li><a href="soufian-amrghich.html">Soufian Amrghich</a></li>
<li><a href="aissam-amrghich.html">Aissam Amrghich</a></li>
<li><a href="hamid-amrghich.html">Hamid Amrghich</a></li>
<li><a href="nadia-amrghich.html">Nadia Amrghich</a></li>
<li><a href="fatiha-amrghich.html">Fatiha Amrghich</a></li>
</ul>
</ul>
</li>
</ul>
</main>
</body>
</html>
