-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathstyle.html
More file actions
executable file
·185 lines (183 loc) · 11.3 KB
/
style.html
File metadata and controls
executable file
·185 lines (183 loc) · 11.3 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="manifest" href="/site.webmanifest">
<title>DevDum!</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<div id="header">
<svg version="1.1" id="Capa_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"></svg>
</div>
</div>
<div id="mobileMenuToggle" title="Menu">Menu</div>
<div id="headerLeft">
<a href="/"><img alt="Home" title="Home" id="menuToggle" src="DevDum copy (1).png" width="190px"/></a>
</div>
<div id="headerRight">
<nav>
<ul>
<li><a id="github" rel="nofollow" href="https://github.com/" target="_blank">GitHub</a></li>
<li><a id="dailydev" rel="nofollow" href="https://app.daily.dev/" target="_blank">DailyDev</a></li>
<li><a id="w3" rel="nofollow" href="https://www.w3schools.com/" target="_blank">W3Schools</a></li>
<li><a id="mdn" rel="nofollow" href="https://developer.mozilla.org/en-US/" target="_blank">MDN WebDocs</a></li>
<li><a id="stack" rel="nofollow" href="https://stackoverflow.com/" target="_blank">StackOverflow</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="wrapall">
<div id="sidebar">
<div id="stickThis">
<div id="sidebarContent">
<!-- <div id="logo"><imd </h1>
<h4>Less Searching. More Learning.</h4> -->
<aside>
<div><a id="color1" href="html.html"><img alt="HTML" title="HTML" src="icons/output-onlineimagetools-html.png"/></a></div>
<div><a id="color2" href="style.html"><img alt="CSS" title="CSS" src="icons/output-onlineimagetools-css.png"/></a></div>
<div><a id="color3" href="javascript.html"><img alt="JavaScript" title="Javascript" src="icons/output-onlineimagetools-js.png" width="53px"/></a></div>
<div><a id="color4" href="bootstrap.html"><img alt="Bootstrap" title="Bootstrap" src="icons/output-onlineimagetools-bootstrap.png"/></a></div>
<div><a id="color5" href="react.html"><img alt="React" title="React" src="icons/output-onlineimagetools-react.png"/></a></div>
<div><a id="color6" href="nodejs.html"><img alt="Node" title="Node" src="icons/output-onlineimagetools-nodejs.png" width="50px"/></a></div>
<div><a id="color7" href="api.html"><img alt="API" title="API" src="icons/output-onlineimagetools-api.png"/></a></div>
<div><a id="color8" href="mysql.html"><img alt="SQL" title="SQL" src="icons/output-onlineimagetools-sql.png"/></a></div>
<div><a id="color9" href="github.html"><img alt="GitHub" title="GitHub" src="icons/output-onlineimagetools-github.png"/></a></div>
<div><a id="color10" href="youtube.html"><img alt="YouTube" title="YouTube" src="icons/output-onlineimagetools-youtube.png"/></a></div>
<div><a id="color11" href="more.html"><img alt="More" title="More" src="icons/output-onlineimagetools-more.png" width="48px"/></a></div>
<a class="back2Top" href="#"><code>⮝ Back to Top ⮝</code></a>
</aside>
</div>
</div>
<div id="stick-here"></div>
</div>
<div id="main">
<section id="page">
<main>
<article id="yellow">
<h1 class="display-2">CSS<span class="vim-caret"><img alt="style" title="style" src="icons/output-onlineimagetools-css.png" width="68px"/></span></h1>
<h4><strong>CSS stands for Cascading Style Sheets and describes how HTML elements should be displayed. CSS is among the core languages of the open web and is standardized across Web browsers.</strong></h4>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for resources..." title="Type in a name">
</article>
<ul id="myUL">
<article>
<h2><a href="https://www.html-css-js.com/css/" target="_blank">Free CSS Tools and Resources</a></h2>
<p>Browse our free online and interactive CSS tool collection. Code editor, Cheat Sheet, 10 Code Generators, Blog, Useful Links, and More...</p>
</article>
<article>
<h2><a href="https://www.css-tricks.com/" target="_blank">CSS-Tricks</a></h2>
<p>Daily articles about CSS, HTML, JavaScript, and all things related to web design and development: articles, videos, almanac, snippets, newsletter, guides...</p>
</article>
<article>
<h2><a href="https://www.w3schools.com/css/" target="_blank">W3 Schools</a></h2>
<p>This CSS tutorial contains hundreds of CSS examples. Learn from over 300 examples! </p>
</article>
<article>
<h2><a href="https://www.htmlgoodies.com/css/" target="_blank">HTML Goodies | CSS Tutorials </a></h2>
<p>We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. </p>
</article>
<article>
<h2><a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">MDN | CSS Referecne</a></h2>
<p>Use this CSS reference to browse an alphabetical index of all the standard CSS properties, pseudo-classes, pseudo-elements, data types, and at-rules.</p>
</article>
<article>
<h2><a href="https://tympanus.net/codrops/css_reference/" target="_blank">Codrops| CSS Reference</a></h2>
<p>An extensive CSS reference with all the important properties and info to learn CSS from the basics</p>
</article>
<article>
<h2><a href="https://web.dev/learn/css/"" target="_blank">Web.dev | Learn CSS </a></h2>
<p>An evergreen CSS course and reference to level up your web styling expertise.</p>
</article>
<article>
<h2><a href="https://cssreference.io/" target="_blank">cssreference.io</a></h2>
<p>cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.</p>
</article>
<article>
<h2><a href="https://overapi.com/" target="_blank">OverAPI | CSS Cheat Sheet</a></h2>
<p>CSS Tools & Cheat Sheet. This is the whole code of OverAPI, you can fork it and use it like Github Pages locally</p>
</article>
<article>
<h2><a href="https://www.w3.org/Style/CSS/" target="_blank">The World Wide Web Consortium (W3C)</a></h2>
<p>These pages contain information on how to learn and use CSS and on available software. They also contain news from the CSS working group.</p>
</article>
<article>
<h2><a href="https://devdocs.io/" target="_blank">DevDocs | CSS </a></h2>
<p>Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules.</p>
</article>
<article>
<h2><a href="https://www.30secondsofcode.org/css/p/1" target="_blank">30 Seconds of Code | CSS Snippets </a></h2>
<p>The CSS snippet collection contains utilities and interactive examples for CSS3. It includes modern techniques for creating commonly-used layouts, styling and animating elements, as well as snippets for handling user interactions.</p>
</article>
<article>
<h2><a href="https://h.daily-dev-tips.com/10-amazing-games-to-learn-css" target="_blank">Daily.Dev | Games to Learn CSS Flexbox</a></h2>
<p>This article will highlight ten amazing games you can play to learn CSS.</p>
</article>
<article>
<h2><a href="https://www.gradient-animator.com/" target="_blank">CSS Gradient Animator</a></h2>
<p>Gradient Animator is a CSS generator used to create animated backgrounds, with the option to export as a GitHub gist.</p>
</article>
<article>
<h2><a href="https://flaviocopes.com/css-vendor-prefixes/" target="_blank">css-vendor-prefixes</a></h2>
<p>An overview of the CSS Vendor Prefixes, Autoprefixer and why they are not much relevant going forward</p>
</article>
<article>
<h2><a href="https://animate.style/ target="_blank">Animate.css | A cross-browser library of CSS animations</a></h2>
<p>Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.</p>
</article>
<article>
<h2><a href="https://www.csscodegenerators.com/" target="_blank"> Interactice CSS Generators</a></h2>
<p>Everything you need to generate awesome CSS for your next project. Customize your options and voila, your CSS code is ready to copy and paste into your project!</p>
</article>
<article>
<h2><a href="https://www.w3docs.com/snippets/css.html" target="_blank"> W3 Docs | CSS Snippets</a></h2>
<p>How-to articles, tricks, and solutions about CSS</p>
</article>
<article>
<h2><a href="https://marksheet.io/" target="_blank"> Marksheet | Free HTML & CSS Tutorials</a></h2>
<p>Build your own personal webpage from scratch, line by line, with HTML5, CSS3, and even JS.</p>
</article>
</ul>
</main>
<footer>
<p>2022©DevDum! Less searching. More learning. <a rel="nofollow" href="https://github.com/rdevans87/DevDum" target="_blank" rel="nofollow">Hosted on GitHub!</a></p>
<a href="https://www.buymeacoffee.com/ryanevans" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 42px !important;width: 180px !important;" ></a>
<a href="https://www.producthunt.com/posts/devdum-code-smarter-not-harder?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-devdum-code-smarter-not-harder" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=343032&theme=light"
alt="DevDum! Code Smarter. Not Harder. - 200+ Resources for web developers. It's a no brainer! | Product Hunt" style="width: 200px; height: 43px;" width="250" height="54" /></a>
</footer>
</section>
</div>
</div>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
article = ul.getElementsByTagName("article");
for (i = 0; i < article.length; i++) {
a = article[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
article[i].style.display = "";
} else {
article[i].style.display = "none";
}
}
}
</script>
</body>
</html>