Scribd
Upload
10 views

Internshala

The document is an HTML template for a website resembling Internshala, featuring a navigation bar, a search form, a carousel for images, and sections for internships, popular cities, categories, and online trainings. It includes links for job applications, registrations, and various training programs, as well as a footer with additional resources. The layout is designed using Bootstrap for responsive design.

Uploaded by

kuldeep.233234109
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

Internshala

The document is an HTML template for a website resembling Internshala, featuring a navigation bar, a search form, a carousel for images, and sections for internships, popular cities, categories, and online trainings. It includes links for job applications, registrations, and various training programs, as well as a footer with additional resources. The layout is designed using Bootstrap for responsive design.

Uploaded by

kuldeep.233234109
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

HTML:-

HTML:-

<!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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">

<title>Internshala Clone</title>

<link rel="stylesheet" href="./styles.css">

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light">

<div class="container-fluid">

<a class="navbar-brand" href="#"><img


src="https://internshala.com/static/images/common/new_internshala_logo.svg" alt="logo"></a>

<button class="navbar-toggler collapsed navbar-left" type="button" data-bs-toggle="collapse"


data-bs-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 me-auto mb-2 mb-lg-0">

<li class="nav-item">

<a class="nav-link active" aria-current="page" href="#">Internships</a>

</li>

<li class="nav-item dropdown">


<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-
bs-toggle="dropdown" aria-expanded="false">

Online trainings <span>CONTEST</span>

</a>

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><hr class="dropdown-divider"></li>

<li><a class="dropdown-item" href="#">Something else here</a></li>

</ul>

</li>

<li class="nav-item">

<a class="nav-link active" aria-current="page" href="#">Fresher jobs</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><button type="button" class="btn btn-outline-


primary">Login</button></a>

</li>

<li class="nav-item dropdown">

<a id="Reg_button" class="nav-link dropdown-toggle" href="#" id="navbarDropdown"


role="button" data-bs-toggle="dropdown" aria-expanded="false">

Register

</a>

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a class="dropdown-item" href="#">As a student</a></li>

<li><a class="dropdown-item" href="#">As an employer</a></li>

</ul>

</li>

</ul>

</div>

</div>

</nav>
<form class="d-flex">

<input class="form-control me-2" type="search" placeholder="What are you looking for" aria-
label="Search">

<button class="btn btn-outline-success" type="submit"><img src="./assets/other/white-search-


icon-png-19.jpg" alt="search"></button>

</form>

<div class="container">

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">

<div class="carousel-indicators">

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"


class="active" aria-current="true" aria-label="Slide 1"></button>

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-


label="Slide 2"></button>

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-


label="Slide 3"></button>

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-


label="Slide 4"></button>

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-


label="Slide 5"></button>

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-


label="Slide 1"></button>

</div>

<div class="carousel-inner">

<div class="carousel-item">

<img src="./assets/carousel/img1.png" class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="./assets/carousel/img2.png" class="d-block w-100" alt="...">

</div>

<div class="carousel-item active">

<img src="./assets/carousel/img3.png" class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="./assets/carousel/img4.png" class="d-block w-100" alt="...">


</div>

<div class="carousel-item">

<img src="./assets/carousel/img5.png" class="d-block w-100" alt="...">

</div>

</div>

<button class="carousel-control-prev" type="button" data-bs-


target="#carouselExampleIndicators" data-bs-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="visually-hidden">Previous</span>

</button>

<button class="carousel-control-next" type="button" data-bs-


target="#carouselExampleIndicators" data-bs-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="visually-hidden">Next</span>

</button>

</div>

<h2>Internships</h2>

<div class="container">

<div class="row">

<div class="col">

<p>Apply to 10,000+ internships for free</p>

</div>

<div class="col">

<span>View all internsips <span>&#10132;</span></span>

</div>

</div>

</div>

<h4>Popular cities</h4>

<div class="cities">

<a class="cityitem" href="#">

<div class="cityimage">
<img src="./assets/city/work_from_home.svg" alt="">

</div>

