html5 css3 3d mockup presentation

Result

index.html

index.html
XHTML
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

style.css
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:

Related posts

Abstract Factory Design Pattern - C# Abstract Factory Design Pattern - C#
What Are HTTP Status Codes, And What Do They Mean? What Are HTTP Status Codes, And What Do They Mean?
Scraping the Web With Node.js Scraping the Web With Node.js

Leave a reply

Your email address will not be published.