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

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 "Mainly: The Software Engineering Blog" 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 only need to co
Read more

Web Technologies e.g. SASS, LESS and Doctrine

-
Image
Web technologies, as the name indicates are the technology used over the world wide web. These technologies help the users to communicate with each other. You may have learned in your social sciences subject that Language is the main source of communication. Similarly when computers communicate, they also use certain specific language or languages for this.  As we all know HTML is the hypertext markup language. It is the core of web technologies. Then comes JavaScript, React, Angular, Ruby, CSS and so on.  Everyone likes beauty. CSS adds beauty to your page. But you need to write a lot of code for minute things in the style sheet. So to make the task of web developers convenient, Henry Thorton  with  Natalie Weizenbaum   designed and developed SASS (Syntactically Awesome Style Sheets) respectively. SASS is the style sheet language written in PHP. It is an extension to CSS and .css file can be converted to .sccs file. SASS is backward compatible meaning, it is compatible with al
Read more

E-Commerce : Platforms

-
Image
Before digging into E-commerce platforms, let's first understand what an E-commerce actually is? E-Commerce... According to the Tokenization Rule , E-commerce is the combination of "E" and "Commerce".  The word Commerce means trade or buying and selling of items, goods, services, hardwares and, softwares... etc. And " E " stands for "Electronic", electronic means something like electricity, like signals, like something in the form of electrons (at lower level).  Image Source So, the word " E-COMMERCE " means: " A type of trade, that is done using electronic devices (computer, mobile or ATM machines etc). "   And to achieve electronic commerce, what's the most important thing? think over it!  Yeah that's correct! your own Internet is the most important thing to do E-commerce.  Major areas of E-commerce are: On-line shopping or retailing On-line bidding or auction On-line soft
Read more

1-Machine Learning : Start...

-
Image
John went to the cafeteria 10 times at 1:00 P.M. on 10 Fridays, each time the cafeteria was closed at that particular time. John decided not to go to cafe at 1:00 P.M. on Friday because the cafe will be closed.  But wait! How did John know that the cafe will  also be closed on next Friday at 1:00 P.M.??? Yes, you are absolutely right.  "John Learned from his Experience that the Task of going to the cafeteria at 1:00 P.M. on Fridays resulted in waste of time, since the cafe was closed on each Friday, so it will Perform the same on the next Friday." In the above scenario, John learned something so we can call it " John Learning ". Similarly, if we replace John with some sort of Machine, that can learn from the Experience or from the History about how the tasks were performed in the past given certain situation. Such that the Machine will perform the same if the same task happen again in near future. Then this will be called as Machine Learning. To mak
Read more

Linear Algebra : Non-Linear By the Way!

-
Image
Linear Algebra is one of the most important courses in software engineering. But, sometimes you feel like its not so linear, rather non-linear. So, if your linear algebra is dangling then don't worry because I have something for you. MIT offers open courses, these courses are taught by the most prominent and amazing Teachers. MIT made a series of videos covering Linear Algebra. Respected Professor Gilbert Strang taught this course. You can find it here . Now, you certainly need some book regarding this very subject, my honorable Professor gave some notes to my class, these are below: you can download them: You can also get the following Linear Algebra book: So enjoy, with the  Solution Manual  too :)
Read more

Marketing

-
Image
I am of the opinion that everyone of us must acquire marketing skill.  Why Should We? This is because, as the world population is increasing, there is a demand for more. If we have certain talent, skill, or if we are capable of doing some task. Then, we can see there are others, who can do the same task. But, our opinion is that : We are the best in our work. So, how can we tell this to the person who needs our services? We need to devise a marketing policy, so that we and the other person gets benefit from it. Robert T. Kiyosaki describes in his book : " Rich Dad Poor Dad " that,  McDonald's is a brand that sells ham burgers. Their ham burgers might not be the best, but they might believe them to be. Like wisely we can also make burgers, and there is a huge possibility that our burgers are the most delicious ones, but we are unable to sell it like McDonald's. Why? The answer is their marketing policy! ( ya, along with other aspects too ) Moreover,
Read more

A Survey of the Final Year University Students

-
Image
I don't know what should be the title of this blog post, but let's call it " A survey of the final year university students ". Pretty long title, huh? Okay, let me tell you about this survey... The story behind this thing: Well, one day I thought about writing a post on Facebook to ask people about their sentiments and reviews regarding the final year of university life, then another thought knocked my head to write a full blog post on this topic. Then I disseminated a google form for this purpose. The google form was saying: "Hello, final semester people! I thought to collect reviews of 2020 graduates specifically of NUST and other IT universities. I am planning to add these to my blog post. Please take a few seconds to fill this form, thank you." So that was a brief story behind this whole thing, Now let's have a look at the most awaited questions and the corresponding responses...  Question#1:  Do you feel like a better hu
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 related concepts, let me know in th
Read more

How to take notes in Freshman Year ?

-
Image
Yes, you have to take notes in the university class!  Before talking about the notetaking strategy, we will understand the importance of taking notes. Importance Of Taking Notes No doubt there are a few students who can produce good results without even taking notes in the class. But their number is least. Most of us need to make good notes in the class especially when we are in university. Notes are important because: They help us to keep track of what we have studied in the whole semester. Notes help us to prepare for the exams, in a very short time. We can refer to our notes for short quizzes in the eleventh hour. In addition to reading and listening, writing notes increases the ability to memorize the important concepts. It helps you to realize that you have done something in the class. Now that we have understood Why to take notes? Let's dig into the notetaking strategy  Notes taking Strategies One of my friends Ramlah Aamir Aziz used to take note
Read more

LINUX Kernel

-
Image
Back in the 18th century UNIX was developed. UNIX is said to be a mother of all the operating systems. LINUX is also based on UNIX. The best things about LINUX are: It is open source. It is totally FREE. One can modify it for customized usage. One can create ones own OS (Operating System) on Linux bases. It is more secure than Windows. If you have Linux, then you don't need to have any anti-virus. Linux has many applications, like windows. It's been improved in many years. It is the most favorite OS of developers.  and so on... to be continued....
Read more