Character Cards code

Developer
Cherie Yang
Size
2,755 Kb
Views
14,168
  1. Character Cards code Previews
  2. Character Cards code HTML Codes
  3. Character Cards code CSS Codes

How do I make an character cards code?

What is a character cards code? How do you make a character cards code? This script and codes were developed by Cherie Yang on 26 November 2022, Saturday.

Character Cards code Previews
IQ Test

Character Cards code - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Character Cards code</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main-container"> <!-- BEGIN CARD ONE --> <div class="character-card"> <div class="character-name">Character Name</div> <div class="column-left"> <img class="character-image" src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/4e/36ef4e53bc4b64c662b0c1e614f8a92e.png"> <div class="character-info"> Details go here </div> </div> <div class="column-right"> <div class="character-details"> <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p> <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p> <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p> </div> </div> </div> <!-- END CARD ONE --> <!-- BEGIN CARD TWO --> <div class="character-card"> <div class="character-name">Character Name</div> <div class="column-left"> <img class="character-image" src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/4e/36ef4e53bc4b64c662b0c1e614f8a92e.png"> <div class="character-info"> Details go here </div> </div> <div class="column-right"> <div class="character-details"> <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p> <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p> <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p> </div> </div> </div> <!-- END CARD TWO --> <!-- BEGIN CARD THREE --> <div class="character-card"> <div class="character-name">Character Name</div> <div class="column-left"> <img class="character-image" src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/4e/36ef4e53bc4b64c662b0c1e614f8a92e.png"> <div class="character-info"> Details go here </div> </div> <div class="column-right"> <div class="character-details"> <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p> <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p> <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p> </div> </div> </div> <!-- END CARD THREE --> <!-- INSERT MORE CARDS HERE --> <!-- No need to specify rows; they'll wrap automatically at 3 per row --> <!-- This invisible div must be the last one, do NOT remove this. --> <div class="invisible-div"></div>
</div>
</body>
</html>

Character Cards code - Script Codes CSS Codes

* { box-sizing: border-box;
}
.main-container { margin-left: auto; margin-right: auto; text-align: justify; /* WIDTH OF GRID (PERCENTAGE OF PAGE WIDTH) */ width: 85%;
}
.character-card { position: relative; display: inline-block; width: 32%; padding: 0; border-radius: 15px; /* BORDER COLOR FOR ENTIRE CARD */ border: 1px solid #66bb66;
}
.invisible-div { display: inline-block; width: 100%; height: 0;
}
.character-name { width: 100%; min-height: 30px; text-align: right; border-top-right-radius: 15px; border-top-left-radius: 15px; padding: 20px; /* STYLES FOR CARD HEADER */ background-color: #66bb66; font-size: 1.3em; text-transform: uppercase; color: #fff; font-weight: bold; font-family: sans-serif;
}
.column-left, .column-right { display: inline-block; vertical-align: top; text-align: left;
}
.column-left { position: relative; top: -60px; width: 30%; padding: 20px;
}
.column-right { width: 65%; height: 300px;
}
.character-image { max-width: 100%;
}
.character-details, .character-info { margin-top: 10px; margin-bottom: 10px;
}
.character-info { /* STYLES FOR CHARACTER INFO */ font-size: 0.8em; font-family: sans-serif;
}
.character-details { overflow: auto; height: 90%; /* STYLES FOR CHARACTER DETAILS */ font-size: 0.8em; font-family: sans-serif;
}
Character Cards code - Script Codes
Character Cards code - Script Codes
Home Page Home
Developer Cherie Yang
Username cheryllium
Uploaded November 26, 2022
Rating 3
Size 2,755 Kb
Views 14,168
Do you need developer help for Character Cards code?

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!

Cherie Yang (cheryllium) Script Codes
Name
Laika mockup
CSS hover
Inline-block example
Lesson 2
A Pen by Cherie Yang
Pen pen pen
Find Min
Button nav concept
Phone number selector
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!