<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Quantico:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@800&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Quantico', sans-serif;
}
.main {
margin: 0;
background: linear-gradient(45deg, #3498db, #2980b9, #27ae60, #e67e22);
background-size: cover;
background-attachment: fixed;
height: 280vh;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10%;
}
nav li,
a,
button {
text-decoration: none;
font-weight: 500;
font-size: 18px;
list-style-type: none;
color: white;
}
.logo {
color: white;
cursor: pointer;
font-family: 'Turret Road', cursive;
font-size: 25px;
font-weight: 600;
}
nav ul li {
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
padding: 5px 10px;
}
nav ul li a:hover {
border-bottom: 3px solid red;
color: rgba(255, 0, 0, 0.856);
transition: 0.6s ease;
}
nav button {
color: white;
background: #2962FF;
border-radius: 18px;
padding: 5px 10px;
border-style: none;
}
nav button:hover {
background: #0984e3;
}
.page {
border: 3px solid #40c099;
height: 265vh;
width: 70%;
background-color: rgb(157, 174, 199);
margin-left: 10%;
border-radius: 30px 30px 0 0;
padding: 30px 50px;
}
.page .heading {
font-size: 30px;
text-align: center;
}
.information h2 {
border-left: 5px solid red;
margin: 20px 0 20px 0;
padding-left: 25px;
}
ol {
margin-left: 30px;
}
ul {
margin-left: 60px;
}
.page p {
font-size: 20px;
}
li {
font-size: 20px;
}
.tablecss {
border-collapse: collapse;
height: 45vh;
width: 75%;
color: #000;
text-align: center;
font-weight: 500;
border: 1px solid black;
border-radius: 30px 30px 0 0;
box-shadow: rgba(44, 40, 40, 0.301);
}
.tablecss .thhead {
background: rgb(31, 173, 232);
}
.tablecss .thhead th {
padding: 6px 12px;
}
.tablecss #tbody {
background-color: rgba(212, 234, 243, 0.747);
border-bottom: 1px solid rgb(106, 131, 131);
}
h6 {
padding: 10px 0;
}
.information .image img {
height: 300px;
width: 350px;
float: right;
}
.image img {
border: 2px solid hsl(83, 100%, 66%);
border-radius: 20px;
margin-top: 70px;
}
form{
display: flex;
margin: 0 50px;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 50px;
font-size: 20px;
}
fieldset{
padding: 50px 50px;
background-color: rgba(29, 135, 255, 0.582);
border-radius: 20px;
}
.input input ,.input select{
border: 2px solid rgb(51, 145, 233);
padding: 10px 15px;
width: 200px;
border-radius:10px;
overflow: hidden;
}
.input{
margin: 15px 0 15px;
display: flex;
justify-content: space-between;
}
.msg textarea{
border: 2px solid rgb(51, 145, 233);
padding: 10px 5px;
border-radius: 10px;
text-align: center;
}
.submit input{
color: white;
background:#46b43080;
border-radius: 18px;
padding: 10px 20px;
border-style: none;
border: 1PX solid white;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shushil G@utam</title>
</head>
<body>
<div class="main">
<div class="page">
<header>
<div class="logo">Shushil Gautam</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">table</a></li>
<li><a href="#">Form</a></li>
<a href="#"><button>Contact</button></a>
</ul>
</nav>
</header>
<hr>
<div class="information">
<div class="image">
<img src="c language.jpg" alt="Computer Language">
</div>
<h2>Introduction to Types of Computer Language</h2>
<p>The computer language is defined as code or syntax which is
used to write programs or any specific applications. The
computer language is used to communicate with computers.
Broadly the computer language can be classified into three
categories assembly language, machine language, and high-
level language. The machine language is considered as oldest
computer language among all three. In machine language, the
input is directly given as binary input which is processed
by the machine. Binary inputs mean one and zero form. For
computer language processing the system needs compiler and
interpreter to convert the language in computer language so
that it can be processed by a machine.</p>
<h2>Different Types of Computer Language</h2>
<ol type="1">
<li>Machine Language</li>
<li>Assembly Language</li>
<li>High-Level Language</li>
</ol>
<ul type="square">
<li>JAVA</li>
<li>C</li>
<li>Pascal</li>
</ul>
</div>
<hr>
<h2>Use of table tag:
</h2>
<center>
<table class="tablecss">
<caption>Marksheet</caption>
<thead>
<tr class="thhead">
<th rowspan="2">Roll no</th>
<th colspan="2">English</th>
<th colspan="2">Nepali</th>
<th rowspan="2">Math</th>
<th colspan="2">Computer</th>
<th rowspan="2">Total</th>
</tr>
<tr class="thhead">
<th>Th</th>
<th>Pr</th>
<th>Th</th>
<th>Pr</th>
<th>Th</th>
<th>Pr</th>
</tr>
</thead>
<tr id="tbody">
<td>1</td>
<td>55</td>
<td>20</td>
<td>60</td>
<td>55</td>
<td>45</td>
<td>45</td>
<td>55</td>
<td>200</td>
</tr>
<tr id="tbody">
<td>2</td>
<td>65</td>
<td>23</td>
<td>62</td>
<td>25</td>
<td>40</td>
<td>42</td>
<td>20</td>
<td>400</td>
</tr>
<tr id="tbody">
<td>3</td>
<td>30</td>
<td>15</td>
<td>55</td>
<td>33</td>
<td>22</td>
<td>55</td>
<td>42</td>
<td>450</td>
</tr>
<tr id="tbody">
<td>4</td>
<td>70</td>
<td>24</td>
<td>22</td>
<td>60</td>
<td>45</td>
<td>70</td>
<td>60</td>
<td>300</td>
</tr>
</table>
<h6>Marksheet of 2072 B.S. </h6>
</center>
<hr>
<div class="form">
<form action="#">
<fieldset>
<legend>Registration form</legend>
<div class="input">
<label for="Firstname">Firstname</label>
<input type="text" placeholder="Shushil " id="">
</div>
<div class="input">
<label for="Lastname">Lastname</label>
<input type="text" placeholder="Gautam" id="">
</div>
<div class="input">
<label for="">Contact</label>
<input type="number" placeholder="9847*******" id="">
</div>
<div class="input">
<label for="DOB">Date Of Birth</label>
<input type="date" id="">
</div>
<div class="input">
<label for="Gender">Gender</label>
<select placeholder="Gender" id="">
<option value="">Male</option>
<option value="">Female</option>
<option value="">Others</option>
</select>
</div>
<div class="msg">
<textarea placeholder="Type your message (optional)" id=""
cols="50" rows="5"></textarea>
</div>
<div class="submit">
<input type="submit">
<input type="reset">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
PREVIEW:
