Added demo files

Added the HTML and CSS responsive demo files
joshuapekera · Jul 31, 2012 · c7c3908 · c7c3908
1 parent 0f3295b
commit c7c3908
Show file tree

Hide file tree

Showing 34 changed files with 5,962 additions and 0 deletions.
diff --git a/demo/banners/awwwards_sotd_b_left.png b/demo/banners/awwwards_sotd_b_left.png
diff --git a/demo/banners/awwwards_sotd_b_left2x.png b/demo/banners/awwwards_sotd_b_left2x.png
diff --git a/demo/banners/awwwards_sotd_b_left_huge.png b/demo/banners/awwwards_sotd_b_left_huge.png
diff --git a/demo/banners/awwwards_sotd_b_left_mobile.png b/demo/banners/awwwards_sotd_b_left_mobile.png
diff --git a/demo/banners/awwwards_sotd_b_left_mobile2x.png b/demo/banners/awwwards_sotd_b_left_mobile2x.png
diff --git a/demo/banners/awwwards_sotd_b_right.png b/demo/banners/awwwards_sotd_b_right.png
diff --git a/demo/banners/awwwards_sotd_b_right2x.png b/demo/banners/awwwards_sotd_b_right2x.png
diff --git a/demo/banners/awwwards_sotd_b_right_huge.png b/demo/banners/awwwards_sotd_b_right_huge.png
diff --git a/demo/banners/awwwards_sotd_b_right_mobile.png b/demo/banners/awwwards_sotd_b_right_mobile.png
diff --git a/demo/banners/awwwards_sotd_b_right_mobile2x.png b/demo/banners/awwwards_sotd_b_right_mobile2x.png
diff --git a/demo/banners/awwwards_sotd_g_left.png b/demo/banners/awwwards_sotd_g_left.png
diff --git a/demo/banners/awwwards_sotd_g_left2x.png b/demo/banners/awwwards_sotd_g_left2x.png
diff --git a/demo/banners/awwwards_sotd_g_left_huge.png b/demo/banners/awwwards_sotd_g_left_huge.png
diff --git a/demo/banners/awwwards_sotd_g_left_mobile.png b/demo/banners/awwwards_sotd_g_left_mobile.png
diff --git a/demo/banners/awwwards_sotd_g_left_mobile2x.png b/demo/banners/awwwards_sotd_g_left_mobile2x.png
diff --git a/demo/banners/awwwards_sotd_g_right.png b/demo/banners/awwwards_sotd_g_right.png
diff --git a/demo/banners/awwwards_sotd_g_right2x.png b/demo/banners/awwwards_sotd_g_right2x.png
diff --git a/demo/banners/awwwards_sotd_g_right_huge.png b/demo/banners/awwwards_sotd_g_right_huge.png
diff --git a/demo/banners/awwwards_sotd_g_right_mobile.png b/demo/banners/awwwards_sotd_g_right_mobile.png
diff --git a/demo/banners/awwwards_sotd_g_right_mobile2x.png b/demo/banners/awwwards_sotd_g_right_mobile2x.png
diff --git a/demo/banners/awwwards_sotd_w_left.png b/demo/banners/awwwards_sotd_w_left.png
diff --git a/demo/banners/awwwards_sotd_w_left2x.png b/demo/banners/awwwards_sotd_w_left2x.png
diff --git a/demo/banners/awwwards_sotd_w_left_huge.png b/demo/banners/awwwards_sotd_w_left_huge.png
diff --git a/demo/banners/awwwards_sotd_w_left_mobile.png b/demo/banners/awwwards_sotd_w_left_mobile.png
diff --git a/demo/banners/awwwards_sotd_w_left_mobile2x.png b/demo/banners/awwwards_sotd_w_left_mobile2x.png
diff --git a/demo/banners/awwwards_sotd_w_right.png b/demo/banners/awwwards_sotd_w_right.png
diff --git a/demo/banners/awwwards_sotd_w_right2x.png b/demo/banners/awwwards_sotd_w_right2x.png
diff --git a/demo/banners/awwwards_sotd_w_right_huge.png b/demo/banners/awwwards_sotd_w_right_huge.png
diff --git a/demo/banners/awwwards_sotd_w_right_mobile.png b/demo/banners/awwwards_sotd_w_right_mobile.png
diff --git a/demo/banners/awwwards_sotd_w_right_mobile2x.png b/demo/banners/awwwards_sotd_w_right_mobile2x.png
diff --git a/demo/css/awwwards.css b/demo/css/awwwards.css
@@ -0,0 +1,120 @@
+/*
+ * awwwards.css by Joshua Pekera
+ * follow me on Twitter @joshuapekera
+*/
+
+/* Memo
+================================================== 
+IT IS NOT MANDITORY THAT YOU USE ALL OF THE FOLLOWING MEDIA QUERIES. IF YOU ARE BUILDING A FULLY RESPONSIVE PRODUCT YOU WILL LIKELY HAVE THESE ALREADY.
+YOU CAN ADAPT THESE CLASSES TO YOUR OWN STYLE SHEET IF SO CHOOSE.
+================================================== */
+
+/* Base Style
+================================================== */
+
+#awwwards {
+	position:absolute;
+	top:40px;
+	right:0px;
+	z-index:1040;
+}
+
+#awwwards a {
+	width:70px;
+	height:105px;
+	text-indent:-8000px;
+	display:block;
+	background:url('../banners/awwwards_sotd_b_right.png') no-repeat;
+	overflow:hidden;
+}
+
+/* Media Queries
+================================================== */
+
+/* Landscape phone to portrait tablet 
+----------------------------------------*/
+@media (max-width: 767px) {
+/* Styles */
+}
+
+/* Mobile Devices Landscape Specific
+----------------------------------------*/
+@media (min-width: 480px) and (max-width: 767px) {
+/* Styles */
+}
+
+/* Landscape phones and down 
+---------------------------------------------------------------------*/
+@media (max-width: 480px) {
+/* Styles */
+	#awwwards a {
+		width:45px;
+		height:68px;
+		background:url('../banners/awwwards_sotd_b_right_mobile.png') no-repeat;
+	}
+}
+
+/* Portrait tablet to landscape and desktop 
+------------------------------------------------------*/
+@media (min-width: 768px) and (max-width: 979px) {
+}
+
+
+/* iPads (portrait and landscape) 
+---------------------------------------------------------------------------------------*/
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+/* Styles */
+}
+
+/* iPads (landscape) 
+------------------------ */
+@media only screen 
+and (min-device-width : 768px) 
+and (max-device-width : 1024px) 
+and (orientation : landscape) {
+/* Styles */
+}
+
+/* iPads (portrait)
+----------------------- */
+@media only screen 
+and (min-device-width : 768px) 
+and (max-device-width : 1024px) 
+and (orientation : portrait) {
+/* Styles */
+}
+
+/* Slightly Wide Desktop Display
+------------------------------------*/
+@media (min-width: 980px) {
+/* Styles */
+}
+
+/* Large Desktop Displays 
+----------------------------------------*/
+@media (min-width: 1200px) {
+/* Styles */
+}
+
+/* Retina Displays (Tip: Best used only for image replacement. Do not duplicate positioning, height, width etc.)
+---------------------------------------------------------------------------------------------------------------- */
+
+/* Target any device with retina display (ie iPad 3 and MacBook Pro)*/
+@media 
+only screen and (-webkit-min-device-pixel-ratio : 1.5),
+only screen and (min-device-pixel-ratio : 1.5) {
+/* Styles */
+	#awwwards a {
+		background:url('../banners/awwwards_sotd_b_right2x.png') no-repeat;
+		background-size: 70px 105px;
+	}
+}
+
+/* Target only smartphone device with retina display (ie iPhone) */
+@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5) {
+	#awwwards a {
+		background:url('../banners/awwwards_sotd_b_right_mobile2x.png') no-repeat;
+		background-size: 45px 68px;
+	}
+}
+