Journal
How do I make an journal?
A layered paper journal effect!. What is a journal? How do you make a journal? This script and codes were developed by Christian on 15 October 2022, Saturday.
Journal - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Journal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>A layered paper journal effect</h1>
<article contenteditable spellcheck="false"> <h2>Journal Entry #1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis cupiditate nulla aperiam eum animi unde sequi itaque hic odit voluptatibus veritatis, magnam suscipit obcaecati repudiandae totam saepe vero rerum explicabo!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis cupiditate nulla aperiam eum animi unde sequi itaque hic odit voluptatibus veritatis, magnam suscipit obcaecati repudiandae totam saepe vero rerum explicabo!</p>
</article>
</body>
</html>
Journal - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Handlee);
body { background: #444; color: #555; font-family: 'Handlee', sans-serif; font-size: 1.1em; margin: 2em auto; overflow: hidden; width: 50%;
}
h1 { color: #fff; text-align: center;
}
article { box-shadow: 0 0 .5em rgba(0, 0, 0, 0.15); margin: 2em auto; padding: 1em 3em; position: relative; outline: 0; background: #08f; background: -webkit-linear-gradient(top, #8cb , #bde 2%); background-size: 100% 45px;
}
article,
article:before,
article:after { border-bottom-right-radius: 500px 1em; border-bottom-left-radius: 20px 5em; border-top-right-radius: .5em 2em;
}
article:focus { border-radius: 0; color: #000; outline: 0;
}
article:focus::before,
article:focus::after { content: none;
}
article:before,
article:after { content: ' '; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1;
}
article:before { background: #cef; transform: rotate(4deg);
}
article:after { background: #dff; transform: rotate(-4deg);
}
article p { line-height: 2.5em; margin-bottom: 2.5em;
}
article h2 { padding-top: 10px; margin-bottom: -10px;
}
| Developer | Christian |
| Username | chpecson |
| Uploaded | October 15, 2022 |
| Rating | 3 |
| Size | 2,059 Kb |
| Views | 38,456 |
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!
| Name | Size |
| Day 14 - Printing Company | 2,973 Kb |
| Day 8 - Fan Page | 5,652 Kb |
| Day 18 - Cruise ship | 3,491 Kb |
| Wikipedia viewer | 2,865 Kb |
| Day 3 - Tourist Spot | 2,682 Kb |
| Day 6 - Author | 2,696 Kb |
| Photo Gallery | 2,434 Kb |
| Tribute Page v1 | 5,740 Kb |
| Day 1 - Portfolio | 3,532 Kb |
| Day 16 - Charitable Organization | 3,314 Kb |
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!
| Name | Username | Size |
| Portfolio Landing Page | FDfranklin | 3,585 Kb |
| Blog Concept - Single Post | Marionebl | 9,603 Kb |
| Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
| FontAwesome icons with animation | Nicotinell | 2,083 Kb |
| Button shaking | SusanneLundblad | 2,227 Kb |
| Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
| Slider | Mohammed-fawzy | 2,634 Kb |
| A Pen by Alex Edwards | Exards | 8,218 Kb |
| Mesmerizing octopus | Jllodra | 3,549 Kb |
| A Pen by tugce | Ecgutcnkr | 4,197 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!