Skip to content

Added responsive homepage website using bootstrap #62

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
AbhishekChoudhary23 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added responsive homepage website using bootstrap #62

Show file tree
Hide file tree
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
81 changes: 81 additions & 0 deletions Home_Page_Bootstrap/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>CodeBox</title>
</head>
<body>


<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">CodeBox</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>

</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Topics
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Android Development</a>
<a class="dropdown-item" href="#">DSA in c++</a>
<a class="dropdown-item" href="#">ML & AI</a>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</li>

</ul>


<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

<!-- ABOUT -->
<div class="container my-4">
<div class="row featurette d-flex justify-content-center align-items-center">
<div class="col-md-7">
<h2 class="featurette-heading">Keep yourself updated with all the tech-related stuffs <span class="text-muted">The best tech-related Blog</span></h2>
<p class="lead">Over the years, technology has revolutionized our world and daily lives. Additionally, technology for seniors has created amazing tools and resources, putting useful information at our fingertips.

Modern technology has paved the way for multi-functional devices like the smartwatch and the smartphone. Computers are increasingly faster, more portable, and higher-powered than ever before. With all of these revolutions, technology has also made our lives easier, faster, better, and more fun. Here you'lll get all the tech-related news, opportunities,information about various domains and much more.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="500x500" style="width: 500px; height: 500px;" src="https://images.unsplash.com/photo-1595895107207-44258d44837c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80" data-holder-rendered="true">
</div>
</div>
</div>
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p>© 2021-2022 CodeBox, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
84 changes: 84 additions & 0 deletions Home_Page_Bootstrap/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>

<title>Contact Us!</title>
</head>
<body>
<form>
<div class="container mx-6">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"
>Email address</label
>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
<div id="emailHelp" class="form-text">
We'll never share your email with anyone else.
</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
/>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" />
<label class="form-check-label" for="exampleCheck1"
>Remember me</label
>
</div>

<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label"
>Let us know your queries</label
>
<textarea
class="form-control"
id="exampleFormControlTextarea1"
rows="3"
></textarea>
</div>
<div class="input-group mb-3">
<button
class="btn btn-outline-secondary dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Domain that interests you
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Web development</a></li>
<li><a class="dropdown-item" href="#">App development</a></li>
<li><a class="dropdown-item" href="#">DSA</a></li>
<li><a class="dropdown-item" href="#">Data Science</a></li>
</ul>
<hr />
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
210 changes: 210 additions & 0 deletions Home_Page_Bootstrap/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>CodeBox</title>
<link rel="icon" type="image/png" sizes="32x32" href="https://img.icons8.com/ios-filled/50/000000/computer.png">
</head>
<body>


<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">CodeBox</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>

</li>
<li class="nav-item">
<a class="nav-link" href="about.html" target="blank">About</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Topics
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Android Development</a>
<a class="dropdown-item" href="#">DSA in c++</a>
<a class="dropdown-item" href="#">ML & AI</a>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact us</a>
</li>

</li>

</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
<div class="mx-2">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">Login</button>
<button type="button" class="btn btn-danger">Signup</button>
</div>
</div>
</nav>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>



<!-- CAROUSEL -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 " src="https://images.unsplash.com/photo-1544006659-f0b21884ce1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="First slide" height="550px">
<div class="carousel-caption d-none d-md-block">
<h2 style="color: rgb(255, 255, 255); ">Welcome to Codebox</h2>
<p style="color: rgb(255, 255, 255);"> Technology news, development and trends</p>
<button type="button" class="btn btn-primary">Latest technology</button>
<button type="button" class="btn btn-danger">Various Domains</button>
<button type="button" class="btn btn-success">Tech Fuh</button>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80" alt="Second slide" height="550px">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1534665482403-a909d0d97c67?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Third slide" height="550px">

</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon color-dark" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

<!-- CARDS BELOW CAROUSEL -->
<div class="container my-5">
<div class="row mb-2">
<div class="col-md-6">
<div class="card flex-md-row mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-primary">Opportunities</strong>
<h3 class="mb-0">
<a class="text-dark" href="#">Tech</a>
</h3>
<div class="mb-1 text-muted">Dec 10</div>
<p class="card-text mb-auto">The Generation Google Scholarship was established to help aspiring students pursuing computer science degrees excel in technology and become leaders in the field. Last date to apply Dec10,2021</a>
</div>
<img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" style="width: 200px; height: 250px;" src="https://images.unsplash.com/photo-1536009197840-7b923cc3e195?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" data-holder-rendered="true">
</div>
</div>
<div class="col-md-6">
<div class="card flex-md-row mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-success">Opportunities</strong>
<h3 class="mb-0">
<a class="text-dark" href="#">Google STEP</a>
</h3>
<div class="mb-1 text-muted">Dec 10</div>
<p class="card-text mb-auto">The Student Training in Engineering Program (STEP) is a 12 week program that offers students the opportunity to work on a software project with another STEP intern, along with full-time Googlers.</a>
</div>
<img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="https://images.unsplash.com/photo-1573141597928-403fcee0e056?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80" data-holder-rendered="true" style="width: 200px; height: 250px;">
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="card flex-md-row mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-primary">Tech-news</strong>
<h3 class="mb-0">
<a class="text-dark" href="#">Twitter</a>
</h3>
<div class="mb-1 text-muted">Nov 29</div>
<p class="card-text mb-auto">Indian-origin technology executive Parag Agrawal has been appointed as the new CEO of Twitter after the social media giant’s co-founder Jack Dorsey stepped down on Nove 29,2021</a>
</div>
<img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" style="width: 200px; height: 250px;" src="https://images.unsplash.com/photo-1611605698335-8b1569810432?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dHdpdHRlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" data-holder-rendered="true">
</div>
</div>
<div class="col-md-6">
<div class="card flex-md-row mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-success">Tech-news</strong>
<h3 class="mb-0">
<a class="text-dark" href="#">Top Progamming languages</a>
</h3>
<p class="card-text mb-auto">Here’s a list of the best programming languages to learn that you can pursue without giving it a second thought: C++, Java,Javascript, python and kotlin. </p>
</div>
<img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Thumbnail [200x250]" src="https://images.unsplash.com/photo-1537884944318-390069bb8665?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" data-holder-rendered="true" style="width: 200px; height: 250px;">
</div>
</div>
</div>
</div>

<!-- NEXT BOX -->
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">keep yourself ahead of the tech curve <span class="text-muted"> Awesome Free Websites, All Newbie Programmers Need to Know</span></h2>
<p class="lead">1. W3Schools:
New programmers will surely come across W3Schools at the top of the Google search. It’s popular with newbies and senior developers alike, because it offers a lot of examples and you can quickly find the answer you’re looking for.</p>
<p class="lead">2. Stack Overflow:
The community here is really fantastic, and once you get some programming experience under your belt, be sure to try and give back to the community as well. Earn some coding karma.
</p>
<p class="lead">
3.Hackerrank:
It’s good to get familiar with this one when you’re starting to have enough experience to become a Junior Developer, as many companies use HackerRank challenges in their technical tests during the hiring process.
</p>
<p class="lead">
4. Codecademy:
Codecademy is a super fun website to learn to code interactively. It’s a great place to start for the basics: do the short courses on HTML, CSS, or the website module before moving on to more programming languages
</p>
</div>
<div class="col-md-5 order-md-1">
<img class="img-fluid mx-4" src="https://images.unsplash.com/photo-1618477388954-7852f32655ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" alt=""> </div>
</div>

<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p>© 2021-2022 CodeBox, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>