Scribd
Upload
12 views11 pages

Batch-13 - Navinvarma A - Frontend - Main Task

The document contains the HTML and CSS code for a simple YouTube-like webpage featuring a navigation bar, a video player, and a contact form. The main page includes sections for video suggestions and user interactions such as subscribing, liking, and sharing. The contact page allows users to submit their name, email, and a message.

Uploaded by

555akashsureshek
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
12 views11 pages

Batch-13 - Navinvarma A - Frontend - Main Task

The document contains the HTML and CSS code for a simple YouTube-like webpage featuring a navigation bar, a video player, and a contact form. The main page includes sections for video suggestions and user interactions such as subscribing, liking, and sharing. The contact page allows users to submit their name, email, and a message.

Uploaded by

555akashsureshek
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/ 11

Index.

html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100
;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500
;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">

<nav class="navbar-top">

<div class="youtube-div">
<img src="./ /youtube.png" class="img1">
<h1><a href="https://www.youtube.com/" class="youtube-
link">YouTube</a></h1>

</div>
<div class="outer-searchbox">
<div class="search-container">
<input type="text" class="search-box"
placeholder="Search"><img src="./images/search.png"
class="img1">
</div>
<img src="./images/microphone.png" class="img1">
</div>

<div class="icons-left">

<img src="./images/video.png" class="img1">


<img src="./images/bell.png" class="img1">
<img src="./images/user.png" class="img1">
</div>
</nav>
<nav class="container-2">

<p class="suggestions">All-Videos</p>
<p class="suggestions">Tamil Cinema</p>
<p class="suggestions">Film Ciriticisms</p>
<p class="suggestions">Music</p>
<p class="suggestions">Gaming</p>
<p class="suggestions">Apple</p>
<p class="suggestions">Computer programming</p>
<p class="suggestions">Hello</p>
<p class="suggestions">Dance</p>
<p class="suggestions">Food Vlog</p>

</nav>

<div class="outer-videobox">
<div class="video-container">
<iframe src="./videos/WhatsApp Video 2024-06-22 at
08.08.56_84608b34.mp4" title="description"
class="youtube-video"></iframe>
<div class="subscribe-1">
<div class="subscribe-1-1">

<div class="subscribe-box">
<img src="./images/Whatsapp.png" class="img2">
<div class="Subscriber_inner">
<h2>Whatsapp</h2>
<div>
<p>4.2MSubscribers</p>
</div>
</div>
</div>

<button
style="background-color:#FF0000; color: white;
border: none; padding: 15px; border-radius: 40px;"><a href="./contact.html"
style="text-decoration: none; color: white;"> Subscribe</a> </button>

<div class="like">
<img src="./images/like.png" class="img1">
<p>100K</p>
<img src="./images/dislike.png" class="img1">
</div>
<div class="share">
<img src="./images/share.png" class="img1">
<p>Share</p>
</div>
</div>
</div>

</div>
</div>

</div>

</body>

</html>

Contact.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="Style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100
;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500
;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">

</head>

<body>
<div class="container">
<div class="section-one">
<h1 class="section-one__name">Subscrib</h1>

</div>

<div class="contact-form">
<form>

<table>
<tr>
<td>Name:</td>
<td><input type="text" placeholder="Enter your Name"
class="contact-form__input"></td>
</tr>

<tr>
<td>Email:</td>
<td><input type="Email" placeholder="Enter your Mail"
class="contact-form__input"></td>
</tr>

<tr>
<td>Message:</td>
<td><textarea placeholder="Enter your Message"
cols="20" rows="10"
class="contact-
form__textarea"></textarea></td>
</tr>

<tr>
<td></td>
<td><input type="submit" class="contact-
form__submit"></td>
</tr>

</table>

</form>

<p>&copy;Navinvarma</p>

</div>
</body>

</html>
Style.css

*{

padding: 0;
margin: 0;

}
body{

background-color:white;
font-family: "Poppins", sans-serif;
align-items: center;

}
.container{

background-color: white;

.navbar-top{

display: flex;
justify-content: space-between;
color: black;
padding: 8px;
align-items: center;
background-color: white;

}
.img1{

height: 30px;
width: px;
}

.youtube-div{

display: flex;
align-items: center;
padding-left: 10px;

}
.search-box{
border-radius: 20px;
padding: 10px;
width: 100%;
border: transparent;
width: 500px;
}
.search-container{

display: flex;
align-items: center;
border: solid black 2px;
padding: 3px;
border-radius: 30px;
}
.icons-left{

display: flex;
justify-content: space-between;
gap: 50%;
margin-right: 100px;

}
.container-2{

display: flex;
justify-content: space-between;
margin: 10px;

}
.suggestions{

background-color:#0F0F0F ;
border-radius: 20px;
padding: 8px;
color:white;

.outer-searchbox{

display: flex;
align-items: center;
gap:5%;
}
.youtube-video{

height:390px;
width: 700px;
border: none;
border-radius: 20px;
}
.video-container{

margin-left: 50px;
margin-top: 30px;

.like{
display: flex;
align-items: center;
gap:4%;
border: solid black 2px;
padding: 13px;
border-radius: 30px;
width: 100px;
}
.subscribe-1-1{

display: flex;
align-items: center;
gap: 5%;
}
.sub{

background-color:#FF0000;
padding: 10px;
color: white;
border-radius: 20px;
}

.img2{

height: 100px;
width: 100px;
}

.subscribe-box{

display: flex;
align-items: center;
gap: 5%;
}
.share{

display: flex;
border: solid black 2px;
padding: 5px;
border-radius: 30px;

}
.outer-videobox{

display: flex;
justify-content: center;
}

.nav-bar-left{

width: 30%;
height: 85vh;
background-color: #0F0F0F;
}
.two-container{

display: flex;
position: relative;
}

.list{

margin-left: 100px;
margin-top: 20px;
color: white;
list-style: none;
gap: 10%;
}
.youtube-link{

text-decoration: none;
color: black;
}

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

body{

font-size: 12px;
}
}

You might also like