Scribd
Upload
14 views14 pages

One Layout

mnb m

Uploaded by

Murali Vijay
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
14 views14 pages

One Layout

mnb m

Uploaded by

Murali Vijay
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/ 14

1.

OneLayout
<!DOCTYPE HTML>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
.wrapper {
}
.header {
text-align: center;
background-color: red;
padding: 20px;
color: white;
}
.main {
padding: 20px;
background-color: lightcoral;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>My Website</h1>
</div>
<div class="main">
<h2>Fixed Layout</h2>
<p>This is a fixed layout example.</p>
</div>
</div>
</body>
</html>

2.Fluid Layout

<!DOCTYPE HTML>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
.wrapper {
margin-left:10%;
margin-right: 10%;
}
.header {
text-align: center;
background-color: red; /* Updated background color to red as per your requirement */
padding: 20px;
color: white; /* Adding text color for better visibility */
}
.main {
padding: 20px;
background-color: lightcoral; /* Changed to a reddish color as requested */
color: white; /* Adding text color for better visibility */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>My Website</h1>
</div>
<div class="main">
<h2>Fixed Layout</h2>
<p>This is a fixed layout example.</p>
</div>
</div>
</body>
</html>

3.Responsive Layout
<!DOCTYPE HTML>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
.wrapper {
// background-color: yellow; /* Background color for the outer wrapper */
//padding: 20px;
//text-align: center;
// border: 20px solid black;
margin:auto;
width: 100%;
height: 100%;

}
.header {
text-align: center;
background-color: red; /* Updated background color to red as per your requirement */
padding: 20px;
color: white; /* Adding text color for better visibility */
width: 100%;
}
.main {
padding: 20px;
// background-color: lightcoral; /* Changed to a reddish color as requested */
// color: white; /* Adding text color for better visibility */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>My Website</h1>
</div>
<div class="main">
<h2>Responsive Layout</h2>
<p>This is a fixed layout example.</p>
<a href="C:\Users\Murali M\OneDrive\Desktop\simple.html">click here</a>
</div>
</div>
</body>
</html>

3.create a sample css file to show the different sector


module.

//1.External css
<!DOCTYPE html>
<html>
<head>
<title>Sample style</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1> this is a heading<h1>
<p>This a paragragh</p>
</body>
</html>
// mystyle.css
body{
background-color:lightblue;
}
h1{
color:navy;
margin-left: 20px;
}
p{
color:black;
margin:auto;
}

//2.Internal css
<!DOCTYPE HTML>
<html>
<head>
<title>Internal CSS</title>
<style>
body {
background-color: red;
}
h1 {
color: navy;
margin-left: 20px;
}
p{
color: black;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<h1>This is my heading</h1>
<p>This is my paragraph.</p>
</body>
</html>
//3.Inline css
<!DOCTYPE HTML>
<html>
<head>
<title>Internal CSS</title>
</head>
<body style="background-color: blue;">
<h1 style="color: gold; text-align: center;">This is my
heading</h1>
<p style="color: black; text-align: left;">This is my
paragraph.</p>
</body>
</html>

4.modify any html using an external css file.

<!DOCTYPE html>
<html>
<head>
<title>documents</title>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1>This is my website</h1>
<p class="para">this is my paragraph with class.</p>
<p> this is my paragraph without class.</p>
<div id="mydiv">
<p>this my paragraph inside a div container with id.
</div>
</body>
</html>

//External.css

h1 {
color: blue;
}

.para {
color: red;
text-align: left;
}

#mydiv {
padding: 5px;
color: yellow;
background-color:black;
}

6.Create a responsive from using html & css only.

<!DOCTYPE html>
<html>
<head>
<title>documents</title>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<div class="container">
<h1> Contact Us</h1>
<form>
<input type="text" id="name" name="name"
placeholder="enter your name here" required>

<label for="email">email:</label>
<input type="text" id="email" name="email"
placeholder="enter your email here" required>

<label for="Message">Message:</label>
<input type="text" id="Message" name="Message"
placeholder="enter your Message here" required>

<input type="submit" value="submit">


</form>
</div>
</body>
</html>
//css
body{
padding: 0px;
background-color: lightblue;
margin:0px;

}
.container{
padding: 20px;
width:400px;
margin: auto;
}
h1 {
color: blue;
text-align:center;
}
form{
display:flex;
flex-direction:column;
}
label{
margin-bottom:10px;

input
{
padding: 10px;
margin-bottom: 10px;
border:1 px solid black;
border-radius: 20px;
}
input[type="submit"]{
background-color: blue;
color: yellow;
cursor: pointor;
transition: background-color: blue;
}
input[type="submit"]: hover{
background-color: balck;
}

7.create form using html which take in details for the


college festival of the student from different
departments for sports event only.
<!DOCTYPE HTML>
<html>
<head>
<title> College Festival Sports Event
Registration</title>
</head>
<body>
<div class="container mt-5">
<h2>College fesivatival and sport events
registration</h2>
<form>
<div class="form-group">
<label for="name">Nmae:</label>
<input type="text" class="form-control" id="name"
placeholder="enter the full name" required>
</div>
<div class="form-group">
<label for="email">Email:</albel>
<Input type="email" class="form-control" id="email"
placeholder="enter the your email" required>
</div>

<div class="form-group">
<label for="department">Department:</label>
<select class="form-control" id="department"
required>
<option value="Computer science">Computer
science</option>
<option value="Commerce">Commerce</option>
<option value="Arts">Arts</option>

</select>
</div>

<div class="form-group">
<label for="sports event">sport events:</albel>
<select class="form-control" id="department"
required>
<option value="Foot ball">Foot ball</option>
<option value="Basket ball">Basket ball</option>
<option value="volley ball">Volley
ball</option>
</select>
</div>
<button type="submit" class="btn btn-
primary">Submit</button>
</form>
</div>
<script src=" "></script>
<script srcr=" "></script>
<script srcr=" "></script>

</body>
</html>

You might also like