HTML-CSS Practical File 1
HTML-CSS Practical File 1
.row::after {
content: "";
display: table;
}
@media screen and (max-width: 650px) {
.column {
width: 100%;
}
}
.side {
font-size: small;
padding: 10px;
background-color: #f8ede3;
color: black;
text-align: left;
border-radius: 0px;
border: 2px black;
float: right;
width: 20%;
height: 510px;
}
<div class="topnav">
<a href="https://shreeagrasaincollege.net/site/" target="_blank">Home</a>
<a href="https://shreeagrasaincollege.net/site/rule-regulations/"
target="_blank">Rules & Regulations</a>
<a href="https://shreeagrasaincollege.net/site/admission/"
target="_blank">Admission</a>
<a href= "https://shreeagrasaincollege.net/site/faculty-and-staff/"
target="_blank">Faculty</a>
<a href= "https://shreeagrasaincollege.net/site/gallary/"
target="_blank">Gallery</a>
</div>
<div class="column">
<br >
<h2>From the Desk of Chairman</h2>
<p>
..........
..........
</p>
</div>
<div class="column">
<br />
<h2>Column 2</h2>
<p>
..........
..........
</div>
<div class="side">
<center>
<img src="https://shreeagrasaincollege.net/site/wp-
content/uploads/2024/05/cropped-cropped-logo1.png" />
<h2>ABOUT</h2>
<br />
</center>
<p>
Shree Agrasain College is situated at 5/2A, Height Road, Liluah, Howrah, 711204
amidst a green environment. It is adjacent to the Liluah Railway station on the eastern
side and a five-minute-walking distance away from Grand Trunk Road. Ours is a self-
financing college. It has been established to fulfil the need of professional and
emerging area of higher learning for the state of West Bengal in general and Howrah
district and adjoining areas in particular.
The college is a unit of Shri Radhe Krishna Charitable Trust. The objective of the college
is to promote value based higher education and to inculcate truthfulness, self-reliance
and strong characters in the young minds and imbibe in them the virtues of integrity
and moral values.
</p>
</div>
<div class="footer">Contact us <a
href="https://shreeagrasaincollege.net/site/contact/" target="_blank">here</a></div>
</body>
</html>
c) Output-
2) Redesign an existing website using HTML and
CSS. Analyze the original design and propose
improvement to the layout, typography, color
scheme, and overall user experience.
a) Definition-
The provided code consists of an HTML document and accompanying CSS styles for a
web page. The HTML defines a basic structure with a navigation bar featuring
dropdown menus for categories such as "Catalog" and "Resources," as well as buttons
for "Sign In," "Get Started," and "Pricing." It includes a login form with social media
sign-in options for Twitter and Facebook. The CSS styles enhance the page's
appearance with a dark background and contrasting text colors, while defining the
layout, button styles, and hover effects. The use of `translate` for positioning
elements is notable, although it is not standard practice and could be replaced with
more conventional CSS properties like `margin` or `padding`. Additionally, the code
imports Google Fonts and utilizes gradients for visual effects, aiming for a modern and
engaging design.
b) Source Code-
HTML-
<html>
<head>
<title> Project 2 </title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link
rel="website icon"
type="png"
href="https://play-lh.googleusercontent.com/zIO-uuTBjFigUIswv_h9S0-
wVIkno_obwannvzr7NrXbh_MXL_khqV7gEqBly6KXEi4"
;
/>
</head>
<body>
<div class = "style1">
datacamp
</div>
<img
src="C:\Users\piyush\Downloads\unnamed.png"
alt="logo"
width="50px"
height="50px"
/>
<div class="dropdown">
<button class="dropbtn">Catalog</button>
<div class = "dropdown-content">
<a href="#">HTML</a><br>
<a href="#">CSS</a><br>
<a href="#">JavaScript</a><br>
<a href="#">Python</a><br>
<a href="#">SQL</a><br>
<a href="#">Data Science</a><br>
<a href="#">Machine Learning</a><br>
<a href="#">Data Science Career Path</a><br>
<a href="#">Machine Learning Career Path</a><br>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resourses</button>
<div class = "dropdown-content">
<a href="#">Courses</a><br>
<a href="#">Workshops</a><br>
<a href="#">Online Courses</a><br>
<a href="#">Documentation</a><br>
<a href="#">Community</a><br>
<a href="#">FAQ</a><br>
<a href="#">Contact</a><br>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><a href="#">Pricing</a></button>
</div>
<div class="dropdown">
<button class="dropbtn"><a href="#">For Business</a></button>
</div>
<div class="dropdown">
<button class="dropbtn"><a href="#">For Universities</a></button>
</div>
<div class="style2">
Sign In
</div>
<div class="style2">
Get Started
</div>
<div class = "text1">
Learn to code, build projects, and get certified in just a few clicks.
</div>
<div class = "text2">
Unlock the power of data and AI by learning Python, ChatGPT, SQL, Power BI, and
more.
</div>
<button class = "btn">
<a href = "#">
Start Learning for Free
</a>
</button>
<button class = "btn1">
<a href = "#">
DataCamp for Business
</a>
</button>
<div class="container">
<form action="#">
<div class="title">Login</div>
<div class="input-box underline">
<input type="text" placeholder="Enter Your Email" required>
<div class="underline"></div>
</div>
<div class="input-box">
<input type="password" placeholder="Enter Your Password" required>
<div class="underline"></div>
</div>
<div class="input-box button">
<input type="submit" name="" value="Continue">
</div>
</form>
<div class="option">or Connect With Social Media</div>
<div class="twitter">
<a href="#"><i class="fab fa-twitter"></i>Sign in With Twitter</a>
</div> <div class="facebook">
<a href="#"><i class="fab fa-facebook-f"></i>Sign in With Facebook</a>
</div>
</div>
</body>
</html>
CSS-
a :visited{
color:white;
}
body{
background-color:#05192D;
}
img{
translate: 40px -17px;
}
.style1{
color:white;
font-family: MV Boli;
font-size:30px;
translate: 50px 29px;
text-align:left;
margin-left: 50px;
margin-top: 20px;
}
.dropdown{
position:relative;
translate: 270px -38px;
display: inline-block;
}
.dropdown :hover{
background-color: rgba(255, 245, 245, 0.2);
}
.dropdown-content{
display: none;
color:rgba(250, 235, 215, 0);
position: absolute;
min-width: 150px;
max-width: 170px;
background-color: rgba(223, 217, 217, 0.233);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border: 1px white;
border-radius:30px;
padding:12px 16px;
}
.dropdown-content a:hover{
color: white;
background-color: rgba(255, 245, 245, 0.2);
padding: 5px;
border-radius:20px;
}
.dropdown-content a{
color:white;
text-decoration: none;
display: block;
padding: 5px;
}
.dropdown:hover .dropdown-content{
display: block;
background-color: rgba(240, 248, 255, 0.774);
}
.dropbtn {
color: white;
background-color: rgba(255, 250, 250, 0);
padding: 12px 16px;
font-size: 16px;
border: 2px grey;
cursor: pointer;
border-radius: 30px;
}
.dropbtn a{
text-decoration: none;
color: white;
background-color: rgba(255, 250, 250, 0);
padding: 12px 16px;
font-size: 16px;
border: 2px grey;
cursor: pointer;
border-radius: 30px;
}
.dropbtn a:hover{
background-color: rgba(255, 250, 250, 0.2);
}
.style2{
position: relative;
translate:330px -38px;
display: inline-block;
color:white;
padding:5px;
border-left: 2px solid green;
height:20px;
font-size: 16px;
text-align: left;
}
.style2:hover{
background-color: rgba(3, 128, 3, 0.411);
transition: background-color 0.2s ease-in-out;
transition: text-align center;
border-radius:10px;
width:100px;
}
.text1{
font-size: 30px;
font-family: Playwrite MX;
font-style: bold;
width:33%;
margin-left:70px;
translate:0px 25px;
color:white;
}
.text2{
font-size: 15px;
font-family: Roboto Thin;
font-style: bold;
width:28%;
margin-left:70px;
translate:0px 30px;
color:white;
}
.btn{
position: relative;
translate:70px 100px;
text-align: center;
padding: 12px;
font-size: 25px;
color:#05192D;
background-color:#16EF63;
height:60px;
font-family: Roboto;
font-weight: bold;
width:33%;
border: none;
border-radius:5px;
}
.btn1{
position: absolute;
font-family: Roboto;
font-weight: bold;
translate:-360px 190px;
text-align: center;
padding: 12px;
font-size: 25px;
color:#05192D;
background-color:#ffffffd3;
height:60px;
width:33%;
border: 2px white;
border-radius:5px;
}
.btn a{
position: relative;
text-decoration: none;
translate:10px 10px;
text-align: center;
padding: 12px;
font-size: 25px;
color:#05192D;
background-color:#16EF63;
height:60px;
font-family: Roboto;
font-weight: bold;
width:33%;
border-radius:5px;
}
.btn1 a{
position: relative;
text-decoration: none;
font-family: Roboto;
font-weight: bold;
translate:-390px 0px;
text-align: center;
padding: 12px;
font-size: 25px;
color:#05192D;
background-color:#ffffff00;
height:60px;
width:33%;
border-radius:5px;
}
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&d
isplay=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
::selection{
background: #ff80bf;
}
.container{
background: #fff;
max-width: 350px;
width: 40%;
translate: 850px -230px;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}
.container form .title{
font-size: 30px;
font-weight: 600;
margin: 20px 0 10px 0;
position: relative;
}
.container form .title:before{
content: '';
position: absolute;
height: 4px;
width: 33px;
left: 0px;
bottom: 3px;
border-radius: 5px;
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
}
.container form .input-box{
width: 100%;
height: 45px;
margin-top: 25px;
position: relative;
}
.container form .input-box input{
width: 100%;
height: 100%;
outline: none;
font-size: 16px;
border: none;
}
.container form .underline::before{
content: '';
position: absolute;
height: 2px;
width: 100%;
background: #ccc;
left: 0;
bottom: 0;
}
.container form .underline::after{
content: '';
position: absolute;
height: 2px;
width: 100%;
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
left: 0;
bottom: 0;
transform: scaleX(0);
transform-origin: left;
transition: all 0.3s ease;
}
.container form .input-box input:focus ~ .underline::after,
.container form .input-box input:valid ~ .underline::after{
transform: scaleX(1);
transform-origin: left;
}
.container form .button{
margin: 40px 0 20px 0;
}
.container .input-box input[type="submit"]{
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
font-size: 17px;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.container .input-box input[type="submit"]:hover{
letter-spacing: 1px;
background: linear-gradient(to left, #99004d 0%, #ff0080 100%);
}
.container .option{
font-size: 14px;
text-align: center;
}
.container .facebook a,
.container .twitter a{
display: block;
height: 45px;
width: 100%;
font-size: 15px;
text-decoration: none;
padding-left: 20px;
line-height: 45px;
color: #fff;
border-radius: 5px;
transition: all 0.3s ease;
}
.container .facebook i,
.container .twitter i{
padding-right: 12px;
font-size: 20px;
}
.container .twitter a{
background: linear-gradient(to right, #00acee 0%, #1abeff 100%);
margin: 20px 0 15px 0;
}
.container .twitter a:hover{
background: linear-gradient(to left, #00acee 0%, #1abeff 100%);
margin: 20px 0 15px 0;
}
.container .facebook a{
background: linear-gradient( to right, #3b5998 0%, #476bb8 100%);
margin: 20px 0 50px 0;
}
.container .facebook a:hover{
background: linear-gradient( to left, #3b5998 0%, #476bb8 100%);
margin: 20px 0 50px 0;
}
c) Output-
3) To design and style an interactive form using
HTML and CSS. They should incorporate various
form elements such as text inputs, check boxes,
radio buttons, and select dropdowns. Apply CSS
for styling to improve the form’s visual
appearance and user experience.
a) Definition-
This HTML code creates a visually appealing and user-friendly form designed for
collecting basic user information. The form is centered on the page with a clean,
modern design that features a white background, rounded corners, and a subtle
shadow for a floating effect. The layout includes input fields for name and email, a
group of radio buttons for gender selection, checkboxes for selecting interests, and a
dropdown menu for choosing a country. The form is styled with consistent spacing,
font sizes, and colors to ensure readability and ease of use. Button interactions are
enhanced with a hover effect, providing visual feedback for user actions.
b) Source Code-
<html>
<head>
<title>Styled Form</title>
<style>
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-container {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 500px;
width: 100%;
}
h1 {
margin-bottom: 20px;
color: #333;
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
input[type="text"]:focus,
input[type="email"]:focus,
select:focus {
border-color: #007bff;
outline: none;
}
.radio-group,
.checkbox-group {
display: flex;
gap: 10px;
}
.radio-group label,
.checkbox-group label {
display: flex;
align-items: center;
font-size: 16px;
color: #555;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 8px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="form-container">
<h1>Interactive Form</h1>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
placeholder="John Doe"
required
/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="johndoe@example.com"
required
/>
</div>
<div class="form-group">
<label>Gender:</label>
<div class="radio-group">
<label
><input type="radio" name="gender" value="male" /> Male</label
>
<label
><input type="radio" name="gender" value="female" /> Female</label
>
<label
><input type="radio" name="gender" value="other" /> Other</label
>
</div>
</div>
<div class="form-group">
<label>Interests:</label>
<div class="checkbox-group">
<label
><input type="checkbox" name="interests" value="coding" />
Coding</label
>
<label
><input type="checkbox" name="interests" value="design" />
Design</label
>
<label
><input type="checkbox" name="interests" value="writing" />
Writing</label
>
</div>
</div>
<div class="form-group">
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
c) Output-
4) To create a product landing page for a
fictional product.HTML to be used to structure
the page and CSS to style the layout, typography,
buttons, and images. Main focus to be on creating
an engaging page that effectively showcases the
chosen product.
a) Definition-
This HTML code sets up a product landing page designed to attract potential
customers with a clean, modern layout. The page features a header with a navigation
bar that includes links to key sections like Features, Pricing, and Contact. The hero
section showcases a high-quality background image with a compelling headline and
call-to-action button.
The main content area is divided into three sections: Features, Pricing, and Contact.
Each section is designed to be visually distinct, with the Features section highlighting
key product attributes using images and descriptions, the Pricing section presenting
different subscription plans, and the Contact section offering an email link for
inquiries. The design uses a consistent color scheme, with prominent buttons and
clear typography to enhance user experience. The footer provides a simple copyright
notice, rounding out the professional look of the landing page.
b) Source Code-
<html>
<head>
<title>Product Landing Page</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
width: 80%;
margin: 0 auto;
max-width: 1200px;
}
.header {
background: #f4f4f4;
padding: 20px 0;
border-bottom: 1px solid #ddd;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav .logo {
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
text-decoration: none;
color: #333;
font-size: 16px;
}
.nav-links a:hover {
color: #007bff;
}
.hero {
background:
url("https://images.wallpaperscraft.com/image/single/pineapple_fruit_shade_113937
_1600x900.jpg")
no-repeat center center/cover;
color: #fff;
text-align: center;
padding: 80px 20px;
}
.hero h1 {
font-size: 36px;
margin-bottom: 20px;
}
.hero p {
font-size: 18px;
margin-bottom: 30px;
}
.btn-main {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 18px;
}
.btn-main:hover {
background: #0056b3;
}
.features {
padding: 50px 20px;
background: #f9f9f9;
text-align: center;
}
.features h2 {
margin-bottom: 30px;
font-size: 28px;
}
.feature-item {
margin-bottom: 20px;
}
.feature-item img {
width: 100px;
height: auto;
margin-bottom: 10px;
}
.feature-item h3 {
font-size: 22px;
margin-bottom: 10px;
}
.feature-item p {
font-size: 16px;
}
.pricing {
padding: 50px 20px;
background: #fff;
text-align: center;
}
.pricing h2 {
margin-bottom: 30px;
font-size: 28px;
}
.pricing-plan {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f4f4f4;
}
.pricing-plan h3 {
font-size: 24px;
margin-bottom: 10px;
}
.pricing-plan p {
font-size: 22px;
margin-bottom: 20px;
}
.pricing-plan ul {
list-style: none;
margin-bottom: 20px;
}
.pricing-plan ul li {
margin-bottom: 10px;
}
.btn-secondary {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 16px;
}
.btn-secondary:hover {
background: #0056b3;
}
.contact {
padding: 50px 20px;
background: #f9f9f9;
text-align: center;
}
.contact h2 {
margin-bottom: 20px;
font-size: 28px;
}
.contact p {
font-size: 18px;
margin-bottom: 20px;
}
.contact .btn-main {
padding: 10px 20px;
background: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 18px;
}
.footer {
background: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
.footer p {
font-size: 14px;
}
</style>
</head>
<body>
<header class="header">
<nav class="nav">
<div class="container">
<a href="#" class="logo">PinEApplE</a>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<section class="hero">
<div class="container">
<h1>Introducing the Ultimate Gadget</h1>
<p>
The most advanced gadget you'll ever need. Experience innovation
like never before.
</p>
<a href="#buy" class="btn-main">Buy Now</a>
</div>
</section>
</header>
<main>
<section id="features" class="features">
<div class="container">
<h2>Features</h2>
<div class="feature-item">
<img src="feature1.png" alt="Feature 1" />
<h3>Feature 1</h3>
<p>Description of feature 1.</p>
</div>
<div class="feature-item">
<img src="feature2.png" alt="Feature 2" />
<h3>Feature 2</h3>
<p>Description of feature 2.</p>
</div>
<div class="feature-item">
<img src="feature3.png" alt="Feature 3" />
<h3>Feature 3</h3>
<p>Description of feature 3.</p>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<p>© 2024 PinEApplE. All rights reserved.</p>
</div>
</footer>
</body>
</html>
c) Output-