Skip to content

Instantly share code, notes, and snippets.

@AmrEldib

AmrEldib/index.html

Created July 4, 2024 01:56
Show Gist options
  • Save AmrEldib/f2fdbc64c3ecee2e3a0595b98c260738 to your computer and use it in GitHub Desktop.
Save AmrEldib/f2fdbc64c3ecee2e3a0595b98c260738 to your computer and use it in GitHub Desktop.
Download ZIP
Example of Styling using CSS only (CSS Zen Garden). Change the referenced CSS file to try different styles
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title data-rh="true">Taddy Ink</title>
<meta data-rh="true" itemprop="name" content="Taddy Ink" />
<meta data-rh="true" itemprop="description"
content="Tools for webtoon creators to build, grow, and monetize their audience." />
<meta data-rh="true" itemprop="image" content="https://ax0.taddy.org/general/taddy-logo-white-background.png" />
<meta data-rh="true" name="description"
content="Tools for webtoon creators to build, grow, and monetize their audience." />
<meta data-rh="true" name="twitter:card" content="summary_large_image" />
<meta data-rh="true" name="twitter:site" content="@taddyartists" />
<meta data-rh="true" name="twitter:title" content="Taddy Ink" />
<meta data-rh="true" name="twitter:description"
content="Tools for webtoon creators to build, grow, and monetize their audience." />
<meta data-rh="true" name="twitter:image" content="https://ax0.taddy.org/general/taddy-logo-white-background.png" />
<meta data-rh="true" name="twitter:image:src"
content="https://ax0.taddy.org/general/taddy-logo-white-background.png" />
<meta data-rh="true" property="og:title" content="Taddy Ink" />
<meta data-rh="true" property="og:type" content="website" />
<meta data-rh="true" property="og:url" content="https://taddy.org" />
<meta data-rh="true" property="og:image" content="https://ax0.taddy.org/general/taddy-logo-white-background.png" />
<meta data-rh="true" property="og:description"
content="Tools for webtoon creators to build, grow, and monetize their audience." />
<meta data-rh="true" property="og:site_name" content="Taddy" />
<link data-rh="true" rel="canonical" href="https://taddy.org" />
<link data-rh="true" rel="image_src" href="https://ax0.taddy.org/general/taddy-logo-white-background.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link data-chunk="app" rel="stylesheet" href="style-cards.css">
</head>
<body>
<header class="zen-header">
<nav class="" aria-label="Global">
<ul>
<li class="logo">
<a href="#">
<img class="" src="https://ax0.taddy.org/general/taddy-logo.png" alt="Taddy Logo" />
</a>
</li>
<li class="login"><a href="/login">login</a></li>
<li class="signup"><a href="/signup">SIGN UP</a></li>
</ul>
</nav>
</header>
<main>
<section class="zen-main-message">
<h1 lang="en" class="">Upload once. Publish to <span class="highlight-red">multiple</span> apps.</h1>
<p class="">
Reach over 100k readers! When you upload on Taddy Ink, your
comic will be published on Inkverse and Tachiyomi. Connect your
Patreon and give your backers early access to your latest
episodes!
</p>
</section>
<section class="zen-sign-up">
<form class="">
<h2 class="">Sign Up as a Creator</h2>
<label for="name" class="">Name
</label>
<input id="name" type="name" class="" />
<label for="email" class="">Email
</label>
<input id="email" type="email" inputmode="email" class="" />
<label for="url" class="">Link to your webtoon (Optional)
</label>
<input id="url" type="url" inputmode="url" class="" />
<button class="">SIGN UP</button>
</form>
</section>
<h2 class="zen-gallery-header">Webtoons that use Taddy</h2>
<section class="zen-webtoons-gallery">
<section class="zen-webtoon-card">
<img class="zen-webtoon-cover"
src="https://ax1.taddy.org/e3450ba5-de2a-4936-a53b-67d3883f9320/b9241332-5605-4e5b-b166-6785a9d88f29/cover-md.webp"
alt="Fragmented Dreams" />
<h2 class="zen-webtoon-title">Fragmented Dreams</h2>
<span class="zen-webtoon-genre">Supernatural, Fantasy</span>
<section class="zen-webtoon-author">
<img src="https://ax1.taddy.org/d38d69f5-62f8-4b13-abcb-538b7a097d2e/af0dc843-7449-43d1-bdc3-739984c9cd55/avatar-sm.webp"
alt="T.A. Teufel" class="zen-webtoon-author-pic" />
<span class="zen-webtoon-author-name">T.A. Teufel</span>
</section>
</section>
<section class="zen-webtoon-card">
<img class="zen-webtoon-cover"
src="https://ax1.taddy.org/ae78ecda-b05c-4fba-9b00-9211f6223907/ac3a9c77-19fc-41cc-a819-7cafa99c24d7/cover-md.webp"
alt="The Giant of Greywater" />
<h2 class="zen-webtoon-title">The Giant of Greywater</h2>
<span class="zen-webtoon-genre">Romance, Fantasy</span>
<section class="zen-webtoon-author">
<img src="https://ax1.taddy.org/6781d179-5424-498f-a211-42d85a0cc0b4/e6c54311-a8b5-40a9-a128-2d925ebf15b4/avatar-sm.webp"
alt="Ash Days" class="zen-webtoon-author-pic" />
<span class="zen-webtoon-author-name">Ash Days</span>
</section>
</section>
<section class="zen-webtoon-card">
<img class="zen-webtoon-cover"
src="https://ax1.taddy.org/71113968-45a2-4c30-b770-655b57ae0de6/e55d8cd4-2169-481c-820d-4a5e15b6eed5/cover-md.webp"
alt="Monvana" />
<h2 class="zen-webtoon-title">Monvana</h2>
<span class="zen-webtoon-genre">Comedy, Action</span>
<section class="zen-webtoon-author">
<img src="https://ax1.taddy.org/5a4977e8-b0da-4cc7-a516-16a0fb6973d8/c414e9a8-8d27-4280-9e43-a2e5445a9626/avatar-sm.webp"
alt="Zachary Morris" class="zen-webtoon-author-pic" />
<span class="zen-webtoon-author-name">Zachary Morris</span>
</section>
</section>
<section class="zen-webtoon-card">
<img class="zen-webtoon-cover"
src="https://ax1.taddy.org/25660dd8-638c-4b39-aa56-43657ba94688/1be5b521-3b2f-4272-a4b3-a1d7c2ba724d/cover-md.webp"
alt="Rain Girl" />
<h2 class="zen-webtoon-title">Rain Girl</h2>
<span class="zen-webtoon-genre">Supernatural, Historical</span>
<section class="zen-webtoon-author">
<img src="https://ax1.taddy.org/6ec3165e-235f-4c2c-8296-fa7e61adb601/22526a9d-c9a9-42ad-aa87-d1264f811e03/avatar-sm.webp"
alt="Ashtreehouse" class="zen-webtoon-author-pic" />
<span class="zen-webtoon-author-name">Ashtreehouse</span>
</section>
</section>
<section class="zen-webtoon-card">
<img class="zen-webtoon-cover"
src="https://ax1.taddy.org/f4449114-7378-492d-96ac-a323bbb3b68b/e8bd5d59-103b-4f14-8250-d5dec86d2cc5/cover-md.webp"
alt="LIFESTEAL" />
<h2 class="zen-webtoon-title">LIFESTEAL</h2>
<span class="zen-webtoon-genre">Mystery, Crime</span>
<section class="zen-webtoon-author">
<img src="https://ax1.taddy.org/54d7b312-b8d6-40f1-9c9c-bd05d155a209/fe891e6e-a4eb-4d4b-b1f4-87562d034dbe/avatar-sm.webp"
alt="Midori Jen" class="zen-webtoon-author-pic" />
<span class="zen-webtoon-author-name">Midori Jen</span>
</section>
</section>
<section class="zen-webtoon-card">
<img class="zen-webtoon-cover"
src="https://ax1.taddy.org/95bba663-030c-4024-980b-fe9ef637d6a8/e594276e-cd4d-4650-b6b0-b11b27ee91e8/cover-md.webp"
alt="I'll Find You" />
<h2 class="zen-webtoon-title">I'll Find You</h2>
<span class="zen-webtoon-genre">Drama, Fantasy</span>
<section class="zen-webtoon-author">
<img src="https://ax1.taddy.org/dc4ac54c-383f-47d1-8cae-b2d2e2d37437/e36e973a-a353-402b-91a4-89fbe49146ca/avatar-sm.webp"
alt="Kalmiiaaa" class="zen-webtoon-author-pic" />
<span class="zen-webtoon-author-name">Kalmiiaaa</span>
</section>
</section>
<section class="zen-webtoon-card">
<img class="zen-webtoon-cover"
src="https://ax1.taddy.org/b596f9f3-7a79-444f-90c1-d084f6f94012/66323535-7258-402f-8f3b-36e45535b849/cover-md.webp"
alt="HiLo Spirits" />
<h2 class="zen-webtoon-title">HiLo Spirits</h2>
<span class="zen-webtoon-genre">Supernatural</span>
<section class="zen-webtoon-author">
<img src="https://ax1.taddy.org/d202a04e-0bc0-4c3c-9b70-23c4bbdd1efe/33854425-0b6a-4f32-bf08-28686ebf19de/avatar-sm.webp"
alt="Rosi Reitz" class="zen-webtoon-author-pic" />
<span class="zen-webtoon-author-name">Rosi Reitz</span>
</section>
</section>
</section>
</main>
<footer aria-labelledby="footer-heading">
<nav class="footer-developers">
<h3 class="">For Developers</h3>
<ul role="list" class="">
<li><a class="" href="/developers/podcast-api">Podcast
API</a></li>
<li><a class="" href="/developers/comics-api">Webtoons
API</a></li>
<li><a class="" href="/developers">Developer
Resources</a></li>
</ul>
</nav>
<nav class="footer-company">
<h3 class="">Company</h3>
<ul role="list" class="">
<li><a class="" href="/blog">Blog</a></li>
<li><a class="" href="/creator-resources">Webtoon
Creator Resources</a></li>
<li><a class="" href="/about-us">About us</a>
</li>
<li><a class="" href="/terms-of-service">Terms</a></li>
<li><a class="" href="/terms-of-service/privacy-policy">Privacy</a></li>
</ul>
</nav>
<nav class="footer-socials">
<h3 class="">Socials</h3>
<ul role="list" class="">
<li><a href="https://instagram.com/taddyink" class="" target="_blank">instagram</a></li>
<li><a href="https://twitter.com/taddyink" class="" target="_blank">Twitter</a></li>
<li><a href="https://discord.com/invite/SNZUHpkpQn" class="" target="_blank">Discord</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Raw
style-cards.css
:root {
--primary-text-color: black;
--secondary-text-color: rgb(107, 114, 128);
}
html {
font-family: 'Noto Sans', sans-serif;
}
body {
padding: 0;
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
grid-row: 1;
font-weight: bold;
padding-top: 1em;
padding-right: 1em;
nav {}
nav ul {
display: grid;
grid-template-columns: 2fr 4fr 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: max-content;
margin: 0;
}
nav ul li {
display: flex;
list-style-type: none;
justify-content: center;
align-items: center;
img {
height: 40px;
}
}
nav ul li.logo {
justify-content: left;
grid-column: 1;
grid-row: 1;
img {
height: 3em;
}
}
li.login a,
li.signup a {
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
nav ul li.login {
grid-column: 3;
grid-row: 1;
}
li.login a {
color: var(--secondary-text-color);
}
li.signup a {
color: white;
}
nav ul li.signup {
grid-column: 4;
grid-row: 1;
background-color: rgb(237, 89, 89);
border-radius: 10px 10px 10px 10px;
margin: 8px;
}
nav ul li.signup:hover {
background-color: rgb(142, 51, 51);
cursor: pointer;
}
nav ul li.signup:active {
background-color: black;
}
}
main {
grid-row: 2;
display: grid;
grid-template-columns: 1fr 3fr 0.5fr 3fr 1fr;
/* grid-template-rows: 1fr 1fr; */
/* grid-auto-rows:min-content; */
margin: 0;
}
section.zen-main-message {
grid-column: 2;
grid-row: 1;
h1 {
font-size: 3.2em;
font-family: 'Noto Serif';
font-weight: normal;
text-transform: uppercase;
}
p {
color: var(--secondary-text-color);
font-size: large;
}
}
.highlight-red {
border-radius: 1em 0 1em 0;
background-image: linear-gradient(-100deg,
rgba(255, 20, 0, 0.2),
rgba(255, 20, 0, 0.7) 95%,
rgba(255, 20, 0, 0.1));
}
section.zen-sign-up {
background: linear-gradient(0deg, #d53369 0%, #daae51 100%);
padding: 1rem;
border-radius: 10px;
grid-column: 2;
justify-content: center;
grid-row: 2;
h2 {
font-family: 'Noto Serif';
font-weight: normal;
}
form {
font-family: 'Noto Sans';
label,
input {
margin-left: 5%;
display: flex;
flex-direction: column;
}
label {
color: var(--primary-text-color);
}
input {
min-width: 80%;
margin-right: 15%;
margin-bottom: 2em;
border-radius: 10px;
border: 1px solid black;
transition: all 200ms ease;
padding: 0.7em;
}
button {
font-family: 'Noto Sans';
box-shadow: none;
border: 0;
cursor: pointer;
color: white;
background-color: rgb(237, 89, 89);
border-radius: 10px 10px 10px 10px;
padding: 10px;
margin: 8px;
}
button:hover {
background-color: rgb(142, 51, 51);
}
button:active {
background-color: black;
}
}
}
h2.zen-gallery-header {
display: none;
/* font-size: xx-large;
justify-self: center;
color: rgb(237, 89, 89);
font-family: 'Noto Serif';
font-weight: normal;
text-transform: uppercase; */
}
section.zen-webtoons-gallery {
grid-column: 4;
grid-row: 1 / 2;
/* grid-row-end: 2; */
display: flex;
overflow-y: auto;
padding: 1.5rem;
/* :nth-child(1n) {
transform: rotate(2deg);
} */
section:nth-child(2n) {
transform: rotate(-4deg);
}
section:nth-child(3n) {
transform: rotate(2deg);
}
section:nth-child(4n) {
transform: rotate(-3deg);
}
section:nth-child(5n) {
transform: rotate(-4deg);
}
section:nth-child(6n) {
transform: rotate(4deg);
}
section.zen-webtoon-card {
background-color: white;
/* rotate: 4deg; */
flex-flow: column;
position: sticky;
scroll-snap-align: start;
left: 0;
border-radius: 10px;
/* border: 0.2rem;
border-color: gray; */
box-shadow: -0.5rem 0.7rem 0.7rem #000;
padding: 2rem;
margin: 2rem;
transition: 0.4s ease-out;
grid-row: 3;
/* padding: 2em; */
display: flex;
flex-direction: column;
align-items: center;
img.zen-webtoon-cover {
max-height: 35em;
}
h2.zen-webtoon-title {
font-size: large;
}
span.zen-webtoon-genre {
font-size: small;
color: var(--secondary-text-color);
}
section.zen-webtoon-author {
padding-top: 1em;
display: flex;
/* align-content: center; */
span.zen-webtoon-author-name {
color: var(--primary-text-color);
}
img.zen-webtoon-author-pic {
max-height: 2em;
}
}
}
}
footer {
background-color: rgb(255, 241, 242);
display: flex;
grid-row: 3;
margin-top: 5em;
nav {
flex: 1;
margin-bottom: 15px;
}
nav ul {
margin: 0;
}
nav ul li {
list-style-type: none;
}
nav h3 {
margin-left: 10px;
}
nav ul li a {
color: var(--secondary-text-color);
text-decoration: none;
text-transform: capitalize;
}
nav.footer-company {}
}
Raw
style-default.css
:root {
--primary-text-color: black;
--secondary-text-color: rgb(107, 114, 128);
}
html {
font-family: 'Noto Sans', sans-serif;
}
body {
padding: 0;
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
grid-row: 1;
font-weight: bold;
padding-top: 1em;
padding-right: 1em;
nav {}
nav ul {
display: grid;
grid-template-columns: 2fr 4fr 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: max-content;
margin: 0;
}
nav ul li {
display: flex;
list-style-type: none;
justify-content: center;
align-items: center;
img {
height: 40px;
}
}
nav ul li.logo {
justify-content: left;
grid-column: 1;
grid-row: 1;
img {
height: 3em;
}
}
li.login a,
li.signup a {
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
nav ul li.login {
grid-column: 3;
grid-row: 1;
}
li.login a {
color: var(--secondary-text-color);
}
li.signup a {
color: white;
}
nav ul li.signup {
grid-column: 4;
grid-row: 1;
background-color: rgb(237, 89, 89);
border-radius: 10px 10px 10px 10px;
margin: 8px;
}
nav ul li.signup:hover {
background-color: rgb(142, 51, 51);
cursor: pointer;
}
nav ul li.signup:active {
background-color: black;
}
}
main {
grid-row: 2;
display: grid;
grid-template-columns: 1fr 3fr 1fr 3fr 1fr;
grid-auto-rows: max-content;
margin: 0;
}
section.zen-main-message {
grid-column: 2;
grid-row: 1;
h1 {
font-size: 3.2em;
font-family: 'Noto Serif';
font-weight: normal;
text-transform: uppercase;
}
p {
color: var(--secondary-text-color);
font-size: large;
}
}
.highlight-red {
border-radius: 1em 0 1em 0;
background-image: linear-gradient(-100deg,
rgba(255, 20, 0, 0.2),
rgba(255, 20, 0, 0.7) 95%,
rgba(255, 20, 0, 0.1));
}
section.zen-sign-up {
grid-column: 4;
grid-row: 1;
h2 {
font-family: 'Noto Serif';
font-weight: normal;
}
form {
font-family: 'Noto Sans';
label,
input {
margin-left: 5%;
display: flex;
flex-direction: column;
}
label {
color: var(--primary-text-color);
}
input {
min-width: 80%;
margin-right: 15%;
margin-bottom: 2em;
border-radius: 10px;
border: 1px solid black;
transition: all 200ms ease;
padding: 0.7em;
}
button {
font-family: 'Noto Sans';
box-shadow: none;
border: 0;
cursor: pointer;
color: white;
background-color: rgb(237, 89, 89);
border-radius: 10px 10px 10px 10px;
padding: 10px;
margin: 8px;
}
button:hover {
background-color: rgb(142, 51, 51);
}
button:active {
background-color: black;
}
}
}
h2.zen-gallery-header {
grid-row: 2;
grid-column-start: 1;
grid-column-end: 6;
font-size: xx-large;
justify-self: center;
color: rgb(237, 89, 89);
font-family: 'Noto Serif';
font-weight: normal;
text-transform: uppercase;
}
section.zen-webtoons-gallery {
grid-row: 3;
grid-column-start: 2;
grid-column-end: 5;
display: flex;
overflow-x: auto;
section.zen-webtoon-card {
grid-row: 3;
padding: 2em;
display: flex;
flex-direction: column;
align-items: center;
img.zen-webtoon-cover {
max-height: 20em;
}
h2.zen-webtoon-title {
font-size: large;
}
span.zen-webtoon-genre {
font-size: small;
color: var(--secondary-text-color);
}
section.zen-webtoon-author {
padding-top: 2em;
display: flex;
align-content: center;
span.zen-webtoon-author-name {
color: var(--primary-text-color);
}
img.zen-webtoon-author-pic {
max-height: 2em;
}
}
}
}
footer {
background-color: rgb(255, 241, 242);
display: flex;
grid-row: 3;
margin-top: 5em;
nav {
flex: 1;
margin-bottom: 15px;
}
nav ul {
margin: 0;
}
nav ul li {
list-style-type: none;
}
nav h3 {
margin-left: 10px;
}
nav ul li a {
color: var(--secondary-text-color);
text-decoration: none;
text-transform: capitalize;
}
nav.footer-company {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment