Skip to content

Commit 6adf47b

Browse files
codingkattycodingkatty
authored
Merge pull request #124 from SHANMUGAPRIYA-1/main
Image Allignment
2 parents 342a724 + 5226c8d commit 6adf47b

File tree

2 files changed

+226
-226
lines changed

2 files changed

+226
-226
lines changed

‎index.html

Lines changed: 125 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Math 4 Python - Learn and Challenge Your Math Skills</title>
7-
<meta
8-
name="description"
9-
content="A platform to learn mathematical concepts for Python programming and engage in coding challenges."
10-
/>
11-
<meta
12-
name="keywords"
13-
content="math, python, learning, challenges, programming"
14-
/>
15-
<link rel="icon" href="Untitled design1.ico" type="image/svg+xml" />
16-
<!-- <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">-->
7+
<meta name="description" content="A platform to learn mathematical concepts for Python programming and engage in coding challenges.">
8+
<meta name="keywords" content="math, python, learning, challenges, programming">
9+
<link rel="icon" href="Untitled design1.ico" type="image/svg+xml">
1710
<link rel="stylesheet" href="styles.css">
18-
<link rel="stylesheet" href="hamburger_menu.css">
1911
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
2012
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
2113
</head>
2214
<body id="home">
2315
<div class="navbar">
24-
<a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
2516
<div class="nav-links">
2617
<a href="index.html" class="active">Home</a>
2718
<a href="about.html">About</a>
@@ -34,124 +25,138 @@
3425
<i class="fas fa-sun"></i>
3526
<i class="fas fa-moon"></i>
3627
</button>
37-
<a href="javascript:void(0);" class="icon" onclick="openMobileMenu()">
38-
<i class="fa fa-bars"></i>
39-
<i class="fa fa-times" style="display: none;"></i>
40-
</a>
4128
</div>
29+
<a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
4230
</div>
4331

4432
<div class="content">
45-
<h1>Welcome to Math 4 Python</h1>
46-
<p>
47-
Learn Python programming with a focus on mathematical concepts and
48-
problem-solving.
49-
</p>
50-
51-
<div class="features">
52-
<h2>Key Features:</h2>
53-
<div class="feature">
54-
<img src="images/lesson.png" alt="Interactive Lessons" id="icon1" />
55-
<h3>Interactive Lessons</h3>
56-
<p>Learn Python through hands-on, interactive coding exercises.</p>
33+
<h1>Welcome to Math 4 Python</h1>
34+
<p>Learn Python programming with a focus on mathematical concepts and problem-solving.</p>
35+
36+
<div class="features">
37+
<h2>Key Features</h2>
38+
39+
<!-- Feature 1 -->
40+
<div class="feature" id="feature1">
41+
<img src="images/lesson.png" alt="Interactive Lessons" id="icon1">
42+
<div class="micro-element">
43+
<h3>Interactive Lessons</h3>
44+
<div class="progress-bar" title="80% completed">
45+
<div class="progress" style="width: 80%;"></div>
46+
</div>
47+
<p>Learn Python through hands-on, interactive coding exercises.</p>
48+
</div>
49+
</div>
50+
51+
<!-- Feature 2 -->
52+
<div class="feature" id="feature2">
53+
<img src="images/task.png" alt="Math Challenges" id="icon2">
54+
<div class="micro-element">
55+
<h3>Math-focused Challenges</h3>
56+
<div class="rating" title="4.5 out of 5 stars">
57+
<i class="fas fa-star"></i>
58+
<i class="fas fa-star"></i>
59+
<i class="fas fa-star"></i>
60+
<i class="fas fa-star"></i>
61+
<i class="fas fa-star-half-alt"></i>
62+
</div>
63+
<p>Solve mathematical problems using Python to reinforce your skills.</p>
64+
</div>
65+
</div>
66+
67+
<!-- Feature 3 -->
68+
<div class="feature" id="feature3">
69+
<img src="images/feedback.png" alt="Real-time Feedback" id="icon3">
70+
<div class="micro-element">
71+
<h3>Real-time Feedback</h3>
72+
<div class="live-feedback">
73+
<i class="fas fa-check-circle"></i> Code validated successfully!
74+
</div>
75+
<p>Get instant feedback on your code and track your progress.</p>
76+
</div>
77+
</div>
78+
79+
<!-- Feature 4: Peer Ranking -->
80+
<div class="feature" id="feature4">
81+
<img src="images/leaderboard.png" alt="Peer Ranking" id="icon4">
82+
<div class="micro-element">
83+
<h3>Peer Ranking</h3>
84+
<div class="rank">
85+
<p><i class="fas fa-trophy"></i> Your Rank: 5th</p>
86+
</div>
87+
<p>See how you rank among your peers in coding challenges.</p>
88+
<div class="achievement-badges">
89+
<p>Achievements:</p>
90+
<img src="images/badge1.png" alt="Beginner Badge" title="Beginner Badge">
91+
<img src="images/badge2.png" alt="Intermediate Badge" title="Intermediate Badge">
92+
<img src="images/badge3.png" alt="Advanced Badge" title="Advanced Badge">
93+
</div>
94+
</div>
95+
</div>
96+
97+
<!-- Feature 5: Video Tutorials -->
98+
<div class="feature" id="feature5">
99+
<img src="images/video_tutorials.png" alt="Video Tutorials" id="icon5">
100+
<div class="micro-element">
101+
<h3>Video Tutorials</h3>
102+
<p>Access a library of video tutorials that cover various Python concepts.</p>
103+
</div>
104+
</div>
105+
106+
<!-- Feature 6: Mentorship -->
107+
<div class="feature" id="feature6">
108+
<img src="images/mentorship.png" alt="Mentorship" id="icon6">
109+
<div class="micro-element">
110+
<h3>Mentorship</h3>
111+
<p>Connect with mentors to guide you through your learning journey.</p>
112+
</div>
113+
</div>
57114
</div>
58-
<div class="feature">
59-
<img src="images/task.png" alt="Math Challenges" id="icon2" />
60-
<h3>Math-focused Challenges</h3>
61-
<p>
62-
Solve mathematical problems using Python to reinforce your skills.
63-
</p>
115+
116+
<div class="call-to-action">
117+
<h2>Start learning Today!</h2>
118+
<p>Ready to dive into the world of math and Python? Click below to get started!</p>
119+
<a href="learn.html" class="cta-button">Get Started</a>
64120
</div>
65-
<div class="feature">
66-
<img src="images/feedback.png" alt="Real-time Feedback" id="icon3" />
67-
<h3>Real-time Feedback</h3>
68-
<p>Get instant feedback on your code and track your progress.</p>
69-
</div>
70-
</div>
71-
72-
<div class="call-to-action">
73-
<h2>Start learning Today!</h2>
74-
<p>
75-
Ready to dive into the world of math and Python? Click below to get
76-
started!
77-
</p>
78-
<a href="learn.html" class="cta-button">Get Started</a>
79-
</div>
80121
</div>
81122

