A

TRAINING REPORT
on
SIX WEEKS SUMMER TRAINING
completed at

INFOWIZ TECHNOLOGIES PVT LTD , CHANDIGARH

Submitted in partial fulfilment of the requirement for the award of
degree of

Bachelor of Technology
in
Electronics and Computer Engineering
(Batch 2023-24)

by
KAPIL
Roll Number – 22105004

(Established Under Punjab Act No.35 of 1961)

ELECTRONICS AND COMPUTER SECTION

YADAVINDRA DEPARTMENT OF ENGINEERING
PUNJABI UNIVERSITY GURU KASHI CAMPUS
DAMDAMA SAHIB (TALWANDI SABO) -151302(PUNJAB)
 CANDIDATE DECLARATION
I hereby certify that the six months training work which is being presented in this report by kapil
in partial fulfilment of requirements for the award of degree of B.Tech. in Electronics and
Computer Engineering submitted in ECM Section, Yadavindra Department of Engineering,
Punjabi University Guru Kashi Campus, Talwandi Sabo is done by me from the period of 13
June 2023 to 28 july August 2023 under the supervision of Er. Gurwinder Kaur, Assistant
Professor, ECE Section.

Signature of the Student

Kapil
Roll No: 22105004
 ACKNOWLEDGEMENT

I am highly grateful to the Dr. Simpel Rani, Head of Yadavindra Department of Engineering,
Talwandi Sabo, for providing this opportunity to carry out the six months industrial training at
Excellence Technology Company.

The constant guidance and encouragement received from Er. Gurwinder Kaur, Section In charge
of ECE Section, YDoE, Talwandi Sabo has been of great help in carrying out the project work
and is acknowledged with reverential thanks.

I would like to express a deep sense of gratitude and thanks profusely to Ms. Sunita Thakur
Director/CEO of Company. Without the wise counsel and able guidance, it would have been
impossible to complete the report in this manner.

I express gratitude to all faculty members of ECE Section, YDoE, Talwandi Sabo for their
intellectual support, continuous encouragement and supervision throughout the training period.

Kapil
Name of the Student
INDEX
Company Overview

Infowiz is a Software and Web Development Company which provides technology solutions and
professional software for clients worldwide. Infowiz focus on quality, innovations and leverage
deep industry and functional expertise to help customers to transform their highest-
value business processes. Our in depth technical knowledge coupled with industry experience
and the unique methodology enables us to successfully deliver the services to the clients
worldwide. We are driven to attain our customer's highest satisfaction by providing business
experts with underlying delivery expertise in Enterprise Technology, Methodologies and
Implementations. Our core competencies are designed to effectively deliver results to our
customers.
Infowiz Training Center provides premier instructor led IT training through a carefully
balanced blend of hands on lab exercises and lecture. Training is conducted in the comfortable
classrooms at our training facility and client locations. Experienced instructors make training
productive and enjoyable. Customizable courses and computer lab offer additional options for
your training needs. We also provide project guidance for all academic students which help
them to build a successful portfolio and start their IT journey successfully.
1. Introduction
The purpose of this project was to design a news webpage that aggregates news articles directly
from Google and presents them in a user-friendly format. The project utilized HTML and CSS to
create a visually appealing and responsive web interface.
2. Project Goals
Create a dynamic webpage that fetches and displays news articles from Google. Implement a
clean and intuitive user interface for optimal user experience. Ensure the webpage is responsive
and compatible with various devices and screen sizes.
3. Technologies Used
HTML: Used for structuring the content of the webpage.
CSS: Applied for styling and layout design. JavaScript: Employed for interacting with Google
News API and handling dynamic content.
4. Design and Implementation
4.1 HTML Structure
The HTML structure was designed to provide a logical hierarchy for the content. Key elements
include:
Head section with metadata and link to the stylesheet. Body section containing the main content
area, navigation, and article listings.
 Headings
 Navigation Bar
 Weather Widget
 Sections
 Sidebar
 Article area
4.2 CSS Styling
CSS was applied to enhance the visual appeal and user experience. Key styling elements include:
Responsive layout to ensure adaptability across different devices. Custom styles for headers,
navigation, and article listings. Color schemes and typography choices for improved readability.
6. Future Enhancements
Implementing user authentication for personalized news preferences. Adding features such as
bookmarking and sharing options. Improving SEO by optimizing meta tags and page structure.
7. Conclusion
In conclusion, the project successfully achieved its goals of creating a dynamic and visually
appealing news webpage using HTML, CSS, and JavaScript. The implementation of Google
News API ensures that the content is always up-to-date, providing users with a reliable source of
news.

3. Technologies Used
HTML:
HTML is the standard markup language for creating web pages. It stands for Hypertext Markup
Language. It structures the content of a webpage using a system of elements represented by tags.
Elements can include headings, paragraphs, images, links, and more.

Structure of an HTML Document

