-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
186 lines (172 loc) · 10.9 KB
/
index.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Coding Tutorials</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="logo">
<a href="./index.html">
CODE<span style="color: #ff6f61;">FOAD</span>
</a>
</div>
<ul class="navigationlinks">
<li><a href="./index.html">Home</a></li>
<li class="tutdropdown">
<a>Tutorials</a>
<ul class="tutorialdropdownitems">
<li><a href="./Python1.html">Python Essentials</a></li>
<li><a href="./bashscripting.html">Bash Scripting</a></li>
<li><a href="./html.html">HTML</a></li>
<li><a href="./css.html">CSS</a></li>
</ul>
<li><a href="#aboutus">About Us</a></li>
<li><a href="./contactus.html">Contact</a></li>
<li><a href="./login.html" class="loginbutton">Login</a></li>
</ul>
</nav>
<div class="hero">
<h1>Start Your Coding Journey Today!</h1>
<p>Learn the fundamentals of coding step-by-step with interactive tutorials.</p>
<div class="herobuttons">
<a href="#getstarted" class="btn1">Get Started</a>
<a href="./Python1.html" class="btn2">Explore Tutorials</a>
</div>
</div>
</header>
<section class="features">
<h2 class="heading">Why Learn With Us?</h2>
<div class="featurescontainer">
<div class="feature">
<img src="./Beginner_friendly_pic(1).png" class="featureicon">
<h3>Beginner-Friendly Tutorials</h3>
<p>Step-by-step guidance to help you learn coding from scratch, no prior experience required.</p>
</div>
<div class="feature">
<img src="./Mobile_icon.png" class="featureicon">
<h3>Mobile <br> Learning</h3>
<p>Access coding lessons, challenges, and projects directly from your mobile device. </p>
</div>
<div class="feature">
<img src="./community_support.png" class="featureicon">
<h3>Community Support</h3>
<p>Join a vibrant community of learners and mentors ready to help you succeed.</p>
</div>
<div class="feature">
<img src="./settings_icon.png" class="featureicon">
<h3>Fresh Content & Updates</h3>
<p>Access the latest tutorials and tools, keeping you up to date with new coding trends.</p>
</div>
</div>
</section>
<section class="tutorials">
<h2 class="tutotialtitle">Our Featured Tutorials</h2>
<hr style="margin-bottom: 30px;" noshade>
<div class="tutorialitem" id="getstarted">
<img src="./html.jpg" alt="HTML Basics" class="tutorialimage">
<div class="tutorialcontent">
<h3>HTML Basics</h3>
<p>Creating structured, semantic, and accessible HTML pages means organizing your content thoughtfully to convey clear meaning and usability. Structure your layout with sections that naturally flow, like a clear introduction, body, and conclusion. Use elements that describe their purpose, such as headings for titles and lists for grouped items. Focus on accessibility by designing for all users, including those with disabilities, ensuring readability, and considering assistive technologies. Keep the design intuitive, allowing users to navigate easily. Finally, test your pages for clarity and functionality, ensuring they meet user needs.</p>
<a href="./html.html" class="btntutorial">Start Learning</a>
</div>
</div>
<hr style="margin-bottom: 30px;" noshade>
<div class="tutorialitem tutorialreverse">
<img src="./Cssimage.jpg" alt="CSS Styling" class="tutorialimage">
<div class="tutorialcontent">
<h3>CSS Styling</h3>
<p>Mastering the art of styling web pages involves creating visually appealing and functional designs. Start by understanding the basics of CSS to style elements with colors, fonts, and layouts. Embrace responsive design principles, using flexible grids and media queries to adapt your site for various devices. Experiment with modern tools like Flexbox and CSS Grid to craft dynamic and organized layouts. Prioritize consistency by implementing a design system or reusable style guide. Finally, test your designs on different screen sizes and browsers to ensure a seamless user experience.</p>
<a href="./css.html" class="btntutorial">Start Learning</a>
</div>
</div>
<hr style="margin-bottom: 30px;" noshade>
<div class="tutorialitem">
<img src="./pythonessentialshero.jpg" alt="Python Essentials" class="tutorialimage">
<div class="tutorialcontent">
<h3>Python Essentials</h3>
<p>Mastering Python for automation involves writing scripts to simplify repetitive tasks and improve workflows. Start by understanding the basic syntax, such as variables, loops, and conditionals. Use Python's built-in features to read and write data, manipulate text, or handle simple calculations. Create functions to break down tasks into reusable components. Automate actions like sending notifications, managing data files, or triggering reports. Finally, test and refine your scripts to ensure they're efficient and reliable, making them adaptable for future tasks.</p>
<a href="./Python1.html" class="btntutorial">Start Learning</a>
</div>
</div>
<hr style="margin-bottom: 30px;" noshade>
<div class="tutorialitem tutorialreverse">
<img src="./bashimage.jpg" alt="Bash Scripting" class="tutorialimage">
<div class="tutorialcontent">
<h3>Bash Scripting</h3>
<p>Automating tasks with Bash scripting allows you to simplify repetitive actions and optimize workflows. Start by understanding basic Bash commands to interact with files, directories, and processes. Create scripts to automate tasks like backups, file management, or system monitoring. Leverage loops and conditional statements to add logic and control flow in your scripts. Enhance efficiency by chaining commands and using variables for flexibility. Finally, test your scripts regularly to ensure they run smoothly and update them as your needs evolve.</p>
<a href="./bashscripting.html" class="btntutorial">Start Learning</a>
</div>
</div>
<hr style="margin-bottom: 30px;" noshade>
</section>
<footer class="aboutusfooter" id="aboutus">
<h2>Meet Our Team</h2>
<p class="aboutussubtitle">Passionate individuals building innovative solutions together</p>
<div class="persons">
<div class="person">
<div class="picture">
<img src="./rohan.jpeg" alt="rohan">
</div>
<h3>Rohan Kumar</h3>
<p>Python Expert</p>
<div class="sociallinks">
<a href="https://www.linkedin.com/in/rohan-kumar-2b2ab9326/" target="_blank">
<img src="linkedinlogo.png" alt="LinkedIn" class="linkedinlogo">
</a>
<a href="https://github.com/Hungry-devourer" target="_blank">
<img src="githublogo.png" alt="GitHub" class="githublogo">
</a>
<a href="https://www.instagram.com/rohan_gupta_c53/" target="_blank">
<img src="Instagramlogo.png" alt="Instagram" class="istagramlogo">
</a>
</div>
</div>
<div class="person">
<div class="picture">
<img src="./jadu.jpeg" alt="jadu">
</div>
<h3>Yashraj Chouhan</h3>
<p>Html Css Expert</p>
<div class="sociallinks">
<a href="https://www.linkedin.com/in/yashraj-chouhan-602763288/" target="_blank">
<img src="linkedinlogo.png" alt="LinkedIn" class="linkedinlogo">
</a>
<a href="https://github.com/Jadu07" target="_blank">
<img src="githublogo.png" alt="GitHub" class="githublogo">
</a>
<a href="https://www.instagram.com/_jadu_._/" target="_blank">
<img src="Instagramlogo.png" alt="Instagram" class="istagramlogo">
</a>
</div>
</div>
<div class="person">
<div class="picture">
<img src="./smk.jpeg" alt="smk">
</div>
<h3>Suraj Kulkarni</h3>
<p>Bash Expert</p>
<div class="sociallinks">
<a href="https://www.linkedin.com/in/suraj-kulkarni-580820313/" target="_blank">
<img src="linkedinlogo.png" alt="LinkedIn" class="linkedinlogo">
</a>
<a href="https://github.com/SMK-07" target="_blank">
<img src="githublogo.png" alt="GitHub" class="githublogo">
</a>
<a href="https://www.instagram.com/_suraj_kulkarni07/" target="_blank">
<img src="Instagramlogo.png" alt="Instagram" class="istagramlogo">
</a>
</div>
</div>
</div>
<hr style=" margin-top: 40px; margin-bottom: 25px;">
<div class="footercontainer">
<p class="footertext">© 2024 Made with ❤️ by <span class="highlight">Rohan Kumar</span>, <span class="highlight">Yashraj Chouhan</span>, and <span class="highlight">Suraj Kulkarni</span>.</p>
<p class="footertext">Empowering the world, one line of code at a time. 🚀</p>
</div>
</footer>
</body>
</html>