Scribd
Upload
6 views

782 Assignment 2

The document outlines a practical task for creating a responsive web design for an educational platform featuring video lectures, quizzes, and discussion forums. It includes HTML and CSS code to implement the layout, navigation, and content scaling to ensure accessibility across various devices. The design emphasizes user interaction through quizzes and forums, providing resources and a structured navigation menu.

Uploaded by

NIKLAUS
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

782 Assignment 2

The document outlines a practical task for creating a responsive web design for an educational platform featuring video lectures, quizzes, and discussion forums. It includes HTML and CSS code to implement the layout, navigation, and content scaling to ensure accessibility across various devices. The design emphasizes user interaction through quizzes and forums, providing resources and a structured navigation menu.

Uploaded by

NIKLAUS
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

NAME: BODDEDA LATHA SAGAR

ROLL NO: 04
REG NO:12204652

Course code: CAP782


Academic Task: Class Practical
Course title: Responsive web Design

Q1) Design web page for educational platform that requires a responsive
design for its online courses. The platform includes video lectures, quizzes,
and discussion forums. ensure that all these elements are accessible and
functional on various devices. implement using layout, navigation, and
content scaling, pictures

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>Educational Platform</title>
<style>
* {

1|Page
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
background-size: cover;
background-color: hsl(274, 100%, 35%);
color: #333;
}

header {
background: rgba(51, 51, 51, 0.8);
color: #fff;
padding: 20px 0;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
}

nav ul {
display: flex;
justify-content: center;
list-style: none;
position: relative;
}

nav ul li {
margin: 0 15px;
position: relative;
}

nav ul li a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
transition: background 0.3s, color 0.3s;
}

nav ul li a:hover {
background: #444;
border-radius: 5px;
color: #ffcc00;

2|Page
}

nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: rgba(51, 51, 51, 0.9);
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

nav ul li:hover ul {
display: block;
}

nav ul li ul li {
margin: 5px 0;
}

nav ul li ul li a {
padding: 10px;
white-space: nowrap;
}

main {
flex: 1;
padding: 20px;
background: rgba(255, 255, 255, 0.9);
}

section {
margin-bottom: 20px;
}

h2 {
color: #ff6600;
margin-bottom: 10px;
}

.video-container, .quiz-container, .forum-container, .resources-


container {
max-width: 800px;
margin: 0 auto;
padding: 15px;
border: 1px solid #ccc;
border-radius: 10px;

3|Page
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.quiz-container form {
display: flex;
flex-direction: column;
}

.quiz-question {
margin-bottom: 15px;
}

.quiz-question label {
margin-bottom: 5px;
font-weight: bold;
}

.quiz-question select, .quiz-question input {


padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

button[type="submit"] {
padding: 10px 20px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}

button[type="submit"]:hover {
background-color: #218838;
}

.forum-post, .forum-reply {
margin-bottom: 15px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}

.forum-post h3 {
margin-bottom: 10px;
color: #ff6600;

4|Page
}

.forum-reply {
background-color: #f1f1f1;
}

.post-reply-form {
margin-top: 20px;
display: flex;
flex-direction: column;
}

.post-reply-form textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
}

.post-reply-form button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
margin-top: 10px;
align-self: flex-start;
}

.post-reply-form button:hover {
background-color: #0056b3;
}

@media (max-width: 768px) {


nav ul {
flex-direction: column;
}

.video-container, .quiz-container, .forum-container, .resources-


container {
padding: 10px;
}
}

@media (max-width: 480px) {


nav ul li {

5|Page
margin: 5px 0;
}
}

footer {
background: rgba(51, 51, 51, 0.8);
color: #fff;
text-align: center;
padding: 20px 0;
}
</style>
</head>
<body>
<header>
<h1>Online Education Platform</h1>
<nav>
<ul>
<li>
<a href="#courses">Courses</a>
<ul>
<li><a href="#course1">Course 1</a></li>
<li><a href="#course2">Course 2</a></li>
</ul>
</li>
<li>
<a href="#quizzes">Quizzes</a>
<ul>
<li><a href="#quiz1">Quiz 1</a></li>
<li><a href="#quiz2">Quiz 2</a></li>
<li><a href="#quiz3">Quiz 3</a></li>
</ul>
</li>
<li>
<a href="#forums">Discussion Forums</a>
<ul>
<li><a href="#forum1">Forum 1</a></li>
<li><a href="#forum2">Forum 2</a></li>
</ul>
</li>
<li>
<a href="#resources">Resources</a>
<ul>
<li><a href="#resource1">Resource 1</a></li>
<li><a href="#resource2">Resource 2</a></li>
</ul>
</li>
</ul>
</nav>

6|Page
</header>

