Skip to content

Instantly share code, notes, and snippets.

@jzazove

jzazove/cnn_splash.html

Created June 24, 2013 01:58
Show Gist options
  • Save jzazove/5847306 to your computer and use it in GitHub Desktop.
Save jzazove/5847306 to your computer and use it in GitHub Desktop.
Download ZIP
CNN.com recommendation
Raw
cnn_splash.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>CNN.com - Breaking News, U.S., World, Weather, Entertainment &amp; Video News</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
<meta name="viewport" content="width=1024"/>
<meta property="fb:app_id" content="80401312489"/>
<meta property="fb:page_id" content="129343697106537"/>
<style type="text/css">
html, body {height: 100%;width: 100%; background:#fbfbf3; font-family: Arial}
body {margin:0; padding:0;}
.cnn_hdr {background:#ca0002;}
.cnn_hdr-main {border-bottom: 1px solid #c80012; background-color: #a20c1f; height: 84px;}
.cnn_hdr-main {filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d60000',endColorstr='#920000',GradientType=0);background-image: -webkit-linear-gradient(bottom,#920000,#d60000);background-image: -moz-linear-gradient(bottom,#920000,#d60000);background-image: -ms-linear-gradient(bottom,#920000,#d60000);background-image: -o-linear-gradient(bottom,#920000,#d60000);background-image: linear-gradient(to top,#920000,#d60000);}
.cnn_hdr-nav {height: 35px; background:#b60002;}
.hdr-banner-title {display:inline-block; width:119px; height:82px; background:url(http://i.cdn.turner.com/cnn/.e/img/3.0/global/header/hdr-main.png) no-repeat 0 0;}
.hdr-wrap {margin: 0 auto;width: 980px;position: relative;}
.cnn_maincntnr {width: 1000px;}
.cnn_hpinthenews {width: 1000px;height: 40px; overflow: hidden;}
.cnn_contentarea {width: 990px;text-align: center; margin:0 auto;}
.cnn_main10t1cntnt {width: 670px; float:left; -webkit-box-shadow: 0 0 5px rgba(89,89,88,.25);-moz-box-shadow: 0 0 5px rgba(89,89,88,.25);box-shadow: 0 0 5px rgba(89,89,88,.25);}
.cnn_main10t1img {position: relative;height: 234px;width: 416px;background:#ccc;}
.cnn_breaking_news_t1 {font-size: 18px;line-height: 20px; text-align: left;}
.cnn_breaking_news h4{color: #fff; margin:0 0 30px; font-size: 16px; padding:5px 10px; line-height: 15px; text-transform: uppercase; background-color: #d1020a; background-image: -webkit-linear-gradient(bottom,#d1020a,#940000); background-image: -moz-linear-gradient(bottom,#d1020a,#940000); background-image: -ms-linear-gradient(bottom,#d1020a,#940000); background-image: -o-linear-gradient(bottom,#d1020a,#940000); background-image: linear-gradient(to top,#d1020a,#940000); }
h1 {color:#403a37}
.cnn_nonmain {width: 300px; margin-left:10px; float:left;box-shadow: 0 0 5px rgba(89,89,88,0.25);webkit-box-shadow: 0 0 5px rgba(89,89,88,.25);-moz-box-shadow: 0 0 5px rgba(89,89,88,.25);}
.rrHeader {padding: 0 10px;background: rgba(80,80,80,1); padding:4px 10px; font-size:15px; font-weight:bold; color:#fff; text-align:left;}
.space {height:120px;}
</style>
</head>
<body class="cnnMainPage">
<div class="cnn_hdr">
<div class="cnn_hdr-main">
<div class="hdr-wrap"><a href="/" class="hdr-banner-title"></a></div>
</div>
<div class="cnn_hdr-nav"></div>
</div>
<div class="cnn_hpinthenews"></div>
<div class="cnn_contentarea">
<div class="cnn_maincntnr">
<div class="cnn_main10t1cntnt">
<div class="cnn_breaking_news cnn_breaking_news_t1"><h4>BREAKING NEWS</h4></div>
<h1></h1>
<div class="cnn_main10t1img"></div>
</div>
<div class="cnn_nonmain">
<div class="rrHeader rrHeaderW">WEATHER</div>
<div class="space"></div>
</div>
</div>
</div>
<script defer="defer">
//put cnn real content here
(function(){
if(console && console.log){
console.log("page done loading, now add content")
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment