WT Prac 5-1

NAME : JENSI M TAGADIYA ENROLLMENT NO : ET22BTIT130
PRACTICAL : 5
AIM :
● Demonstrate the use of local and global variables in CSS.

● Use pseudo class and pseudo element concept in CSS to design your web page.
● Create a HTML file which define a default style for a container and text elements. Now,
by adding media queries, Adjust the padding of the container and the font size of the text
based on the screen width.
○ For screens larger than 500 pixels, the container's padding increases to 40px,
and the text size becomes slightly larger.
○ For screens larger than 750 pixels, the padding and text size increase further,
enhancing readability and providing a better layout for larger screens.
● Design Login and Registration Page using CSS.
● Design your own website/portfolio/blog using bootstrap.
(1)
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1 class="container">GLOBAL AND LOCAL VARIABLE</h1>
</header>
SUBJECT NAME : WEB TECHNOLOGY

<nav>
<div class="text">
<ul>
<li>home</li>
<li>about</li>
</ul>
</div>
</nav>
<footer class="a">copyright © here...</footer>
<script src="script.js"></script>
</body>
</html>
CSS :
html {
height: 100%;
width: 100%;
:root{
--backgroundcolour :grey;
--colour:black;
--height: 23vh;
--content:center;
--text:center;

.container{
background-color: var(--backgroundcolour);
color: var(--colour);
height: var(--height);
justify-content: var(--content);
text-align: var(--text);
.text{
min-height: (100vh - 23vh - 23vh);
background-color: lightblue;
.a{
background-color: var(--backgroundcolour);
color: var(--colour);
height: var(--height);
text-align: var(--text);
justify-content: var(--content);
(2)
HTML :
<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width">
<title>replit</title>
</head>
<body>
<header>
<h1 class="container">PSEUDO CLASSES</h1>
<nav>
<div>
<ul class="text">
<li>home</li>
<li>about</li>
</ul>
</div>
</nav>
</header>
<p class="a">
Nature provides us with several delicacies to enjoy and is our life support system. Our basic needs like food,
shelter, water and air are all the gifts from nature. Humans have a strong connection and interrelation with nature.
Escaping away in the nature heals the mind and body and soothes our soul.
</p>
<script src="script.js"></script>
</body>
</html>

CSS :
html {
height: 100%;
width: 100%;
.container{
background-color: lightblue;
font-style: bold;
justify-content: center;
display: flex;
.text{
display: inline;
list-style:none;
.text:hover{
color: blue;
.text:active{
font-weight: bold;
color: red;

.a::first-line{
color:red;
font-weight: bold;
(3)
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design</title>
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--padding: 20px;
--font-size: 16px;
.container {
padding: var(--padding);
background-color: var(--primary-color);

color: white;
text-align: center;
margin: 20px;
.text {
font-size: var(--font-size);
/* Media Queries */
@media (min-width: 500px) {
:root {
--padding: 40px;
--font-size: 18px;
@media (min-width: 750px) {
:root {
--padding: 60px;
--font-size: 20px;
</style>
</head>
<body>

<div class="container">
<p class="text">This is a responsive container.</p>
</div>
</body>
</html>
(4)
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login and Registration Page</title>
</head>
<body>
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<a href="#" class="link">Don't have an account? Register</a>
</div>

<h2>Register</h2>
<form>
<input type="text" placeholder="Username" required>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
<a href="#" class="link">Already have an account? Login</a>
</div>
</body>
</html>
CSS :
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
max-width: 400px;
width: 100%;
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
input[type="text"], input[type="password"], input[type="email"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
button {
width: 100%;

padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #2980b9;
.link {
display: block;
text-align: center;
margin-top: 20px;
color: #3498db;
text-decoration: none;
.link:hover {
text-decoration: underline;

(5)
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center" style="background-image:

url(https://www.smu.edu/-/media/Site/Meadows/NewsStories/2023/Bisk-SMU-New-Masters-Program/Wha
t-is-Creative-Coding-Header-Image.jpg);">
<h1>website using bootstrap</h1>
<p>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWI7clES9W75CGV-Bcxj248JnTz50rmHZ
S0Q&s">
<input type="text" placeholder="search...">
<button>search</button>
</p>

</div>
<div class="container" style="background-color: lightblue;">
<div class="column">
<div class="col-sm-4">
<h3>box 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHsnPrnr2ybgZ0qb3PJhAP0iLIv7pjZnjO2
A&s">
</div>
<h3>box 2</h3>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZioUHyzkKfdltTxHwJqIaKzqmrXrNZSznt
Q&s">
</div>
<h3>box 3</h3>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0RVEGobDYowIrBFvRwbDRuZGG05Yv
WZZMHA&s">
</div>
</div>

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

WT Prac 5-1

Uploaded by

Copyright:

Available Formats

WT Prac 5-1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT Prac 5-1

Uploaded by

Copyright:

Available Formats

NAME : JENSI M TAGADIYA ENROLLMENT NO : ET22BTIT130

● Demonstrate the use of local and global variables in CSS.

<meta name="viewport" content="width=device-width">

<link href="style.css" rel="stylesheet" type="text/css" />

<h1 class="container">GLOBAL AND LOCAL VARIABLE</h1>

SUBJECT NAME : WEB TECHNOLOGY

<footer class="a">copyright &copy; here...</footer>

SUBJECT NAME : WEB TECHNOLOGY

min-height: (100vh - 23vh - 23vh);

SUBJECT NAME : WEB TECHNOLOGY

<meta name="viewport" content="width=device-width">

<link href="style.css" rel="stylesheet" type="text/css" />

<h1 class="container">PSEUDO CLASSES</h1>

SUBJECT NAME : WEB TECHNOLOGY

SUBJECT NAME : WEB TECHNOLOGY

<meta name="viewport" content="width=device-width, initial-scale=1.0">

SUBJECT NAME : WEB TECHNOLOGY

@media (min-width: 500px) {

@media (min-width: 750px) {

SUBJECT NAME : WEB TECHNOLOGY

<p class="text">This is a responsive container.</p>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login and Registration Page</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<input type="text" placeholder="Username" required>

<input type="password" placeholder="Password" required>

<a href="#" class="link">Don't have an account? Register</a>

SUBJECT NAME : WEB TECHNOLOGY

<input type="text" placeholder="Username" required>

<input type="email" placeholder="Email" required>

<input type="password" placeholder="Password" required>

<a href="#" class="link">Already have an account? Login</a>

font-family: Arial, sans-serif;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

input[type="text"], input[type="password"], input[type="email"] {

border: 1px solid #ccc;

SUBJECT NAME : WEB TECHNOLOGY

SUBJECT NAME : WEB TECHNOLOGY

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="jumbotron text-center" style="background-image:

<h1>website using bootstrap</h1>

<input type="text" placeholder="search...">

SUBJECT NAME : WEB TECHNOLOGY

<div class="container" style="background-color: lightblue;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

SUBJECT NAME : WEB TECHNOLOGY

SUBJECT NAME : WEB TECHNOLOGY

You might also like

<footer class="a">copyright © here...</footer>