<!DOCTYPE html>: Declaration that specifies the document type and version.
<html>: The root element that wraps all the content on the page.
<head>: Contains meta-information about the document, such as the title and links to external
resources.
<title>: Sets the title of the webpage displayed in the browser tab.
<body>: Contains the main content of the webpage, including text, images, links, and other
elements.

HTML Elements and Tags

HTML elements are the building blocks of a webpage. They are represented by tags such as <p>
for paragraphs, <h1> for headings, <a> for links, and <img> for images. Each tag has a specific
purpose and can include attributes to provide additional information.

CSS:
CSS is a stylesheet language used for describing the presentation of a document written in
HTML. It enhances the visual presentation by controlling the layout, colors, and fonts. CSS
allows developers to separate the structure and content of a webpage from its design.

CSS Selectors and Rules

CSS uses selectors to target HTML elements and apply styles to them. Selectors can be based on
element types, classes, IDs, or other attributes. CSS rules consist of a selector and a declaration
block that contains one or more property-value pairs defining the styles.

Box Model
The CSS box model describes the layout of elements on a webpage. Each element is treated as a
rectangular box with properties like margin, border, padding, and content. Understanding the box
model is crucial for creating well-structured and visually appealing layouts.

Responsive Web Design

Responsive web design ensures that a webpage looks good and functions well on various devices
and screen sizes. CSS media queries are used to apply different styles based on factors such as
screen width, height, and device orientation.

Typography
CSS is used to control the typography of a webpage, including font family, size, weight, style,
and spacing. Consistent and legible typography enhances the readability and aesthetics of the
content.

Colors and Backgrounds

CSS allows developers to specify colors for text, backgrounds, borders, and other elements.
Understanding color theory and using appropriate color schemes contribute to the overall visual
appeal of the webpage.

Transitions and Animations

CSS transitions and animations add interactivity and visual interest to a webpage. Transitions
allow smooth changes between different states, while animations create dynamic effects to
engage users.

Best Practices and Optimization

Developers should follow best practices to create clean, maintainable, and efficient code. This
includes using semantic HTML, organizing CSS stylesheets, optimizing images, and considering
accessibility principles to ensure a positive user experience for all visitors.

Headings:
In HTML (Hypertext Markup Language), headings are used to define the structure and hierarchy
of a document. Headings range from <h1> to <h6>, where <h1> is the most important and <h6>
is the least important. Here's an overview of the HTML headings:
<h1> to <h6>:
These tags represent headings with decreasing levels of importance.
<h1> is typically used for the main heading or title of the page, while <h2> to <h6> are used for
subheadings.
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

Semantic Meaning:
Headings provide semantic meaning to the content. They indicate the structure and organization
of the text, making it easier for both browsers and assistive technologies to interpret and present
the information.

Styling:
By default, browsers render headings with different font sizes and styles to visually convey their
hierarchical relationship. However, the appearance of headings can be customized using CSS
(Cascading Style Sheets) to match the design of the website.

SEO (Search Engine Optimization):

Search engines use headings to understand the content and structure of a web page. Properly
using heading tags can contribute to the SEO of a page by indicating the importance of different
sections.

Accessibility:
Headings play a crucial role in making web content accessible. Screen readers and other assistive
technologies use headings to help users navigate through the content. It's important to use
headings in a logical order and not skip levels.

Navigation Bar
A horizontal navigation bar, also commonly referred to as a "navbar" or "menu bar," is a user
interface element on a website that typically spans across the top of the webpage horizontally. It
is a crucial component for website navigation, allowing users to easily access different sections
or pages of the site. Here are the key details and considerations for a horizontal navigation bar:
HTML Structure:
The HTML structure of a horizontal navigation bar often involves an unordered list (<ul>) with
list items (<li>) for each navigation item. Each list item usually contains a hyperlink (<a>) to a
specific page or section of the website.
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

CSS Styling:
CSS (Cascading Style Sheets) is used to style and format the navigation bar. This includes setting
the background color, adjusting the font, specifying spacing between items, and defining the
layout. Flexbox or grid layout is commonly used to create a responsive and flexible design.
ul {
list-style-type: none;
margin: 0;
padding: 5px;
overflow: hidden;
background-color: #333;
}
 li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */

li a:hover {
background-color: #111;
}

Weather Widget
Weather widgets are tools or embeddable elements that display real-time or
forecasted weather information on websites. Developers often use these widgets to
enhance the user experience by providing visitors with current weather conditions
or forecasts without the need to navigate to a separate weather website.

Here are some common features you might find in weather widgets:
Customization: Weather widgets typically offer customization options, allowing
website owners to choose the location, units (e.g., Celsius or Fahrenheit), and the
type of information to be displayed (current conditions, hourly forecast, etc.).

Responsive Design: A good weather widget should be designed to work well on

different devices and screen sizes, ensuring a consistent and visually appealing
experience for users on both desktop and mobile devices.

Data Source: Weather widgets rely on weather data provided by meteorological

services or APIs. Popular sources include OpenWeatherMap, Weather.com, and
others

Sections
In HTML (Hypertext Markup Language), the <section> element is used to define
sections within a document. The purpose of the <section> element is to group
together content that is thematically related or represents a specific section of the
document. It helps in structuring the document in a semantically meaningful way.
Design and Implementation
HTML Structure:
<html>
<head>
<link rel="stylesheet" href="news.css">
</head>
<body>
</body>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
<div class="container" >
<div class="header">
<div class="times"> <h1 style="font-family:impact;">The Patiala
Times</h1></div>
<h3>29/11/23 wednesday</h3>
</div>

<div class="news">
<div class="article big">
<img
src="https://lh3.googleusercontent.com/M8JvfafrfqoRnprRGxJHbkWG16OG8JoeNtCrcYwBiV
Yw-cWxN5GgrReRVlzXja3FJqQUJMr0XWbhYuOMiJDKaPJNfr550S2QHAdCJ0Y8IrDI0kHLuYX7VDY-
5EtkPu_q9EC1-Ls-tflFgQ3wzRjowPhtfF-
VBgzzUup6cqxPtpUSxGHSkn25keHSPCO4QDmwkyGQ5anJu5fPJ7ANTD3sEaYB7kUxduap7qL5rcia67dJ
pSbsiF_UA1WuPNNnTc_Ab6zw_jDabrsPMF0ZHTse80freR2fatmKEZVs2lnbiDoBaHbzPbfH8kbDwUOx4
ytFwJyIk7ktBqItI_SRc3eUqQX1b96E0N4n15C5rS1lXBBGBTYqoZ98cqGRJR8PFsY1G5q7ldM0nZ0Ymb
8bf4AcVdK6gCJz4PfKM4wbv0QVEUDO9xkeqkZagTl9x2T-L2YKkQS8uujlTwiGUQSrhBYcy3k4GZm8-
9nCGM2JtttAcHGC9AioBayz4dTYwDYgKJVS4TPScrrS9TjpbeMZGew-
Jy_MoY1fxYkZTn_5zkf_KvqOpVevM6UO9w50kfmTwaMHgXJxsaxolemhKJQEUApn2CusIOnVyOyaC7f2A
iLsMwbh_0DUx1jZZDnGc_fYAudR__2KjjmRtqkCJE0NtvFedsc3ubc1mvlUCHAf1HY7=w883-h662-
no">
<div class="articlecontent">
<h2>Today Is “National Take Your Dog to Work Day”</h2>
<p>If you’re lucky enough to work from home, every day is “Take
Your Dog to Work Day.” But most people aren’t, so today is the one day a year
that many companies allow their employees to bring their pups with them. Some
workplaces are so fantastic that dogs are welcome all year round!While it’s
obviously not recommended for dogs to be brought to work sites that are dangerous
for them or where they’ll get in the way, such as an operating room or a factory
floor, offices can be the perfect environment for pets.</p>
</div>
</div>
<div class="article medium" >
<img src="https://lh3.googleusercontent.com/O-
GwgRucU9UajDdrLy0WwaPJESwd6R0GstCU87GA3buQITe3ul6zugKTgk5yTE0m3taTPzzFCd59mdK4Mfm
CGJKT1APGOUaItRwLzfrz8oNillKB_lOt7N1UXPti2Z9iAV9Hz5G-
PLE_JuOhQptTM_6RezVpmJ3A0PTkirKFFqH1BF4deDyWETv313LybeqpO3GSpg0TfNxaoPgOUuKsxuJpT
VkjJ3Z0KMp8btQZJ_R-oNA04ey-
UFqBc7BK7aJTU9cit96X4QvYmfrZ_1fXd0XXYXwSHcxMc3QQiTCUkMdSrtq9l89lY3v1yyl133-
yw6F0cq8kk_c5w8TssjHnlH21LWynWK_ZOs8Vtu7gmteLffINKJh7gnHDZosbepzKB1-
4axmkBtpfRPGVzbntWjF0kkycRmmGA8Xf8r-
sftHmwuBFqHEGTF_ao45QlTxl2iVSjA44ETB7ErD9GmZBdxawc-
NoZyXoEY3XcF5cpEEiaqHeROe5ZgNLqJWeCkhZVCCLfbKIb7iZ8Gvcge-
BYwNUIb17_7KxO94LD99pieI4vTaFDJAZfiklrELeUjEyGd6yUOimIpyLrye42pQZ4k9YXFXxA6mqbpIN
UF5JxjGb4QvwS73o4LlcfocTmQ5R863l9oaV70hGER1Q0dgFK0IOl9sINBHOWwNi7K5S=w300-h168-
no">
<div class="articlecontent">
<h2>The future of Amazon drone deliveries</h2>
<p>Amazon (AMZN, Tech30) has filed for a patent for beehive-like
towers that would serve as multi-level fulfillment centers for its delivery
drones to take off and land. The facilities would be built vertically to blend in
with high rises in urban areas. Amazon envisions each city would have one.
The patent application, filed in December 2015 and published on
Thursday by the U.S. Patent and Trademark Office, features several drawings of
these buildings, such as the beehive, a cylinder-shaped center and one that looks
like a UFO</p>
</div>
</div>
<div class="article medium">
 <img
src="https://www.hindustantimes.com/ht-img/img/2023/11/29/550x309/
akshay_1701236191452_1701236191845.jpg">
<div class="articlecontent">
<h2>Bollywood celebrities are celebrating the successful rescue
of 41 trapped workers from the Silkyara tunnel in Uttarakhand's Uttarkashi.</h2>
<p>Without a doubt, sushi is one of Japan's greatest
gastronomical gifts to the world. Almost poetic in its simplicity, good sushi
relies on two things: the freshness of the ingredients and the knife skills of
the chef.
Whether you like your raw fish draped over bite-sized balls of
vinegared rice, rolled up in toasted nori seaweed or pressed into fat rectangular
logs, delicious sushi can be found in every price range.The sushi at Sushisho
Masa in Roppongi is nothing short of perfection. At around ¥20,000 ($200) per
person, it's a splurge, but perfection doesn't come cheap.</p>
</div>
</div>
<div class="article big">
<img
src="https://lh3.googleusercontent.com/iwHpvSYQLXj93o40Y4awbxxpv5kumD4gWHQ0Xx5G4K
-
j8MpLKwDIuRuSSLbimXKjWrT3DPpTvqrrJfzJ3XBj1GVhpk7L6zXfobyr_VdJTw9I2Olth_6CikTjwvff
6TckBZbH855mxOIvH7cHwgExEYq975pmF9NReIawb7v351EO-
b7YE6K4lBmPoaJpvltbvAQv7QRpnz2BY4g67X1iAfv0Z-
kjpwae0nYbOYWq5HIx293AFzaUGVKRA4EgkaZVlfDHxg6vd1SDVhH_MqlU405PFQ9OBLcNr6kds-
AZDMWeHdXRZ_7a2zo3BKgMN1Oj26F0V4RFKwYuZmK4iZ034Q6otoqY0OgRsaYddc_wCfXU4rQ3nYOcJDd
THspxBmI8y_WsTSBrj1Po4VkMo7RBHlLOx5T-
_tcbu95PNCkaB4kF5MUAud14TZurJtZmkmXEV5eOBRo4hcCb5WXxsEXZ5QCWx2q2ZTLWyyuEPBQAOEpw9
vpwrc7CsXFugp8J4jkhzb21zN4jmB0egccuFGShxDY-
gMoxd1mHd5wACdWYWsFI8v3aFLuK0n4RaEfdzULpS2VgyAeMl9FptWPA5LtvZ6pdD_vjD52Zp4pT6Ze79
8rWqoCp8GBPetP3knAJEZ1LNsm4wmXYfvT-tdTedRCh7WW8HQXhkWM6Pr1_EGHt=w1100-h619-no">
<div class="articlecontent">
<h2>New York City's best rooftop bars</h2>
<p>There's something about being far above the hubbub of the Big
Apple's streets, especially in the summertime, when humidity levels soar and the
concrete feels like it's emanating heat waves.
"Being on a New York City rooftop gives you this special
pleasure of feeling part of the city, inside it, but at a distance," says Ray
Chung, director of design at The Johnson Studio, the firm behind the rooftop
lounge at The Wit Hotel in Chicago, among other projects."Walking down the
streets is one thing, but being able to let your guard down and see the city
reduced in size -- all the while still breathing the same air and still hearing
the buzz of the city -- it can be intoxicating," says Chung.</p>
</div>
</div>
 <div class="article small">
<img src="https://lh3.googleusercontent.com/FvRl5ZzboJ4Cid-
hYc0hj9uFmfQgSV85Ka9JCbh6hW8fnCqkYedJ65kL2VPXdSAT7gX2Zoa4zad-
VaSjJr2louMK2X1PHGpVmU5qRqbkfEHFn8xczjWQqHZ_sJMbbXisAQBhh1sAVp3KuD-
pRbwpNMJ1Ck2BsQK4fayGUU0BcqihB6GJF04rf_kDUs-2Gk7G4-
MCfw4GUvlCHtDdBkfR99NY6D6oGwQxlNggqY5ksTX4Nh_wHLjwhaufIMp6XlPFO847w9M_VQV4pVYFf4n
Z8YWGTHEiVRFgh3-WwTZNzoyv2btOjySyUC6lsArD-1q6H0m2lgG-
qZ5HJBfIG3XtTQs5VK9bKSDwQR1aaieaiqHDFrvYPXdGjLAdz_X3jKH9-hHXnNlN-
kDomloOGX6q6RpPgPZxa_eWHEBCiA89u6VSU2HzAvfAq20Gkx3DV_opG2ym3j-
Wtf1aCfiFE2wCXVKw3JmQZ0NP04Q2CFRH6Zc8-pu2owkzs0TSvjSnhGivXwhLVpMEszt3-
I5qmA7xxKmSvpv_84Y_ZaThmZOgbM2mvegm_B1ows0uKwSoXBh8fkqPMZm6t17rbdvtFXAJyhk95KAd4d
2MGmoU-WaAkKWwJwmJO3lT1I_aFcGRSXiQzXZdJU97pS8-B4Myo3VVPBVru-cNShvLcN1FJeZm=w307-
h173-no">
<div class="articlecontent">
<h2>Meet Gaggan Anand, the 'world's best' Indian chef</h2>
<p>Gaggan was sitting in a Singapore ballroom attending the
Asia's 50 Best Restaurant Awards, waiting in agony to find out whether his
eponymous Bangkok-based restaurant could hold onto the number three spot it
grabbed last year "As they got to five, then four, and my name hadn't been
called, I thought 'that means I'm three again ... at least we matched our
success, at least we're on the right track," he says."When they were about to
call number two and I still hadn't been called up, I thought 'If I'm number one,
I'll try not to cry.'</p>
</div>
</div>
<div class="article small">
<img src="https://lh3.googleusercontent.com/ixrNTtsZ_M-
3Q038yOT8Q0HKagba6dkZPzgirdN9mX8WZ8BoJSjjrxtd6XYlLVyOh8wVFUN3kW7WjN327zfjghhp-
XvTO_5H5zmDQ70ZEp2hlQF_rQrIJqviVOJsxVeXi52pHH2Shp4HKO25e9xtnutE_bYju675bmS3HO9UVO
AGYGxqScqt-_HCOGmZkDUvpNdFAI40C9f-
FJkhinmMparsOojkZVA5otPzhCd4L8OqGTgtkFC0uO1ISJKbleSzimuLT4Cqlpa4SXTWlC2zKxOplR2Uk
p9CZOcc7Vig6KsJ0mxn37BJpHV4e7KqyZpTdOqeTyNHJpo8sr-EB1MMRVlPNudxSfIX-
yaDTMGyjPBCiEW44KrCpCj32NRi3z04CzWdtkOduMz1Ia5m3r1uR3C_DtfPz75Jplzz7o42FATU8mjlpI
olw9FVkbPVP_2RHu1q3rsU5TGkdNWR7IGmq24vAbWbo2puqQCH2adpX7LbBpLcnSyrzYSMz0zXGHyo3ol
xnUr4yTaX3g5rd4Me8Fgdr4Z9f3z3sA10vQPPSwjaI_ekZ-JwRskkz6vzVYf0WLW5kUPmjgtS-
eNZGWN2VZ6Z4TpEuEiOVuHMh5zUoLYYxAQKUNdGXoH0_nWIZUngfJ2EKOuYi8k38cHpr3XhF3XjYbmMW6
m9bAJDcK47=w1100-h619-no">
<div class="articlecontent">
<h2>The best things to do and see in Newport</h2>
<p> Many of those cliches about postcard-pretty coastal New
England towns got their start in the same place: Newport, Rhode Island.The town
is best known for being a summer getaway for America's aristocracy during the
Gilded Age, with wealthy families like the Vanderbilts, the Dukes and Astors all
owning summer homes there (they say "cottage," we say "ginormous mansion") and
throwing glamorous parties.Although more of the luxurious estates are museums
than homes these days, Newport hasn't lost its seaside charm -- especially in the
summer. Here's our guide to the best things to do, eat and explore both indoors
and out.</p>
</div>
</div>
<div class="article small">
<img
src="https://lh3.googleusercontent.com/RB7kM8phJgRqrrmT9gxyKiqMJ1zrmq4wxeTUfectRa
BfT497cMwncRpxWYzVHWrMgP6m3disLn_ICDLoxL1Y3O0yOrczyu26eLtZhCU9fOh_LFV-
QqOLFDth3yL0VfNKi_APMEJqBZxk9q2ud9VE-
vrgHs0bTv1UNAlw_aJo7TCHr6dOT7toE02L1V_pXzSTobTwuXD5Lrzc55wamCw1L76lZXqZmltoh6319W
IZPf4OMfxVJ5xU55PuCWgBNzs_gcIdnsmziOjFLQ2K7dYFSct74LkR4rpTINX1wM31GEW8FDc6JZiTxs9
2KTWFd5aXpKgbrR0PLmvpc6UzMtOtTZ6ilAG_9OmDpE3c9TV6Jn0PKW_4JLcauuhz0brh8QeqTstdUTsr
BRvkZaI5NknzfdxaSaKpKjkregB9e0b99RJUvpfqFAvELW92XE3TQFBkqdOQkMkQFhhz5wWqhm3ZCh62f
dmy60ZHiDFW9A8FK3LGu-s2YirbL4PIMq9K-KX2XKA6D8QK6X4oCQHhpBNI2B44pYFLtY44qr_iJAF-
5KWp_znkeb_BwSPb-
xDpDs6j8liNId_6DDBy02g0WenGzCC51lZ9LJVw8LOyMtU6Ja3LV1oHQgZFVyaLCXD1Zd80kQ05L9qOmX
8s3A0fGdk1vALhEnhDuS9WbxDn-eHh=w273-h184-no">
<div class="articlecontent">
<h2>Sixteen Dogs Find Forever Homes After Being Rescued</h2>
<p>Just minutes before the Humane Society Shelter in Bangor,
Maine closed for the day on Tuesday, they only had one lone puppy left who had
yet to be adopted. Not to worry however, that puppy too found a great forever
home, marking the end of an amazing campaign to save some dogs on death row from
a high-kill shelter in the southern United States.Ada Webb was the lucky person
to adopt that final dog. Webb had been in line there for quite some time waiting
to adopt, hoping to be able to surprise her nine-year-old son with a new, four-
legged furry family member. </p>
</div>
</div>
<div class="article big">
<img
src="https://lh3.googleusercontent.com/s4drGMtU6AaHz43tf95K1bni6Qs8THokpd-
6ddI1r_xzVHbo9OGnAsvAitgewnT2hbVp22-
TNP7cvqgGbaPbnRdGeXmTs8A_Fknt1aHtZzQr0xlSw_X74l02bwuiHQF2g_WFMGdjQkQVs1nWi-
oZkbsGLtqNNv10WNgYE1ND5cLrxOtA0liuLEi2q1HUJ0Yesl3YMwlL1-
WdUOxI9GepODLOqbBPMoeltg05G1_x0OQauGjMVl2K4WTs5n3SJmqv2FI3Itnt_55J3m6Wz3sL0EtszXA
hE55o7wwaP1cUiyYf9UTpb3JHcHZmIw7Nvcxn31vBbu7oxN872xZWBT4brXfHuR5yaUM7T3GwciSqdEAd
dGgGk1aIRBtUxZJtRLBETW4wOathkCpkteaezohUDdYoVISJb1JechGv_P6GSLhSAGPxLa3rWVAqbM3lf
q_CUQgWq3PwyTu3s0C3fzbv3E6B83AtjKvUrAcFgnfO0wq7Otu2TvsfA6CxVlWFcXyWIgHlu9qRDGDZ9_
65Px5mlGohG62cDz0Gdxuxt-Sv6BRPK-
o1IS3trmoKpqZm0Zxpco8Lz20HfqBi4Pz3O3GM8JQD82C1IodAnVIx2eTfpLtnAD7nMchey0EYgr2H1F1
sKAFGzlK_DcOLp-IUB3Uz7lf2Xzf5I2PFJTY8QjXk=w299-h168-no">
<div class="articlecontent">
<h2>What Facebook's new mission can and can't fix</h2>
 <p>With nearly 2 billion people around the world checking in
