HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="<link rel=" preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<p id="fontCss">My Name is Himanshu Kumar Tiwari</p>
<p id="fontCss2" >This is a Car</p> <br>
<p id="fontCss3" >Rahul is a good boy My Name is Himanshu Kumar Tiwari</p>
<p id="fontCss3" >Rahul is a good boy My Name is Himanshu Kumar Tiwari</p>
<p id="fontCss3" >Rahul is a good boy My Name is Himanshu Kumar Tiwari</p>
<p>
<b>
<a href="https://honidigdud.blogspot.com/" target="_blank" >ClickHere</a>
</b>
</p>
<div class="borderCss"></div>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
<ol>
<li>About</li>
<li>About</li>
<li>About</li>
</ol>
<div class="boxModel">
<label>USerName</label>
<input type="text" name="">
</div>
<p class="OverFlow">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa neque ducimus quo. Alias consequatur assumenda perspiciatis nisi asperiores cupiditate magnam, harum voluptatem incidunt nihil quibusdam ea! Molestias odio maiores non animi eveniet suscipit officiis vel libero! Dolor unde quas recusandae totam vero doloremque enim, mollitia dolore quidem debitis eveniet quasi! Culpa, quasi voluptatem architecto explicabo eos sunt maiores placeat odit sint harum quaerat nihil dolorem necessitatibus dolores eveniet illo tenetur, quidem exercitationem quia nemo eum! Possimus esse dicta minus vel rem, ipsum ab qui. Accusantium vel quibusdam voluptates nemo, nostrum tempora quasi necessitatibus nisi nesciunt harum illum velit id iure, adipisci, omnis maxime? Debitis distinctio, nobis voluptatem esse maxime dolore architecto odit eius provident deserunt obcaecati veniam est ducimus nisi ratione libero magnam omnis eveniet ad facere odio cupiditate et. Ullam, eveniet accusantium voluptates repellat praesentium veniam quasi reprehenderit reiciendis voluptatum sapiente non, in alias possimus veritatis! Aliquam iure vero ut sequi, dolorem pariatur voluptates, incidunt delectus, facere nesciunt ea ullam? Quia eaque deleniti incidunt? Tenetur amet quaerat assumenda saepe commodi natus voluptatibus minus molestias, nemo vero veniam alias earum, nulla facere, enim similique fugiat aliquam quod obcaecati provident eligendi. Officiis vero harum itaque blanditiis enim quo, cum vitae sunt quas neque praesentium voluptates dolorem repellat. Dolor obcaecati non, cum cumque laboriosam eos voluptatem ipsam id? Fugiat laudantium eligendi nostrum delectus quas, explicabo veniam consequuntur ex nesciunt odio dolor recusandae, suscipit, voluptatum porro architecto placeat? Consequuntur deleniti veniam vero ducimus omnis beatae? Harum, incidunt placeat culpa impedit mollitia temporibus inventore totam ex deserunt esse in dolorum tempora odio delectus magnam similique error nisi quasi modi deleniti explicabo pariatur voluptates omnis. Enim, expedita! Dolore corporis qui laborum ipsa non culpa possimus adipisci voluptatibus itaque quo unde, perferendis eius amet dolores necessitatibus maxime libero harum nesciunt aut, sunt, eos vero. Cupiditate qui possimus quibusdam ducimus cumque molestiae itaque libero commodi hic sequi numquam corporis accusantium quasi esse dolore, reprehenderit aperiam officiis! Expedita quos nobis, hic consequatur quis sed quidem, et quo ipsum neque, optio in praesentium dolore asperiores suscipit ratione. Dolor, sunt quasi facere aliquid suscipit magnam alias pariatur dolores nihil velit. Maiores, excepturi perspiciatis non, at impedit, deleniti rerum nesciunt porro ut aliquid vitae. Iusto expedita laborum laboriosam culpa illo, aliquid architecto id sapiente consequatur fugiat quaerat beatae, amet magnam deleniti quibusdam, consequuntur tenetur ipsum ex dolores velit. Quam quae facilis inventore impedit doloremque quaerat laudantium adipisci aliquid, blanditiis molestiae commodi quibusdam minus tempora ratione magni eum labore voluptas ad cum, doloribus nemo hic a vel? Aperiam, cupiditate doloribus illum, inventore deleniti illo natus iure qui consequuntur, dolores quam nisi consectetur velit at asperiores nemo repudiandae a quo voluptatibus minima mollitia. Beatae dignissimos vitae esse ab, fuga enim illo necessitatibus sed commodi odit ratione aperiam veritatis quod cumque? Numquam ratione laboriosam aut deserunt consequuntur quo molestiae nostrum deleniti recusandae nobis nulla praesentium perferendis reiciendis nemo sint repellendus similique, sequi quod, perspiciatis rem fugit voluptatum laudantium? Impedit, est similique ex debitis commodi magnam quae voluptates quasi iste ut consectetur? Perferendis, optio cupiditate.</p>
<div class="position">
<div class="first" >Himanshu</div>
<div class="second">Himanshu</div>
<div class="third" >Himanshu</div>
<div class="forth" >Himanshu</div>
</div>
<div class="float">
<div class="logo">TechImformation</div>
<div class="menu"> Menu
<ul>
<li >Home</li>
<li >Home</li>
<li >Home</li>
<li >Home</li>
</ul>
</div>
</div>
</body>
</html>
CSS
.myid {
color: orange;
}
* {
margin: 0;
padding: 0;
}
.backimg {
height: 100vh;
width: 100%;
background-image: url("file/car.jpg");
background-repeat: no-repeat;
background-repeat: repeat-y;
background-size: 100% 100%;
background-attachment: fixed;
}
.backimg1 {
height: 100vh;
width: 100%;
background-image: url("file/ghost.jpg");
background-repeat: no-repeat;
background-repeat: repeat-y;
background-size: 100% 100%;
background-attachment: fixed;
}
#fontCss {
font-weight: bold;
color: yellow;
background-color: yellow;
font-size: 2em;
padding-left: 0%;
font-weight: bold;
font-style: normal;
color: blueviolet;
font-weight: lighter;
font-variant: small-caps;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#fontCss2 {
font-weight: bold;
color: yellow;
background-color: rgb(255, 0, 0);
font-size: 2em;
padding-left: 0%;
font-weight: bold;
font-style: normal;
color: rgb(179, 255, 0);
font-weight: lighter;
font-variant: small-caps;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#fontCss3 {
font-size: 1.5cm;
color: red;
letter-spacing: 2px;
word-spacing: 5px;
direction: ltr;
text-indent: 1px;
text-align: center;
text-transform: lowercase;
}
a:link {color: black;}
a:hover { color: blue;}
a:visited {color: green;}
a:active {color: yellow;}
.borderCss {
width: 500px;
height: 500px;
background-color: red;
border-width: 5px;
border-color: black;
border-style: dotted;
border-radius: 10px;
}
ul {
list-style: circle;
font-size: 1cm;
}
ol {
list-style-type: lower-alpha;
font-size: 1cm;
text-transform: inherit;
}
.boxModel {
width: 400px;
height: 200px;
background-color: skyblue;
border-radius: 2px;
color: red;
border-style: solid;
padding: 5px;
}
input {
padding-left: 20px;
padding-top: 50px;
margin-top: 100px;
}
.OverFlow {
width: 200px;
height: 100px;
border: 1px;
border-style: solid;
color: red;
overflow-x: hidden;
overflow-y: scroll;
}
.position{
width: 600px;
height: 300px;
background-color: red;
}
.first{
width: 100px;
height: 60px;
background-color: green;
position: absolute;
}
.second{
width: 100px;
height: 60px;
background-color: pink;
position: absolute;
}
.third{
width: 100px;
height: 60px;
background-color: orange;
position: absolute;
z-index: 1;
}
.forth{
width: 100px;
height: 60px;
background-color: skyblue;
position: absolute;
}
.float{
width: 100%;
height: 80px;
background-color: black;
}
.logo{
width: 30%;
line-height: 80px;
text-align: center;
background-color: orange;
float: left;
}
.menu{
width: 70%;
line-height: 80px;
background-color: red;
float: right;
}
.ul{
list-style-type: none;
text-align: right;
}
li{
display: inline-block;
border: 1px solid black;
}
