html5 css3 3d mockup presentation
Result
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Mockup With CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="page"> <h1>Loki Alice</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur volutpat sagittis. Donec est risus, consequat nec consectetur sed, fringilla eget Ut ultrices pretium nisl id ultricies. Donec imperdiet nisi et tincidunt faucibus. Morbi tempor ante sed odio tincidunt mattis. Donec placerat mauris sit amet lacinia porttitor. Aliquam congue eros ut auctor mollis. Sed fringilla molestie ante, nec pretium arcu ornare dapibus. Morbi at fermentum odio. Cras eleifend ipsum mi. Curabitur rutrum lobortis mollis. </p><br/> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur volutpat sagittis. Donec est risus, consequat nec consectetur sed, fringilla eget Ut ultrices pretium nisl id ultricies. Donec imperdiet nisi et tincidunt faucibus. Morbi tempor ante sed odio tincidunt mattis. Donec placerat mauris sit amet lacinia porttitor. Aliquam congue eros ut auctor mollis. Sed fringilla molestie ante, nec pretium arcu ornare dapibus. Morbi at fermentum odio. Cras eleifend ipsum mi. Curabitur rutrum lobortis mollis. </p><br/> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur volutpat sagittis. Donec est risus, consequat nec consectetur sed, fringilla eget Ut ultrices pretium nisl id ultricies. Donec imperdiet nisi et tincidunt faucibus. Morbi tempor ante sed odio tincidunt mattis. Donec placerat mauris sit amet lacinia porttitor. Aliquam congue eros ut auctor mollis. Sed fringilla molestie ante, nec pretium arcu ornare dapibus. Morbi at fermentum odio. Cras eleifend ipsum mi. Curabitur rutrum lobortis mollis. </p><br/> </div> </div> </body> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; background: #ccc; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .page { width: 400px; height: 600px; padding: 30px; background: #fff; border-left: 20px solid #ff2929; transform: rotate(-45deg) skewX(10deg) scale(.8); box-shadow: -50px 50px 50px rgba(0, 0, 0, .5); } .page p { margin: 0; padding: 0; text-align: justify; font-size: 14px; } .page h1 { margin: 0; padding: 0; text-align: center; font-size: 25px; color: #9e9e9e; } .page::before { content: ''; width: 30px; height: 100%; background: #8a0e0e; position: absolute; top: 0; left: 0; transform: skewY(-45deg) translate(-50px, -36px); } .page::after { content: ''; width: 104%; height: 30px; background: #ccc; position: absolute; bottom: 0; left: 0; transform: skewX(-45deg) translate(-5px,30px); } |
Source:Youtube
Please follow and like us: