Ajax Loader
×

CSS3 Responsive Poster

A responsive content poster that displays different videos & text.

Details: http://enrappture.com/responsive-text

HTML 
<div id="calm-poster">
1
<div id="calm-poster">
2
<img src="http://i.imgur.com/woR4D.png" alt="" title="Calm Crown" class="calm-poster-l-img" />
3
<div id="calm-poster-l-media"><iframe width="560" height="315" src="http://www.youtube.com/embed/bRdo7WXTVoM" frameborder="0" allowfullscreen></iframe></div>
4
<div id="calm-poster-m-media"><iframe width="420" height="315" src="http://www.youtube.com/embed/lZSbkYjQer8" frameborder="0" allowfullscreen></iframe></div>
5
<div id="calm-poster-s-media"><iframe width="250" height="188" src="http://www.youtube.com/embed/Z3ZAGBL6UBA" frameborder="0" allowfullscreen></iframe></div>
6
<div id="calm-poster-l">Keep calm <div id="calm-poster-and">and</div> be <span>responsive</span></div>
7
<div id="calm-poster-m">Touch me, touch me. I wanna feel your body</div>
8
<div id="calm-poster-s">The best things come in small packages</div>
9
</div>
 
CSS 
/* Keep calm and be responsive */
1
/* Keep calm and be responsive */
2
 
3
body {
4
background:#eee;
5
font-family:sans-serif;
6
text-align:center;
7
}
8
 
9
#calm-poster {
10
background:#d00;
11
width: 590px;
12
height:1400px;
13
margin-left:auto;
14
margin-right:auto;
15
margin-bottom:20px;
16
text-align:center;
17
font-family:Arial Black, sans-serif;
18
color:#fff;
19
font-size:5em;
20
padding:150px 125px 50px 125px;
21
line-height:1.3em;
22
text-transform:uppercase;
23
}
24
 
25
#calm-poster-l {
26
width:500px;
27
margin-left:auto;
28
margin-right:auto;
29
}
30
 
31
#calm-poster-l span {
32
clear:both;
33
font-size:.8em;
34
}
35
 
36
#calm-poster-and {
37
font-size:.4em;
38
}
39
 
40
#calm-poster-m, #calm-poster-s {
41
display:none;
42
}
43
 
44
#calm-poster-m-media, #calm-poster-s-media {
45
display:none;
46
}
47
 
48
#calm-poster-l-media iframe {
49
border:5px solid #fff;
50
}
51
 
52
#calm-poster-m-media iframe {
53
border:4px solid #999;
54
}
55
 
56
#calm-poster-s-media iframe {
57
border:3px solid #333;
58
}
59
 
60
 
61
 
62
@media only screen and (max-width: 959px) {
63
64
65
#calm-poster {
66
background:#000;
67
font-size:2em;
68
line-height:1.5em;
69
padding-left:70px;
70
padding-right:70px;
71
height:600px;
72
width:440px;
73
}
74
 
75
img.calm-poster-l-img {
76
display:none;
77
}
78
 
79
#calm-poster-l-media, #calm-poster-s-media {
80
display:none;
81
}
82
 
83
#calm-poster-m-media {
84
display:block;
85
}
86
87
#calm-poster-l-media iframe {
88
border:5px solid #fff;
89
}
90
91
#calm-poster-l {
92
display:none;
93
}
94
 
95
#calm-poster-m {
96
display:block;
97
}
98
}
99
 
100
 
101
 
102
 
103
 
104
@media only screen and (min-width: 480px) and (max-width: 767px) {
105
 
106
#calm-poster-l-media, #calm-poster-m-media {
107
display:none;
108
}
109
 
110
#calm-poster-s-media {
111
display:block;
112
}
113
114
#calm-poster {
115
background:#1DA237;
116
height:450px;
117
width:320px;
118
font-size:1.2em;
119
line-height:3em;
120
font-family:georgia, serif;
121
padding-left:10px;
122
padding-right:10px;
123
padding-top:60px;
124
padding-bottom:20px;
125
}
126
 
127
#calm-poster-l {
128
display:none;
129
}
130
 
131
#calm-poster-m {
132
display:none;
133
}
134
 
135
#calm-poster-s {
136
display:block;
137
}
138
}
139
 
140
 
141
 
142
 
143
 
144
@media only screen and (max-width: 479px) {
145
 
146
#calm-poster-l-media, #calm-poster-m-media {
147
display:none;
148
}
149
 
150
#calm-poster-s-media {
151
display:block;
152
}
153
154
#calm-poster {
155
background:#1DA237;
156
height:320px;
157
width:260px;
158
font-size:1em;
159
line-height:2.5em;
160
font-family:georgia, serif;
161
padding-left:2px;
162
padding-right:2px;
163
padding-top:30px;
164
}
165
166
#calm-poster-l {
167
display:none;
168
}
169
 
170
#calm-poster-m {
171
display:none;
172
}
173
 
174
#calm-poster-s {
175
display:block;
176
}
177
 
 

CSS3 Responsive Poster

CSSDeck G+