My CSS Wishlist

Developer
Tommy Hodgins
Size
4,039 Kb
Views
20,240
  1. My CSS Wishlist Previews
  2. My CSS Wishlist HTML Codes
  3. My CSS Wishlist CSS Codes

How do I make an my css wishlist?

What is a my css wishlist? How do you make a my css wishlist? This script and codes were developed by Tommy Hodgins on 04 January 2023, Wednesday.

My CSS Wishlist Previews
IQ Test

My CSS Wishlist - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My CSS Wishlist</title> <meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto;
}
html { font-size: 10pt; line-height: 1.75; font-weight: 500;
}
body { padding: 1em; font-size: 150%; margin: 0 auto; max-width: 800px; font-family: 'Crimson Text', serif;
}
a { text-decoration: none;
}
a:hover,
a:focus { text-decoration: underline;
}
blockquote { padding: 1em 1em 1em calc(1em + 3px); color: rgba(0,0,0,.7); margin: 1em 0; line-height: 1.4; background: #fef; color: #e2e; border-left: 3px solid #e2e;
}
blockquote:not(pre) code { background: #fcf;
}
.quote { font-size: 125%; color: black; font-style: italic; background: rgba(0,0,0,.1);
}
h1, h2, h3, h4, h5, h6 { margin: 1em 0 .5em 0; line-height: 1.2; font-weight: 400; letter-spacing: -.02em; font-family: 'Cormorant Garamond', serif;
}
h2 { margin-bottom: .75em; line-height: 1; border-bottom: 1px solid #eee;
}
[class*=float-] { margin: 2em auto; display: block; width: auto; max-width: 100%; clear: both;
}
p,
ul,
ol { margin: 0;
}
ul,
ol { font-size: 100%; padding-left: .5em;
}
* + p,
* + ul,
* + ol { margin-top: .75em;
}
ul ul,
ul ol,
ol ol,
ol ul { padding-left: .5em;
}
ul li { list-style: none; position: relative;
}
ul li:before { content: "• "; position: absolute; left: -1em;
}
ul ul li:before,
ul ol li:before,
ol ul li:before,
ol ol li:before { content: "• "; position: absolute; left: -1.5em;
}
li { margin: 1em;
}
hr { margin: 5em 0;
}
code,
pre { font-family: 'Source Code Pro', Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
*:not(pre) > code { padding: 0 .5em; background: #fef; font-size: 80%;
}
code { display: inline-block; word-break: break-word;
}
.sourceCode { margin: 1em 0;
}
pre { font-size: 80%; border: .25em solid #eee; padding: 1em 2em; word-break: break-all; word-wrap:break-word; overflow-x: auto;
}
nav { width: 100%; margin: 1em 0; text-align: center;
}
nav a { display: block; padding: 1em;
}
footer { text-align: center; font-style: italic;
}
dt { margin-top: 2em; font-weight: bold;
}
dd { margin-top: 1em;
}
.cover { width: 100vw; height: 100vh; background: black; color: white; position: relative;
}
@media (min-width: 600px) { body { padding: 3em 2em 5em 2em; } h1 { font-size: 300%; } h2 { font-size: 200%; } h3 { font-size: 160%; } h4 { font-size: 135%; } h5 { font-size: 120%; } h6 { font-size: 110%; } blockquote { margin: 2em 1em; } ul, ol { padding-left: 1.5em; } [class*=float-] { max-width: 50%; } .float-left { float: left; margin: 0 1em .5em 0; } .float-right { float: right; margin: 0 0 .5em 1em; } nav a { display: inline-block; }
}
</style> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Cormorant+Garamond|Crimson+Text'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>My CSS Wishlist</h1>
<h2>Selectors</h2>
<ul>
<li><code>:previous</code> to select the previous element sibling</li>
<li><code>:parent</code> to select the parent element</li>
<li><code>:closest(selector)</code> to select the closest ancestor matching a selector</li>
<li><code>:ancestor(selector)</code> to select all ancestors matching a selector</li>
<li><code>:first</code> to select the first element matching a selector</li>
<li><code>[attribute &lt; number]</code> select if attribute is less than a number</li>
<li><code>[attribute &gt; number]</code> select if attribute is greater than a number</li>
<li><code>[attribute &lt;= number]</code> select if attribute is less or equal to a number</li>
<li><code>[attribute &gt;= number]</code> select is attribute is greater or equal to a number</li>
<li><code>:attribute(partial-name-*)</code> select by partial attribute match</li>
<li><code>:tag(partial-name-*)</code> select by partial tag name match</li>
</ul>
<h2>At-Rules</h2>
<ul>
<li><code>@element selector (condition) { stylesheet }</code></li>
</ul>
<h2>Units</h2>
<ul>
<li><code>ew</code> 1% of element&#39;s width</li>
<li><code>eh</code> 1% of element&#39;s height</li>
<li><code>emin</code> equal to <code>min(1ew, 1eh)</code></li>
<li><code>emax</code> equal to <code>max(1ew, 1eh)</code></li>
</ul>
<h2>Values</h2>
<ul>
<li><code>auto-expand</code> as a value for <code>width</code> and <code>height</code> properties</li>
<li><code>offsetWidth</code>, <code>offsetHeight</code>, <code>offsetLeft</code>, <code>offsetTop</code></li>
<li><code>scrollWidth</code>, <code>scrollHeight</code>, <code>scrollTop</code>, <code>scrollLeft</code></li>
<li><code>innerHTML.length</code>, <code>value.length</code></li>
<li>cursor <code>X</code> position, cursor <code>Y</code> position</li>
</ul>
<h2>Properties</h2>
<ul>
<li><code>aspect-ratio</code> to set height based on the element&#39;s width and a ratio</li>
</ul>
<h2>Functions</h2>
<ul>
<li><code>clamp(min, mid, max)</code> to limit scalable values with a minimum and maximum</li>
<li><code>round(number)</code> gives the nearest integer to a given number</li>
<li><code>floor(number)</code> gives the largest integer equal or less than a given number</li>
</ul> <script src='https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.7.0/EQCSS.min.js'></script>
</body>
</html>

My CSS Wishlist - Script Codes CSS Codes

@element code { $this { background: hsl(eval("([].indexOf.call(document.querySelectorAll('code'), $it) * 5) + 150"), 100%, 90%); }
}
My CSS Wishlist - Script Codes
My CSS Wishlist - Script Codes
Home Page Home
Developer Tommy Hodgins
Username tomhodgins
Uploaded January 04, 2023
Rating 4.5
Size 4,039 Kb
Views 20,240
Do you need developer help for My CSS Wishlist?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tommy Hodgins (tomhodgins) Script Codes
Name
A Parent Selector for CSS
Amazing Reviews
Matching height via EH units
CSS Parent Selector
Basic HTML Slideshow
Alternating Blockquotes
Responsive Pagination
Self-Responsive Social Buttons
10 CSS Text Shadows
Responsive Scrolling Sticky Header
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!