-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
102 lines (102 loc) · 8.58 KB
/
index.html
File metadata and controls
102 lines (102 loc) · 8.58 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn CSS from scratch">
<meta name="author" content="Suraj Ingole">
<meta name="keywords" content="css, css tutorial, css learning">
<link rel="stylesheet" href="style.css">
<meta name="robots" content="index, follow">
<link rel="shortcut icon" href="images/css_favicon.png" type="image/x-icon">
<title>CSS Mastery</title>
</head>
<body>
<div class="hero-bg">
<div class="hero-overlay"></div>
<header class="main-header">
<img src="images/css_favicon.png" alt="CSS Logo" class="logo">
<h1 class="main-title">CSS Mastery</h1>
<p class="main-tagline">Level up your web design skills with interactive, beautiful CSS learning resources.</p>
</header>
</div>
<main>
<section class="directory-section">
<h2 class="section-title">CSS Files Directory</h2>
<ul class="file-list">
<li><a href="HTML/what-is-css.html" target="_blank" rel="noopener noreferrer">What is CSS</a></li>
<li><a href="HTML/stylesheet-type.html" target="_blank" rel="noopener noreferrer">CSS Stylesheet Types</a></li>
<li><a href="HTML/selectors.html" target="_blank" rel="noopener noreferrer">CSS Selectors</a></li>
<li><a href="HTML/colors.html" target="_blank" rel="noopener noreferrer">CSS Colors</a></li>
<li><a href="HTML/comments.html" target="_blank" rel="noopener noreferrer">CSS Comments</a></li>
<li><a href="HTML/background.html" target="_blank" rel="noopener noreferrer">CSS Background</a></li>
<li><a href="HTML/units.html" target="_blank" rel="noopener noreferrer">CSS Units</a></li>
<li><a href="HTML/fonts.html" target="_blank" rel="noopener noreferrer">CSS Fonts</a></li>
<li><a href="HTML/text.html" target="_blank" rel="noopener noreferrer">CSS Text Properties</a></li>
<li><a href="HTML/box-model.html" target="_blank" rel="noopener noreferrer">CSS Box Model</a></li>
<li><a href="HTML/gradient.html" target="_blank" rel="noopener noreferrer">CSS Gradients</a></li>
<li><a href="HTML/box-shadow.html" target="_blank" rel="noopener noreferrer">CSS Box Shadow</a></li>
<li><a href="HTML/drop-shadow.html" target="_blank" rel="noopener noreferrer">CSS Drop Shadow</a></li>
<li><a href="HTML/filters.html" target="_blank" rel="noopener noreferrer">CSS Filters</a></li>
<li><a href="HTML/list.html" target="_blank" rel="noopener noreferrer">CSS Lists</a></li>
<li><a href="HTML/display.html" target="_blank" rel="noopener noreferrer">CSS Display</a></li>
<li><a href="HTML/anchor-state.html" target="_blank" rel="noopener noreferrer">CSS Anchor State</a></li>
<li><a href="HTML/positions.html" target="_blank" rel="noopener noreferrer">CSS Positioning</a></li>
<li><a href="HTML/z-index.html" target="_blank" rel="noopener noreferrer">CSS Z-index</a></li>
<li><a href="HTML/overflow.html" target="_blank" rel="noopener noreferrer">CSS Overflow</a></li>
<li><a href="HTML/pseudo-elements.html" target="_blank" rel="noopener noreferrer">CSS Pseudo-elements</a></li>
<li><a href="HTML/pseudo-class.html" target="_blank" rel="noopener noreferrer">CSS Pseudo-classes</a></li>
<li><a href="HTML/column-layout.html" target="_blank" rel="noopener noreferrer">CSS Column Layout</a></li>
<li><a href="HTML/float.html" target="_blank" rel="noopener noreferrer">CSS Float</a></li>
<li><a href="HTML/flexbox.html" target="_blank" rel="noopener noreferrer">CSS Flexbox</a></li>
<li><a href="HTML/grid.html" target="_blank" rel="noopener noreferrer">CSS Grid</a></li>
<li><a href="HTML/transitions.html" target="_blank" rel="noopener noreferrer">CSS Transitions</a></li>
<li><a href="HTML/transform.html" target="_blank" rel="noopener noreferrer">CSS Transforms</a></li>
<li><a href="HTML/animations.html" target="_blank" rel="noopener noreferrer">CSS Animations</a></li>
<li><a href="HTML/variables.html" target="_blank" rel="noopener noreferrer">CSS Variables</a></li>
<li><a href="HTML/specificity.html" target="_blank" rel="noopener noreferrer">CSS Specificity</a></li>
<li><a href="HTML/media-query.html" target="_blank" rel="noopener noreferrer">CSS Media Queries</a></li>
<li><a href="HTML/container-queries.html" target="_blank" rel="noopener noreferrer">CSS Container Queries</a></li>
<li><a href="HTML/inheritance-&-cascade.html" target="_blank" rel="noopener noreferrer">CSS Inheritance & Cascade</a></li>
<li><a href="HTML/backdrop-filter.html" target="_blank" rel="noopener noreferrer">CSS Backdrop Filter</a></li>
<li><a href="HTML/writing-mode.html" target="_blank" rel="noopener noreferrer">CSS Writing Mode</a></li>
<li><a href="HTML/aspect-ratio.html" target="_blank" rel="noopener noreferrer">CSS Aspect Ratio</a></li>
<li><a href="HTML/object-fit-object-position.html" target="_blank" rel="noopener noreferrer">CSS Object Fit & Object Position</a></li>
<li><a href="HTML/logical-properties.html" target="_blank" rel="noopener noreferrer">CSS Logical Properties</a></li>
<li><a href="HTML/aos-plugin.html" target="_blank" rel="noopener noreferrer">CSS AOS Plugin</a></li>
<li><a href="HTML/scroll-snap.html" target="_blank" rel="noopener noreferrer">CSS Scroll Snap</a></li>
<li><a href="HTML/reduced-motion-query.html" target="_blank" rel="noopener noreferrer">CSS Reduced Motion Query</a></li>
<li><a href="HTML/css-nesting.html" target="_blank" rel="noopener noreferrer">CSS Nesting</a></li>
<li><a href="HTML/css-@layer.html" target="_blank" rel="noopener noreferrer">CSS @layer</a></li>
<li><a href="HTML/all-property.html" target="_blank" rel="noopener noreferrer">CSS All Property</a></li>
<li><a href="HTML/appearance.html" target="_blank" rel="noopener noreferrer">CSS Appearance</a></li>
<li><a href="HTML/accent-color.html" target="_blank" rel="noopener noreferrer">CSS Accent Color</a></li>
<li><a href="HTML/scrollbar-styling.html" target="_blank" rel="noopener noreferrer">CSS Scrollbar Styling</a></li>
<li><a href="HTML/clip-path.html" target="_blank" rel="noopener noreferrer">CSS Clip Path</a></li>
<li><a href="HTML/css-bem.html" target="_blank" rel="noopener noreferrer">CSS BEM</a></li>
<li><a href="HTML/css-smacss.html" target="_blank" rel="noopener noreferrer">CSS SMACSS</a></li>
</ul>
</section>
<div class="section-divider"></div>
<section class="challenge-section">
<h2 class="section-title">CSS Challenges</h2>
<ul class="challenge-list">
<li><a href="challenges/01_profile_card/profile-card.html" target="_blank" rel="noopener noreferrer">Profile Card</a></li>
<li><a href="challenges/02_navbar_active/navbar-active.html" target="_blank" rel="noopener noreferrer">Navbar Active</a></li>
<li><a href="challenges/03_pricing_table/pricing-table.html" target="_blank" rel="noopener noreferrer">Pricing Table</a></li>
<li><a href="challenges/04_multi_column_article/multi-column-article.html" target="_blank" rel="noopener noreferrer">Multi Column Article</a></li>
<li><a href="challenges/05_animated_login/animated-login.html" target="_blank" rel="noopener noreferrer">Animated Login</a></li>
<li><a href="challenges/06_image_gallery/image-gallery.html" target="_blank" rel="noopener noreferrer">Image Gallery</a></li>
<li><a href="challenges/07_clip_path_card/clip-path-card.html" target="_blank" rel="noopener noreferrer">Clip Path Card</a></li>
<li><a href="challenges/08_dashboard_layout/dashboard-layout.html" target="_blank" rel="noopener noreferrer">Dashboard Layout</a></li>
<li><a href="challenges/09_css_loader/css-loader.html" target="_blank" rel="noopener noreferrer">CSS Loader</a></li>
<li><a href="challenges/10_portfolio_site/portfolio-site.html" target="_blank" rel="noopener noreferrer">Portfolio Site</a></li>
<li><a href="#" class="challenge-coming-soon">More interactive CSS challenges coming soon!</a></li>
</ul>
</section>
<footer class="main-footer">
<p>Made with <span class="heart">❤</span> by Suraj Ingole & contributors. <a href="https://unsplash.com/" target="_blank" rel="noopener noreferrer">Background image by Unsplash</a></p>
</footer>
</main>
</body>
</html>