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
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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