News Website Layout

-

I had a web Engineering lab, in which I need to make a website layout as that of BBC News. So, I made a Banana News Network website layout.
Before going towards the code, I want to tell you that I mostly did the work using division tag <div></div>. The same work can be done using tables, but div provides you more flexibility and responsiveness. So, I used both the div tags and tables. Now, below is the code of that website layout. I am sharing it because the lab has been marked.

CODE:
<!DOCTYPE html>
<html>
<head><title>bbc</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

 @media screen and (min-width: 480px) {
 
    li{display: block;
      text-decoration: none;
      text-align: left;
      color: red;
      padding: inherit;
      font-size: 17px;
      margin: auto;
      border-right: 1px solid white;}
    
}
       
    body{
        
      
        font-family: sans-serif;
    }
    h3{
        font-family: sans-serif;
        color: dimgray;
        text-align: right;
       
    }
    
    h2{
        text-align: right;
        border-bottom: 2px solid black;
    }
   

#nav_bar{
        
        text-align: center;
         overflow: hidden;
        

    }   
    ul{
        
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: black;
       
    }
li{
      display: inline-block;
      text-decoration: none;
      text-align: left;
      color: white;
      padding: inherit;
      font-size: 17px;
      margin: auto;
      border-right: 1px solid white;
             
    }   
    
a{
        
    text-decoration:none;
    color: white;
    display: block;
    padding: 14px 16px;
    text-decoration: none;
   
    
    }
    a:hover{
        border-bottom: 5px solid red;
    }
    
    
 
    
    .left{
         
        width: 60%;
        float: left;
        
        
    }
    .right_main{
        
        float: left;
        width: 39%;
        height: 50%;
        
    }
    .right1 img{
        float: left;
        border: 2px solid gray;
        width: 45%;
        height: 60%;
        
        
        
        
    }
    .right2 img{
        border: 2px solid gray;
        clear: right;
        float: left;
      
        width: 45%;
        height: 60%;
        
    }
    
    
    
    
    #latest{
        
        border: 2px solid white;
        background-color: darkred;
        float: right;
        font-family: sans-serif;
        font-size: 20px;
        
    }
    
    table{
        text-align: center;
        height: 100px;
    }
    td{
        border: 2px solid white;
        height: 112px;
        width: 350px;
        color: white;
    }
    

    .clear{
        clear: left;
    }
    
    p{
        text-align: center;
        font-family: cursive;
    }

 
    
    #weatherWidget{
        background-color: darkred;
    }
    
    .left:hover .img{
        opacity: 0.3;
        
    }
    .right1:hover .img{
        opacity: 0.3;
    }
    .right2:hover .img{
        opacity: 0.3;
    }
    
    
   
</style>    
    </head>
    
    <body>
    <div id="container">  
    <div id="nav_bar">
        <ul>
            <li><img src="https://pmcvariety.files.wordpress.com/2014/01/bbc-logo.jpg?w=700&h=393&crop=1" width="90px" height="35px"></li>
            <li><a href="#signIn">Sign In</a></li>
            <li></li>
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#sports">Sport</a></li>
            <li><a href="#weather">Weather</a></li>      
            <li><a href="#shop">Shop</a></li>      
            <li><a href="#earth">Earth</a></li>      
            <li><a href="#travel">Travel</a></li>      
            <li><a href="#capital">Capital</a></li>      
        </ul>
    </div>
        <h1>Welcome to Banana News Network</h1>
        <h3>27 September, 2018.</h3>
    <!-- upper -->
        
        <div class="left">
        <img src="https://cdn.pixabay.com/photo/2018/09/18/11/36/arrangement-3685962__340.jpg" width="750px" height="305px" class="img">  
        </div>
        
        
        <div class="right_main">
            <div class="right1"><img src="https://cdn.pixabay.com/photo/2015/11/07/12/02/business-1031754__340.jpg"  class="img"></div>
            <div class="right1"><img  src="https://cdn.pixabay.com/photo/2012/03/02/00/45/chinese-20910__340.jpg"  class="img"></div>
            <div class="right2"><img  src="https://cdn.pixabay.com/photo/2017/08/10/08/47/code-2620118__340.jpg"  class="img"></div>
            <div class="right2"><img  src="https://cdn.pixabay.com/photo/2016/08/15/16/03/newspaper-1595773__340.jpg"  class="img"></div>
        </div>
        <div> 
        <div class="left">
    <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
        </div>
        
        <div class="right_main">
            <div class="right1"><p>Click to view Four New Business News...</p>
        </div>
            
        </div>
            
    

        <div id="table">
        <table>
  <tr cellspacing="0">
  <td  ><img class="img" src="https://cdn.pixabay.com/photo/2016/01/03/17/59/bananas-1119790__340.jpg" style="width:425px; height:auto; "></td>
  <td  ><img class="img" src="https://cdn.pixabay.com/photo/2015/08/20/20/07/cereal-898073__340.jpg" style="width:425px; height:auto; "></td>
  <td  ><img class="img" src="https://cdn.pixabay.com/photo/2016/09/03/20/48/bananas-1642706__340.jpg" style="width:425px; height:auto; "></td>
  </tr>
  <tr>
  <td style="font-size=20px; text-align: center; "><b><a style="color: black" href="https://en.wikipedia.org/wiki/Banana" target="blank">Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</a></b></td>
  <td style="font-size=20px; text-align: center;"><b><a style="color: black"  href="https://en.wikipedia.org/wiki/Banana_leaf_rice" target="blank">Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</a></b></td>
   <td style="font-size=20px; text-align: center; color: black"><b><a style="color: black" href="https://en.wikipedia.org/wiki/Banana_leaf" target="blank">Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</a></b></td>
  </tr> 
        </table>
        </div>
            
  
        
        <div id="latestNewsSide">
        
        <div id="main_Image">
            <img src="https://cdn.pixabay.com/photo/2018/03/06/19/33/tree-3204332__340.jpg" width="70%" height="auto">
            <div id="latest">
            <table>
                <tr>
                    <td>
                    NEWS ABOUT EDUCATION
                    </td>
                
                </tr><tr>
                    <td>
                    NEWS ABOUT SCIENCE
                    </td>
                
                </tr><tr>
                    <td>
                    NEWS ABOUT POLITICIS
                    </td>
                
                </tr><tr>
                    <td>
                    NEWS ABOUT PROGRAMMING
                    </td>
                
                </tr><tr>
                    <td>
                    NEWS ABOUT TECHNOLOGY
                    </td>
                
                </tr>
                
            </table>
            
            </div>
            
        </div>
            
        
        
        
        
        
        </div>
        <div id="weatherWidget"><!-- weather widget start --><a target="_blank" href="http://www.booked.net/weather/islamabad-2124"><img src="https://w.bookcdn.com/weather/picture/3_2124_1_1_137AE9_430_ffffff_333333_08488D_1_ffffff_333333_0_6.png?scode=124&domid=w209&anc_id=48814"  alt="booked.net"/></a><!-- weather widget end --></div>
   
    <footer id="maps">
            
           <center>
           <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26549.220817044374!2d73.0536014260324!3d33.71793710859726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38dfbf9bc116caa3%3A0x337cd6075e732737!2sBlue+Area%2C+Islamabad%2C+Islamabad+Capital+Territory%2C+Pakistan!5e0!3m2!1sen!2s!4v1538065520853" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
            </center>
            
           <div class="bg-primary">&copy; bananaNewsNetwork 2018  </div>   
        </footer>

    
    </div>  
  
    </body>

</html>

OUTPUT:


As, you can see in the code shown above; the page is divided into different sections. The upper part contains the navigation bar, then  the middle part has some divisions and tables, and the bottom part consists of footer.
This is really easy to write code, when you divide your task into different sections, and you go through by them one at a time.
The same thing applies to our lives, there are certain complex situations, for students they are mostly regarding studies, jobs, family etc. but we can solve these complex situations by dividing it into different chunks.
The chunks can be resolved using the statements like: What is the problem, and What is the solution for that problem (whether the solution really exists or are we just wasting our time?).
So, in this way we can solve our life's as well as coding problems...(for some people coding is life... are you one of them? write about it in the comment section below, you can visit my previous blog post here, regarding this very question).
Always Keep learning!

Comments

Post a Comment

Popular posts from this blog

Relational Data Model

-
Image
In the previous blog post, we covered Data Modeling. We have seen that data modeling is really important before jumping into predictive modeling.  In this article, we will cover the Relational Data Model (RDM). Let's start from the very basics, relational means anything which is linked with some other thing. This link is called "Relationship". In RDM or RM there are major three types of relationship cardinalities (also called Multiplicities or Cardianalities): 1. One to one 2. One to many 3. Many to many We can understand these with the help of a few simple examples;  One to one: One department has one manager. One to many: One class has many students. Many to many: Many teachers can teach many students. Okay, so we have got an abstract overview of the term " Relational ", now the next thing is " Data ", data covers everything, anything... And finally, " Model " means something in the form of a template, design, a kind of blueprint.  To store...
Read more

An Interview with Pakistani Data Scientist : Dr. Zeeshan Ul Hassan Usmani

