My-website/index.html at main · Paoapi/My-website · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rayane Boukhalfa - Personal Website</title>
    <style>
        /* Add your CSS styles here */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        nav {
            background-color: #444;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 10px 20px;
        }
        section {
            padding: 20px;
            margin: 20px;
            background-color: #fff;
            border-radius: 5px;
        }
        h2 {
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: auto;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
            position: fixed;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>Rayane Boukhalfa</h1>
        <p>High School Junior | Content Editor</p>
    </header>
    <nav>
        <a href="#skills">Skills</a>
        <a href="#biography">Biography</a>
        <a href="#goals">Goals and Objectives</a>
        <a href="#personality">Personality</a>
        <a href="#hobbies">Hobbies</a>
        <a href="#contact">Contact</a>
    </nav>
    <div class="container">
        <section id="skills">
            <h2>Skills</h2>
            <p>Communication, Punctual, Creative, Sentimental, Extrovert, Methodical, Thoughtful, Introvert, Patient, Hardworking</p>
        </section>
        <section id="biography">
            <h2>Biography</h2>
            <p>Rayane Boukhalfa is a high school student born in Philadelphia and raised in Algeria from the age of 7. He likes to try new things and is currently studying his junior and senior years in the US.</p>
        </section>
        <section id="goals">
            <h2>Goals and Objectives</h2>
            <ul>
                <li>Expand my skills</li>
                <li>Find the sport for me</li>
                <li>Graduate with a high GPA</li>
                <li>Get into a good university and pursue a degree</li>
            </ul>
        </section>
        <section id="personality">
            <h2>Personality</h2>
            <p>Rayane is a mix of both extrovert and introvert traits. He is creative, sentimental, methodical, thoughtful, and hardworking.</p>
        </section>
        <section id="hobbies">
            <h2>Hobbies</h2>
            <ul>
                <li>Travel</li>
                <li>Sport</li>
                <li>Reading</li>
            </ul>
        </section>
        <section id="contact">
            <h2>Contact</h2>
            <p>Name: Rayane Boukhalfa</p>
            <p>Country: United States of America</p>
            <p>Email: rboukhalfa25@scienceleadership.org</p>
            <p>LinkedIn: <a href="https://www.linkedin.com/in/rayaneboukhalfa/">Rayane Boukhalfa</a></p>
        </section>
    </div>
    <footer>
        <p>&copy; 2024 Rayane Boukhalfa</p>
    </footer>
</body>
</html>