Gulshan Kumar

Currently in a transformation phase from a Mechanical Engineer to Design engineer, i love to integrate machine with art.

WEBSITE BUILDUP

Making a webite involves lot of new tools likewise

  • To learn HTML i referred w3school.

  • For styling in webpage i preffered using CSS.

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.

Coding in HTML

<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.

        
        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%;

        }

After making webpage the next hurdle was to uploading it to IIT DELHI server.For uploading it to server we used winscp.

Assignment 1 ends here.

Go back to homepage.