Task 5 - Make CNN.com Layout

Last Updated On: Mar. 9, 2024

Title: Create CNN Layout using CSS/HTML (do not use Bootstrap)

Rename your file to <section name>--<student reg. number as per std id card>--<student-name>.html and upload the file. Define CSS as internal and for images, use images URLs.

Create cnn.com layout, overall look & feel should be same e.g. paddings, borders, colors, margins, font family, hover effects, font-size, section headings etc. of different widgets. You don't need to use all content and images to make as-is website, select a few news text and images as sample and feel free to use them in different sections, repeatedly. You must write all CSS and HTML by your own, do not copy CSS styles from CNN website.

Take care of following points:

1. Navigation bar and logo placement.
2. Make all horizontal sections e.g. 3 columns of different widths, 3 columns of same width, 4 columns section (same and different width, both), "In Case You Missed It" section, footers (6 columns footer and last footer).
3. Padding and margin of headings of different sections, links, images and contents should look as on cnn.com
4. Display text above the images using positioning, tranparency properties.
5. Your assignment should be responsive for 500px breakpoint. Implement CSS using mobile-first approach.

Website layout used below is very old. You can use the current layout. Take below instructions as guidelines to know what you care about writing CSS.

Though it should be obvious what are you supposed to do but in last semester, different students worked at different level of detail and missed important things. Here, I have explicitly described what I require from your side. Below I have briefly written what you should focus on or care about in each section of the page. I have also placed the images, to make it clear. 

In navigation, the background color is used at 100% width, the content's width is less and centered aligned. The logo overflows the container. The whole website is centered aligned. It remains in center, even if you zoom-in/out.

First column is large, other two columns' size is equal. Use images as used above and use same heading for column 2 and 3 with same color and background colors etc. New links are light color with padding top and bottom. You see "CNN Special" text is written at top of image, please take are of this, and writ as-is.

In this section, first and last columns are equal width. centered column is comparatively large. The text displayed on image has some tranparency applied, as we can see the image behind. and this text is placed at top of image using positioning. In first and last columsn, there two types of imags, one with 100% width (with respect to container) and the small images placed at left section of news. Observe the top-right arrow in first column heading, as add this.

Again 3 columns of equal size with one image at top and the a list of news.

Section headings must be same. You see, now there are 4 columns. First 3 columns follows same width and each cell contains an image/video and text. You may use video or text, no issue. But last column layout is different, there are two sections of last column, top contains one full width image and bottom section has 4 images placed at left side of news text

Very clear from view. 2 sections. Follow same style and background color, as above. 

There are two footer sections. Above is section 1, it has 6 columnn of equal size. The section contains different links. And there are 2 links' rows. Your work must be same, including the color scheme.

This is footer section 2. Do not skip it. Very clean what you are supposed to do here.

If you click on icon on top right, an overlay menu of 100% width opens. It contains two rows of links with section headings. Whole container is transparent. You may not display on-click but when user mouse-over that menu-icon, the overlay links' section shall open. When user mouse-out from the section, it shall disappear.

Your selected media (images, video, etc) must be decent, avoid using vulgar images/news/videos. You may discuss with your fellows about how the templates are created and learn stuff you missed in lectures e.g. positionsing, divs, floats, creating navs, flexbox, media queries, etc. but your code should NOT match with your fellows, not even news (you may select news from any news website to be unique). If I found similarity in code, both/all involved would get -15 marks.

If you have any question, feel free to ask me in lab.