index.html

<html>
	<head>
		<title>My BBC Tech News Clone</title>
		
		
		<style type="text/css">
			
			#topbar{
				width:80%;
				margin:0 auto;
				height:40px;
				}
			
			body{
				margin:0;
				padding:0;
				font-family:Helvetica,Arial,sans-serif;
				}
			#logo{
				margin-top:8px;
				width:100px;
				float:left;
				margin-right:8px;
				
				}
			
			.topbar-section{
				float:left;
				border-left: 1px #CCCCCC solid;
				height:100%;
				}
				
			#signin-image{
				width:25px;
				margin:11px 15px;
				float:left;
				}
				
			.signin-text{
				font-weight:bold;
				font-size:90%;
				position:relative;
				top:14px;
				padding-right:50px;
				
				}
				
			.topbar-menu{
				font-weight:bold;
				font-size:90%;
				padding:14px 15px 0 15px;
				height: 27px;
				}
				
			#down{
				width:15px;
				margin-left:20px;
				}
				
			#search-box{
				background-color:#E4E4E4;
				border:none;
				font-weight:bold;
				font-size:14px;
				padding:5px;
				margin:5px 0 5px 5px;
				float:left;
				
				}
			#search{
				margin:5px 0 0 0;
				height:27px;
				}
			
			.clear{
				clear:both;
				}
				
			#menu-bar-container{
				background-color:#BB1919;
				width:100%;
				height:70px;
				border-top:1px solid #CCCCCC;
				}
				
				
			#menu-bar{
				width:80%;
				margin: 0 auto;
				}
				
			h1{
				padding:0;
				margin:0;
				color:white;
				font-size:40px;
				font-weight:normal;
				}
				
			#menu-bar-container-2{
				width:100%;
				background-color:#A91717;
				
				
				}
			
			#menu-bar-2{
				width:80%;
				margin: 0 auto;
				height:30px;
				}
				
			#menu-bar-2 a{
				color:white;
				text-decoration:none;
				padding:0 10px;
				border-right:1px solid #BB4545;
				font-size:14px;
				position:relative;
				top:7px;
				}
			#menu-bar-2 a:hover{
				text-decoration:underline;
				}
			
			.noborder{
				border:none !important;
				}
			
			#reddown{
				height:10px;
				position:relative;
				top:9px;
				}
			
			#page-container{
				width:80%;
				margin:0 auto;
				}
				
			h2{
				font-weight:normal;
				margin-top:30px;
				font-size:20px;
				border-bottom:2px solid #a91717;
				width:105px;
				}
			h3 a{
				color:black;
				font-size:30px;
				text-decoration:none;
				}
            
            h3 a:hover{
                color:#1167a8;
                }
				
            #article-summary{
                color:#5a5a5a;
                width:260px;
                float:left;
            }
            
            #article-summary img{
                height:15px;
                position:relative;
                top:2px;
                
            }
            
            #topic-link{
                text-decoration:none;
                color:#a91717;
                float:right;
                border-left:1px solid #CCCCCC;
                padding-left:10px;
            }
            
            #article-summary a:hover{
                color:#1167a8;
            }
            
            .date{
                padding-right:10px;
                color: #5a5a5a;
            }
            
            #article-container{
               float:left;
                width:670px;
                border-right: 1px solid #CCCCCC;
                padding-right: 20px;
            }
            
            #main-article-image{
                margin-left:20px;
                width:360px;
            }
            #article-hr{
                border-top:1px solid #a91717;
                width:50px;
            }
            
            .article-link{
                color:black;
                text-decoration:none;
                
            }
            
            
            
            
		</style>
		</head>
		
		<body>
			<div id="topbar">
			
				<img id="logo" src="images/bbc-logo.png">
				<div id="sigin-div" class="topbar-section">
			
					<img id="signin-image" src="images/sign-in.png">
			
					<span class="signin-text">Sign in</span>
				</div>
			
				<div class="topbar-section topbar-menu">
					News
				</div>
				
				<div class="topbar-section topbar-menu">
					Sport
				</div>
				
				<div class="topbar-section topbar-menu">
					Weather
				</div>
				
				<div class="topbar-section topbar-menu">
					Shop
				</div>
				
				<div class="topbar-section topbar-menu">
					Earth
				</div>
				
				<div class="topbar-section topbar-menu">
					Travel
				</div>
				
				<div class="topbar-section topbar-menu">
					More
					<img id="down" src="images/down.png">
					
				</div>
				
				<div class="topbar-section">
					<input id="search-box" type="text" value="Search">
					<input type="image" id="search" src="images/search.png">	
				</div>
			</div>
			
			<div class="clear"></div>
			
			<div id="menu-bar-container">
					<div id="menu-bar">
					<h1>
					NEWS
					</h1> 
					
					</div>
					
				
			
			<div id="menu-bar-container-2">
			
			
			
				<div id="menu-bar-2">
				<a href="">Home</a>
				<a href="">Video</a>
				<a href="">World</a>
				<a href="">Asia</a>
				<a href="">UK</a>
				<a href="">Business</a>
				<a href="">Tech</a>
				<a href="">Science</a>
				<a href="">Magazine</a>
				<a href="">Entertainment & Arts</a>
				<a href="">Health</a>
				<a href="">World TV News</a>
				<a href="" class="noborder">More</a>
				<img id="reddown" src="images/reddown.png">
				
				</div>
			</div>
			
		</div>
		
		<div class="clear">
		</div>
		<div id="page-container">
		      <div id="main-article">
		
			<h2>
			Technology
			</h2>
                  
            <div id="article-container">      
			<h3><a href="">The boy behind Facebook's best chatbot</a></h3>
		
            <div id="article-summary">
                 <p> The boy behind Facebook's best chatbot
Alec Jones aspires to one day work for 'exciting' tech giants
A simple-yet-clever chat bot gives Dave Lee hope that this immature technology will be worth while.
                </p>
                <p><img src="images/clock.png"><span class="date">18 February 2017</span><a id="topic-link" href="">Technology</a></p>
          
                <hr id="article-hr" align="left">
                <p><a class="article-link" href="">Hello, I am BBCTechbot</a></p>

                </div>
               
             <img id="main-article-image" src="images/main-article-image.jpg">
                
                
                  </div>
            
            
            
            </div>
		</div>
		
		
		
		
		</body>
			
</html>	