Calculator Tools Calculator Tools
Create

NickTube - Watch and Share Videos

Jan 4, 2024

About this app

NickTube is a video sharing platform where you can watch and share videos with your friends.

NickTube - Watch and Share Videos NickTube Search Video Title Video Description Video Title Video Description Video Title Video Description Video Title Video Description Video Title Video Description Video Title Video Description

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>NickTube - Watch and Share Videos</title>
<meta name="description" content="NickTube is a video sharing platform where you can watch and share videos with your friends.">
<meta name="keywords" content="video sharing, watch videos, share videos">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {

});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
body {
font-family: 'Roboto', sans-serif;
background-color: #f2f2f2;
}

.navbar {
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
font-size: 24px;
font-weight: bold;
color: #333333;
}

.navbar-brand span {
color: #ff0000;
}

.search-bar {
margin-top: 30px;
text-align: center;
}

.search-bar input {
width: 500px;
height: 40px;
padding: 5px;
font-size: 16px;
border: none;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
outline: none;
}

.search-bar button {
width: 100px;
height: 40px;
margin-left: 10px;
font-size: 16px;
font-weight: bold;
color: #ffffff;
background-color: #ff0000;
border: none;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
}

.video-list {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.video-card {
width: 300px;
margin: 10px;
padding: 10px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 5px;
transition: box-shadow 0.3s ease;
cursor: pointer;
}

.video-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.video-card img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 5px;
}

.video-card h3 {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
color: #333333;
}

.video-card p {
margin-top: 5px;
font-size: 14px;
color: #777777;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Nick<span>Tube</span></a>
</div>
</nav>

<div class="search-bar">
<input type="text" placeholder="Search videos...">
<button><i class="fa fa-search"></i> Search</button>
</div>

<div class="video-list">
<div class="video-card">
<img src="https://via.placeholder.com/300x180" alt="Video Thumbnail">
<h3>Video Title</h3>
<p>Video Description</p>
</div>
<div class="video-card">
<img src="https://via.placeholder.com/300x180" alt="Video Thumbnail">
<h3>Video Title</h3>
<p>Video Description</p>
</div>
<div class="video-card">
<img src="https://via.placeholder.com/300x180" alt="Video Thumbnail">
<h3>Video Title</h3>
<p>Video Description</p>
</div>
<div class="video-card">
<img src="https://via.placeholder.com/300x180" alt="Video Thumbnail">
<h3>Video Title</h3>
<p>Video Description</p>
</div>
<div class="video-card">
<img src="https://via.placeholder.com/300x180" alt="Video Thumbnail">
<h3>Video Title</h3>
<p>Video Description</p>
</div>
<div class="video-card">
<img src="https://via.placeholder.com/300x180" alt="Video Thumbnail">
<h3>Video Title</h3>
<p>Video Description</p>
</div>
</div>
</div>

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {

});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
</body>
</html>