Skip to content

created the achintya_videos.html webpage #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anuragnewbie wants to merge 1 commit into
base: master
Choose a base branch
from
Open

created the achintya_videos.html webpage #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 139 additions & 0 deletions HTML CSS/2021/achintya_videos_anuragnewbie.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@

<!-- NAME - ANURAG CHATTERJEE
PROJECT - ACHINTYA GAUMAT YOUTUBE VIDEOS GOOGLE SEARCH RESULTS WEBPAGE DESIGN
DATE - 02-10-2021
TECHNOLOGIES USED - HTML, CSS, BOOTSTRAP5 FRAMEWORK -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Achintya Gaumat Search Results</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
padding: 25px 0;
}
.btn{
border: 0.06rem solid #C8C8C8 !important;
}
button{
border-radius:25px !important;
width: 25vw !important;
color:blue !important;
}
#closure-text{
text-align: right;
font-weight: bold;
}
.color1{
color: blueviolet;
}
.color2, .fa-arrow-right{
color:blue;
}
#end-content{
display:flex;
align-items: center;
justify-content: center;
}
.end-line{
flex:1;
border: none;
}
.fa-arrow-right{
margin-top: 5px;
float: left;
}
h2, h5{
display:inline;
}
h2{
padding: 0 30px 0 10px;
}
hr{
color:#C8C8C8 !important;
}
.icon-color, .title, #closure-text, .end-line{
color: #989898;
}
img{
width:220px;
height:120px;
border-radius: 8px;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<i class="far fa-play-circle icon-color"></i>
<h2>Videos</h2>
<i class="fas fa-ellipsis-v ml-3 icon-color"></i>
<hr>
</div>

<section>
<div class="container">
<div class="row">
<div class="col-auto">
<img src="https://i.ytimg.com/vi/jI04zypQB0E/maxresdefault.jpg" alt="internship-video-image">
</div>
<div class="col-auto">
<h3 class="mb-4 color1">How to Get An Internship by Achintya Gaumat</h3>
<h4>YouTube <span class="title">. Twowaits</span></h4>
<h4 class="title">3 weeks ago</h4>
</div>
<hr>
</div>
<div class="row">
<div class="col-auto">
<img src="https://i.ytimg.com/vi/jI04zypQB0E/maxresdefault.jpg" alt="internship-video-image">
</div>
<div class="col-auto">
<h3 class="mb-4 color2">How to Get An Internship by Achintya Gaumat</h3>
<h4>YouTube <span class="title">. Twowaits</span></h4>
<h4 class="title">May 15, 2021</h4>
</div>
<hr>
</div>
<div class="row">
<div class="col-auto">
<img src="https://i.ytimg.com/vi/rtQIdx5vwNE/maxresdefault.jpg" alt="internship-video-image">
</div>
<div class="col-auto">
<h3 class="mb-4 color2">Make a Pro Linkedin Profile with Achintya Gaumat | Get your ...</h3>
<h4>YouTube <span class="title">. Twowaits</span></h4>
<h4 class="title">Jun 27, 2021</h4>
</div>
<hr>
</div>
<div class="row">
<div class="col-auto">
<img src="https://i.ytimg.com/vi/CGf2lACTJjg/maxresdefault.jpg?v=60ed602f" alt="internship-video-image">
</div>
<div class="col-auto mb-3">
<h3 class="mb-3 color1">Task 2 Discussion with Achintya Gaumat | Tathastu Scholar ...</h3>
<h4>YouTube <span class="title">. Twowaits</span></h4>
<h4 class="title">Jul 13, 2021</h4>
</div>
<p id="closure-text">Feedback</p>
<div id="end-content">
<hr class="end-line">
<button class="btn btn-lg"><i class="fas fa-arrow-right"></i> <h5>View all</h5></button>
<hr class="end-line">
</div>
</div>
</div>
</section>

</body>
</html>