WEBSITE BUILDUP
STEP:1
Making a webite involves lot of new tools likewise
To learn HTML i referred w3school.
For styling in webpage i preffered using CSS.
STEP:2
In my very first webpage i have used following items..
- A navigation bar.
- A dropsown menu.
- Background image.
- Unknown list with list element.
- Google fonts has been used for roboto font.
STEP:3
Coding in HTML
<![CDATA[
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/ css?family=Dosis&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu">
<ul >
<li><a> Home</a></li>
<li><a>Assignments</a>
<ul>
<li><a>Assignment 1</a></li></ul>
</li>
<li><a>Projects</a>
<ul>
<li><a>P.S.T</a></li>
<li><a>U.A.G.V</a></li>
<li><a>EXOSKELEON</a></li>
<li><a>SMALL PROJECT</a></li>
</ul>
</li>
<li><a>Others</a>
<ul>
<li><a>Travelling</a></li>
<li><a>Photography</a></li>
</ul>
</li>
</ul>
</div>
<div class="main-text">
<h1>"Hello folks this human picture belongs to me.Currently you can found me roaming inside IIT DELHI campus somewhere nearby DESIGN DEPARTMENT. I love to integrate art with mechatronics."</h1>
</div>
<div class="profile-image">
<img style="border: 1px solid;
border-radius: 9%;" src="5.jpg"style="width:50px;height:50px;"/>
</div>
</body>
]]>
CSS styling for Home page.
<![CDATA[
body{
background: url('1.jpg') no-repeat;
background-size: cover;
font-family: arial;
color: white;
}
.menu {
display: flex;
}
.menu ul{
margin: 0px;
padding:0px;
list-style: none;
}
.menu ul li{
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 40px;
display: 3s ease;
}
.menu ul li a{
text-decoration: none;
color: white;
display: block;
}
.menu ul li a:hover{
background-color: green;
}
.menu ul li ul li{
display: none;
}
.menu ul li:hover ul li{
display: block;
}
.main-text {
position: absolute;
margin: 0 auto;
text-align: justify;
top: 40%;
left: 29%;
right: 18%;
font-family: 'Dosis', sans-serif;
}
.profile-image {
position: absolute;
margin: 0 auto;
top: 53%;
left: 80%;
}
]]>
STEP:4
After making webpage the next hurdle was to uploading it to IIT DELHI server.For uploading it to server we used winscp.