82123
<footer>
83-
<div class="footer-content">
84-
<div class="footer-section about">
85-
<h3>Math 4 Python</h3>
86-
<p>
87-
Enhance your Python skills while solving math-focused challenges.
88-
Learn, code, and improve through interactive lessons with real-time
89-
feedback.
90-
</p>
91-
<p>
92-
<span class="fas fa-envelope"></span>
93-
<a href="mailto:[email protected]">[email protected]</a>
94-
</p>
95-
<p>
96-
<span class="fas fa-phone"></span>
97-
<a href="tel:+1234567890">+123 456 7890</a>
98-
</p>
124+
<div class="footer-content">
125+
<div class="footer-section about">
126+
<h3>Math 4 Python</h3>
127+
<p>Enhance your Python skills while solving math-focused challenges. Learn, code, and improve through interactive lessons with real-time feedback.</p>
128+
<p><i class="fas fa-envelope"></i> [email protected]</p>
129+
<p><i class="fas fa-phone"></i> +123 456 7890</p>
130+
</div>
131+
132+
<div class="footer-section links">
133+
<h3>Quick Links</h3>
134+
<ul>
135+
<li><a href="index.html">Home</a></li>
136+
<li><a href="about.html">About</a></li>
137+
<li><a href="learn.html">Learn</a></li>
138+
<li><a href="challenge.html">Challenge</a></li>
139+
<li><a href="feedback.html">Feedback</a></li>
140+
<li><a href="faq.html">FAQs</a></li>
141+
</ul>
142+
</div>
143+
144+
<div class="footer-section social">
145+
<h3>Follow Us</h3>
146+
<a href="#"><i class="fab fa-facebook"></i></a>
147+
<a href="#"><i class="fab fa-twitter"></i></a>
148+
<a href="#"><i class="fab fa-linkedin"></i></a>
149+
<a href="#"><i class="fab fa-github"></i></a>
150+
</div>
99151
</div>
100-
101-
<div class="footer-section links">
102-
<h3>Quick Links</h3>
103-
<ul>
104-
<li><a href="index.html">Home</a></li>
105-
<li><a href="about.html">About</a></li>
106-
<li><a href="learn.html">Learn</a></li>
107-
<li><a href="challenge.html">Challenge</a></li>
108-
<li><a href="feedback.html">Feedback</a></li>
109-
<li><a href="faq.html">FAQs</a></li>
110-
</ul>
152+
153+
<div class="footer-bottom">
154+
<p>&copy; 2024 Math 4 Python. All Rights Reserved.</p>
111155
</div>
112-
113-
<div class="footer-section social">
114-
<h3>Follow Us</h3>
115-
<a href="#"><i class="fab fa-facebook"></i></a>
116-
<a href="#"><i class="fab fa-twitter"></i></a>
117-
<a href="#"><i class="fab fa-linkedin"></i></a>
118-
<a href="#"><i class="fab fa-github"></i></a>
119-
</div>
120-
</div>
121-
122-
<div class="footer-bottom">
123-
<p>&copy; 2024 Math 4 Python. All Rights Reserved.</p>
124-
</div>
125156
</footer>
126157

127-
<button onclick="topFunction()" id="nav-top">
128-
<i class="material-icons">arrow_upward</i>
129-
</button>
158+
<button onclick="topFunction()" id="nav-top"><i class="material-icons">arrow_upward</i></button>
130159
<script src="script.js"></script>
131160

132-
<script>
133-
let mybutton = document.getElementById("nav-top");
134-
window.onscroll = function () {
135-
scrollFunction();
136-
};
137-
138-
function scrollFunction() {
139-
if (
140-
document.body.scrollTop > 20 ||
141-
document.documentElement.scrollTop > 20
142-
) {
143-
mybutton.style.display = "block";
144-
} else {
145-
mybutton.style.display = "none";
146-
}
147-
}
148-
149-
function topFunction() {
150-
window.scrollTo({
151-
top: 0,
152-
behavior: "smooth",
153-
});
154-
}
155-
</script>
156-
</body>
161+
</body>
157162
</html>

0 commit comments

Comments
 (0)