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

How creating CSS images made me a better developer How creating CSS images made me a better developer
25 Useful SSH Commands 25 Useful SSH Commands
Benefit of Using in Dispose for .NET objects (Why and When ?) Benefit of Using in Dispose for .NET objects (Why and When ?)

Leave a reply

Your email address will not be published.