<div class="citytext">

Work from home

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/city/delhi_ncr.svg" alt="">

</div>

<div class="citytext">

Delhi/NCR

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/city/bangalore.svg" alt="">

</div>

<div class="citytext">

Banglore

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/city/mumbai.svg" alt="">

</div>

<div class="citytext">

Mumbai

</div>

</a>

<a class="cityitem" href="#">


<div class="cityimage">

<img src="./assets/city/hyderabad.svg" alt="">

</div>

<div class="citytext">

Hyderabad

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/city/chennai.svg" alt="">

</div>

<div class="citytext">

Chennai

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/city/kolkata.svg" alt="">

</div>

<div class="citytext">

Kolkata

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/city/international.svg" alt="">

</div>

<div class="citytext">

International

</div>

</a>
</div>

<h4>Popular categories</h4>

<div class="cities">

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/categories/part_time.svg" alt="">

</div>

<div class="citytext">

Part-time

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/categories/engineering.svg" alt="">

</div>

<div class="citytext">

Engineering

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/categories/ngo.svg" alt="">

</div>

<div class="citytext">

NGO

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/categories/mba.svg" alt="">

</div>
<div class="citytext">

MBA

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/categories/design.svg" alt="">

</div>

<div class="citytext">

Design

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/categories/science.svg" alt="">

</div>

<div class="citytext">

Science

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/categories/media.svg" alt="">

</div>

<div class="citytext">

Media

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/categories/humanities.svg" alt="">


</div>

<div class="citytext">

Humanities

</div>

</a>

</div>

<h2 id="itrain">Internshala Trainings</h2>

<div class="row">

<div class="col">

<p>Learn new-age skills on the go</p>

</div>

<div class="col">

<span>View all trainings <span>&#10132;</span></span>

</div>

</div>

<div class="cities">

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/trainings/programming_with_python.svg" alt="">

</div>

<div class="citytext">

Programming <br> with Python

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/trainings/digital_marketing.svg" alt="">

</div>

<div class="citytext">

Digital <br> Marketing

</div>
</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/trainings/web_development.svg" alt="">

</div>

<div class="citytext">

Web <br> Development

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/trainings/machine_learning.svg" alt="">

</div>

<div class="citytext">

Machine <br> Learning

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/trainings/advanced_excel.svg" alt="">

</div>

<div class="citytext">

Advanced Excel

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/trainings/ethical_hacking.svg" alt="">

</div>

<div class="citytext">

Ethical Hacking
</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/trainings/autocad.svg" alt="">

</div>

<div class="citytext">

AUTOCAD

</div>

</a>

<a class="cityitem" href="#">

<div class="cityimage">

<img src="./assets/trainings/creative_writing.svg" alt="">

</div>

<div class="citytext">

Creative Writing

</div>

</a>

</div>

<p id="more">& 52 more...</p>

<h2 id="fjobs">Fresher Jobs <span>New</span></h2>

<div class="row">

<div class="col">

<p>Premium fresher jobs on your fingertips</p>

</div>

<div class="col">

<span>View all jobs <span>&#10132;</span></span>

</div>

</div>

<div class="cities1">
<a class="cityitem1" href="#">

<div class="cityimage1">

<img src="./assets/Jobs/ctc.svg" alt="">

</div>

<div class="citytext1">

Minimum CTC of 3 LPA

</div>

</a>

<a class="cityitem1" href="#">

<div class="cityimage1">

<img src="./assets/Jobs/dream.svg" alt="">

</div>

<div class="citytext1">

Dream companies

</div>

</a>

<a class="cityitem1" href="#">

<div class="cityimage1">

<img src="./assets/Jobs/verified.svg" alt="">

</div>

<div class="citytext1">

100% verified jobs

</div>

</a>

</div>

</div>

<footer id="foo" class="container-fluid">

<div class="foocon">

<div class="foocol">

<div class="foolist">

<h5>Internships by places</h5>
<div class="listitm"><a href="">Internship in India</a></div>

<div class="listitm"><a href="">Internship in Delhi</a></div>

