PB - 03 - Mehul - Pansari - WTL Lab Assignment 1

Name: Mehul Pansari
Batch: B1
Roll Num: PB-03
Panel: B
PRN: 1032190041
WTL LAB ASSIGNMENT 1:
CODE:
Index.html(Code)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar background h-nav-resp">
<ul class="nav-list v-class-resp">
<div class="logo"><img src="3d.png" alt="logo"></div>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
<div class="rightNav v-class-resp">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
</div>
<div class="burger">
<div class="line"></div>
</div>
</nav>
<section class="background firstsection">
<div class="box-main">
<div class="firsthalf">
<p class="text-big">MIT WPU, World Peace University</p>

<p class="text-big-small">
<span class="text-bold">
NAME:
</span> Mehul Pansari
</p>
PANEL:
</span> B
</p>
BATCH:
</span> B1
</p>
ROLL NUM:
</span> PB-03
</p>
PRN:
</span> 1032190041
</p>
<div class="buttons">
<button class="btn"> Suscribe</button>
<button class="btn"> Play</button>
</div>
</div>
<div class="secondhalf">
<img src="3d.png" alt="">
</div>
</div>
</section>
<section class="section">
<div class="paras">
<p class="sectionTag text-big">Lorem ipsum dolor, sit amet consectetur
adipisicing elit.</p>
<p class="sectionSubTag text-small">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Natus
repellendus excepturi tempora, sit maiores placeat distinctio error dolore
vel deserunt at, ipsam ab in
unde itaque iusto qui aspernatur, consequatur voluptate debitis. Iusto in
molestias error eaque maiores. Perferendis quae nesciunt, et praesentium
suscipit dolorem nihil
provident temporibus at error alias modi ad. Quidem quisquam laborum
repellat praesentium quam nesciunt
quae dignissimos animi, nemo ad ab
doloribus laboriosam. Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Reiciendis praesentium
sed quasi ex necessitatibus, quibusdam nam dolor commodi ea atque in est
laudantium, provident sequi
nihil consequatur saepe? Cum dolores
eius accusamus eaque aut inventore maxime at, commodi qui quibusdam libero
vero, deserunt dolorem
corporis, voluptates culpa nisi! Saepe, placeat debitis, minus tempora
magnam fugiat voluptatibus quos
aliquam ad neque pariatur dolor vero
molestiae dicta, quisquam perferendis vel deserunt aliquid nobis. Quo modi
eveniet repudiandae
cupiditate, velit dolorum id? Laudantium maxime quibusdam doloremque
quaerat, nulla architecto itaque
alias nostrum sequi voluptatem vero, error
ea. Eligendi rem corporis itaque sint quibusdam? </cumque>
</p>
</div>
<div class="thumbnail">
<img src="https://source.unsplash.com/user/erondu/900x900?mango" alt="Image"
class="imgFluid">
</div>
</section>
<section class="section left">
<div class="paras">
doloribus laboriosam cumque. Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Odit quidem autem
quaerat temporibus consectetur a qui est error, illum reprehenderit minus
nostrum id? Porro natus neque
eaque ipsam ex non, deleniti,
similique aut iusto exercitationem fugit minima explicabo beatae! Error
ratione fuga, voluptates,
praesentium odio nihil quibusdam cum aspernatur iusto, vero assumenda
similique enim eveniet labore
veniam eaque consequuntur iste! Reprehenderit
explicabo ipsum iure ratione adipisci, dolorem eveniet fugiat? Id expedita
temporibus corrupti velit
labore cum, atque doloremque vel sed! Obcaecati reiciendis tenetur deleniti
possimus iure quod tempore
delectus laudantium enim excepturi
error vero, labore ab quam, nisi, voluptates in?</p>
</div>
<img src="https://source.unsplash.com/user/erondu/900x900?apple" alt="Image"
class="imgFluid">
</div>
</section>
<section class="section">
<div class="paras">
doloribus laboriosam cumque. Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Rem quibusdam
assumenda odit distinctio voluptatem. Error mollitia aperiam itaque
obcaecati illo enim magni, qui cum
sapiente, fugit est, iusto deserunt
repellat quam corrupti perspiciatis consequuntur officia assumenda placeat
maiores dolorum nulla natus
quisquam similique. Ratione laboriosam corrupti, necessitatibus maiores
modi minus accusantium aperiam
omnis ex aliquid dolorum harum
dicta eum provident explicabo tempora corporis officia commodi recusandae
impedit natus labore. Labore
itaque sunt modi harum totam ex perspiciatis quas voluptas eveniet dolor!
Fuga velit unde, magnam nulla
saepe tenetur perferendis molestias
quidem, vel eligendi fugiat culpa obcaecati minima doloremque cum!
Consectetur! </p>
</div>
<img src="https://source.unsplash.com/user/erondu/900x900" alt="Image"
class="imgFluid">
</div>
</section>
<hr>
<section class="video">
<div class="my-video">
<div class="left-video">
<h1 class="video-head">Video</h1>
<iframe class="video-1" width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>
<div class="right-audio">
<h1 class="video-head">Audio</h1>
<figure class="audio">
<audio controls src="/media/cc0-audio/t-rex-roar.mp3">
<code>audio</code> element.
</audio>
</figure>
</div>
</div>
</section>
<section class="contact" id="contact">
<h1 class="Text-center">Contact Us</h1>
<div class="form">
<input class="form-input" type="text" name="name" id="name" placeholder="Enter
Your name">
<input class="form-input" type="text" name="phone" id="phone"
placeholder="Enter Your Phone">
<input class="form-input" type="email" name="email" id="email"
placeholder="Enter Your email">
<textarea class="form-input" name="text" id="text" cols="30" rows="10"
placeholder="Ellaborate your concern"></textarea>
<button class="btn btn-sm btn-dark">Submit</button>
</div>
</section>
<footer class="background">
<p class="text-footer">
@copyright 2021 Mehul Pansari
</p>
</footer>
<script src="js/resp.js"></script>
</body>
</html>
Styles.css (Code)
@import url('https://fonts.googleapis.com/css2?family=Goldman&display=swap');
* {
margin: 0;
padding: 0;
/* color: silver; */
}
.navbar {
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
cursor: pointer;
z-index: 10;
}
.text-big-small{
margin: 10px;
color: white;
font-size: 1.5rem;
}
.text-bold{
font-weight: bolder;
color: plum;
}
html {
scroll-behavior: smooth;
}
.nav-list {
width: 50%;
display: flex;
/* justify-content: center; */
}
.nav-list li {
list-style: none;
padding: 5px 20px;
font-weight: bolder;
font-size: 20px;
}
.nav-list li a {
text-decoration: none;
color: azure;
}
.nav-list li a:hover {
text-decoration: underline;
color: red;
}
.rightnav {
width: 50%;
text-align: right;
}
.logo {
width: 20%;
display: flex;
}
.logo img {
width: 33%;
filter: invert(100%);
}
#search {
padding: 5px;
font-size: 17px;
border: 2px solid gray;
border-radius: 10px;
outline: none;
}
.background {
background: rgba(0, 0, 0, 0.7) url('bg1.jpg');
background-size: cover;
background-blend-mode: darken;
}
.box-main {
display: flex;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 50%;
margin: auto;
height: 75%;
}
.firstsection {
height: 100vh;
}
.firsthalf {
width: 80%;
display: flex;
flex-direction: column;
}
.secondhalf {
width: 30%;
}
.secondhalf img {
width: 120%;
size: 5rem;
filter: invert(100%);
display: block;
margin: auto;
}
.text-big {
font-size: 30px;
margin-bottom: 10px;
}
.text-small {
font-size: 15px;
}
.btn {
padding: 8px 20px;
margin: 7px 0;
border: 2px solid wheat;
border-radius: 8px;
background: none;
color: white;
cursor: pointer;
outline: none;
}
btn-sm {
padding: 3px 10px;
vertical-align: middle;
}
.section {
height: 500px;
display: flex;
justify-content: space-evenly;
max-width: 80%;
margin: auto;
font-family: 'Goldman', cursive;
}
.left {
flex-direction: row-reverse;
}
.paras {
padding: 0px 65px;
}
.sectiontTag {
padding: 16px 0;
}
.sectionSubTag {
}
.thumbnail img {
width: 300px;
border: 2px solid black;
border-radius: 26px;
margin-top: 20px;
}
.contact {
background-color: rgb(243, 242, 235);
height: 34vh;
}
.btn-dark {
color: black;
border: 2px solid grey;
}
.Text-center {
text-align: center;
}
.contact {
background-color: #f6f5f4;
height: 833px;
}
.form {
max-width: 62%;
margin: 25px auto;
}
.form-input {
margin: 14px 0;
padding: 5px 13px;
width: 100%;
font-size: 19px;
border: 2px solid grey;
border-radius: 6px;
}
.text-footer {
text-align: center;
padding: 30px 0;
display: flex;
color: white;
}
.burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
}
.line {
width: 33px;
background-color: white;
height: 4px;
margin: 5px 3px;
}
.video {
margin: 10px;
text-align: center;
height: 400px;
z-index: 0;
}
.video .video-container {
width: 50%;
}
.video .audio-container {
width: 50%;
}
.my-video {
position: relative;
}
.left-video {
float: left;
width: 50%;
}
.right-audio {
float: right;
width: 50%;
}
.video-1{
margin-top: 20px;
}
figure {
margin: 0;
}
.audio{
margin: 40px;
}
.audio{
margin-top: 150px;
}
.video-head{
color: darkred;
font-size: 2rem;
}
@media only screen and (max-width: 1140px) {

.nav-list {
}
.navbar {
height: 447px;
transition: all 0.7s ease-out;
}
.rightNav {
text-align: center;
}
.box-main {
flex-direction: column-reverse;
max-width: 100%;
}
#search {
width: 100%;
}
.burger {
display: block;
}
.h-nav-resp {
height: 72px;
}
.v-class-resp {
opacity: 0;
}
.section {
flex-direction: column-reverse;
}
.text-small {
text-align: center;
}
.text-big {
text-align: center;
}
.buttons {
text-align: center;
}
.paras {
padding: 0px;
}
}
OUTPUT (SCREEN SHOTS)

chool of Computer Engineering &
Technology Class: Third Year B.Tech CSE
(Trimester VIII) Course: Web
Technologies
FAQS:
Conclusion: Hence, we have designed static web pages using HTML and CSS.
-'

PB - 03 - Mehul - Pansari - WTL Lab Assignment 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

PB - 03 - Mehul - Pansari - WTL Lab Assignment 1

Uploaded by

Copyright:

Available Formats

Name: Mehul Pansari

@media only screen and (max-width: 1140px) {

OUTPUT (SCREEN SHOTS)

You might also like