Scribd
Upload
15 views8 pages

Experimentno.:-1: Object

Uploaded by

anuragaur007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views8 pages

Experimentno.:-1: Object

Uploaded by

anuragaur007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

WEBDESIGNING

ExperimentNo.:-1
Object:-ToDesigntheHomepageofstaticwebpagerequiredforanonline book
store website.

HTMLPart:-

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>ITMCollegeOnlineBookStore</title>
<linkrel="stylesheet"href="style.css">
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.2/css/all.min.css" integrity="sha512-
z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKu
qLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<divclass="header">
<imgsrc="images/logo.jpg"alt="Logo">
<divclass="clg_name">
<h1>INSTITUTEOFTECHNOLOGYANDMANAGEMENT</h1>
<p>Approvedby AICTE,PCI,NewDelhi affiliatedbyA.K.T.ULucknow</p>
</div>
<divclass="btn">
<button><ahref="read.html">ReadSomeFreeBooks</a></button>
</div>
</div>
<divclass="nav_bar">
<ul>
<li><aclass="active"href="#"><iclass="fa-solidfa-house-user"></i>Home</a></li>
<li><ahref="login.html"><iclass="fa-solidfa-right-to-bracket"></i>Login</a></li>
<li><a href="registration.html"><i class="fa-solid fa-address-
card"></i>Registration</a></li>
<li><a href="catalogue.html"><i class="fa-solid fa-book-open-
reader"></i>Catalogue</a></li>
<li><ahref="cart.html"><iclass="fa-solidfa-cart-arrow-down"></i>Cart</a></li>
</ul>
</div>
<!--HeroSection-->
<divclass="content">
<divclass="dept">
<h1>SeeBooksaccordingtoyourDepartments</h1>
<ul>
<li><ahref="ASH.html">AppliedScience</Booksareauniquelyportablemagic</h1

AVIKA SINGH, 2CSE-D, 2301201540016 Page 1


WEBDESIGNING

<p>"Explore avast collectionof engineering books,offeringcomprehensive knowledge acrossall


disciplines. Find thelatesttitles,guides,and referencematerials toempower your technical expertise
and advance your engineering career. Discover resources for students, professionals, and
enthusiasts alike."</p>
<imgclass="library"src="images/librarya></li>
<li><ahref="CSE.html">ComputerScienceEngineering</a></li>
<li><ahref="ECE.html">ElectronicsEngineering</a></li>
<li><ahref="ME.html">MechanicalEngineering</a></li>
<li><ahref="CE.html">CivilEngineering</a></li>
</ul>
</div>
<divclass="desc">
<h1>
.jpg"alt="">
</div>

</div>
</body>
</html>