<main>
<section id="courses">
<h2>Video Lectures</h2>
<div class="video-container" id="course1">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/B-ytMSuwbf8?si=YhN_Zi7cAT9VZYuX"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p>Lecture 1: Introduction to Responsive Design</p>
</div>
<div class="video-container" id="course2">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/PL3Odw-k8W4?si=_UM4bWMFm47PSG2I"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p>Lecture 2: Advanced CSS Techniques</p>
</div>
</section>

<section id="quizzes">
<h2>Quizzes</h2>
<div class="quiz-container" id="quiz1">
<form>
<div class="quiz-question">
<label for="q1">What does CSS stand for?</label>
<select id="q1" name="q1">
<option value="a">Cascading Style Sheets</option>
<option value="b">Creative Style Sheets</option>
<option value="c">Computer Style Sheets</option>
<option value="d">Colorful Style Sheets</option>
</select>
</div>
<div class="quiz-question">
<label for="q2">Which HTML tag is used to define an
internal style sheet?</label>
<input type="text" id="q2" name="q2">
</div>
<button type="submit">Submit Quiz</button>
</form>
</div>
<div class="quiz-container" id="quiz2">
<form>
<div class="quiz-question">
<label for="q3">What does HTML stand for?</label>

7|Page
<select id="q3" name="q3">
<option value="a">Hyper Text Markup
Language</option>
<option value="b">Hyperlinks and Text Markup
Language</option>
<option value="c">Home Tool Markup
Language</option>
<option value="d">Hyperlinks Tool Markup
Language</option>
</select>
</div>
<div class="quiz-question">
<label for="q4">Which HTML tag is used to define an
unordered list?</label>
<input type="text" id="q4" name="q4">
</div>
<button type="submit">Submit Quiz</button>
</form>
</div>
<div class="quiz-container" id="quiz3">
<form>
<div class="quiz-question">
<label for="q5">Which property is used to change the
background color?</label>
<select id="q5" name="q5">
<option value="a">color</option>
<option value="b">background-color</option>
<option value="c">bg-color</option>
<option value="d">bgcolor</option>
</select>
</div>
<div class="quiz-question">
<label for="q6">Which CSS property is used to change
the text color of an element?</label>
<input type="text" id="q6" name="q6">
</div>
<button type="submit">Submit Quiz</button>
</form>
</div>
</section>

<section id="forums">
<h2>Discussion Forums</h2>
<div class="forum-container" id="forum1">
<div class="forum-post">
<h3>Topic: Best Practices for Responsive Design</h3>
<p>Posted by: Lakshmi</p>

8|Page
<p>What are some of the best practices you follow when
creating responsive web designs?</p>
</div>
<div class="forum-reply">
<p><strong>Latha:</strong> I always start with a mobile-
first approach and then scale up.</p>
</div>
<div class="forum-reply">
<p><strong>Sagar:</strong> Using flexible grids and media
queries are essential for me.</p>
</div>
<div class="post-reply-form">
<textarea rows="3" placeholder="Write your reply
here..."></textarea>
<button type="submit">Post Reply</button>
</div>
</div>
<div class="forum-container" id="forum2">
<div class="forum-post">
<h3>Topic: Advanced CSS Techniques</h3>
<p>Posted by: Anil</p>
<p>What are some advanced CSS techniques you find
useful?</p>
</div>
<div class="forum-reply">
<p><strong>Ravi:</strong> CSS Grid and Flexbox have been
game changers for layout design.</p>
</div>
<div class="forum-reply">
<p><strong>Kavitha:</strong> Using CSS variables and
custom properties has made my styling more manageable.</p>
</div>
<div class="post-reply-form">
<textarea rows="3" placeholder="Write your reply
here..."></textarea>
<button type="submit">Post Reply</button>
</div>
</div>
</section>

<section id="resources">
<h2>Resources</h2>
<div class="resources-container" id="resource1">
<h3>Recommended Books</h3>
<ul>
<li><a href="https://www.amazon.com/Responsive-Web-Design-
Book/dp/0134191916" target="_blank">Responsive Web Design by Ethan
Marcotte</a></li>

9|Page
<li><a href="https://www.amazon.com/HTML-CSS-Design-Build-
Websites/dp/1118008189" target="_blank">HTML and CSS: Design and Build
Websites by Jon Duckett</a></li>
</ul>
</div>
<div class="resources-container" id="resource2">
<h3>Useful Links</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-
US/docs/Learn/CSS" target="_blank">MDN Web Docs - CSS</a></li>
<li><a href="https://www.w3schools.com/css/"
target="_blank">W3Schools - CSS</a></li>
</ul>
</div>
</section>
</main>

<footer>
<p>&copy; 2024 Educational Platform</p>
</footer>
</body>
</html>

10 | P a g e
OUTPUT:

11 | P a g e
12 | P a g e
13 | P a g e

You might also like