<div class="listitm"><a href="">Internship in Bangalore</a></div>

<div class="listitm"><a href="">Internship in Hyderabad</a></div>

<div class="listitm"><a href="">Internship in Mumbai</a></div>

<div class="listitm"><a href="">Internship in Chennai</a></div>

<div class="listitm"><a href="">Internship in Gurgaon</a></div>

<div class="listitm"><a href="">Internship in Kolkata</a></div>

<div class="listitm"><a href="">Virtual Internship</a></div>

</div>

</div>

<div class="foocol">

<div class="foolist">

<h5>Internship by Stream</h5>

<div class="listitm"><a href="">Computer Science Internship</a></div>

<div class="listitm"><a href="">Electronics Internship</a></div>

<div class="listitm"><a href="">Mechanical Internship</a></div>

<div class="listitm"><a href="">Civil Internship</a></div>

<div class="listitm"><a href="">Marketing Internship</a></div>

<div class="listitm"><a href="">Chemical Internship</a></div>

<div class="listitm"><a href="">Finance Internship</a></div>

<div class="listitm"><a href="">Summer Research Fellowship</a></div>

<div class="listitm"><a href="">Campus Ambassador Program</a></div>

</div>

</div>

<div class="foocol">

<div class="foolist">

<h5>Online Trainings <span>CONTEST</span></h5>

<div class="listitm"><a href="">Programming with Python</a></div>

<div class="listitm"><a href="">Digital Marketing</a></div>

<div class="listitm"><a href="">Web Development</a></div>


<div class="listitm"><a href="">Machine Learning</a></div>

<div class="listitm"><a href="">Advanced Excel</a></div>

<div class="listitm"><a href="">Ethical Hacking

</a></div>

<div class="listitm"><a href="">AutoCAD</a></div>

<div class="listitm"><a href="">Creative Writing</a></div>

</div>

<div class="listitm"><a href="">Data Science</a></div>

</div>

<div class="foocol">

<div class="foolist">

<h5>About Internshala</h5>

<div class="listitm"><a href="">About us</a></div>

<div class="listitm"><a href="">We're hiring</a></div>

<div class="listitm"><a href="">

Hire interns for your company</a></div>

<div class="listitm"><a href="">Team Diary</a></div>

<div class="listitm"><a href="">Blog</a></div>

<div class="listitm"><a href="">Our Services</a></div>

<div class="listitm"><a href="">Terms & Conditions</a></div>

<div class="listitm"><a href="">Privacy</a></div>

<div class="listitm"><a href="">Contact us</a></div>

</div>

</div>

</div>

<div class="foo2">

<a href="https://play.google.com/store/apps/details?
id=com.internshala.app&referrer=utm_source%3Dplay_footer">

<div class="andlistitm">

<img src="./assets/socials/icons8-google-play.svg" alt="">

<span>Get Android App</span>


</div>

</a>

<div class="socialsbox">

<a href="#"><img class="socimg" src="./assets/socials/icons8-instagram-logo.svg" alt=""></a>

<a href="#"><img class="socimg" src="./assets/socials/icons8-twitter.svg" alt=""></a>

<a href="#"><img class="socimg" src="./assets/socials/youtube.png" alt=""></a>

<a href="#"><img class="socimg" src="./assets/socials/icons8-linkedin-2.svg" alt=""></a>

</div>

<div class="cp">

This is a Internshala clone.

</div>

</div>

<br>

<br>

<div id="me">Made by <a href="https://github.com/code-reaper08">code-reaper08</a></div>

<br>

<br>

</footer>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

</body>

</html>

CSS:-\