-
Image
Dr. Zeeshan-ul-Hassan Usmani, the name known for Data Science, Predictify me, Eisenhower fellowship  and most importantly motivation for many of the students. He is the Author of book like  (C++) ++سی/سی ,  Bit Coin Block Chain aur Crypto Currency بٹ کوائن، بلاک چین اور کرپٹو کرنسی  and many other, you can visit them here . Today "Data Science Tales - A Tech blog by Bia Chaudhry," asked him some of the questions, as an interview and we are very glad that he gave his precious time to answer them. It was kinda "Remote Interview"... not the traditional one.. The Interview Question:  How can you describe " Dr. Zeeshan ul Hassan Usmani " ? ANSWER: I am a shameless idealist. We are all idealists at some stage of our lives but then it fades away and we live as a mediocre. I don’t want it to fade away. I remind myself almost every day that I need to make my today better than my yesterday, and the challenge is keep getting harder J . We onl...
Read more

Data Engineering Tools

-
Image
   Data is a new oil. To channelize this data we need proper pipelines. These pipelines are mostly called ETL or data pipelines.  There are various tools out there to work out these Extract, Transform, and Load (ETL) operations.  Some of the scripting tools are:  - Python - SQL and NoSQL Apache provides a wide range of products that can be used as Data Engineering tools.  Some of the amazing apache DE services comprised of; - Hadoop - Spark - Kafka - Cassandra - Hive In addition, some cool DE tools are: - Tableau - Talend - MapReduce These DE tools provide a way to manage the data pipelines in a more effective, efficient, and better way.  Almost every Data-Oriented company in the corporate sector is highly dependent upon these technologies. They are leveraging many of the above-mentioned mechanisms for promising Data Services and Architecture. That's it for today. Hope you have enjoyed this article. If you want to know more about data or software relat...
Read more

Applications of Data Engineering

-
Image
In a previous blog post about data engineering, we went through several many concepts related to data engineering such as data modeling, and then we went through different types of databases, for example, relational databases and we also got a glimpse of relational as well as NoSQL databases. And in today's blog post we will be writing about data engineer applications. Which are basically the use cases of data engineering 1st let's see what data engineering applications mean; so basically when we have data and we have engineered it then there are several things that we can do with that data and these things that we can do with processed data are the use cases of the data engineering. For example: If we have filled our containers with the data then it's not of any good use if it is not clean and well-formed. If your data is well-formed and if there are no logical mistakes, missing values, and garbage then we can easily perform the use cases and applications of data enginee...
Read more

Five People to Follow on Social Media

-
Image
How many times you used to scroll Facebook, Instagram, Twitter, and other social media platforms? You always want to make your scrolling productive but after 2-3 hours you realize that you have wasted tons of your precious time.  so, if you want to make the best use of your social media time, then you can follow the following people, their posts are meant to give some worthy information. let's get started: Hisham Sarwar  Follow Hisham Sarwar for freelancing related information. Zeeshan Ul Hassan Usmani  Follow Zeeshan Ul Hassan Usmani for data science, artificial intelligence and, block-chain related stuff. Aman Dhattarwal  Follow Aman Dhattarwal for study and placement tips and tricks. Sandeep Maheshwari  Follow Sandeep Maheshwari for business strategies and motivational content. Qasim Ali Shah  Follow Qasim Ali Shah for study motivation as well as life lessons. Enjoy!
Read more

Data Science : The Fusion Reaction

-
Image
“ Data is the new oil? No: Data is the new soil. ”          ~ David McCandless These days plethora of new things are coming like: "Naya Pakistan" , "Naya prime-minister" , "Naya Semester" and the list goes on... but Let's just talk about this "new soil" science that is "Data Science " Data Science is made up of two words: Data and Science.  Data is a Latin word and a plural of  datum, meaning "thing" It is first used in English in 1640's (17th Century ).  Science came from Latin too, it is derived from a Latin word "scientia" meaning knowledge . Then the old French said : "Hey, I don't like "scientia" let's call it "escience" or just forget about "e" in the beginning and say it: "science" " . Then an English came and said : "I order you to take this word as "science" and no more debate on this !" ...
Read more

Elasticsearch and Redis : NoSql

-
Image
The colorful  bubble logo  is of Elasticsearch , while the redish logo is of Redis . First let's talk about Elastic search.. Elasticsearch is an open source search engine. Now, what is a search engine? Search engine is basically a website, for example: google.com, yahoo.com, bing and MSN. What we look as Google chrome, Safari or Internet Explorer is basically a Web browser. Let's say we type "www.facebook.com" in a web browser's address bar , then the web browser will take us directly to the website "facebook.com". As for search engine, if we type in its search bar , "www.facebook.com", then it will open up different links according to the search algorithm. So Elasticsearch is like a search engine. But it is different from traditional search engines. Like in most of the search engines, tables are used to store data, while elasticsearch is no schema based search engine. In place of tables, JSON documents are used in Elasticsearch. I...
Read more

Web Scraping : Urdu News

-
Image
Web scraping is an amazing method to collect data. Many data scientist use this method. I have scrape Urdu news . Urdu is difficult to scrape but thanks to Python and its libraries. Have a look at the code and outputs below:
Read more