Hello friends, in today’s blog we are going to create a news website using HTML and CSS.
Step 01 :- Create a file in VS code and named it index.html
HTML Code –
<link rel="stylesheet" href="style.css">
<header class="header responsive-wrapper">
<div class="header-left">
<h1 id="dognews">Dog NEWS</h1>
</div>
<div class="header-middle">
<a href="#" class="header-link">Call Us (448) 381 751</a>
<span>/</span>
<a href="#" class="header-link">[email protected]</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 $7 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">Lorem ipsum dolor sit. <mark class="mark mark--primary">Lorem, ipsum.</mark> Lorem ipsum dolor sit amet consectetur.</a>
</h2>
<div class="article-excerpt">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt harum eaque autem iusto cupiditate ea voluptatibus itaque provident ullam, perspiciatis a at quod nam qui aspernatur tenetur accusamus magni nobis nihil! Eum tempore consectetur minima. Incidunt itaque eius, expedita dignissimos distinctio laudantium quidem voluptates unde perspiciatis commodi, maxime nemo magni id animi quis molestiae sint!</p>
<p>He was admitted to the hospital on June 24, 2016.
</div>
<div class="article-author">
<div class="article-author-img">
<img src="https://cdn.pixabay.com/photo/2016/11/21/12/42/beard-1845166_1280.jpg" />
</div>
<div class="article-author-info">
<dl>
<dt>Ravinder S</dt>
<dd>Reporter</dd>
</dl>
</div>
</div>
</article>
<article class="article">
<h2 class="article-title article-title--medium">
<a href="#" class="article-link">Lorem ipsum dolor sit amet consectetur adipisicing elit. In, velit.</a>
</h2>
<div class="article-creditation">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</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">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi earum optio amet?</a>
</h2>
<div class="article-excerpt">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam aspernatur libero delectus impedit, nulla voluptatibus, necessitatibus eius amet quam nemo voluptatem minima, laborum tempora cum!</p>
</div>
<div class="article-author">
<div class="article-author-img">
<img src="https://cdn.pixabay.com/photo/2021/06/15/16/11/man-6339003_960_720.jpg" />
</div>
<div class="article-author-info">
<dl>
<dt>Sahil J</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">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam ullam natus blanditiis nam sequi!</a>
</h2>
<div class="article-excerpt">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni et architecto corporis non ratione, quaerat doloremque praesentium maxime odit nostrum consectetur placeat cum, optio, sit quasi.</p>
</div>
<div class="article-author">
<div class="article-author-img">
<img src="https://cdn.pixabay.com/photo/2021/06/15/16/11/man-6339003_960_720.jpg" />
</div>
<div class="article-author-info">
<dl>
<dt>Sahil J</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 5 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://cdn.pixabay.com/photo/2016/11/21/12/42/beard-1845166_1280.jpg" />
</div>
<div class="article-author-info">
<dl>
<dt>Ravinder S</dt>
<dd>Reporter</dd>
</dl>
</div>
</div>
</article>
</div>
</div>
</main>
Step 02 :- Create another file and named it style.css
CSS Code –
@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Lacquer&display=swap');
@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: #f3f3f3;
color: #484847;
padding-bottom: 5rem;
}
img {
display: block;
max-width: 100%;
}
.responsive-wrapper {
width: 95%;
max-width: 1900px;
margin-left: auto;
margin-right: auto;
}
#dognews{
color: rgb(0, 0, 0);
font-family: "Bungee Spice", sans-serif;
font-weight: 400;
font-style: normal;
}
.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) {
.header-middle {
display: block;
}
}
.header-right {
display: flex;
align-items: center;
}
.header-nav {
display: none;
}
@media (min-width: 1200px) {
.header-nav {
display: block;
}
}
.header-link {
color: #000;
text-decoration: none;
margin-left: 0.75rem;
margin-right: 0.75rem;
display: none;
font-weight: 500;
display: inline-block;
}
.header-link--button {
background-color: #000;
color: #fff;
padding: 0.5rem 1.25rem;
}
.header-menu-button {
margin-left: 0.75rem;
border: 0;
padding: 0;
background-color: transparent;
font: inherit;
position: relative;
padding-right: 30px;
font-weight: 500;
}
.header-menu-button:after, .header-menu-button:before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 2px;
background-color: currentcolor;
right: 0;
top: 8px;
}
.header-menu-button:after {
top: 16px;
width: 12px;
right: 8px;
}
.page-title {
padding-left: 1.5rem;
padding-right: 1.5rem;
display: flex;
justify-content: center;
}
.page-title h1 {
font-size: 1.75rem;
font-weight: 700;
color: #000;
text-align: center;
position: relative;
}
.page-title h1: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) {
.magazine-column {
grid-column: span 1;
border-right: 1px solid #CCC;
}
.magazine-column:last-child {
border-right: none;
}
}
@media (min-width: 1200px) {
.magazine-column:nth-child(2) {
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;
}
.article-title--large {
font-size: 2rem;
}
.article-title--large + * {
margin-top: 1.5rem;
}
.article-title--medium {
font-size: 1.5rem;
}
.article-title--medium + * {
margin-top: 0.75rem;
}
.article-title--small {
font-size: 1.25rem;
}
.article-title--small + * {
margin-top: 0.75rem;
}
.article-link {
color: inherit;
}
.mark {
background-color: #fabea1;
}
.mark--secondary {
background-color: #c2dddf;
}
.mark--tertiary {
background-color: #F8E177;
}
.article-excerpt,
.article-creditation {
font-size: 1.125rem;
line-height: 1.4;
}
.article-excerpt p + p,
.article-creditation 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;
}
.article-author-img + .article-author-info {
margin-left: 0.5rem;
}
.article-author-info {
line-height: 1.375;
}
.article-author-info dl {
margin-top: 0.25em;
}
.article-author-info dt {
font-weight: 600;
}
.article-author-info dd {
font-size: 0.875em;
}
.article-category {
font-weight: 500;
margin-bottom: 1rem;
display: block;
}
.article-category svg {
max-width: 1.5rem;
margin-right: 0.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: 0.5rem;
}
.podcast-play-button 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: 0.5rem;
}
:focus {
outline: 0;
}
OutPut :-
Heya i’m for the first time here. I found this board and I
in finding It truly helpful & it helped me out a
lot. I am hoping to present something back and help others like you aided me.