-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdjango-install.html
133 lines (119 loc) · 4.49 KB
/
django-install.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<html>
<head>
<title>Django Installation</title>
<style type="text/css">
body { background:#092e20; color: white;}
.title {
background: #234f32;
color: white;
margin-top: 20px;
line-height: 1.1em
}
a, a:hover, a:visited {text-decoration: underline; color: #9999FF;}
.impress-supported .fallback-message {
display:none;
}
@-webkit-keyframes typing {
from { width: 0 }
to { width:11.3em }
}
@-moz-keyframes typing {
from { width: 0 }
to { width:6.3em }
}
@-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
@-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
.typing {
display: inline-block;
font-size: 40px;
}
.typingeffect {
white-space:nowrap;
overflow:hidden;
border-right: .1em solid black;
-webkit-animation: typing 4s steps(18, end), /* # of steps = # of characters */
blink-caret 1s step-end infinite;
-moz-animation: typing 115s steps(5, end), /* # of steps = # of characters */
blink-caret 1s step-end infinite;
}
.big {
width: 600px;
text-align: center;
font-size: 60px;
line-height: 1;
}
.tiny {
width: 800px;
text-align: center;
font-size: 20px;
line-height: 1;
}
.pull-left {
text-align: left;
}
.step {
width: 900px;
padding: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Inika', serif;
font-size: 48px;
line-height: 1.5;
}
/* fade out inactive slides */
.step {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.step:not(.active) {
opacity: 0.3;
}
</style>
</head>
<body class="impress-not-supported" >
<div class="fallback-message" >
<p>impress.js not supported</p>
</div>
<div id="impress" >
<div class="title step" data-x="0" data-y="1000" data-scale="5" style="font-size: 80px" > Django Installation </div>
<div class="step" data-x="1200" data-y="2300" data-scale="2"> Linux distribution package </div>
<div class="step" data-x="1200" data-y="2500" data-scale="2"> From the <a href="http://pypi.python.org/pypi">cheeseshop</a></div>
<div class="step" data-x="1800" data-y="3900" data-scale="1" style="background-image:url(virtenv1.png); background-repeat: no-repeat; background-position: 50% 50%; height: 800px"> </div>
<div class="step" data-x="3000" data-y="3900" data-scale="1" style="background-image:url(virtenv2.png); background-repeat: no-repeat; background-position: 50% 50%; height: 800px"> </div>
<div class="step" data-x="6000" data-y="6000" data-scale="4"> (pyenv)$ <div class="typing">django-admin.py startproject proj</div> </div>
<div class="step" data-x="6000" data-y="6500" data-scale="4"> (pyenv)$ <div class="typing">cd proj</div> </div>
<div class="step" data-x="6000" data-y="7000" data-scale="4"> (pyenv)$ <div class="typing">python manage.py runserver</div> </div>
<div class="step" data-x="6000" data-y="7500" data-scale="4"> (pyenv)$ <div class="typing">python manage.py startapp first</div> </div>
<div class="step" data-x="7000" data-y="8000" data-scale="1" style="background-image:url(dirlayout.png); background-repeat: no-repeat; background-position: 50% 50%; height: 800px"> </div>
</div>
<script src = "js/impress.js" > </script>
<script src = "js/jquery.min.js" > </script>
<script>
impress().init();
$(document).ready(
function() {
$('.step').on('impress:stepenter',
function() {
$(this).find('.typing').addClass('typingeffect');
});
$('.step').on('impress:stepleave',
function() {
console.log(this);
$(this).find('.typing').remove('typingeffect');
});
});
</script>
</body>
</html>