Skip to content

Commit 9d24388

Browse files
ajay-dhangarajay-dhangar
committed
added new folder
1 parent 65444c9 commit 9d24388

File tree

4 files changed

+138
-81
lines changed

4 files changed

+138
-81
lines changed

‎docs/links-tables/tables.mdx‎

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -125,29 +125,6 @@ HTML tables support several attributes that allow you to customize their appeara
125125
</html>
126126
```
127127

128-
<BrowserWindow url="http://.../index.html">
129-
<div>
130-
<h1>Employee Directory</h1>
131-
<table border="1" cellpadding="10" cellspacing="0">
132-
<tr>
133-
<th>Name</th>
134-
<th>Position</th>
135-
<th>Salary</th>
136-
</tr>
137-
<tr>
138-
<td>John Doe</td>
139-
<td>Software Engineer</td>
140-
<td>$80,000</td>
141-
</tr>
142-
<tr>
143-
<td>Jane Smith</td>
144-
<td>Product Manager</td>
145-
<td>$100,000</td>
146-
</tr>
147-
</table>
148-
</div>
149-
</BrowserWindow>
150-
151128
In the example above, the `<table>` element has the `border`, `cellpadding`, `cellspacing`, and `width` attributes set to customize the appearance of the table. The `border` attribute specifies the width of the table border, the `cellpadding` attribute specifies the padding between the cell content and the cell border, the `cellspacing` attribute specifies the spacing between cells, and the `width` attribute specifies the width of the table.
152129

153130
## Spanning Rows and Columns
@@ -193,28 +170,6 @@ You can span rows and columns in an HTML table using the `rowspan` and `colspan`
193170
</html>
194171
```
195172

196-
<BrowserWindow url="http://.../index.html">
197-
<div>
198-
<h1>Employee Directory</h1>
199-
<table border="1" cellpadding="10" cellspacing="0">
200-
<tr>
201-
<th>Name</th>
202-
<th>Position</th>
203-
<th>Salary</th>
204-
</tr>
205-
<tr>
206-
<td>John Doe</td>
207-
<td>Software Engineer</td>
208-
<td>$80,000</td>
209-
</tr>
210-
<tr>
211-
<td>Jane Smith</td>
212-
<td colspan="2">Product Manager</td>
213-
</tr>
214-
</table>
215-
</div>
216-
</BrowserWindow>
217-
218173
In the example above, the `<td>` element containing "Product Manager" spans two columns using the `colspan` attribute. This causes the cell to take up the space of two columns in the table.
219174

220175
## Styling Tables

‎src/css/custom.css‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
/**
2-
* Any CSS included here will be global. The classic template
3-
* bundles Infima by default. Infima is a CSS framework designed to
4-
* work well for content-centric websites.
5-
*/
6-
7-
/* You can override the default Infima variables here. */
81
:root {
92
--ifm-color-primary: #2e8555;
103
--ifm-color-primary-dark: #29784c;
@@ -28,3 +21,8 @@
2821
--ifm-color-primary-lightest: #4fddbf;
2922
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
3023
}
24+
25+
.margin-vert--md {
26+
margin-top: 1.5rem;
27+
margin-bottom: 1.5rem;
28+
}

‎src/pages/index.module.css‎

