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

5 Ways to be a better Freelancer 5 Ways to be a better Freelancer
Difference between For and Foreach Loop in C# [Note] Difference between For and Foreach Loop in C# [Note]
How creating CSS images made me a better developer How creating CSS images made me a better developer

Leave a reply

Your email address will not be published.