.navbar-brand {

margin-left: 200px;

padding-top: 10px;

padding-bottom: 20px;

.navbar-expand-lg .navbar-collapse {
display: flex!important;

flex-basis: auto;

align-content: flex-end;

justify-content: flex-end;

align-items: flex-end;

flex-wrap: wrap;

flex-direction: column;

/* margin-right: 200px; */

font-family: sans-serif;

font-weight: bold;

/* font-size: large; */

padding-left: 10px;

padding-right: 150px;

font-size: medium;

.navbar-left {

float: left;

margin-left: 15px;

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {

color:#008BDC;

#active_always{

color: #008BDC;

.dropdown, .dropend, .dropstart, .dropup {

position: relative;

margin-right: 20px;

padding-left: 20px;

}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled),
button:not(:disabled) {

cursor: pointer;

vertical-align: text-bottom;

margin-left: 20px;

padding-left: 20px;

padding-right: 20px;

.btn-outline-primary{

color:#008BDC;

background-color: transparent;

border-color: #0d6efd;

.btn-outline-primary:hover {

color: #006BC2;

background-color: transparent;

border-color: #006BC2;

box-shadow: 0 2px 4px rgba(0,0,0,.08);

.navbar-expand-lg .navbar-nav {

flex-direction: row;

margin-top: 10px;

#Reg_button {

background-color: #008BDC;

color: white;

border-radius: 5px;

width: 132px;

text-align: center;

margin-top: 5px;
}

#Reg_button:hover{

background-color: #006BC2;

color: white;

border-radius: 5px;

#navbarSupportedContent > ul > li:nth-child(1) > a{

color: rgb(0 0 0 / 55%);

#navbarSupportedContent > ul > li:nth-child(1) > a:hover{

color: #008BDC;

#navbarSupportedContent > ul > li:nth-child(3) > a{

color: rgb(0 0 0 / 55%);

#navbarSupportedContent > ul > li:nth-child(3) > a:hover{

color: #008BDC;

.d-flex {

display: flex!important;

margin-left: 537px;

margin-right: 400px;

margin-top: 30px;

margin-bottom: 30px;

.me-2 {

margin-right: .5rem!important;

height: 55px;

width: 500px;

.form-control:focus {
color: #212529;

background-color: #fff;

border-color: #ffffff;

outline: 0;

box-shadow: 0 0 0 .25rem rgba(151, 151, 151, 0.25);

.btn-outline-success{

color: #fff;

background-color: #008BDC;

border-color: #008BDC;

.btn-outline-success:hover {

color: #fff;

background-color: #006BC2;

border-color: #006BC2;

body > form > button > img {

width: 27px;

body > div > h2 {

margin-top: 50px;

body > div > div.container > div > div:nth-child(1) > p{

font-size: x-large;

font-weight: 400;

opacity: 90%;

/* margin-top: 20px; */

margin-bottom: 47px;

body > div > div.container {

margin-left: -14px;
margin-top: 15px;

body > div > div.container > div > div:nth-child(2) > span {

font-weight: 400;

font-weight: bolder;

font-size: larger;

color: #008BDC;

body > div > div.container > div > div:nth-child(2){

text-align: right;

body > div > div.d-flex.justify-content-between{

display: flex!important;

/* margin-left: 537px; */

margin-right: 400px;

margin-top: 30px;

margin-bottom: 30px;

p-2 bd-highlight {

margin-right: 50px;

margin-top: 34px;

.cities {

display: flex;

flex-direction: row;

justify-content: space-between;

margin-top: 27px;

.cityitem{

display: flex;

border-radius: 6px;
padding: 16px 4px 24px;

flex-direction: column;

align-items: center;

border-radius: 6px;

text-decoration: none;

font-family: sans-serif;

font-size: 19px;

font-weight: 500;

color: #212529;

.cityitem:hover{

display: flex;

padding: 16px 4px 24px;

border-radius: 6px;

flex-direction: column;

align-items: center;

border-radius: 6px;

text-decoration: none;

font-family: sans-serif;

font-size: 19px;

font-weight: 500;

color: #006BC2;

box-shadow: 0 2px 8px rgb(0 0 0 / 12%);

.citytext{

padding-top: inherit;

text-align: center;

body > div > h4 {

font-size: 22px;

}
body > div > h4:nth-child(6) {

margin-top: 27px;

#itrain{

margin-top: 100px;

body > div > div.row > div:nth-child(2){

text-align: right;

body > div > div.row > div:nth-child(2) > span {

font-weight: 400;

font-weight: bolder;

font-size: larger;

color: #008BDC;

body > div > div.row > div:nth-child(1) > p {

font-size: x-large;

font-weight: 400;

opacity: 90%;

/* margin-top: 20px; */

margin-bottom: 47px;

body > div > div.row {

margin-top: 30px;

body > div > div:nth-child(10){

display: flex;

flex-direction: row;

justify-content: space-between;

#more{
text-align: center;

margin-top: 30px;

#fjobs {

margin-top: 100px;

#fjobs > span {

background-color: #FF8C00;

border-radius: 3px;

font-size: 23px;

padding-right: 30px;

padding-left: 30px;

color: white;

width: 61px;

padding-top: 2px;

padding-bottom: 2px;

.cities1{

display: flex;

flex-direction: row;

justify-content: center;

margin-top: 27px;

body > div > div.cities1 > a:nth-child(2){

margin-right: 220px;

margin-left: 220px;

.cityitem1{

display: flex;

border-radius: 6px;

padding: 16px 4px 24px;


flex-direction: column;

align-items: center;

border-radius: 6px;

text-decoration: none;

font-family: sans-serif;

font-size: 19px;

font-weight: 500;

color: #212529;

.cityitem1:hover{

display: flex;

border-radius: 6px;

padding: 16px 4px 24px;

flex-direction: column;

align-items: center;

border-radius: 6px;

text-decoration: none;

font-family: sans-serif;

font-size: 19px;

font-weight: 500;

color: #212529;

.citytext1{

padding-top: inherit;

text-align: center;

font-weight: bold;

color: darkslategray;

body > nav {

box-shadow: 0 1px 3px 0 rgb(0 0 0 / 15%);

}
#foo {

background-color: #333;

margin-top: 100px;

text-align: center;

color: white;

.foocon{

margin-top: 40px;

margin-bottom: 16px;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

justify-content: space-between;

text-align: left;

padding-top: 40px;

padding-left: 150px;

padding-right: 150px;

.listitm > a{

text-decoration: none;

color: white;

.foolist > h5 {

font-size: large;

.listitm {

padding-top: 5px;

.foo2 {

border-top: 1px solid #666;


padding-top: 24px;

padding-bottom: 40px;

margin-left: 150px;

margin-right: 150px;

#foo > div.foo2 > a {

font-weight: 500;

text-decoration: none;

color: #008BDC;

cursor: pointer;

line-height: 1.14285714;

#foo > div.foo2 > a > div {

display: inline-block;

color: #fff;

margin-right: 32px;

border: 1px solid #fff;

padding: 8px 12px;

border-radius: 4px;

float: left;

#foo > div.foo2 > a > div > span {

position: relative;

bottom: 6px;

vertical-align: bottom;

#foo > div.foo2 > a > div > img {

width: 24px;

.socialsbox {

display: inline-block;
float: left;

padding: 9px 0;

#foo > div.foo2 > div > a:nth-child(3) > img {

width: 40px;

.socimg {

padding-right: 15px;

.cp{

display: inline-block;

float: right;

padding: 9px 0;

#foo > div.foocon > div:nth-child(3) > div.foolist > h5 > span {

background-color: #FF8C00;

color: #fff;

border-radius: 4px;

font-weight: 500;

font-size: 12px;

padding: 3px 6px;

margin-left: 6px;

letter-spacing: .5px;

padding: 3px;

margin-left: 4px;

#navbarDropdown > span {

background-color: #FF8C00;

color: #fff;

border-radius: 4px;

font-weight: 500;
font-size: 12px;

padding: 3px 6px;

margin-left: 6px;

letter-spacing: .5px;

#foo > div > a {

text-decoration: none;

font-size: large;

color: darkgoldenrod;

#me {

background-color: black;

padding: 10px 10px 10px 10px;

border-radius: 20px;

box-shadow: 0px 0px 20px 5px black;

width: fit-content;

margin-left: 652px;

You might also like