We're part of a story, part of a tale. We're all on this journey, no one is to stay. Where ever it's going. What is the way?
Welcome
Warrior Cats is een rollenspel gebaseerd op de serie 'Warriors' van Erin Hunter. Je verkent hier al schrijvend de geliefde wereld van de Clankatten, rogues en kittypets. Dit doe je door je eigen karakter aan te maken, waarbij je bijna alles zelf mag bepalen over uiterlijk en karakter. Wild of tam, goed of slecht, sociaal of eenling? Help jij oorlogen te voorkomen? Of ben je een van de katten die hongerig opzoek is naar een groter territorium en meer macht? Het kan allemaal op Warrior Cats.
KIND OF WEATHER
NEWLEAF
Season
Newleaf, 10°C - 20°C
Langzaam maar zeker komen de eerste bloemen weer op. De zon breekt weer door wat zorgt voor een aantal warme dagen. Newleaf zet alles in volle bloei.
Kiki 328 Actief Let the sin we swim in drown us
Let the world shatter
Into dust
Nothing else matters
Only us
CAT'S PROFILE Age: I am eternal (died at 30 moons) Gender: Tomcat ♂ Rank:
Onderwerp: [Code] Karakter kaart za 30 jan 2021 - 21:39
WolfstarWINDCLAN LEADER
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo commodo orci, a viverra elit efficitur eu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo commodo orci, a viverra elit efficitur eu. Maecenas ipsum ligula, sollicitudin sed turpis non, laoreet rutrum enim. In sapien dolor, interdum non quam at, consequat iaculis nulla. Suspendisse commodo elit non urna bibendum, in sodales felis pharetra. Pellentesque tortor erat, convallis ac sapien at, maximus fringilla leo. Nulla pretium est id sem vulputate, ac sagittis augue ullamcorper. Quisque vestibulum, erat posuere aliquam tempus, felis arcu suscipit arcu, sed tincidunt arcu risus ac enim. Donec tincidunt a quam sed pretium. Sed commodo ornare mi in congue. Ut maximus turpis et eros dignissim porttitor. Donec vitae tellus suscipit, bibendum nulla non, feugiat lectus.
Wil je ook zo'n prachtig mooi karakter kaartje dingetje voor je kat maken? Dan is dit je lucky day, ik zal uitleggen hoe de code werkt. Let er op dat je iets verstand moet hebben van CSS om dit aan te passen, anders zal het waarschijnlijk moeilijk worden voor je!
Eerst de simpele dingen, op de plekken waar je iets moet aanpassen staat als het goed is al dingen als "NAAM KAT" en "PLAATJE 400x400". Vul op deze plekken de benodigde info in. De sheet doet het het beste op PNG afbeeldingen met een transparante ondergrond. Tekst spreekt voor zich hoop ik.
Dan het lastigste gedeelte, de achtergrondkleur. Die is namelijk ook aanpasbaar en werkt met een zo genaamde gradient. Deze gradient kan je zelf naar wens invullen met kleuren die jij wilt. Het stukje CSS dat je zoekt is dit:
Vul op de plek van NAAMKAT de hele naam van je kat in. Dan komt de gradient. Die van Wolfstar bestaat uit 3 kleuren. De RGBA kleur is de meest bovenste kleur. De twee Hex (die met de #) mag je aanpassen naar kleuren die jij wilt. De eerste begint aan de bodem en loopt over in de tweede. Aanpassen naar kleuren die jij wilt en tadaaaaa!
Succes B)
Dit is de hele code:
Code:
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,900|Hind:300,400,500|Poppins:200,300,400,500,600,700,900|Quicksand|Playfair+Display:400,700,700i,900,900i|Montserrat:400,500,600,700,900|Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <div class="kat NAAMKAT"> <div class="kat-id"> <div class="kat-infos"> <div class="kat-ttl"><b>Naam kat</b>FUNCTIE IN CLAN</div> <div class="kat-mc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>Etiam commodo commodo orci, a viverra elit efficitur eu.</div> </div> <img src="AFBEELDING 400X400 AUB" /> </div> <div class="kat-desc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo commodo orci, a viverra elit efficitur eu. Maecenas ipsum ligula, sollicitudin sed turpis non, laoreet rutrum enim. In sapien dolor, interdum non quam at, consequat iaculis nulla. Suspendisse commodo elit non urna bibendum, in sodales felis pharetra. Pellentesque tortor erat, convallis ac sapien at, maximus fringilla leo. Nulla pretium est id sem vulputate, ac sagittis augue ullamcorper. Quisque vestibulum, erat posuere aliquam tempus, felis arcu suscipit arcu, sed tincidunt arcu risus ac enim. Donec tincidunt a quam sed pretium. Sed commodo ornare mi in congue. Ut maximus turpis et eros dignissim porttitor. Donec vitae tellus suscipit, bibendum nulla non, feugiat lectus. </div> </div> <style> @font-face { font-family: 'victorian'; src: url('https://dl.dropbox.com/s/sutd95igv59qyjt/victorian_decade_demo_version-webfont.woff2?dl=0') format('woff2'), url('https://dl.dropbox.com/s/9nzjto5hodcc2xm/victorian_decade_demo_version-webfont.woff?dl=0') format('woff'); font-weight: normal; font-style: normal; } .dm-groups { max-width: 800px; margin: auto; font-family: Montserrat; } .dm-divins { padding: 0; } .kat { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 380px; max-width: 600px; margin: auto; overflow: hidden; position: relative; } .kat:before { position: absolute; content: ""; top: 0; bottom: 0; right: 0; left: 0; background-image: url("https://cdn.discordapp.com/attachments/773186567048396811/800774336523927622/fond4.png"); background-repeat: no-repeat } .kat * { position: relative; } .kat-id { display: flex; justify-content: space-between; align-items: center; transition: all ease 0.5s; height: 380px; width: 100%; } .kat img { opacity: 0.7; transition: all ease 0.5s; } .kat-infos { color: #ccc; display: flex; flex-direction: column; font-family: Montserrat; text-align: center; margin: 40px; transition: all ease 0.5s; flex: 1; width: 50%; } .kat-ttl { display: flex; flex-direction: column; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; transition: all ease 0.5s; } .kat-ttl b { text-align: center; background: -webkit-gradient(linear, left top, left bottom, from(#b66a24), to(#fec388)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'victorian'; font-size: 50px; line-height: 125%; text-transform: none; } .kat-mc { margin-top: 40px; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; transition: all ease 0.5s; } .kat-desc { overflow: auto; height: calc(380px - 80px); margin: 40px 0; color: #eee; font-family: montserrat; font-size: 10px; text-align: justify; line-height: 20px; padding-right: 8px; opacity: 0; margin-right: -240px; width: 33%; transition: all ease 0.5s; } .kat-desc::-webkit-scrollbar { width: 4px; } .kat-desc::-webkit-scrollbar-thumb { background: -webkit-gradient(linear, left top, left bottom, from(#b66a24), to(#fec388)); border-radius: 5px; } .kat-desc::-webkit-scrollbar-track { background: transparent; } .kat-desc b, .kat-desc strong { text-transform: uppercase; letter-spacing: 2px; font-size: 8px; line-height: 1px; } .kat:hover .kat-id { transition: all ease 0.5s; margin-left: -50%; } .kat:hover .kat-infos { opacity: 0; transition: all ease 0.5s; } .kat:hover .kat-id img { opacity: 1; transition: all ease 0.5s; } .kat:hover .kat-desc { margin-right: 40px; transition: all ease 0.5s; transition-delay: 0.3s; position: relative; opacity: 1; } .kat.NAAMKAT{ background: rgb(139, 196, 212); background: linear-gradient(0deg, #405263 10%, #1c233b 50%, rgba(14, 0, 26, 1) 80%); } </style>
![[Code] Karakter kaart Frkp8xW](https://imgur.com/Frkp8xW.gif)
Onderwerp: [Code] Karakter kaart ![[Code] Karakter kaart Icon_minitime](https://2img.net/i/fa/icon_minitime.gif){kind=icon}
za 30 jan 2021 - 21:39