Lines changed: 81 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,91 @@
1-
/**
2-
* CSS files with the .module.css suffix will be treated as CSS modules
3-
* and scoped locally.
4-
*/
5-
61
.heroBanner {
2+
background: linear-gradient(135deg, #4c6ef53a, #15abbf33);
73
padding: 4rem 0;
84
text-align: center;
9-
position: relative;
10-
overflow: hidden;
5+
border-radius: 12px;
116
}
127

13-
@media screen and (max-width: 996px) {
14-
.heroBanner {
15-
padding: 2rem;
16-
}
8+
.heroContent {
9+
max-width: 960px;
10+
margin: 0 auto;
11+
}
12+
13+
/* .heroLogo {
14+
max-width: 200px;
15+
margin-bottom: 1rem;
16+
} */
17+
18+
.heroTitle {
19+
font-size: 3rem;
20+
font-weight: 700;
21+
margin: 1rem 0;
22+
}
23+
24+
.heroSubtitle {
25+
font-size: 1.5rem;
26+
margin-bottom: 2rem;
27+
line-height: 1.6;
1728
}
1829

19-
.buttons {
30+
.buttonsContainer {
2031
display: flex;
21-
align-items: center;
2232
justify-content: center;
33+
gap: 1rem;
34+
margin-top: 1.5rem;
35+
}
36+
37+
.githubButtonContainer {
38+
margin-top: 2rem;
39+
}
40+
41+
.featuresSection {
42+
padding: 2rem;
43+
text-align: center;
44+
}
45+
46+
.featuresGrid {
47+
display: grid;
48+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
49+
gap: 2rem;
50+
margin-top: 2rem;
51+
}
52+
53+
.featureItem {
54+
background-color: #f1f3f5;
55+
padding: 1.5rem;
56+
border-radius: 12px;
57+
transition: transform 0.3s;
58+
}
59+
60+
.featureItem:hover {
61+
transform: translateY(-10px);
62+
}
63+
64+
[data-theme='dark'] .heroBanner {
65+
background: linear-gradient(135deg, #23294632, #1d355727);
66+
}
67+
68+
[data-theme='dark'] .featureItem {
69+
background-color: #2a2a2a;
70+
color: #e0e0e0;
71+
}
72+
73+
[data-theme='dark'] .getStartedButton {
74+
background-color: #3a3a3a;
75+
color: #f1faee;
76+
}
77+
78+
[data-theme='dark'] .exploreButton {
79+
background-color: #457b9d;
80+
color: #f1faee;
81+
}
82+
83+
/* Responsive Design */
84+
@media (max-width: 768px) {
85+
.heroTitle {
86+
font-size: 2.5rem;
87+
}
88+
.heroSubtitle {
89+
font-size: 1.25rem;
90+
}
2391
}

‎src/pages/index.tsx‎

Lines changed: 52 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,74 @@ import clsx from 'clsx';
22
import Link from '@docusaurus/Link';
33
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
44
import Layout from '@theme/Layout';
5-
import Heading from '@theme/Heading';
6-
75
import styles from './index.module.css';
86

97
function HomepageHeader() {
10-
const {siteConfig} = useDocusaurusContext();
8+
const { siteConfig } = useDocusaurusContext();
119
return (
12-
<header className={clsx('hero hero--primary', styles.heroBanner)}>
13-
<div className="container">
14-
<Heading as="h1" className="hero__title">
15-
{siteConfig.title}
16-
</Heading>
17-
<p className="hero__subtitle">{siteConfig.tagline}</p>
18-
<div className={styles.buttons}>
10+
<header className={clsx('hero', styles.heroBanner)}>
11+
<div className={clsx('container', styles.heroContent)}>
12+
{/* <img
13+
alt={siteConfig.title}
14+
className={clsx(styles.heroLogo, 'margin-vert--md')}
15+
src='img/logo.svg'
16+
/> */}
17+
<h1 className={styles.heroTitle}>{siteConfig.title}</h1>
18+
<p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
19+
<div className={styles.buttonsContainer}>
20+
<Link
21+
className={clsx('button button--primary button--lg', styles.getStartedButton)}
22+
to="/docs/intro"
23+
>
24+
Get Started
25+
</Link>
1926
<Link
20-
className="button button--secondary button--lg"
21-
to="/docs/intro">
22-
Getting Started
27+
className={clsx('button button--secondary button--lg', styles.exploreButton)}
28+
to="#"
29+
>
30+
Explore Features
2331
</Link>
2432
</div>
33+
{/* <div className={styles.githubButtonContainer}>
34+
<iframe
35+
src="https://ghbtns.com/github-btn.html?user=html-mastery&amp;repo=html-mastery.github.io&amp;type=star&amp;count=true&amp;size=large"
36+
frameBorder={0}
37+
scrolling={0}
38+
width={170}
39+
height={30}
40+
title="GitHub Stars"
41+
/>
42+
</div> */}
2543
</div>
2644
</header>
2745
);
2846
}
2947

48+
function FeaturesSection() {
49+
return (
50+
<section className={styles.featuresSection}>
51+
<h2>Key Features</h2>
52+
<div className={styles.featuresGrid}>
53+
<div className={styles.featureItem}>Comprehensive HTML Tutorials</div>
54+
<div className={styles.featureItem}>Interactive Code Examples</div>
55+
<div className={styles.featureItem}>In-depth Explanations</div>
56+
<div className={styles.featureItem}>Community Support</div>
57+
</div>
58+
</section>
59+
);
60+
}
61+
3062
export default function Home(): JSX.Element {
31-
const {siteConfig} = useDocusaurusContext();
63+
const { siteConfig } = useDocusaurusContext();
3264
return (
3365
<Layout
34-
title={`Hello from ${siteConfig.title}`}
35-
description="HTML Mastery is a free, open-source, online resource for learning HTML.">
66+
title={`Welcome to ${siteConfig.title}`}
67+
description="HTML Mastery is a free, open-source, online resource for learning HTML."
68+
>
3669
<HomepageHeader />
70+
<main>
71+
<FeaturesSection />
72+
</main>
3773
</Layout>
3874
);
3975
}

0 commit comments

Comments
 (0)