monthly, it makes sense that Facebook is dealing with some very sticky issues.
The social network is facing increasing pressure to address them head on.
He's shifting its focus from connecting individuals to building
communities, namely by getting people to join more Facebook groups.The change is
summed up in the company's new mission statement: "Give people the power to build
community and bring the world closer together."But how much of the company's
problems can really be fixed by the new direction?</p>
</div>
</div>

</div>
<div class="sidebar">

<div class="pins">
<div id="ww_6574b3525cfe2" v='1.3' loc='id'
a='{"t":"horizontal","lang":"en","sl_lpl":1,"ids":
[],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"image","cl_font":
"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":
"#FFC107","cl_thund":"#FF5722"}'>More forecasts: <a
href="https://oneweather.org/fr/paris/20_jours/" id="ww_6574b3525cfe2_u"
target="_blank">Prévisions météo 20 jours</a></div><script async
src="https://app2.weatherwidget.org/js/?id=ww_6574b3525cfe2"></script>
</div>
<div class="pins">
<h2>Cricket</h2>
<img
src="https://lh3.googleusercontent.com/cTkjpO2E82PyC9p0ZFbSFQc9-
9D4tu43igodpT9pOZBrlmfjgHOTs-
I9RLcSgGs4yisEfuoKGjkjfEG5QS582wmnVzmXd1ppzkwMciriQcHiZ-
HkYsRQqx1FSfMCINp1z1LyiLKpzO0iMNYqJ_ZPJ0ysfJuYYT4rJmqKHyq4hVzdw7AaJ8Kgi_h1et7wXMO
Q4nKPy6-7h0z6Mhu_Qf9Y0z0YUNYyX62gB-bMFtAkTuEbthEwDsgJJN4pLClqECj_yrpX-
pB7ScCfI8Efr-SgCLb-
syDk0BV2l9VG6d5Gvcl4zEKnn0BGkXFDQSyJeKvy6F8ugGY2O9HlGFgIXUBBPEf6sfjGzKg-
dooJrMjwRNgiTpPRN2ZiAsdEtLGoHrukQcqjQ9Mx-po-BHgJUxr0iCHeT-
T1LHSCBhSfpyfZa5SfHd8kwnHqlXcy9fA24AMcBIpW2LMFDfuU8_yYeB9sfd2un7f9tur1NCjTZSr4M25
PUja3UVmpIE6JfvzGaH4xVL2F5O1L7vvpU1Ih8Y8pPTJE6txLyv6a_MxfXGUTFgbCcmw5JV5a_AZhfeQ5
XBIT52r-RTjddTmgpz99xfIc-
uxeDUgFLmlp8IsbU_W2WnPpKbReQO6xRsdQBrawxDC2q4uBBaRo3wTwMhH8xWsbappVUcEiow=w214-
h120-no">
<p>WIvIND:Rain plays spoilsport after Shikhar Dhawan's 87, India
placed comfortably</p>
</div>
<div class="pins">
<h2>Education</h2>
 <img
src="https://lh3.googleusercontent.com/ZTiWbnDkwZow7WJ5fLMJNqFF6RCNh-
3mtM_xusD4LbmlvfD7fxr1iG29DCYkgXTDeHf-
ztekkuvXCPUKFzuLq5QL8NE4hUDOBE5ZMbh2YzhTBhbljXkaT1EEAbYgmoNRXZh0mSgOMLoL7iiJuCr41
l-S7KYZ5or2WvIWTPL2QvRwHzFkvXDOclY1BPm-3GdOR4CNavASA4EUSuQcSn1IhA-
SMPWwd1T51yOntWSGUM7fNsYuIaGsc1qhr-CrD2sKWZcsv7V5XYxBZMHrzUDvaG86Teh88pAem-
aTsh6olHgGGmh2XE-
jB9rrTSxbm6Ny2Lw4YITxBLsxnUUg0uyijzHoVihbEuTRXJ1oZzi3EpryGnHXkQ0k7V1b-
VNiHmh7JSoCWf1DLdgrbHgc8DYaqAqylF6iQsFVRJ6Ch167MoBecELbUy36Te9bVLvL_EivYe9uR5SALi
xWLXN6jmbrZ5FjKb_na5hRlVjqB-FBYx2GbVf5X67Inc-
trdh2EgRWU_27uX4Xb7ixAYns7txCjQWEg0rzhwG5iDHGAwk-
Jrm3Et4XS0mlsrYA6uQMCfPnZ5671RKi1mDBkVH6V5jPAnVp41gNpjogRpRKyD3r14a9XC8vjh4dC9AWz
zBibMj3Z7snoA1WLF01wxe7cf1ELe2z9Ba698vqxEhDTUM4=w640-h360-no">
<p>NEET results declared, five transgenders qualify</p>
</div>
<div class="pins">
<h2>Science & Tech</h2>
<img
src="https://lh3.googleusercontent.com/3uMfZs43NrKsN2Mb3ZWAYEkuPNgdvM21ADM673Cwko
vbi1b57MyTxVFB_Px7I6mX9u3OhDWdFC3EihI9yvxsRLwiGndLbubfGCLlWd__7adfliYM7oefsoZK2CQ
pMF9ZQUZWcDN8aD7imitrg38D17snHKbPDylhsX6OXodw8jQ8DHApbgHCq72JZavnZiB3JVssGkaLjpOQ
nS2RvKwJInRmy_3Rkk-
o9uGtHX7SV6rJETTCPqiq0YMSohN0qSv_hAo_h2Afyd8IBK8U1an8Rl7WAyK3X4fSPXDgXBYzf2uZAmQP
m1aSvzAK-2Vi9WVdqN2Yr3u6PaWCkYJ-
k6xNwCqQaF4tynAhK6VS3jI_MvMyx9pFp7d4FfA05xUDLXGGymyJTLex8-
ZSpIZxSfSplC5CU7nmE8kOSF-Rf3-nOAcr-
qPE2ONdiOJBH0eKZBihwhtlcfgX58_1w0qKG71V_3aeB_ivnHZiKtGI4Be-XWZ7mWXCo_ycPbxrG-
W6dkNdllYBfzjPlUMJ9cDZPw-
4TUFIo_DanvxqJFM9EkLwx9sY6SQH6KnfllsWWyVVY_UPyUEilh8Pha7l8QN2njQ_Zyzjlxg3AOrYRuLX
KwrMSm_wJIfTZWRR7MaZY4Mkg_Eek2OtPkguPura8oYW6uilGX-5sAlqq1hWMTXRO0kS=w640-h360-
no">
<p>Smart eye in the sky': How ISRO's Cartosat-2 will boost
India's military surveillance capabilities</p>
</div>
<div class="pins">
<h2>Bollywood</h2>
<img
src="https://lh3.googleusercontent.com/kQKDxFzUjWA_pxUYIBepqD_fTnFgD8HAHVIcN5RZpd
g3gE8rXFRqoHQNm5KBdc1HqNpU-nW5AnngrkXzbIS_mUMcx7Gr70f7V5xqxBJeLWbDnsoiQX6d-
1wiXHaWLrGSfSLxWjCbVoZNvSRuhqwfNUvuXeaTjBbgmIMQxiKDlD8FSMBkhLh0-
7L54fM6yUOf9VHVt3lG76l_4jRpPreT4YYMKkzZXgpvuiyyOq4NC4KhBY-
8AI8oaUC2a808uOO5p3LnqYu4awf0002mAiT0IGmUwLETyCNBHQ8-Z5-q3lwjar1SiXd6Wb0bV-
S_IHSD_XXBdkr8kqParBjTo5vjztwb589v05PVQ1tFk18JX5ShJLpYT1PIk1xXOZHdhAnU6quJdiDQ23F
fSQn__RKsnxBLlqlwOzA1sszRgq4kr7XsaMPAXJkIdxZHSZ0NXzFoyhInjowQ0NfEkMDH1uWFG8UooDJJ
xfs-K79qn3g-
neDWvNR_hoWWYMXB6Po6Ohu4AsyjGhjPvhBOaJHmA_qfsdyK7lhoKi2WqQAuI4vmsD74OI1KN8NxL8uml
QoMnsEhhFPWwyZtKi-
wsQ5RwRGoyAA2GWVxvWhyUgfq1SY1W32L9djDW0Pe99eBayNKzQBkvpg_V176PUk60qp_dB_ijhdbT7-
0q2FJ56ID2xXV=w640-h360-no">
<p>Box Offcie: Salman Khan's 'Tubelight' opens lower than
expectations on Day 1!</p>

