top of page

A bare-minimum mini website project with only HTML & CSS

HTML stands for Hypertext Markup Language. It's a way to create and structure content on a web page, like text, images, videos, and links. Think of it like the structure of a building, Just like how a building has different floors and rooms.


CSS stands for Cascading Style Sheets. It's used to add colors, fonts, and other visual styles to the HTML structure to look more appealing and interesting. Think of it like the paint and decorations on the building.


Together, HTML and CSS are the building blocks for creating websites. HTML sets up the structure and content of the website, and CSS makes it look good and attractive. They make the webpage a complete and functional entity.


The Web-Page


Webpage for a conference details
Webpage for conference details by Raj K

The Code


/* Below is the HTML Code */


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="canti.css"> <title>Cantilever</title> </head> <body> <div> <h1>iThought is a conference for engineers who thinks like <span>artists</span></h1> <h2>20-21st December 2025, Gokarna</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi saepe dignissimos aut alias non architecto tempora repudiandae deserunt magni tenetur harum, porro ea accusamus vitae officia doloribus recusandae, blanditiis possimus. Incidunt adipisci ea ratione quam ducimus vitae! Error corrupti, quas voluptatum veniam accusantium obcaecati exercitationem harum suscipit officiis consequuntur natus inventore vero dignissimos temporibus nam eveniet corporis molestiae, fugit architecto. Voluptas hic illum iusto, quaerat corporis commodi reiciendis eum modi aut consequatur est nemo repellat incidunt natus aspernatur sapiente doloribus ea omnis eaque. Dicta, totam cupiditate eos modi aspernatur id?</p> </div> </body> </html>


/* Below is the CSS Code */


body{ font-family: 'Space Mono', monospace; background-color: #f8c6ce; } h1{ font-size: 50px; line-height: 1.25; font-weight: 400; } h2{ font-size: 30px; } p{ font-size: 14px; } div{ width: 60%; margin-left: 100px; margin-top: 200px; } span{ text-shadow: 0 -6.25px #0c2ffb, 0 -12.5px #2cfcfd, 0 6.25px #fb203b, 0 12.5px #fefc4b; }


The End.

Comments


bottom of page