

Card style experiment (Codepen Challenge)
source link: https://codepen.io/josfabre/pen/qBXYJOP
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

xxxxxxxxxx
<div class="main">
<ul class="cards">
<li class="cards_item">
<div class="card">
<div class="card_image"><img src="https://assets.codepen.io/652/photo-1468777675496-5782faaea55b.jpeg" alt="mixed vegetable salad in a mason jar. ">
<div class="price">$ 9.<span>00</span></div>
<h2 class="card_title">Farmstand Salad</h2>
</div>
<div class="card_content">
<div class="card_text">
<p>Dig into the freshest veggies of the season! This salad-in-a-jar features a mixture of leafy greens and seasonal vegetables, fresh from the farmer's market.</p>
<p>Served with your choice of dressing on the side: <i>housemade ranch</i>, <i>cherry balsamic vinaigrette</i>, <i>creamy chipotle</i>, <i>avocado green goddess</i>, or <i>honey mustard</i>. Add your choice of protein for $2 more. </p>
</div>
</div>
</div>
</li>
<li class="cards_item">
<div class="card">
Recommend
-
68
Wanted to work with some masking so made a payment form so, using vanilla JS and the imask.js library, made a fairly simply payment form that uses rege...
-
13
Experiment on computation expression style for Blazor with F#Before I use Feliz style for the auto generated dsl but find its a little redundant, so let`s try CE styleBefore I use Feliz style for the auto generated DSL but fin...
-
11
Codepen Challengexxxxxxxxxx<div class="poster"> <div class="lens-flare"></div> <div class="stripes">...
-
11
Book Text Codepen Challenge 0 unsaved changes xxxxxxxxxx<main> <header> <h1>Mrs. Dalloway</h...
-
4
Spotify becomes latest to experiment with a TikTok-style video feedIllustration by Alex Castro / The Verge Spotify is testing a new TikTok-style video feed in its beta iOS app that shows fullscreen video clips as songs are play...
-
5
Codepen Challenge 0 unsaved changes xxxxxxxxxx<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
-
12
JS (Babel) xxxxxxxxxxconst frame = new Frame("fit", 1024, 768, dark, darker);frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(...
-
8
Pen Settings HTML Preprocessor Add Class(es) to <html> Stuff for <head>
-
9
CodePen Challenge 0 unsaved changes xxxxxxxxxx<main> <h1>To do</h1> <h2>April...
-
10
JS (Babel) xxxxxxxxxximport zim from "https://zimjs.org/cdn/00/zim";// see https://zimjs.com...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK