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.


  1. A. O. A sir,
    What do you mean by "do not copy style classes from CNN"?
    waiting for your response.

    1. WS. When you inspect an element, browser shows all CSS properties being applied on that element. You may see that CSS but do not use them as-is. Write your own selectors, classes, and properties.

  2. A.o.a! Sir is there any restriction as far as the content/image etc sizing properties are concerned?There can be a little bit variation in them but they would look similar to those which have been used in the original CNN website,and the properties can vary to a certain extent right ?

    1. WS. The images/sizes may slightly vary but it must generate overall look & feel same and must be responsive for at least 2 screen sizes e.g. small and large.

  3. Sir kindly tell me as u said about unique content i didn't get it kindly explain it. And question 2 is do we have to link the pages too ? Or just have to create a front end design only ?

    1. Unique content is better, but don't bother much about this. You can copy any content from any news website. Even you can repeat same news on multiple sections or even all. What matter is the links style, different widgets look, margin, parddings and overall layout.

      No need to link the pages with original news sources, only front-end design.

  4. sir there have been new minor changes to cnn.com , do we still have to follow these instructions ? and in one of the comments you said to make the website responsive but have prohibited the use of bootstrap , so are we allowed to use flex-box or css grid ?? and also do we have to follow these instructions as it is or can we use our own interpretations as well ? Thank You

    1. I am more concerned about layout. If there are some changes in new design, you can follow news one or follow what I have described above. No issue. Yes, do not use bootstrap. Make it responsive for only one break point, e.g. 700px. for great than 700px. It should follow the above described layout i.e. number of columns etc in each row. for below 700px, section should take 100% of screen. You can do this easily using media queries as we discussed in class.

  5. AOA sir,
    what is meant by following highlighted section:

    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."""""

    Kindly eleborate please.

    1. If possible, also make the menu that appears when user click on the menu-icon shown at at top right of the page. You may display it when user click or when user mouseover the menu-icon. You can use any tiny image for icon, using same image is not mandatory. (This menu is not mandatory in assignment, but a plus)

    2. sir can we use javascript for this?


Post a Comment