Scribd
Upload
21 views7 pages

782 Assignment

The document outlines a web design task requiring the creation of a responsive webpage with specific features, including a navigation bar, two conversion sections, and a four-column footer using Flexbox. It includes HTML and CSS code to implement these features, along with media queries for responsive design based on device orientation. The task emphasizes the use of semantic HTML elements and styling for an optimal user experience.

Uploaded by

NIKLAUS
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
21 views7 pages

782 Assignment

The document outlines a web design task requiring the creation of a responsive webpage with specific features, including a navigation bar, two conversion sections, and a four-column footer using Flexbox. It includes HTML and CSS code to implement these features, along with media queries for responsive design based on device orientation. The task emphasizes the use of semantic HTML elements and styling for an optimal user experience.

Uploaded by

NIKLAUS
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/ 7

NAME: BODDEDA LATHA SAGAR

ROLL NO: 04
REG NO:12204652

Course code: CAP782


Academic Task Number: CA-1
Course title: Responsive web Design

Q1)
A) Design the web page with following features: a) For root element of web page set the
dimension in pixel, with respect root element create a container1 with dimension 50 percent of root
element and container2 50 percent of root element in body align them in right and left of web page
using aside tag and giver header in each container1 as PIXEL TO REM conversion and container2
percentage to em conversion. Inside these containers perform the conversion using section tags.
Also create responsive four column footer and style it appropriately.

B) On top of web page create a responsive Navigation bar with background pink and menu button
of appropriate color also apply hover effect over buttons.
C) You are developing a mobile app that needs to adapt its layout and design based on the device's
orientation (portrait or landscape). How would you utilize media queries to handle these changes
gracefully and provide an optimal user experience in both orientations?
D) Create responsive Four Column Layout with Flex And use article ,section, aside, header and footer
tag.

1|Page
NAME : BODDEDA LATHA SAGAR CAP :782

CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

.navbar {
background-color: #f7b0ed;
overflow: hidden;
}

.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.navbar li {
float: left;
}

.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}

.navbar li a:hover {
background-color: #38ddda;
color: rgb(17, 17, 17);
}

2|Page
.footer {
background-color: #ece6e6;
color: white;
padding: 20px 0;
}

.footer .container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
gap: 20px;
}

.footer .column {
background-color: #38ddda;
flex: 1;
min-width: 200px;
margin: 10px;
text-align: center;
}

.footer .column h3 {
margin-bottom: 10px;
font-size: 18px;
}

.footer .column p {
margin: 0;
padding: 10px 0;
}

.space {
display: flex;
justify-content: space-between;
padding: 20px;
height: 445px;
}

aside {
width: 48%;
background-color: #f2f2f2;
padding: 20px;
box-sizing: border-box;
}

3|Page
h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}

section {
margin-top: 10px;
}

input, output {
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
}

@media screen and (orientation: portrait) {


body {
background-color: #f0f0f0;
}

.space {
flex-direction: column;
height: auto;
}

aside {
width: 100%;
margin-bottom: 20px;
}
}

@media screen and (orientation: landscape) {


body {
background-color: #ffffff;
}

.space {
flex-direction: row;
}

aside {
width: 48%;
margin-bottom: 0;
}

4|Page
}
</style>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<div class="space">
<aside>
<h2>PIXEL TO REM Conversion</h2>
<section>
<label for="px-input">Enter value in px:</label>
<input type="number" id="px-input" placeholder="Enter pixels">
<output id="rem-output">Result in rem</output>
</section>
</aside>
<aside>
<h2>Percentage to EM Conversion</h2>
<section>
<label for="percent-input">Enter value in percentage:</label>
<input type="number" id="percent-input" placeholder="Enter
percentage">
<output id="em-output">Result in em</output>
</section>
</aside>
</div>
<footer class="footer">
<div class="container">
<div class="column">
<h3>Column 1</h3>
<p>Content for column 1.</p>
</div>
<div class="column">
<h3>Column 2</h3>
<p>Content for column 2.</p>
</div>
<div class="column">
<h3>Column 3</h3>
<p>Content for column 3.</p>
</div>
<div class="column">
<h3>Column 4</h3>
<p>Content for column 4.</p>

5|Page
</div>
</div>
</footer>
<script>
document.getElementById('px-input').addEventListener('input',
function() {
const pxValue = parseFloat(this.value);
const remValue = pxValue / 16;
document.getElementById('rem-output').innerText = pxValue ?
${pxValue}px = ${remValue}rem : 'Result in rem';
});

document.getElementById('percent-input').addEventListener('input',
function() {
const percentValue = parseFloat(this.value);
const emValue = percentValue / 100;
document.getElementById('em-output').innerText = percentValue ?
${percentValue}% = ${emValue}em : 'Result in em';
});
</script>
</body>
</html>

6|Page
OUTPUT:

FOOTER WITH FOUR COLUMN USING FLEX

7|Page

You might also like