1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <title> 5 Playground - https://rmcg.dev 6 </title> 7 <meta charset="UTF-8"/> 8<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 9<meta name="author" content="Robert McGovern"> 10<meta name="description" content="Projects from Frontend Mentor, FreeCodeCamp and more. Playground for learning."> 11
11<script src="https://cdn.intake-lr.com/LogRocket.min.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 11
11
12<script>window.LogRocket && window.LogRocket.init('rocjgw/rmcgdev');</script>
12 13 14 15 16<!-- feed it through our cssmin filter to minify --> 17<style> 18 footer{margin-top:2rem;text-align:center;font-size:.9rem;margin-left:auto;margin-right:auto;width:85%}footer>*{margin-top:.5rem}footer div{display:flex;align-items:center;justify-content:center;gap:.5rem}.gradient-text{background-image:linear-gradient(90deg,red,#00f);-webkit-background-clip:text;background-clip:text;color:transparent} 19</style> 20 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/> 21<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/> 22<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/> 23<link 24 rel="manifest" href="/site.webmanifest"/> 25<!-- <link rel="icon" href="/safari-pinned-tab.svg" color="#845bd5" type="image/svg+xml" /> --> 26<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#845bd5"/> 27<meta name="msapplication-TileColor" content="#845bd5"/> 28<meta name="theme-color" content="#ffffff"/> 29 </head> 30 <body> 31 <header> 32 <div class="header"> 33 <h1>Playground</h1> 34 </div> 35</header> 36 <main> 37 38 39 40 41<h1>Tricks</h1> 42 43<h2>Gradient text with CSS</h2> 44 This one comes from Kevin Powell, on a YouTube video short <a 45 href="https://www.youtube.com/watch?v=IQT4aI_Iup4">"Gradient text with CSS | CSS Tip of the Day"</a>. It applies 46 a colored gradient to text. 47 48 Note that the -webkit- is needed to make this trick work in Safari. 49 50 <h1 class="gradient-text">Thingy Text thats with a gradient</h1> 51 52<h2>Tip for screen sized approriate images</h2> 53 54<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-480.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-960.jpg 2x, 55 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1440.jpg 3x, 56 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1920.jpg 4x" alt="shiny black dog looking pensive" 57 width="480" height="360"> 58 59<pre> 60<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-480.jpg" 61srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-960.jpg 2x, 62 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1440.jpg 3x, 63 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1920.jpg 4x" 64alt="shiny black dog looking pensive"
65width="480" height="360"> 66 </pre> 67 68 Better though is 69 70 <picture> 71 <source media="(min-width:600px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-320.jpg 320w, 72 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg 480w, 73 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-720.jpg 720w, 74 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-960.jpg 960w, 75 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1440.jpg 1440w, 76 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1920.jpg 1920w"> 77 <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-320.jpg 320w, 78 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-480.jpg 480w, 79 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-720.jpg 720w, 80 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-960.jpg 960w"> 81 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg" alt="smiling black dog" 82 height="360px" width="480px"> 83</picture> 84 85<pre> 86<picture> 87 <source media="(min-width:600px)" 88 srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-320.jpg 320w, 89 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg 480w, 90 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-720.jpg 720w, 91 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-960.jpg 960w, 92 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1440.jpg 1440w, 93 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1920.jpg 1920w" > 94 <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-320.jpg 320w, 95 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-480.jpg 480w, 96 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-720.jpg 720w, 97 https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-960.jpg 960w" > 98 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg" 99 alt="smiling black dog" 100 height="360px" width="480px"> 101</picture> 102 </pre> 103 104<h2>???</h2> 105</main> 106 <footer> 107 <!-- some blurb here --> 108 109 110 111 <p> 112 All projects are the work of Robert McGovern, 2020-2022. 113 </p> 114 <div> 115 <img style="display: inline; width: 2rem;" src="/svgs/purple_fedora.svg" alt="A Purple Fedora" aria-hidden="true"> 116 <a href="emailto:[email protected]">Email</a> 117 <a href="https://tarasis.net">Website/Blog</a> 118 <img style="display: inline; width: 2rem;" src="/svgs/purple_fedora.svg" alt="A Purple Fedora" aria-hidden="true"> 119 </div> 120 <p> 121 <a href="http://www.heropatterns.com/">Background SVG provided by Steve Schoger @ Hero Patterns</a> 122 </p> 123</footer> 124 </body> 125</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.