Project in Html and CSS - Creating a educational website

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PSNA college of engineering and technology</title> <style> * { padding: 0px; margin: 0px; box-sizing: border-box; } header { /* border : 2px solid blue ;*/ height: 5vh; background-color: black; } .title ul { display: flex; justify-content: space-between; align-items: center; list-style-type: none; color: white; padding-top: 10px; padding-left: 90px; padding-right: 5px; font-family: sans-serif; font-size: 14px; font-style: bold; } main { /*border : 3px solid red;*/ height: 100vh; display: grid; grid-template-rows: 1fr 1fr 1fr 1fr; background-image: url('psnahome.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } .left { height: 100vh; width: 100%; display: grid; grid-template-columns: 0.5fr 2fr; position: relative; } select { background-color: black; border: none; color: white; outline: none; padding: 2px 2px; } .dropdown { display: flex; background-color: rgba(4, 4, 4, 0.6); } .dropdown img { height: 20%; width: 280px; display: block; padding-top: 30px; } .content { font-family: sans-serif; width: 160px; margin-top: 350px; font-size: 20px; color: white; position: absolute; left: 70px; bottom: 150px; } .button { /*border : 1px solid blue;*/ display: flex; justify-content: space-between; align-items: first baseline; gap: 25px; flex-wrap: nowrap; white-space: nowrap; padding-top: 35px; position: relative; width: 80%; text-decoration-color: white; padding-left: 10px; font-weight: bold; } .left button { background-color: transparent; border: none; color: white; } .apply { border: 1px solid rgb(234, 186, 28); background-color: rgb(217, 165, 11); padding: 10px 10px; position: absolute; right: 10px; top: 60px; } .apply span { color: black; } .opt { height: 100vh; background-color: rgb(14, 93, 133); padding-left: 150px; padding-top: 150px; font-family: Verdana, Geneva, Tahoma, sans-serif; color: white; } .opt h1 { font-size: 55px; } .opt p { margin-left: 700px; font-weight: bold; } .container { margin-top: 40px; width: 1000px; display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 40px; } .context { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; align-items: center; } .stat-box:first-child { border-left: 2px solid white; } .stat-box{ border-right: 2px solid white; } .opt h3 { font-size: 30px; font-weight: bold; padding: 10px; } .opt span { font-size: 14px; font-weight: bold; } .asset { border-bottom: 10px solid rgb(14, 93, 133); background-image: url('asset.jpg'); height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; display: grid; grid-template-columns: 3fr .6fr; } .asset .left { /*border : 1px solid yellow;*/ display: grid; grid-template-columns: 3fr 1fr 1fr; gap: 70px; align-items: start; width: 80%; margin: auto; padding-top: 100px; padding-bottom: 50px;; box-sizing: border-box; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .asset .exp { /*border: 1px solid white;*/ text-align: end; width : 300px; padding-right: 40px; margin-left: auto; } .exp { border-right: 1px solid white; margin-left: 70px; } .exp p { margin-top: 30px; padding-left: 20px; } .exp button { border : 1px solid white; margin-top: 40px; padding: 20px 20px; font-weight: bold; align-self: center; } .experience span { display: block; margin-top: 30px; } .asset .right { background-color: rgba(4, 4, 4, 0.6); } .asset .right img { display: flex; flex-direction: column; width : 160px; margin-left: 40px; margin-top: 40px;; } .research { height: 100vh; display: grid; background-color: rgb(196, 192, 192); grid-template-columns: 2fr 1.5fr 2fr; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .research .left { display: flex; flex-direction: column; align-items: flex-end; text-align: end; margin-top: 40px; margin-right: 80px; font-size: 25px; width : 100%; max-width: 400px; } .research .left h1 { color: rgb(214, 167, 12); } .research .left span { color: black; font-size: 50px; } .research p { /*border : 2px solid red;*/ color:rgb(98, 113, 21) ; margin-top: 40px; width : 210px; } .research .middle { border-left: 1px solid white; display: flex; flex-direction: column; list-style-type: none; gap : 50px; color: rgb(98, 113, 21); text-align: center; margin-top: 40px; } .research .middle h1 { font-size: 50px; } .research .middle span { font-size: 18px; font-weight: bold; } .research .right { display: flex; flex-direction: column; gap : 80px; margin-top: 40px; width : 350px; margin-left: 30px; } .excellence { /*border : 5px solid green;;*/ height: 100vh; background-color: rgb(14, 93, 133); display: grid; grid-template-rows: 1fr 1fr 1fr ; gap : 20px; } .excellence h1{ margin-top: 50px; margin-left: 80px; color: white; text-align: left; } .excellence{ /*border : 2px solid red;*/ display: grid; grid-template-columns: repeat (3, 1fr); text-align: center; align-items: center; } .boxes{ display: grid; grid-template-columns: repeat(3, 1fr); } .boxes img { width : 400px; height: 15vh; margin-top: 10px; margin-left: 20px; } .excellence span { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: rgb(215, 215, 31); } .events { height: 100vh; margin-top: 90px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .events .top { display: flex; gap : 20px; list-style-type: none; font-size: 18px; } .events .center { /*border : 1px solid red;*/ display: grid; grid-template-columns: repeat(3 , 1fr); gap : 5px; margin-top: 80px; font-size: 20px; height: 60vh; margin-left: 10px; margin-right: 50px; } .events h4{ margin-top: 20px; color: white; font-size: 15px; } .events button { border:none ; background-color: rgb(217, 165, 11) ; padding: 8px; font-size: 11px; } .box1 { border : 1px solid blue; padding: 10px 20px; background-color: #066a3b; } .box2 { border : 1px solid blue; padding: 10px 20px; background-color:rgb(25, 25, 132); } .box3{ border : 1px solid blue; padding: 10px 20px; background-color: rgb(25, 25, 132); } .box4 { border : 1px solid blue; padding: 10px 20px; background-color: rgb(83, 74, 74); } .box5 { border : 1px solid blue; padding: 10px 20px; background-color: rgb(208, 129, 142); } .box6 { border : 1px solid blue; padding: 10px 20px; background-color: rgb(83, 74, 74); } .feedback { height: 80vh; background-color: rgb(231, 176, 37); display: flex; align-items: center; } .feedback img { width: 300px; height: 30vh; margin-left: 50px; margin-bottom: 200px; } .text { margin-left: 30px; font-size: 25px; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .feedback .text p { padding-bottom: 10px; padding-top: 10px; width : 700px; } .text span { color: black; } .text li { list-style-type: none; font-size: 18px; margin-top: 10px; } .final { height: 110vh; background-color: black; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: white; padding: 30px 20px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap : 30px; } .final .socials { margin-left: 40px; } .final p { font-size: 14px; } .final a { color: white; text-decoration: none; display: block; margin-bottom: 10px; font-size: 13px; } .final h3 { margin-bottom: 20px; margin-top: 50px; } .network span { font-size: 10px; } </style> </head> <body> <header> <div class="title"> <ul> <li>TNEA 5910</li> <label> Activities</label> <select> <option></option> <option>e</option> </select> <label>Innovation</label> <select> <option></option> </select> <label>Clubs</label> <select> <option></option> </select> <label>Facilities</label> <select> <option></option> </select> <label>Online Payment</label> <select> <option></option> </select> <label>EMI Option</label> <select> <option></option> </select> <label>Mandatory</label> <select> <option></option> </select> <li>iBOSS</li> <li>NBA</li> <li>NAAC</li> <li>NIRF</li> <li>IQAC</li> <li>TECH-PSNA</li> <li>BIS CORNER</li> </ul> </div> </header> <main> <div class="left"> <div class="dropdown"> <img src="PSNA_Logo.png"></img> <div class="content"> <h3>Tripartite Mou Singing Ceremony</h3> </div> </div> <div class="button"> <button>ABOUT US</button> <button>ACADEMICS</button> <button>ADMISSIONS</button> <button>PLACEMENT</button> <button>ALUMNI</button> <button>LIBRARY</button> <button>RESEARCH</button> <button>COE</button> <button>RESULTS</button> <button>HELP DESK</button> </div> <div class="apply"> <button><span>APPLY NOW 2026</span></button> </div> </div> <div class="opt"> <h1>OPT FOR PSNA</h1> <p>Student Placement Record (As on 05.03.26)</p> <div class=Source：https://dev.to/sowntharya/project-in-html-and-css-creating-a-educational-website-4dkj
My favorites