Project

General

Profile

Bug #1551 » sopa.html

Chris Stein, 2012-01-17 09:17 PM

 
1
<!doctype html>
2

    
3
<html>
4

    
5
  <head>
6
    <title>CUNY Academic Commons SOPA Blackout</title>
7
    <meta charset="utf-8" />
8
    
9
    <link href='http://fonts.googleapis.com/css?family=Magra:400,700' rel='stylesheet' type='text/css'>
10
    
11
    <style type="text/css">
12
    	body{
13
    		background-color:#000;
14
    		}
15
    	#sopa{
16
    		background-color:#000;
17
    		width:950px;
18
    		color:#FFF;
19
    		margin:0 auto;
20
    		font-family:"Helvetica Neue", Helvetica, Arial;
21
    		}
22
    	
23
    	#sopa h2{
24
    		font-family:Magra, "Helvetica Neue", Helvetica, Arial;
25
    		background-color:#3FC2F3;
26
    		padding:5px;
27
    		margin-top:40px;
28
    	}
29
    	#sopa p{
30
    		margin-bottom:1em;
31
    		font-size:16px;
32
    		line-height:22px;
33
    	}
34
    		
35
    	#sopa a, #sopa a:visited, #sopa a:link{
36
    		color:#2F90B4;
37
    		text-decoration:none;
38
    		border-bottom:1px solid #2F90B4;
39
    	}
40
    	
41
    	
42
    	
43
    	#sopa #header h1{
44
    		background:url(images/bg-header.gif) no-repeat;
45
    		width:500px;
46
    		height:70px;
47
    		line-height:80px;
48
    		text-indent:-10000px;
49
    		float:left;
50
    	}
51
    	
52
    	#sopa #header p{
53
    	width:300px;
54
    	float:right;
55
    	line-height:70px;
56
    	text-align:right;
57
    	vertical-align:center;
58
    	}
59
    	
60
    	#sopa-head{
61
    		clear:both;
62
    		overflow:hidden;
63
    	}
64
    	
65
    	#sopa-head h2{
66
    		text-align:center;
67
    		font-size:42px;
68
    		background-color:#000;
69
    		margin:60px 0;
70
    		
71
    	}
72
    	
73
    	#learn{
74
    	
75
    	}
76
    	
77
    	.section{
78
    		width:290px;
79
    		margin-right:40px;
80
    		float:left;
81
    	}
82
    	
83
    	#spread{
84
    		margin-right:0px;
85
    	}
86
    	
87
    	/* -----------------------------------
88
    	the rest is for the speech bubble things
89
    	----------------------------------- */
90
    	
91
		.triangle-left, .triangle-right {
92
				position:relative;
93
			   padding:15px;
94
			   /*margin:1em 0 3em;*/
95
			   margin-bottom:30px;
96
			   color:#fff;
97
			   background:#3FC2F3;
98
		}
99
		
100
		.triangle-left:before{
101
			content: "";
102
			position: absolute;
103
			bottom: -20px;
104
			left: 60px;
105
			border: 0;
106
			border-right-width: 30px;
107
			border-bottom-width: 20px;
108
			display: block;
109
			width: 0;
110
			border-image: initial;
111
			border-style: solid;
112
			border-color: transparent #3FC2F3;
113
		}
114
		
115
		.triangle-left:after {
116
		 content: "";
117
		position: absolute;
118
		bottom: -20px;
119
		left: 80px;
120
		border: 0;
121
		border-right-width: 10px;
122
		border-bottom-width: 20px;
123
		display: block;
124
		width: 0;
125
		border-image: initial;
126
		border-style: solid;
127
		border-color: transparent #000;
128
		}
129
		
130
		.triangle-right:before{
131
			content: "";
132
			position: absolute;
133
			bottom: -20px;
134
			right: 30px;
135
			border-width: 0 0 25px 50px;
136
			border-style: solid;
137
			border-color: transparent #3FC2F3;
138
			display: block;
139
			width: 0;
140
		}
141
		
142
		.triangle-right:after{
143
			content: "";
144
			position: absolute;
145
			bottom: -20px;
146
			right: 60px;
147
			border-width: 0 0 20px 20px;
148
			border-style: solid;
149
			border-color: transparent #000;
150
			display: block;
151
			width: 0;
152
		}
153
    	
154
    	
155
    </style>
156
    
157
    
158
  </head>
159

    
160
  <body>
161
  
162
  <div id="sopa">
163
  	<div id="header">
164
  		<h1>CUNY ACADEMIC COMMONS</h1>
165
  		<p><a href="#">Continue to the Commons</a></p>
166
  	</div>
167
  	
168
  	<div id="sopa-head">
169
  	<h2>SAVE THE INTERNET. STOP SOPA / PIPA</h2> 
170
  	</div>
171
  	
172
  	<div id="learn" class="section">
173
  		<h2 class="triangle-left">Learn More About SOPA / PIPA</h2>
174
  		<p>Current Bills in the House, Stop Online Piracy Act (SOPA), and Senate Protect IP Act (PIPA), threaten the existence of sites like the CUNY Academic Commons and any site that allows people to share information on the Internet.  Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
175
  		</p>
176
  	</div>
177
  	
178
  	<div id="action" class="section">
179
  	<h2 class="triangle-left">Take Action! Contact Your Representative</h2>
180
  	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
181
  	
182
  	<h2 class="triangle-right"	>Join in. Blackout Your Commons Blog</h2>
183
  	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
184
  	
185
  	</div>
186
  	
187
  	<div id="spread" class="section">
188
  	<h2 class="triangle-right">Spread the Word</h2>
189
  	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
190
  	</div>
191
	</div>
192
  </body>
193

    
194
</html>
(2-2/3)