biology_website/index.html at main · Begadbigo/biology_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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BioLearn - Interactive Biology</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <script src="script.js"></script>
</head>
<body>


  <nav class="navbar">
    <div class="logo">BioLearn</div>
    <ul class="nav-links">
      <li><a href="#home">Home</a></li>
      <li><a href="#systems">Body Systems</a></li>
      <li><a href="#quiz">Quiz</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>

<section id="home" class="glass-section">

  <h2>Welcome to BioLearn</h2>
  <p>
    BioLearn is your interactive companion for exploring the human body.
    We believe learning biology should be visual, dynamic, and fun — not memorized from a textbook!
  </p>
  <p>
    Dive into beautifully illustrated body systems, explore animations and videos,
    and test your knowledge with interactive quizzes designed to help you learn better and remember longer.
  </p>
  <p>
    Whether you're a student, teacher, or simply curious, BioLearn is here to make the complex simple and the learning enjoyable.
  </p>
</section>
<blockquote>"Science is a way of thinking much more than it is a body of knowledge." – Carl Sagan</blockquote>


<section id="systems" class="glass-section">
  <h2>Body Systems</h2>
  <p>Explore major human body systems below.</p>

  <div class="cards">
    <div class="card">
      <i class="fas fa-utensils fa-2x card-icon"></i>
      <h3>Digestive System</h3>
      <p>Breaks down food and absorbs nutrients.</p>
      <button onclick="location.href='digestive.html'">Explore</button>
    </div>


    <div class="card">
      <i class="fas fa-lungs fa-2x card-icon"></i>
      <h3>Respiratory System</h3>
      <p>Brings oxygen into the body and removes carbon dioxide.</p>
      <button onclick="location.href='respiratory.html'">Explore</button>
    </div>

    <div class="card coming-soon">
      <i class="fas fa-brain fa-2x card-icon"></i>
      <h3>Nervous System</h3>
      <p>Controls body functions and activities.</p>
      <button disabled>Coming Soon</button>
    </div>
  </div>
</section>


<section id="quiz" class="glass-section">
  <h2>Test Your Knowledge</h2>
  <p>Take quick quizzes to reinforce what you’ve learned!</p>

  <div class="cards">

    <div class="card">
      <i class="fas fa-utensils fa-2x card-icon"></i>
      <h3>Digestive System Quiz</h3>
      <p>10 questions to check your understanding of digestion.</p>
      <button onclick="location.href='digestive-quiz.html'">Start Quiz</button>
    </div>


    <div class="card">
      <i class="fas fa-lungs fa-2x card-icon"></i>
      <h3>Respiratory System Quiz</h3>
      <p>Test your knowledge of the lungs and breathing process.</p>
      <button onclick="location.href='respiratory-quiz.html'">Start Quiz</button>
    </div>


    <div class="card coming-soon">
      <i class="fas fa-brain fa-2x card-icon"></i>
      <h3>Nervous System Quiz</h3>
      <p>Challenge coming soon!</p>
      <button disabled>Coming Soon</button>
    </div>
  </div>
</section>


<section id="about" class="glass-section">
    <h2>About BioLearn</h2>
    <p><strong>BioLearn</strong> is an interactive educational platform designed to help students explore human biology in a fun, engaging, and hands-on way.</p>

    <h3>🎯 Our Mission</h3>
    <p>To simplify complex biological systems through visuals, simulations, and quizzes — so anyone can learn, remember, and enjoy biology!</p>

    <h3>💡 Features</h3>
    <ul>
      <li>Interactive diagrams and animations</li>
      <li>Quizzes with instant feedback and progress tracking</li>
      <li>Fun facts and videos to spark curiosity</li>
      <li>Designed for self-learning, classrooms, and revision</li>
    </ul>

    <h3>📘 Who Is It For?</h3>
    <p>BioLearn is perfect for middle and high school students, science teachers, and curious minds looking to understand the human body better.</p>

    <p>We believe learning biology shouldn't be boring. With BioLearn, it's alive.</p>
</section>

<section id="contact" class="contact-section">
  <h2>Contact Me</h2>
  <p>You can reach out through any of the platforms below:</p>

  <div class="social-links">
    <a href="mailto:begadbagod55@gmail.com" target="_blank" title="Gmail">
      <i class="fas fa-envelope"></i>
    </a>
    <a href="https://www.linkedin.com/in/begad-wael-470a25366" target="_blank" title="LinkedIn">
      <i class="fab fa-linkedin"></i>
    </a>
    <a href="https://github.com/Begadbigo" target="_blank" title="GitHub">
      <i class="fab fa-github"></i>
    </a>
  </div>

  <p class="credit">© 2025 BioLearn. Designed for students, by students.</p>
</section>


  <canvas id="bioParticles"></canvas>

</body>
</html>