Scribd
Upload
2 views

HTML Css

The document is an HTML webpage featuring a full-screen banner with a background image and a navigation bar. It introduces a student named Mugundhan J, who aspires to be a Backend Developer and is involved in extracurricular activities and hobbies. The page includes links to sections about home, educational qualifications, hobbies, and activities.

Uploaded by

Mugundhan Dj
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

HTML Css

The document is an HTML webpage featuring a full-screen banner with a background image and a navigation bar. It introduces a student named Mugundhan J, who aspires to be a Backend Developer and is involved in extracurricular activities and hobbies. The page includes links to sections about home, educational qualifications, hobbies, and activities.

Uploaded by

Mugundhan Dj
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>

<html lang="en">

<head>

<title>Document</title>

<style>

*{

margin: 0;

padding: 0;

font-family: sans-serif;

.banner{

width: 100%;

height: 100vh;

background-image: url(3cd92b_3739674b2edb45b89327186456c864c8mv2.gif);

background-size: cover;

background-position: center;

.navbar{

width: 85%;

margin: auto;

padding: 35px 0;

display: flex;

align-items: center;

justify-content: space-between;

}
.logo{

width: 120px;

cursor: pointer;

.navbar ul li{

list-style: none;

display: inline-block;

margin: 0 20px;

position: relative;

.navbar ul li a{

font-size: 20px;

text-decoration: none;

color: white;

text-transform: uppercase;

.navbar ul li ::after{

content: '';

height: 3px;

width:0;

background: #0089;

position: absolute;

left: 0;
bottom:-10px;

transition: 0.5s;

.navbar ul li :hover::after{

width: 100%;

.content{

width: 100%;

position: absolute;

top: 50%;

transform: translateY(-50%);

text-align: center;

color: white;

.content p{

color: black;

margin: 20px auto;

font-size: 25px;

font-weight: 100;

line-height: 30px;

</style>

</head>

<body>
<div class="banner">

<div class="navbar">

<img src="mlogo.png" class="logo">

<ul>

<li><a href="website4.html">Home</a></li>

<li><a href="educationalq.html">Educational Qualification</a></li>

<li><a href="hobbies.html">Hobbies</a></li>

<li><a href="activities.html">Activities</a></li>

</ul>

</div>

<div class="content">

<p>"Hello, Myself MUGUNDHAN J, a passionate student with a drive for innovation and
creativity.I aim to Backend Developer<br>Apart from academics, I actively participate in various
extracurricular activities. In my free time, I indulge in hobbies. Through my diverse experiences, I aim to
continuously learn and grow, both personally and professionally."</p>

</div>

</div>

</body>

</html>

You might also like