A Pen by Andy Hoffman

Developer
Andy Hoffman
Size
2,037 Kb
Views
30,360
  1. A Pen by Andy Hoffman Previews
  2. A Pen by Andy Hoffman HTML Codes
  3. A Pen by Andy Hoffman CSS Codes

How do I make an a pen by andy hoffman?

What is a a pen by andy hoffman? How do you make a a pen by andy hoffman? This script and codes were developed by Andy Hoffman on 24 August 2022, Wednesday.

A Pen by Andy Hoffman Previews
IQ Test

A Pen by Andy Hoffman - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Andy Hoffman</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="log"> <li class="entry mine"> <img class="avatar" src="//placekitten.com/g/50/50" alt="" /> <p class="message">Hi, Mark. What time is it right now in Iceland?</p> </li> <li class="entry theirs"><p class="message">It's midnight here. You're sort of interrupting my sleep, Andy.</p></li> <li class="entry mine"> <img class="avatar" src="//placekitten.com/g/50/50" alt="" /> <p class="message">I had no idea! If I'd known, I would have tried chatting you two hours from now, right as you entered your REM cycle.</p> </li> <li class="entry theirs"> <p class="message">You're still a sarcastic bastard, after all these years.</p> </li> <li class="entry theirs"> <p class="message">What are you up to in Detroit?</p> </li>
</ul>
</body>
</html>

A Pen by Andy Hoffman - Script Codes CSS Codes

* { margin: 0; padding: 0; box-sizing: border-box;
}
li { list-style: none;
}
body { font-family: sans-serif;
}
.log { max-width: 380px; margin: 0 auto; padding: 2em 0;
}
.entry { display: flex; flex-direction: row; align-items: flex-end; max-width: 100%; margin-bottom: 0.5em;
}
.entry.theirs { flex-direction: row-reverse;
}
.avatar { width: 50px; height: 50px; border-radius: 25px;
}
.message { position: relative; background-color: #ddd; padding: 0.5em; margin: 0 1em; border-radius: 4px; font-weight: lighter; max-width: 70%;
}
.message:before { position: absolute; right: auto; bottom: .6em; left: -12px; height: 0; content: ''; border: 6px solid transparent; border-right-color: #ddd; z-index: 2;
}
.entry.theirs .message { background: #08f; color: white;
}
.entry.theirs .message:before { right: -12px; bottom: .6em; left: auto; border: 6px solid transparent; border-left-color: #08f;
}
A Pen by Andy Hoffman - Script Codes
A Pen by Andy Hoffman - Script Codes
Home Page Home
Developer Andy Hoffman
Username antibland
Uploaded August 24, 2022
Rating 3
Size 2,037 Kb
Views 30,360
Do you need developer help for A Pen by Andy Hoffman?

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!

Andy Hoffman (antibland) Script Codes
Name
Accessible Tooltip
SVG With Pure CSS Tooltip
Battle Donald J. Trump
Plain Text Contenteditable
Full page image fade in
Swaying Vertical Tabs
Page Switching Using CSS Negation
Animated Stacked Pages
Active Nav Item On Top
Simple HTML Canvas with Arrow Key Controls
Create amazing video scripts 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!