lucavi | CODE ✦ DUALITY. (Reply)

you know, you're
my best friend—

click me!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A small two-person display card with optional dropdown text. Could be used as a CR summary or header or what have you. There are two versions, one that's just images and optional overlay text, and another version that can be clicked to open up further info.

✓ RESPONSIVE (MOBILE FRIENDLY)
✓ CUSTOMISABLE
✗ COMMENT FRIENDLY
✗ NOT EMAIL-FRIENDLY

Most parts to customise are located at the top of the code for easy changes. Only the values there need to be changed, and all shared values across the rest of the code will automatically change along with it. Here's a quick list of what they affect:

✦ --slant: angle of the split bar. value cannot be below 0 or it will break. note that shifting the slant may cause images to display differently due to them being set to "cover" and changing the slant will change the "width" of the image and therefore make it smaller or larger accordingly. not recommended for the angle to be more than the width of the code or it will look strange. If you want to fine-tune it, you may need to get into the nitty-gritty and adjust background-size or background placement values.
✦ --gheight: height of the code.
✦ --border: border thickness. recommended range is 0-15px.
✦ --radius: roundness of the corners. not recommended to make it too large, may look odd.
✦ --theme: colour of the frame.
✦ --imageOne: url of image on the left.
✦ --imageTwo: url of image on the right.
✦ --imageTextColour: colour of the overlay text in the images.
✦ --imageTextBg: this is for if you'd like to declare a background colour for the overlay text. this will override the blurry effect and unless you choose a translucent colour.
✦ --addtextColour: only applicable if additional text is included; changes text colour.
✦ --addtextBg: only applicable if additional text is included; changes textbox background colour.

NO TEXT DROPDOWN

<raw-code>
<div style="margin:0 auto; width:100%; max-width:500px; font-size:0; background:var(--theme); border:var(--border) solid var(--theme); border-radius:var(--radius);
  --slant: 200px;
  --gheight: 200px;
  --border: 10px;
  --radius: 8px;
  --theme: #c4a980;
  --imageOne:url('');
  --imageTwo:url('');
  --imageTextColour: #576286;
  --imageTextBg: ---;
  --addtextColour:#1d1d1d;
  --addtextBg:rgba(355,355,355,0.75);">

<div style="grid-column:1/3; grid-row:1; background:var(--imageOne) center no-repeat; background-size:cover; clip-path:polygon(0 0, calc(100% - var(--border) * 0.75) 0, calc(100% - calc(var(--slant) + var(--border) * 0.75)) 100%, 0 100%); border-radius:var(--radius) 0 0 var(--radius);"></div>
<div style="grid-column:2/4; grid-row:1; background:var(--imageTwo) center no-repeat; background-size:cover; clip-path:polygon(calc(var(--slant) + var(--border) * 0.75) 0, 100% 0, 100% 100%, calc(0px + var(--border) * 0.75) 100%); border-radius:0 var(--radius) var(--radius) 0;"></div>

<div style="grid-column:1/-1; grid-row:1; place-self:center; padding:5px; font:600 18px/1.15 Georgia, serif; text-align:center; letter-spacing:2px; color:var(--imageTextColour); background:var(--imageTextBg); border-radius:var(--radius); backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px); z-index:1; cursor:default;">
  <div>overlay text here.</div>
</div>

</div>
</div>
</raw-code>

WITH TEXT DROPDOWN

<raw-code>
<details style="margin:0 auto; width:100%; max-width:500px; font-size:0; background:var(--theme); border:var(--border) solid var(--theme); border-radius:var(--radius);
  --slant: 200px;
  --gheight: 200px;
  --border: 10px;
  --radius: 8px;
  --theme: #8a7d73;
  --imageOne:url('');
  --imageTwo:url('');
  --imageTextColour: #eee;
  --imageTextBg: ---;
  --addtextColour:#1d1d1d;
  --addtextBg:rgba(355,355,355,0.75);">

<div style="grid-column:1/-1; grid-row:1; place-self:center; padding:5px; font:600 21px/1.15 Georgia, serif; text-align:center; letter-spacing:2px; color:var(--imageTextColour); background:var(--imageTextBg); border-radius:var(--radius); backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px); z-index:1; cursor:default;">
  <div>click me!</div>
</div>

</div>
</summary>

<div style="margin-top:var(--border); padding:15px; font:12px/1.25 sans-serif; color:var(--addtextColour); background:var(--addtextBg); border-radius:var(--radius);">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</details>
</raw-code>

CODE ✦ DUALITY.

NO TEXT DROPDOWN

WITH TEXT DROPDOWN

Post a comment in response: