-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #66 from alvaromontoro/new-cartoon/push-ups
new cartoon: push-ups
- Loading branch information
Showing
14 changed files
with
1,263 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,228 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="author" content="Alvaro Montoro (alvaromontoro@gmail.com)" /> | ||
| <meta name="keywords" content="comicss,webcomic,css,oc,humor,comic,cartoon,alvaro montoro,alvaro,montoro" /> | ||
| <meta name="description" content="comiCSS: A webcomic about CSS. Coded in CSS." /> | ||
| <meta name="theme-color" content="#993399" /> | ||
|
|
||
| <title>comiCSS #167: Push-ups</title> | ||
|
|
||
| <meta property="og:title" content="comiCSS #167: Push-ups" /> | ||
| <meta property="og:type" content="website" /> | ||
| <meta property="og:url" content="https://comicss.art/comics/167" /> | ||
| <meta property="og:image" content="https://comicss.art/comics/167/thumb.png" /> | ||
| <meta property="og:description" content="comic with 4 panels in a 2x2 grid. There are two characters, one of them has the tshirt off and shows a lot of muscles. The other one asks 'Wow, Dave! How did you get like that? You are a web developer!' Dave replies: 'every time I add a Tailwind class... I do one push-up'. In the last panel he adds 'I started with the tutorial yesterday, and have not finished my first page yet... please help...'" /> | ||
| <meta name="twitter:card" content="summary_large_image"> | ||
| <meta name="twitter:url" content="https://comicss.art/comics/167"> | ||
| <meta name="twitter:title" content="comiCSS #167: Push-ups"> | ||
| <meta name="twitter:description" content="comic with 4 panels in a 2x2 grid. There are two characters, one of them has the tshirt off and shows a lot of muscles. The other one asks 'Wow, Dave! How did you get like that? You are a web developer!' Dave replies: 'every time I add a Tailwind class... I do one push-up'. In the last panel he adds 'I started with the tutorial yesterday, and have not finished my first page yet... please help...'"> | ||
| <meta name="twitter:image" content="https://comicss.art/comics/167/thumb.png"> | ||
| <meta name="monetization" content="$ilp.uphold.com/raZZQiMDDWLe" /> | ||
|
|
||
| <link rel="shortcut icon" href="/favicon.png" /> | ||
|
|
||
| <link rel="canonical" href="https://comicss.art/comics/167" /> | ||
|
|
||
| <link rel="stylesheet" href="/css/almond.lite.min.css" /> | ||
| <link rel="stylesheet" href="/css/styles.css" /> | ||
| </head> | ||
| <body class="home"> | ||
| <a href="#main" class="skip-link">Skip to main content</a> | ||
| <header> | ||
| <div> | ||
| <h2 class="page-title"><a href="/" rel="self" aria-current="page">comi<span>c</span><span>ss</span></a></h2> | ||
| <p>A webcomic about CSS. Coded in CSS.</p> | ||
| </div> | ||
| <nav aria-label="primary"> | ||
| <ul> | ||
| <li> | ||
| <a href="/archive/" rel="archives"> | ||
| <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M12,30 5,30 5,5 95,5 95,30 88,30 88,95 12,95 12,30 88,30" /> | ||
| <rect rx="3" ry="3" x="30" width="40" y="45" height="15" /> | ||
| </svg><span>Archive</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="/blog/"> | ||
| <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M95,30 30,95 5,95 5,70 70,5Z M5,95 12,88 M45,95 55,95 M65,95 75,95 M85,95 95,95" /> | ||
| </svg><span>Blog</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="/about/" rel="about"> | ||
| <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M50,40 C85,60 95,80 95,95 95,95 5,95 5,95 5,80 15,60 50,40Z" /> | ||
| <circle cx="50" cy="30" r="25" style="fill:#fff" /> | ||
| </svg><span>About</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="/contact/"> | ||
| <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M95,15 95,85 5,85 5,15 95,15 50,55 5,15Z" /> | ||
| </svg><span>Contact</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="https://twitter.com/comi_CSS" rel="external author"> | ||
| <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M95,15 95,75 55,75 35,95 35,75 5,75 5,15Z" stroke-linejoin="round" /> | ||
| </svg><span>Twitter</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="https://comicss.printify.me" rel="external payment nofollow"> | ||
| <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M0,5 15,5 35,75 85,75 95,25 18,25" stroke-linejoin="round" /> | ||
| <circle cx="40" cy="90" r="10" style="fill:currentColor; stroke-width: 0" /> | ||
| <circle cx="80" cy="90" r="10" style="fill:currentColor; stroke-width: 0" /> | ||
| </svg><span>Store</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.patreon.com/alvaromontoro" rel="external payment"> | ||
| <svg width="1em" height="2em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M9,0 9,100" style="stroke-width:18" /> | ||
| <circle cx="62" cy="38" r="38" style="fill:currentColor; stroke-width: 0" /> | ||
| </svg><span>Patreon</span> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
| <main id="main" class="latest"> | ||
| <noscript> | ||
| This website needs JavaScript to navigate. But, you can see all the drawings linked at once | ||
| (without needing any JavaScript) in the <a href="/archive">Archive</a>. | ||
| </noscript> | ||
|
|
||
| <h1>Push-ups</h1> | ||
|
|
||
| <nav aria-label="Comic strip browsing"> | ||
| <a href="/comics/1" rel="first"> | ||
| <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M10,0 10,100 M100,0 50,50 100,100" /> | ||
| </svg> | ||
| <span>First</span> | ||
| </a> | ||
| <a href="/comics/166" rel="prev"> | ||
| <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M75,0 25,50 75,100" /> | ||
| </svg> | ||
| <span>Previous</span> | ||
| </a> | ||
| <a class="random-post" href="/comics/74"> | ||
| <svg width="1em" height="1em" viewBox="0 0 100 100" class="random" aria-hidden="true"> | ||
| <path class="random" d="M100,25 80,2 80,48Z" /> | ||
| <path class="random" d="M100,75 80,98 80,52Z" /> | ||
| <path d="M0,25 20,25 65,75 90,75 M0,75 20,75 65,25 95,25" /> | ||
| </svg> | ||
| <span>Random</span> | ||
| </a> | ||
| <a href="/comics/168" rel="next"> | ||
| <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M25,0 75,50 25,100" /> | ||
| </svg> | ||
| <span>Next</span> | ||
| </a> | ||
| <a href="/" rel="last"> | ||
| <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M90,0 90,100 M0,0 50,50 0,100" /> | ||
| </svg> | ||
| <span>Last</span> | ||
| </a> | ||
| </nav> | ||
|
|
||
| <div id="comic-strip" role="img" class="" aria-label="comic with 4 panels in a 2x2 grid. There are two characters, one of them has the tshirt off and shows a lot of muscles. The other one asks 'Wow, Dave! How did you get like that? You are a web developer!' Dave replies: 'every time I add a Tailwind class... I do one push-up'. In the last panel he adds 'I started with the tutorial yesterday, and have not finished my first page yet... please help...'"> | ||
| <img src="/comics/167/167-push-ups-0.webp" alt="" width="350" /> | ||
| <img src="/comics/167/167-push-ups-1.webp" alt="" width="350" /> | ||
| <img src="/comics/167/167-push-ups-2.webp" alt="" width="350" /> | ||
| <img src="/comics/167/167-push-ups-3.webp" alt="" width="350" /> | ||
| </div> | ||
|
|
||
| <nav aria-label="Comic strip browsing"> | ||
| <a href="/comics/1" rel="first"> | ||
| <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M10,0 10,100 M100,0 50,50 100,100" /> | ||
| </svg> | ||
| <span>First</span> | ||
| </a> | ||
| <a href="/comics/166" rel="prev"> | ||
| <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M75,0 25,50 75,100" /> | ||
| </svg> | ||
| <span>Previous</span> | ||
| </a> | ||
| <a class="random-post" href="/comics/118"> | ||
| <svg width="1em" height="1em" viewBox="0 0 100 100" class="random" aria-hidden="true"> | ||
| <path class="random" d="M100,25 80,2 80,48Z" /> | ||
| <path class="random" d="M100,75 80,98 80,52Z" /> | ||
| <path d="M0,25 20,25 65,75 90,75 M0,75 20,75 65,25 95,25" /> | ||
| </svg> | ||
| <span>Random</span> | ||
| </a> | ||
| <a href="/comics/168" rel="next"> | ||
| <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M25,0 75,50 25,100" /> | ||
| </svg> | ||
| <span>Next</span> | ||
| </a> | ||
| <a href="/" rel="last"> | ||
| <svg width="1em" height="1em" viewBox="0 0 100 100" aria-hidden="true"> | ||
| <path d="M90,0 90,100 M0,0 50,50 0,100" /> | ||
| </svg> | ||
| <span>Last</span> | ||
| </a> | ||
| </nav> | ||
|
|
||
| <p>Permalink: <a aria-label="permanet link" id="permanent-link" href="/comics/167">https://comicss.art/comics/167</a></p> | ||
| <p>Image link: <a aria-label="image version" id="image-link" href="/comics/167/push-ups.png">https://comicss.art/comics/167/push-ups.png</a></p> | ||
| <p>Source code: <a aria-label="html version" id="code-link" href="/comics/167/push-ups.html" rel="alternate">https://comicss.art/comics/167/push-ups.html</a></p> | ||
|
|
||
| <hr /> | ||
| <p>This work is licensed under a <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="license external noreferrer nofollow">Creative Commons Attribution-NonCommercial 4.0 License</a>.</p> | ||
| <p>You are free to copy and share these comics, but not to sell them. <a href="/license" rel="license">More details on the license and use rights</a>.</p> | ||
| <hr /> | ||
| </main> | ||
| <nav class="thumbs-nav" aria-label="trending comics"> | ||
| <ul> | ||
| <li><a href="/comics/2"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-2.webp" alt="" /><span class="a11y-hidden">Comic 2</span></a></li> | ||
| <li><a href="/comics/46"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-46.webp" alt="" /><span class="a11y-hidden">Comic 46</span></a></li> | ||
| <li><a href="/comics/16"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-16.webp" alt="" /><span class="a11y-hidden">Comic 16</span></a></li> | ||
| <li><a href="/comics/48"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-48.webp" alt="" /><span class="a11y-hidden">Comic 48</span></a></li> | ||
| <li><a href="/comics/29"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-29.webp" alt="" /><span class="a11y-hidden">Comic 29</span></a></li> | ||
| <li><a href="/comics/32"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-32.webp" alt="" /><span class="a11y-hidden">Comic 32</span></a></li> | ||
| <li><a href="/comics/39"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-39.webp" alt="" /><span class="a11y-hidden">Comic 39</span></a></li> | ||
| <li><a href="/comics/50"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-50.webp" alt="" /><span class="a11y-hidden">Comic 50</span></a></li> | ||
| <li><a href="/comics/51"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-51.webp" alt="" /><span class="a11y-hidden">Comic 51</span></a></li> | ||
| <li><a href="/comics/59"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-59.webp" alt="" /><span class="a11y-hidden">Comic 59</span></a></li> | ||
| <li><a href="/comics/67"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-67.webp" alt="" /><span class="a11y-hidden">Comic 67</span></a></li> | ||
| <li><a href="/comics/78"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-78.webp" alt="" /><span class="a11y-hidden">Comic 78</span></a></li> | ||
| <li><a href="/comics/80"><img width="80" height="80" loading="lazy" decoding="async" src="/images/thumbs/mini-80.webp" alt="" /><span class="a11y-hidden">Comic 80</span></a></li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <footer> | ||
| Copyright © 2021-2024. <a href="https://alvaromontoro.com" rel="author external">Alvaro Montoro</a> | ||
| — <a href="/atom.xml">Atom Feed</a> | ||
| — <a href="/rss.xml">RSS Feed</a> | ||
| <hr /> | ||
| <nav aria-labelledby="webring" class="full"> | ||
| <h2 id="webring">CSS JOY Webring</h2> | ||
| <a href="https://webri.ng/webring/cssjoy/previous?via=https://comicss.art">Previous</a> | ||
| <a href="https://webri.ng/webring/cssjoy/random?via=https://comicss.art">Random</a> | ||
| <a href="https://webri.ng/webring/cssjoy/next?via=https://comicss.art">Next</a> | ||
| </nav> | ||
| </footer> | ||
|
|
||
| <script>let postId = 167;</script> | ||
| <script src="/js/data.js?"></script> | ||
| <script src="/js/code.js"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.