News article model using css,html

HTML
<!DOCTYPE html> <html> <head> </head> <body> <div class="bg-container"> <h1> 5G in India: Launch soon as Cabinet approves spectrum auction </h1> <img src="https://assets.shortpedia.com/uploads/2022/06/15/1655289041.jpg?tr=w-720,ar-3-2,cm-pad_resize,bg-F3F3F3" class="image" /> <div class="bg-background"> <p class="paragraph"> The Union Cabinet, led by Prime Minister Narendra Modi, has finally authorized the Department of Telecommunications' (DoT) 5G spectrum auction, which means that India will soon have 5G services. The spectrum will now be allocated to bidders to deliver 5G services to the general public and businesses. It's believed the new service would have ten times the speed and capacity of present 4G services. </p> <button class="button">Read more</button> </div> </div> </body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap'); .bg-container { background-color: #ffffff; font-family: "Bree Serif"; text-align: center; } .image { background-size: cover; height: 50vh; width: 500px; } .bg-background { text-align: center; background-size: cover; } .paragraph { font-size: 25px; font-family: "Play Display"; padding: 5px; text-align: center; } .button { border-radius: 7px; color: blue; width: 100px; }
JAVASCRIPT
Expand for more options Login