CSSPart:-
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Poppins';
}
body{
background-image: linear-gradient(rgba(9, 5, 54,0.3),rgba(5, 4, 46, 0.7)),
url("images/bgimg.png");
background-size: cover;
background-repeat: repeat-y;
height: 150vh;
}
.header{
width: 100%;
background-color:#fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content:space-evenly;
box-shadow:2px2px8pxrgba(0,0,0,0.8); position:
fixed;
}
.header img{
width:8%;
}
.clg_nameh1{
font-size:1.4rem;

AVIKA SINGH, 2CSE-D, 2301201540016 Page 2


WEBDESIGNING

font-weight:700;
color:rgb(26,7,78);
}
.clg_namep{
font-size: 1rem;
font-weight:700;
color:rgb(48,12,150);
}
.btnbutton{
background-color: rgb(155, 20, 20);
border: none;
padding: 15px;
border-radius:6px;
font-size: 1rem;
font-weight: 600;
}
.btna{
color:#fff;
text-decoration:none;
}
.nav_bar ul {
display:flex;
align-items:center;
justify-content: space-around;
list-style: none;
padding: 20px;
font-size: 20px;
color: #fff;
}
.nav_barulli{
background-color: rgb(13, 13, 197);
padding: 8px 15px;
border: none;
border-radius:5px;
margin-top:110px;
}
.nav_bar a{
color:#fff;
text-decoration: none;
font-weight: 500;
transition: 0.2s ease;
}
.nav_barullia.active,
.nav_bar ul li a:hover{color:
rgb(246, 213, 70);
}
.content{
display:flex;
flex-direction: row;
justify-content:center;

AVIKA SINGH, 2CSE-D, 2301201540016 Page 3


WEBDESIGNING

.dept h1{
color:gray;
text-align: center;
margin-left:40px;
font-size: 35px;
font-weight: 900;
-webkit-text-stroke:2.5px#000;
}
.deptul{
display:flex;
flex-direction:column;
align-items: center;
justify-content: space-between;
list-style: none;
}
.deptli{
border: 2px solid #fff;
border-radius: 8px;
padding: 50px 100px;
margin-left: 40px;
background: linear-gradient(rgba(99,12,68,0.5), rgba(81,91,233,0.5));
margin-top: 30px;
text-align:center;
}
.dept a{
color:#fff;
font-size:1.5rem;
text-decoration:none;}
.desc{
display:flex;
flex-direction:column;
align-items: center;}
.desch1{
font-size: 2.5rem;
color: aquamarine;
text-align: center;
margin-top:120px;
-webkit-text-stroke:2.5px#000;}
.descp{
color:#fff;
font-size: 1.6rem;
text-align: center;
margin-top: 20px;
margin-left: 20px;
margin-right:20px;}
.library{
width: 50%
margin-top:70px;
border-radius:50%
}

AVIKA SINGH, 2CSE-D, 2301201540016 Page 4


WEBDESIGNING

ExperimentNo.:-2
Object:-ToDesigntheLoginpageofstaticwebpagerequiredforanonline book
store website.

HTMLPart:-

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>ITMCollegeOnlineBookStore</title>
<linkrel="stylesheet"href="style.css">
<linkrel="stylesheet"href="login.css">
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.2/css/all.min.css" integrity="sha512-
z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKu
qLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<divclass="header">
<imgsrc="images/logo.jpg"alt="Logo">
<divclass="clg_name">
<h1>INSTITUTEOFTECHNOLOGYANDMANAGEMENT</h1>
<p>Approvedby AICTE,PCI,NewDelhi affiliatedbyA.K.T.ULucknow</p>
</div>
<divclass="btn">
<button><ahref="read.html">ReadSomeFreeBooks</a></button>
</div>
</div>
<divclass="nav_bar">
<ul>
<li><ahref="index.html"><iclass="fa-solidfa-house-user"></i>Home</a></li>
<li><aclass="active" href="login.html"><i class="fa-solid fa-right-to-bracket"></i>Login</a></li>
<li><a href="registration.html"><i class="fa-solid fa-address-card"></i>Registration</a></li>
<li><a href="catalogue.html"><i class="fa-solid fa-book-open-reader"></i>Catalogue</a></li>
<li><ahref="cart.html"><iclass="fa-solidfa-cart-arrow-down"></i>Cart</a></li>
</ul>
</div>
<!--HeroSection-->
<divclass="content">
<divclass="dept">
<h1>SeeBooksaccordingtoyourDepartments</h1>
<ul>
<li><ahref="ASH.html">AppliedScience</a></li>
<li><ahref="CSE.html">ComputerScience
Engineering</a></li>

AVIKA SINGH, 2CSE-D, 2301201540016 Page 5


WEBDESIGNING

<li><ahref="ECE.html">Electronics
Engineering</a></li>
<li><ahref="ME.html">MechanicalEngineering</a></li>
<li><ahref="CE.html">CivilEngineering</a></li>
</ul>
</div>
<divclass="desc">
<h1>LoginToYourAccount</h1>
<p>Welcome to our online college bookstore,whereyoucan find awiderange ofbooks
foryouracademicandpersonalneeds.Weofferdiscounts,freeshipping,andeasyreturnsfor
ourcustomers. Wehopeyouenjoybrowsingandshoppingwithus.Happyreading!📚</p>

<formaction="#"class="login">
<divclass="log">
<b>User Name: </b><input type="text"
placeholder="Enter your Name">
</div>
<divclass="log">
<b>Password: </b><input type="password"
placeholder="Enter your Password">
</div>
</html>
<divclass="btn_login">
<inputclass="btnn"type="submit"name="submit"value="Submit"id="submit">
<inputclass="btnn"type="reset"name="reset"value="Reset"id="submit">
</body> </div>

CSSPart:-
body{
background-image: linear-gradient(rgba(9, 5, 54,0.3),rgba(5, 4, 46, 0.7)),
url("images/bg2.png");
background-size: cover;
background-repeat: repeat-y;
height: 150vh;
}
.nav_barulli{
background-color: rgba(99,12,68);
padding: 8px 15px;
border: none;
border-radius:5px;
margin-top:110px;
}.login{
display:flex;
flex-direction:column;
/* background-color: rgba(0, 255, 255, 0.377); */
padding: 15px;
margin-top:0.5rem;
}

AVIKA SINGH, 2CSE-D, 2301201540016 Page 6


WEBDESIGNING

. log{
display:flex;
align-items: center;
justify-content:center;
background-color:rgba(0,255,255,0.377);
height: 20vh;
margin:25px;
width: 30vw;
border:1pxsolid#fff;
border-radius: 6px;
}
.loginb{
font-size: 1.4rem;
color:rgb(49,5,5);
}
.login input{
padding: 5px;
margin-left:10px;
border-radius:4px;
color: #000;
}
.btn_login{
display:flex;
}
.btnn{
margin:15px;
height: 8vh;
width: 15vw;
font-size: 1.2rem;
font-weight: 900;
border-radius:6px;
border:3pxsolidrgb(4,5,43);
}
.btnn:hover{
cursor:pointer;
transform:scale(1.1);
}
.languages{
display:flex;
flex-direction:column;
}

AVIKA SINGH, 2CSE-D, 2301201540016 Page 7


8

You might also like