</div>

</div>

<div class="footer">
<div class="bottomlinks">
<h4>Politics</h4>
<ul>
<li><a href="#">Congress</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">The nine</a></li>
<li><a href="#">Trumpmerica</a></li>
<li><a href="#">State</a></li>
</ul>
</div>
<div class="bottomlinks">
<h4>Entertainment</h4>
<ul>
<li><a href="#">Star</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Screen</a></li>
<li><a href="#">Culture</a></li>
</ul>
</div>
<div class="bottomlinks">
<h4>Technology</h4>
<ul>
<li><a href="#">Startup</a></li>
<li><a href="#">Culture</a></li>
<li><a href="#">Future</a></li>
<li><a href="#">Gadget</a></li>
<li><a href="#">Bussiness</a></li>
</ul>
</div>
</div>
</div>
 </html>

CSS Structure:

body{
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.5;
font-family: sans-serif;
background-color: #e7e7e7;
}
ul {
list-style-type: none;
margin: 0;
padding: 5px;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
 /* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}

.times
{
font-size: 40px;
}
h3{
background-color: #333;
color: aliceblue;
text-align: center;
}
a{
text-decoration: none;
color: white;
}
.bottomlinks ul{
list-style: none;
padding: 0;
}

.header{

.news img,.sidebar img{

box-sizing: border-box;
width: 100%;
}
.articlecontent{
padding: 1rem;
}
.article{
margin-bottom: 1rem;
margin-left: 1rem;
background-color:white;
}
.pins{
padding: 1rem;
margin-bottom: 1rem;
background-color:white;
}
.footer{
background-color:rgba(0, 0, 0, 0.96);
color: white;
}
.footer .bottomlinks{
text-align: left;
}
.header{
background-color: white;
margin-bottom: 1rem;
}
img{
max-width: 100% /* to make all images responsive */
}

/************************** flex box ***************************/

.container{
display: flex;
}

.header{
box-sizing: border-box; /*width including margins paddings */
width:100%;
text-align: center;
}
.footer{
box-sizing: border-box;
width:100%; /* so that header n footer are 100 % wide */
}

.footer{
display: flex;
flex-direction: row;
justify-content: space-around; /* so that automatically equal spaces is
arranged between the links*/
}

.news{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

/****************** media queries *********************/

/******************** mobiles *****************************/
@media screen and (max-width: 520px){
.container{
flex-direction: column;
}

}
/****************************** tablets **************************/
@media screen and (min-width: 521px) and (max-width: 830px){
.container{
flex-wrap: wrap;
}
.news{
box-sizing: border-box;
flex:3; /* news occupies 2/3 of width n sidebar 1/3 of
width */
margin-right: 1rem;
}
.sidebar{
box-sizing: border-box;
flex:1;
}
}
/********************************** Desktops **************************/

@media screen and (min-width: 831px){

.container{
flex-wrap: wrap;
}
.news{
box-sizing: border-box;
flex:3; /* news occupies 2/3 of width n sidebar 1/3 of
width */
margin-right: 1rem;
}
.sidebar{
box-sizing: border-box;
flex:1;

}
.big{
width: 100%
 }
.medium{
flex: 2; /* so that 2 medium can lie side to side */
}
.small{
flex: 1; /* so that three small lie side to side */
}

}
 PROJECT
SCREENSHOTS
6. Future Enhancements
Implementing user authentication for personalized news preferences. Adding
features such as bookmarking and sharing options. Improving SEO by optimizing
meta tags and page structure.

7. Conclusion
In conclusion, the project successfully achieved its goals of creating a dynamic and
visually appealing news webpage using HTML, CSS, and JavaScript. The
implementation of Google News API ensures that the content is always up-to-date,
providing users with a reliable source of news.