Scribd
Upload
18 views9 pages

Coolege Assesment 44

Uploaded by

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

Coolege Assesment 44

Uploaded by

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

Program-44: Design a web page by applying CSS Navigation

Bar.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="44.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>

/* Reset some default styles and set a background color for the
navigation bar */
body {
margin: 0;
padding: 0;
background-color: #333;
}

/* Style the header and center its content */


header {
background-color: #333;
text-align: center;
}

/* Style the navigation bar */


nav ul {
list-style: none;
padding: 0;
margin: 0;
}

nav li {
display: inline;
margin-right: 20px;
}

/* Style the links */


nav a {
text-decoration: none;
color: #fff;
font-weight: bold;
}

/* Change link color on hover */


nav a:hover {
color: #00f;
}

Program-45: Design a web page such as home page, contact


us, about us etc. by using 3 ways of CSS layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="45.css">
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>

<section class="float-layout content">


<article>
<h2>Home Page</h2>
<p>Welcome to our website!</p>
</article>
<article>
<h2>About Us</h2>
<p>Learn more about our company.</p>
</article>
<article>
<h2>Contact Us</h2>
<p>Get in touch with us.</p>
</article>
</section>

<section class="flexbox-layout content">


<article>
<h2>Home Page</h2>
<p>Welcome to our website!</p>
</article>
<article>
<h2>About Us</h2>
<p>Learn more about our company.</p>
</article>
<article>
<h2>Contact Us</h2>
<p>Get in touch with us.</p>
</article>
</section>

<section class="grid-layout content">


<article class="home">
<h2>Home Page</h2>
<p>Welcome to our website!</p>
</article>
<article class="about">
<h2>About Us</h2>
<p>Learn more about our company.</p>
</article>
<article class="contact">
<h2>Contact Us</h2>
<p>Get in touch with us.</p>
</article>
</section>

<footer>
&copy; 2023 My Website
</footer>
</body>
</html>

/* styles.css */
header {
background-color: #333;
color: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
}
nav ul {
list-style: none;
display: flex;
padding: 0;
}
nav li {
margin-right: 20px;
}

.float-layout .content {
float: left;
width: 33.33%;
}

.flexbox-layout .content {
display: flex;
justify-content: space-between;
}

.flexbox-layout article {
flex: 1;
padding: 20px;
}

.grid-layout .content {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.grid-layout article {
padding: 20px;
}

footer {
clear: both;
background-color: #333;
color: #fff;
padding: 10px;
}
Program-46: Design a basic structure of Bootstrap Grid
system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.m
in.css" rel="stylesheet">
<title>Bootstrap Grid System</title>
</head>
<body>
<div class="container">
<!-- Row 1 -->
<div class="row">
<div class="col-md-6">
<div class="bg-primary p-3">
Column 1
</div>
</div>
<div class="col-md-6">
<div class="bg-secondary p-3">
Column 2
</div>
</div>
</div>

<!-- Row 2 -->


<div class="row">
<div class="col-md-4">
<div class="bg-success p-3">
Column 1
</div>
</div>
<div class="col-md-4">
<div class="bg-warning p-3">
Column 2
</div>
</div>
<div class="col-md-4">
<div class="bg-danger p-3">
Column 3
</div>
</div>
</div>
</div>

<!-- Bootstrap JS and jQuery (you may need to include these


dependencies) -->
<!-- <script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<!-- <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min
.js"></script> -->
</body>
</html>
Program-47: Design all Bootstrap components with
example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Bootstrap Components Example</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min
.css">
</head>
<body>

<div class="container">
<h1 class="display-4">Bootstrap Components Example</h1>

<!-- Buttons -->


<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

<!-- Typography -->


<h2 class="display-2">Heading 2</h2>
<p class="lead">This is a lead paragraph.</p>

<!-- Forms -->


<form>
<div class="form-group">
<label for="exampleInputEmail">Email address</label>
<input type="email" class="form-control"
id="exampleInputEmail" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

<!-- Add Bootstrap JavaScript and jQuery -->


<script src="https://code.jquery.com/jquery-
3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.j
s"></script>
</body>
</html>

You might also like