Create News Website Using HTML and CSS (Source Code)
Published: 2023-05-13 06:37:53

Hello Coder! Welcome to Codewithrandom Blog. In this article, we create News Website Using Html And Css With Source Code. We Create Fox News Template Design Using Html And Css With Code.

Fox News Template is one of the **[News Websites](https://www.codewithrandom.com/2023/02/11/html-code-for-news-website/)** built using HTML and CSS. Fox is a brand used for design templates and illustrators and moreover in popular design software like adobe XD, Photoshop, and more.

This Template is based on a News article with a news heading, a detailed summary of the incident, the time of duration, and who posted... basically, this project helps to determine what the news website on the internet is like.

So make sure to work on it by your standards. the source code for the project is given below.

## News Website Html Code:
```
<header class="header responsive-wrapper">
    <div class="header-left">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="233.445"
            height="52.805"
            viewBox="0 0 233.445 52.805"
        >
            <defs>
                <clipPath id="clip-fox-news-logo">
                    <rect width="233.445" height="52.805" />
                </clipPath>
            </defs>
            <g id="fox-news-logo" clip-path="url(#clip-fox-news-logo)">
                <g
                    id="Group_1"
                    data-name="Group 1"
                    transform="translate(-2179.585 601.093)"
                >
                    <path
                        id="Path_5"
                        data-name="Path 5"
                        d="M4.185-29.205H22.59v4.59H9.5v7.7h11.97v4.545H9.5V0H4.185Zm27.675,6.75a12.117,12.117,0,0,1,4.14.7,8.656,8.656,0,0,1,3.33,2.138q3.105,3.15,3.105,8.73,0,5.49-3.105,8.64A9.921,9.921,0,0,1,31.86.63,10.222,10.222,0,0,1,24.3-2.25Q21.2-5.355,21.2-10.89q0-5.625,3.105-8.73A10.217,10.217,0,0,1,31.86-22.455Zm5.265,11.52a8.372,8.372,0,0,0-1.35-5.2,4.5,4.5,0,0,0-3.757-1.733,5.013,5.013,0,0,0-3.937,1.733,7.654,7.654,0,0,0-1.53,5.2,8.27,8.27,0,0,0,1.372,5.2A4.534,4.534,0,0,0,31.68-4.005,4.989,4.989,0,0,0,35.6-5.738,7.654,7.654,0,0,0,37.125-10.935ZM64.62,0H58.14l-5.4-7.02L47.7,0H41.175l8.5-10.89-8.5-11.025H47.7l5.355,7.02,5.085-7.02h6.48L56.16-10.89ZM78.48-29.205l12.87,20.7v-20.7h5.31V0h-5.4L77.985-21.42V0h-5.31V-29.205Zm37.71,9.945a9.966,9.966,0,0,1,1.688,3.33,12.23,12.23,0,0,1,.563,3.465,20.182,20.182,0,0,1-.18,2.835H104.13a7.606,7.606,0,0,0,1.305,4.32,4.268,4.268,0,0,0,3.69,1.665q3.285,0,3.915-2.88H118.4A7.849,7.849,0,0,1,115.38-1.35,9.93,9.93,0,0,1,109.125.63a9.489,9.489,0,0,1-7.245-3.15,11.96,11.96,0,0,1-3.015-8.415,11.822,11.822,0,0,1,3.015-8.46,9.529,9.529,0,0,1,7.245-3.06A8.486,8.486,0,0,1,116.19-19.26Zm-7.02,1.035a4.385,4.385,0,0,0-3.51,1.463,6.578,6.578,0,0,0-1.485,3.758h9.315q0-3.555-2.25-4.77A4.4,4.4,0,0,0,109.17-18.225Zm13.455-3.645,4.41,15.615,4.185-14.4h4.815L140.22-6.21l4.455-15.66h5.31L142.785,0h-5.22l-4.05-13.1L129.555,0H124.29l-7.245-21.87Zm31.05,15.21q.09,3.105,4.545,3.1a4.934,4.934,0,0,0,2.813-.743,2.1,2.1,0,0,0,1.1-1.733,1.847,1.847,0,0,0-.675-1.53,6.639,6.639,0,0,0-2.115-.99l-4.77-1.71q-5.31-1.845-5.31-6.03a5.172,5.172,0,0,1,2.5-4.477,11.8,11.8,0,0,1,6.7-1.687,10.044,10.044,0,0,1,6.48,1.845,6,6,0,0,1,2.362,4.635h-4.995a2.191,2.191,0,0,0-1.035-1.71,4.856,4.856,0,0,0-2.7-.63,4.6,4.6,0,0,0-2.723.7,1.974,1.974,0,0,0-.967,1.6q0,1.575,2.655,2.34l5.175,1.935a10.264,10.264,0,0,1,3.938,2.182A4.576,4.576,0,0,1,168.03-6.12a5.8,5.8,0,0,1-2.565,4.68,11.1,11.1,0,0,1-7.02,2.07,11.753,11.753,0,0,1-7.02-1.913,6.353,6.353,0,0,1-2.7-5.377Z"
                        transform="translate(2245 -561)"
                    />
                    <path
                        id="Path_1"
                        data-name="Path 1"
                        d="M2207.653-46.775c-.029,5.98,9.656-7.959,11.9-8.762a45.226,45.226,0,0,1,9.4-2.275,19.066,19.066,0,0,1,2.663-.116c4.366.13-3.9-18.154-3.9-18.154l-8.853.386s-6.824,3.109-7.306,9.208,1.265,4.691-.822,10.951c-1.45,4.351-2.432,3.276-3.084,5.217A25.988,25.988,0,0,0,2207.653-46.775Z"
                        transform="translate(-0.475 -503)"
                    />
                    <path
                        id="Path_2"
                        data-name="Path 2"
                        d="M2232.822-46.775c.029,5.98-9.656-7.959-11.9-8.762a45.226,45.226,0,0,0-9.4-2.275,19.066,19.066,0,0,0-2.663-.116c-4.366.13,3.9-18.154,3.9-18.154l8.853.386s6.824,3.109,7.306,9.208-1.265,4.691.822,10.951c1.45,4.351,2.432,3.276,3.084,5.217A25.988,25.988,0,0,1,2232.822-46.775Z"
                        transform="translate(-28 -503)"
                    />
                    <circle
                        id="Ellipse_1"
                        data-name="Ellipse 1"
                        cx="1"
                        cy="1"
                        r="1"
                        transform="translate(2205 -559)"
                    />
                    <path
                        id="Path_3"
                        data-name="Path 3"
                        d="M2216.209-91.186c.2,1.456,9.045,4.389,11.518,8.66s3.761-15.174,2.68-16.427S2216.012-92.642,2216.209-91.186Z"
                        transform="translate(0 -502)"
                    />
                    <path
                        id="Path_4"
                        data-name="Path 4"
                        d="M2230.791-91.186c-.2,1.456-9.045,4.389-11.518,8.66s-3.761-15.174-2.68-16.427S2230.988-92.642,2230.791-91.186Z"
                        transform="translate(-34 -502)"
                    />
                </g>
            </g>
        </svg>
    </div>
    <div class="header-middle">
        <a href="#" class="header-link">Call Us (348) 981 872</a>
        <span>/</span> <a href="#" class="header-link">hello@foxnews.com</a>
    </div>
    <div class="header-right">
        <nav class="header-nav">
            <a href="#" class="header-link">Login</a>
            <a href="#" class="header-link header-link--button"
                >Get 1 year for $50 USD</a
            >
        </nav>
        <button class="header-menu-button">Menu</button>
    </div>
</header>
<main class="responsive-wrapper">
    <div class="page-title"><h1>Latest Updates</h1></div>
    <div class="magazine-layout">
        <div class="magazine-column">
            <article class="article">
                <h2 class="article-title article-title--large">
                    <a href="#" class="article-link"
                        >The First Signs of
                        <mark class="mark mark--primary">Alcoholic Liver</mark>
                        Damage Are Not in the Liver</a
                    >
                </h2>
                <div class="article-excerpt">
                    <p>
                        The combination of my father's death and my personal
                        back ground lit a fire in me to know more
                    </p>
                    <p>He was admitted to the hospital on June 24, 2016.</p>
                </div>
                <div class="article-author">
                    <div class="article-author-img">
                        <img
                            src="https://assets.codepen.io/285131/author-3.png"
                        />
                    </div>
                    <div class="article-author-info">
                        <dl>
                            <dt>David Sherof</dt>
                            <dd>Reporter</dd>
                        </dl>
                    </div>
                </div>
            </article>
            <article class="article">
                <h2 class="article-title article-title--medium">
                    <a href="#" class="article-link"
                        >The Founder's Guide to Actually Understanding Users
                        Nowadays</a
                    >
                </h2>
                <div class="article-creditation">
                    <p>
                        By Johnathan O'Connell, Andrew Van Dam, Aaron Gregg and
                        Alyssa Fowers
                    </p>
                </div>
            </article>
        </div>
        <div class="magazine-column">
            <article class="article">
                <figure class="article-img">
                    <img
                        src="https://images.unsplash.com/photo-1484807352052-23338990c6c6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                    />
                </figure>
                <h2 class="article-title article-title--medium">
                    <a href="#" class="article-link"
                        >How 7 Lines of Code Turned Into a $36 Billion Empire</a
                    >
                </h2>
                <div class="article-excerpt">
                    <p>
                        Yeah, it's safe to say these guys have a great sense of
                        humor, which isn't really suprising for us considering
                        their seemingly absurd solution to online payments.
                        Instead of chasing 1000-hour programming contracts to
                        build clunky payments solutions for each individual
                        client, the Collison...
                    </p>
                </div>
                <div class="article-author">
                    <div class="article-author-img">
                        <img
                            src="https://assets.codepen.io/285131/author-2.png"
                        />
                    </div>
                    <div class="article-author-info">
                        <dl>
                            <dt>James Robert</dt>
                            <dd>Editor</dd>
                        </dl>
                    </div>
                </div>
            </article>
        </div>
        <div class="magazine-column">
            <article class="article">
                <figure class="article-img">
                    <img
                        src="https://images.unsplash.com/photo-1512521743077-a42eeaaa963c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80"
                    />
                </figure>
                <h2 class="article-title article-title--small">
                    <a href="#" class="article-link"
                        >To Become
                        <mark class="mark mark--secondary">Happier</mark>, Ask
                        Yourself These Two Questions Every Night</a
                    >
                </h2>
                <div class="article-creditation">
                    <p>By Jonathan O'Connell</p>
                </div>
            </article>
            <article class="article">
                <figure class="article-img">
                    <img
                        src="https://images.unsplash.com/photo-1569234817121-a2552baf4fd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                    />
                </figure>
                <h2 class="article-title article-title--small">
                    <a href="#" class="article-link"
                        >10 Things I Stole From People Smarter Than Me</a
                    >
                </h2>
                <div class="article-creditation">
                    <p>By Jonathan O'Connell</p>
                </div>
            </article>
        </div>
        <div class="magazine-column">
            <article class="article">
                <h2 class="article-title article-title--medium">
                    <a href="#" class="article-link"
                        >Traveller Visiting Ice Cave With Amazing Eye-Catching
                        Scenes</a
                    >
                </h2>
                <div class="article-excerpt">
                    <p>
                        Slack has become indispensible for many businesses
                        operation remotely during the pandemic. Here's what the
                        acquisition could mean for users...
                    </p>
                </div>
                <div class="article-author">
                    <div class="article-author-img">
                        <img
                            src="https://assets.codepen.io/285131/author-2.png"
                        />
                    </div>
                    <div class="article-author-info">
                        <dl>
                            <dt>James Robert</dt>
                            <dd>Editor</dd>
                        </dl>
                    </div>
                </div>
            </article>
            <article class="article">
                <small class="article-category">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="28"
                        height="22"
                        viewBox="0 0 28 22"
                    >
                        <defs>
                            <clipPath id="clip-headphones">
                                <rect width="28" height="22" />
                            </clipPath>
                        </defs>
                        <g id="headphones" clip-path="url(#clip-headphones)">
                            <g
                                id="Group_2"
                                data-name="Group 2"
                                transform="translate(-3680 -609)"
                            >
                                <path
                                    id="Subtraction_1"
                                    data-name="Subtraction 1"
                                    d="M5,12H5A5.274,5.274,0,0,1,0,6.5,5.274,5.274,0,0,1,5,1V12Z"
                                    transform="translate(3680 619)"
                                />
                                <rect
                                    id="Rectangle_18"
                                    data-name="Rectangle 18"
                                    width="2"
                                    height="11"
                                    transform="translate(3686 620)"
                                />
                                <path
                                    id="Subtraction_5"
                                    data-name="Subtraction 5"
                                    d="M1.243,12H.045C.015,11.67,0,11.334,0,11A11,11,0,0,1,18.778,3.222,10.925,10.925,0,0,1,22,11c0,.331-.015.667-.045,1h-1.2a14.108,14.108,0,0,0-2.685-6.241A8.982,8.982,0,0,0,11,2,8.982,8.982,0,0,0,3.929,5.759,14.109,14.109,0,0,0,1.243,12Z"
                                    transform="translate(3683 609)"
                                />
                                <path
                                    id="Subtraction_6"
                                    data-name="Subtraction 6"
                                    d="M5,0H5A5.274,5.274,0,0,0,0,5.5,5.274,5.274,0,0,0,5,11V0Z"
                                    transform="translate(3708 631) rotate(180)"
                                />
                                <rect
                                    id="Rectangle_23"
                                    data-name="Rectangle 23"
                                    width="2"
                                    height="11"
                                    transform="translate(3700 620)"
                                />
                                <path
                                    id="Path_8"
                                    data-name="Path 8"
                                    d="M.156-.031,2.125-1.687,2,2H0Z"
                                    transform="translate(3683 619)"
                                />
                                <path
                                    id="Path_9"
                                    data-name="Path 9"
                                    d="M1.969-.031,0-1.687.125,2h2Z"
                                    transform="translate(3702.875 619)"
                                />
                            </g>
                        </g>
                    </svg>
                    <span>Post Reports / Podcast</span>
                </small>
                <h2 class="article-title article-title--medium">
                    <a href="#" class="article-link"
                        >Things to Do After 6 P.M Will Enrich
                        <mark class="mark mark--tertiary">Your Life</mark></a
                    >
                </h2>
                <div class="article-podcast-player">
                    <button class="podcast-play-button">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="192"
                            height="192"
                            fill="#000000"
                            viewBox="0 0 256 256"
                        >
                            <rect width="256" height="256" fill="none"></rect>
                            <path
                                d="M232.3125,114.34375,88.34375,26.35937A15.99781,15.99781,0,0,0,64,40.00781V215.99219a16.00521,16.00521,0,0,0,24.34375,13.64843L232.3125,141.65625a16.00727,16.00727,0,0,0,0-27.3125Z"
                            ></path>
                        </svg>
                    </button>
                    <div class="podcast-progression"></div>
                    <span class="podcast-time">23:45</span>
                </div>
                <div class="article-podcast-info">
                    Apple Podcasts, Google Podcasts, Stitcher
                </div>
                <div class="article-author">
                    <div class="article-author-img">
                        <img
                            src="https://assets.codepen.io/285131/author-3.png"
                        />
                    </div>
                    <div class="article-author-info">
                        <dl>
                            <dt>David Sherof</dt>
                            <dd>Reporter</dd>
                        </dl>
                    </div>
                </div>
            </article>
        </div>
    </div>
</main>

```
The HTML code for the news template is given... Here we are adding a menu bar with respective links for various navigation and those navigation links have relatable content to the news article.

This is not a complete code for the news template we need to design for user interaction, but we are making sure that without a single piece of HTML code, we can't create a website.

In this code there is various content related to news is added in order to explain what the news blog will look like.

Mostly they are news with various fields combined and created a blog.

So Make sure to understand the code and its elements of where it is used. one thing to keep in mind is that the html code for a news blog must have at least 10 to 15 news with various links so it will give a real-time experience of how the news article in internet relays.

The best example of a news blog and article is the economic times, the New York Times, etc... which gives simple content with a clear explanation of what and how.

So I think you understand how the html code is used... Now it's time to jump to the design part which is CSS, the code snippet for the CSS part is Given.

## News Website CSS Code:
```
@import
url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Fraunces:ital,wght@0,500;0,600;0,700;1,600&display=swap');
*, *:after, *:before { box-sizing: border-box; } body { font-family: "DM Sans",
sans-serif; font-size: 1rem; line-height: 1.5; background-color: #f8f3eb; color:
#484847; padding-bottom: 5rem; } img { display: block; max-width: 100%; }
.responsive-wrapper { width: 95%; max-width: 1900px; margin-left: auto;
margin-right: auto; } .header { padding-right: 1.5rem; padding-left: 1.5rem;
padding-top: 3rem; padding-bottom: 4rem; display: flex; justify-content:
space-between; align-items: center; } .header-left { svg { max-height: 40px;
width: auto; } } .header-middle { display: none; @media (min-width: 1200px) {
display: block; } } .header-right { display: flex; align-items: center; }
.header-nav { display: none; @media (min-width: 1200px) { display: block; } }
.header-link { color: #000; text-decoration: none; margin-left: .75rem;
margin-right: .75rem; display: none; font-weight: 500; display: inline-block;
&--button { background-color: #000; color: #fff; padding: .5rem 1.25rem; }
@media (min-width: 1200px) { } } .header-menu-button { margin-left: .75rem;
border: 0; padding: 0; background-color: transparent; font: inherit; position:
relative; padding-right: 30px; font-weight: 500; &:after, &:before { content:
""; display: block; position: absolute; width: 20px; height: 2px;
background-color: currentcolor; right: 0; top: 8px; } &:after { top: 16px;
width: 12px; right: 8px; } } .page-title { padding-left: 1.5rem; padding-right:
1.5rem; display: flex; justify-content: center; h1 { font-size: 1.75rem;
font-weight: 700; color: #000; text-align: center; position: relative; &:after {
content: ""; display: block; position: absolute; width: 100%; bottom: -3px;
height: 2px; background-color: currentcolor; } } } .magazine-layout {
margin-top: 3rem; display: grid; grid-template-columns: repeat(5, 1fr);
grid-row-gap: 2rem; } .magazine-column { padding: 0 1.5rem; grid-column: span 5;
@media (min-width: 1200px) { grid-column: span 1; border-right: 1px solid #CCC;
&:last-child { border-right: none; } } &:nth-child(2) { @media (min-width:
1200px) { grid-column: span 2; } } } .article { & + .article { padding-top:
2rem; margin-top: 2rem; border-top: 1px solid #ccc; } } .article-img { & + * {
margin-top: 1rem; } } .article-link { color: inherit; text-decoration: none; }
.article-title { font-family: "Fraunces", serif; font-weight: 900; line-height:
1.25; color: #000; &--large { font-size: 2rem; & + * { margin-top: 1.5rem; } }
&--medium { font-size: 1.5rem; & + * { margin-top: 0.75rem; } } &--small {
font-size: 1.25rem; & + * { margin-top: 0.75rem; } } } .article-link { color:
inherit; } .mark { background-color: #fabea1; &--secondary { background-color:
#c2dddf; } &--tertiary { background-color: #F8E177; } } .article-excerpt,
.article-creditation { font-size: 1.125rem; line-height: 1.4; p + p {
margin-top: 1.5rem; } } .article-author { display: flex; flex-wrap: wrap;
margin-top: 1.5rem; } .article-author-img { width: 3rem; height: 3rem;
border-radius: 12px; background-color: #323232; overflow: hidden;
background-blend-mode: multiply; img { } & + .article-author-info { margin-left:
0.5rem; } } .article-author-info { line-height: 1.375; dl { margin-top: 0.25em;
} dt { font-weight: 600; } dd { font-size: 0.875em; } } .article-category {
font-weight: 500; margin-bottom: 1rem; display: block; svg { max-width: 1.5rem;
margin-right: .5rem; vertical-align: middle; } } .article-podcast-player {
display: flex; align-items: center; margin-bottom: 1rem; margin-top: 1.25rem; }
.podcast-play-button { width: 2.25rem; height: 2.25rem; border-radius: 12px;
border: 0; background-color: #000; margin-right: .5rem; svg { max-width: 1rem;
max-height: 1rem; fill: #FFF; } } .podcast-progression { flex: 1; height: 8px;
border-radius: 99em; background-color: #D9D4CD; background-image:
linear-gradient(to right, #F99970 30%, #D9D4CD 30%, #D9D4CD 100%) }
.podcast-time { font-weight: 500; font-size: 1.125rem; margin-left: .5rem; }
:focus { outline: 0; }
  
```

Here comes the main part, the design (CSS). In This we are styling the contents with an underline format to show the clear vision of news headings and also included some bullet points and serial numbers to make the content understood in crystal clear format. Sound's Interesting?..,

Yeah! Also, We have used a black and white combo for this news template as it might seem a classic one and makes the reader for satisfaction.

popular websites like the medium itself use the black and white combo for their posts and stories so it would be a great option.

Moreover, for a news article, the CSS code will be shorter, has because the contents should be more rather than designed, so there is less usage of CSS code.

But we should not leave empty because the responsive design must be included Right ..? for supporting various devices. so the CSS part here lies on shorter designs and longer media queries.. it is nothing but a rule to encourage on every device.

So we finally came to an end which is the output of this project after finishing creating with HTML and CSS. But make sure to include CSS where it is necessary like headings , footer, etc.

Hope I think you got an idea of what a **[News Website](https://www.codewithrandom.com/2023/02/11/html-code-for-news-website/)** template is like. and we create a total output for his project after HTML and CSS.

Now you can use it for your own purpose but make sure to do adjustments on your own in order to learn and understand the project.

Good luck and best of lucks for your future. Also if you need a complete code to access your project then you can make use of the link given below.

REFER CODE - Havardob

WRITTEN BY - RAGUNATHAN S