Scribd
Upload
50 views

My Resume Code

The document contains HTML code for a college website. It includes code for headers, navigation bars, sections for notices, principal's message, and student zone. Styling is done using CSS.

Uploaded by

Nobita Kumar
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
50 views

My Resume Code

The document contains HTML code for a college website. It includes code for headers, navigation bars, sections for notices, principal's message, and student zone. Styling is done using CSS.

Uploaded by

Nobita Kumar
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/ 30

MY RESUME CODE.

<!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>my resume</title>

<style>
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}

.sec1 {
width: 290px;
height: 100vh;
border: 2px solid black;
background-color: rgb(7, 7, 56);
}

.img {
height: 200px;
width: 200px;
border-radius: 50%;
background-image: url('IMG_20240314_114204.jpg');
background-size: cover;
padding: 15px;

/* details styling */

#large {
color: white;
font-weight: 550;
font-size: 24px;
}

#big {
color: white;
font-weight: 400;
font-size: 18px;
}

#small {
color: gray;
font-weight: 400;
font-size: 14px;
}

.full {

width: 290px;
height: 100vh;
display: flex;
flex-direction: column;
margin-left: 20px;
justify-content: space-evenly;
}

.contact div {
margin-top: 6px;
}

.education div {
margin-top: 6px;
}

/* second part styling */

main {
display: flex;
align-items: center;
justify-content: center;
}

.sec2 {
width: 550px;
height: 100vh;
margin-left: 25px;
border-left: 2px solid black;
}
#name {
margin-bottom: 15px;
font-size: 45px;
font-weight: 550;
color: gray;
font-family: 'Times New Roman', Times, serif;

.container {
width: 550px;
height: 100vh;
margin-left: 20px;
display: flex;
flex-direction: column;
justify-content: space-evenly;

.exp {
font-size: 25px;
font-weight: 550;
}

ul li {
font-size: 14px;
color: rgb(35, 29, 29);
margin: 8px;
list-style-type: none;
}
</style>
</head>

<body>
<main>

<!-- first part -->


<div class="sec1">

<div class="full">
<div class="img"></div>

<!-- contact detaila -->

<div class="contact">
<p id="large">CONTACT</p>
<hr>
<div class="phone">
<p id="big">Phone</p>
<p id="small">9232257724</p>
</div>
<div class="email">
<p id="big">email</p>
<p id="small">[email protected]</p>
</div>

<div class="adress">
<p id="big">Address</p>
<p id="small">Kharagpur West bengal</p>
</div>
</div>

<!-- education details -->

<div class="education">
<p id="large">EDUCATION</p>
<hr>

<div class="ed1">
<p id="big">Christopher day school</p>
<p id="small">Higher secondary</p>
<p id="small">2021</p>
</div>

<div class="ed2">
<p id="big">BNR excellence Academy</p>
<p id="small">intermediate</p>
<p id="small">2023</p>
</div>

<div class="ed3">
<p id="big">Kharagpur college</p>
<p id="small">BCA pursuing</p>
<p id="small">2024</p>
</div>

</div>
</div>

</div>
<!-- fist part finsish -->
<div class="sec2">

<div class="container">
<div class="name">
<p id="name">V S S N N VIVEK</p>
<p style="text-align:justify;"
class="message">Hello my name is vivek and I am a student from
Kharagpur college.I am well
equiped with proper skills required for
todays job market,therfore i request you to go through
my below details and inform me according to
your convenience.

</p>
</div>

<div class="expertise">
<p class="exp">Expertise</p>
<ul>
<li>Html and CSS</li>
<li>javascript</li>
<li>java</li>
<li>python</li>
<li>c and c++</li>
<li>ui/ux</li>
</ul>
</div>

<div class="lan">
<p class="exp">Languages known</p>
<ul>
<li>English</li>
<li>Hindi</li>
<li>Telugu</li>
<li>Bengali</li>
</ul>
</div>

</div>
</div>
</main>
</body>

</html>
College website code.

HTML CODE

<!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>Kharagpur college website</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<!-- first-taskbar -->
<div class="first-task">
<ul id="nav1">
<li>Online AdmissionAnti </li>
<li>AffidavitHostel</li>
<li>Swimming Poll</li>
<li>CampusValue</li>
<li> Added Courses</li>
<li>Journal</li>
<li>»Feedback</li>
<li>»RTI System</li>
<li>Portal</li>
</ul>
</div>
<!-- kgp-label -->
<div class="label">
<div style="background-image:url(Logo.png)"
class="logo"></div>
<div class="links">
<ul>
<li>....courses</li>
<li>....students</li>
<li>....faculty</li>
<li>members</li>
</ul>
</div>
<!-- detalils -->
<div class="details">
<div class="select">

<select name="lan" id="lan">


<option value="hindi">select a language</option>
<option value="hindi">Hindi</option>
<option value="english">English</option>
<option value="french">French</option>
</select>
</div>
<div class="address">
<p id="phone">phone:9232247725</p>
<p id="add">[email protected]</p>
</div>
</div>

</div>

</div>
<!-- navbar 2 -->
<div class="nav2">
<ul>
<li>HomeCollege</li>
<li>»Administration</li>
<li>»Academic</li>
<li>»Facilities</li>
<li>»AdmissionLibraryActivities</li>
<li>»ILMS</li>
<li>»IQAC </li>
<li> »NAAC</li>
<li>Docs </li>
<li>»NIRF</li>
<li>»Cells »</li>
</ul>
</div>
<!-- hero-section -->

<div class="hero-section">
<div class="notice ">
<!-- notice board -->
<div class="board">
<p>NOTICE BOARD</p>
</div>
<div style="background-
image:url(Slider1.jpg);opacity:0.7" class="back-img">

</div>
<!-- tenders part -->
<div class="tender">
<p>ALL TENDERS</p>
</div>
<div style="background-image:url(Slider3.jpg)"
class="back-img"></div>

</div>
<!-- message and image content -->
<div class="message">

<div style="background-image:url(Slider2.jpg)"
class="hero-img"></div>
<!-- message from principal and teacher -->
<div class="principal">
<h3>FROM THE PRINCIPAL'S DESK</h3>
<p>I have been awarded the privilege of leading the
college and shall render my service to the utmost of
my capacity to ensure that the College reaches
greater heights. But for this I solicit the whole
hearted cooperation of all faculty members,
staff, students and alumni.

I believe that the College website is an


effective forum to reach out to the community at large, and
will definitely enhance communication between us
and our patrons. The College ensures a healthy
atmosphere for ... Read More »</p>
</div>

<div style="background-color:#126782;"
class="principal">
<h3>OUR COLLEGE</h3>
<p>Kharagpur College was founded on 29 August
(Monday) 1949 in the premises of the Silver Jubilee School
at Kharagpur, Puratan Bazar. soon, thereafter,
the college obtained a gift of nearly 40 bighas of
land from Mrs. Saleha Khatoon, wife of late
Nasir Ali Khan of Panchberia, Kharagpur and the
construction of college building started under
the dispersal scheme of the state Government on the
2nd day of July 1951. The functioning of the
college then started in its own building at the present
... Read More »</p>
</div>

</div>
<div class="stu-zone">
<div class="zone">
<p>STUDENT ZONE</p>
</div>
<div class="list">
<ul>
<li>Academic Calendar</li>
<li>Teaching Plan & Syllabus</li>
<li>Class Routine</li>

<li> Half & Full Free ship</li>


<li>Carrier Counselling, Training &
Placement</li>
<li>Scholarships</li>
<li> NCC</li>
<li>NSS</li>
<li>Value Added Courses</li>
<li>Game & Sports</li>
<li>Youth Parliament</li>
<li> Cultural Function & Competition</li>
<li>Students Canteen</li>
<li>Anti Ragging Cell</li>
<li>Students Grievance Cell</li>
<li>Women's Cell</li>
<li>Students Satisfaction</li>
<li>Students Feedbac</li>
<li>Mentoring</li>
<li>Students Login</li>
<li>Entrepreneurship Development Cell</li>
</div>
</div>
</div>

<!-- mid-section creation -->

<div class="mid-section">
<div class="big-box">
<div class="box box1">
<p id="det1">98</p>

<p id="det2">Number of departments</p>


</div>

<div style="background-color:#008888;" class="box box1">


<p id="det1">113</p>

<p id="det2">Number of students</p>


</div>
<div style="background-color:#52c242;" class="box box1">
<p id="det1">254</p>

<p id="det2">Number of teachers</p>


</div>

<div style="background-color:#009254;" class="box box1">


<p id="det1">2554</p>

<p id="det2">Number of books</p>


</div>
</div>
</div>
<!-- end-section-screation -->
<div class="end-section">
<div class="holder1">
<div class="head">
<p>Useful links of college</p>
</div>
<div class="h-links">
<ul>
<li>Vidyasagar University (VU)</li>
<li>University of Grant Commission (UGc)</li>
<li>West Bengal Higher Education (WBHE)</li>
<li> Ministry of Human Resource Development
(MHRD)</li>
<li>National Assessment and Accreditation
Council (NAAC)</li>
<li>All India Council for Technical Education
(AICTE)</li>
<li>West Bengal College Teachers (Security of
Service) Act, 1975.</li>
<li>West Bengal Service Rule Vol. I</li>
<li>West Bengal Service Rule Vol. II</li>
<li>Netaji Subhas Open University (NSOU)</li>
</ul>

</div>
</div>
<!-- holder2 -->
<div class="holder1">
<div class="head">
<p>Our Location</p>
</div>
<div class="h-links">
</div>
</div>

<!-- holder3 -->

<div class="holder1">
<div class="head">
<p>Important links</p>
</div>
<div class="h-links">
<ul>
<li>Other Imp. State Universities</li>
<li>Department of Science and Technology
(DST)</li>
<li>Indian Council of Social Science Research
(ICSSR)</li>
<li>National Programme on Technology Enhanced
Learning (NPTEL)</li>
<li>Department of Planning and Statistics (Govt.
of WB)</li>

<li>West Bengal College Service Commission


(WBCSC)</li>
<li>UGC-CARE</li>
<li>Sodhganga</li>
<li>CSIR NTA NET</li>
<li>UGC NTA NET</li>
</ul>

</div>
</div>
</div>

<!-- conclusion -->

<div class="conclusion">
<p>Copyright 2024: <a id="ref"
href="http://www.kharagpurcollege.ac.in/#">Kharagpur college</a>.
All Rights Reserved.</p>
<p>Designed & Maintained by: <a id="ref" href="#">Creative
Mart Technology</a></p>
</div>
</body>

</html>
CSS CODE

*{
margin:0;
padding:0;
border:box-border;
font-family:Arial, Helvetica, sans-serif;
/* background-color:#005878; */
}
.first-task{
height:35px;
background-color:#5465ff;

}
#nav1 li{
display:inline-block;
padding-top:7px;
color:white;

}
#nav1{
display:flex;

justify-content:center;
justify-content:space-evenly;

/*logo-details*/
.label{
height:129px;
background-color:black;
display:flex;
align-items:center;
justify-content:center;
justify-content:space-between;
padding:0px 25px;

}
.logo{
background-size:cover;
height:87px;
width:474px;

}
.links{
height:100px;
width:140px;
background-color:#21c6ff;
border-radius:10px;
color:white;

}
.links ul{

padding:20px;
list-style-type: none;
}
.select #lan
{
height:50px;
width:150px;
color:black;
border-radius:10px;
font-size:14px;

}
.address{
color:white;
font-weight:600;
font-size:12px;
}
.address p{
margin:5px;
}
/* navbar2 */
.nav2
{
height:35px;
background-color:#5465ff;

}
.nav2 li
{
display:inline-block;
}
.nav2 ul
{
display:flex;
align-items:center;
justify-content:center;
justify-content:space-evenly;
padding-top:5px;
color:white;
}
/* hero-section creation */
.hero-section
{
padding-top:20px;
height:800px;
display:flex;
justify-content:space-evenly;
flex-wrap:wrap;

background-color:#005878;
}
/* notice */
.notice
{
height:750px;
width:290px;
/* border:2px solid black; */
display:flex;
flex-direction: column;
/* justify-content:space-between; */

}
/* inner notice */
.board
{
width:290px;
height:40px;
color:white;
background-color:#850505;
text-align:center;
display:flex;
justify-content:center;
align-items:center;

}
.board p
{
width:160px;height:20px;
border:2px solid black;
box-shadow:inset 2px 3px 4px black;

}
.tender
{
width:290px;
height:40px;
color:white;
background-color:#850505;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}
.tender p
{
width:160px;height:20px;
border:2px solid black;
box-shadow:inset 2px 3px 4px black;

/* image and notice */


.back-img
{
margin-top:0;
background-size:cover;

height:320px;
border:4px;
border-style:groove;
border:2px solid rgb(118, 109, 109);
box-shadow:2px 3px 5px grey;
}
.back-img p
{
font-size:12px;
color:white;
font-weight:700;
}
.note{
opacity:1;
}

/* message and image conternt */


.message
{
height:750px;
width:695px;
/* border:2px solid black; */
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
}
/* principal */
.principal
{
width:320px;
height:350px;
/* border:2px solid black; */
background-color:#0a4c65;
margin:5px;
padding:0 5px;
color:white;
font-weight:600;
box-shadow: 0px 0px 6px 3px #076e99;

}
.principal h3{
padding:15px;
}
.principal p{
padding:15px;

/* hero-image */
.hero-img
{
background-size:cover;
height:380px;
width:695px;
/* border:2px solid black; */

}
/* student zone creations */
.zone
{
width:320px;
height:40px;
color:white;
background-color:#850505;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}
.zone p
{
width:160px;height:20px;
border:2px solid black;
box-shadow:inset 2px 3px 4px black;

}
/* student-zone creation */

.list li
{
width:320px;
height:25px;
border:2.5px solid grey;
text-align:center;
font-size:14px;
padding-top:1.5px;
color:white;
font-weight:500;
list-style-type:none;
margin:5px;
margin-left:0;

/* mid-section creation */

.mid-section
{
background-color:#005878;
height:210px;
}
.big-box
{
height:170px;
border:5px solid red;
display:flex;
align-items:center;
justify-content:center;
justify-content:space-evenly;
}
.box1
{
height:160px;
width:190px;
/* border:2px solid black; */
background-color:#FFD81B;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:10px;
}
#det1
{
color:white;
font-weight:500;

font-size:55px;
margin-bottom:25px;
}
#det2
{
color:white;
font-weight:500;

font-size:22px;
padding-left:32px;
}

/* end-section creation */
.end-section
{
height:400px;
background-color:#004646;
/* border:2px solid black; */
display:flex;
justify-content:space-between;
}
/* first holder */
.holder1
{
height:380px;
width:31%;
border:5px solid red;
display:flex;
align-items: center;
justify-content:center;
flex-direction:column;

}
.head
{
height:50px;
width:280px;
background-color:#d9e2bc;
border:2px solid black;
display:flex;
align-items:center;
justify-content:center;
border-radius: 5px;
border: #cd7929 3px solid;
margin-bottom:40px;
}
.head p
{
font-size:20px;
font-weight:500;

.h-links li
{
color:#fdc523;
font-size:12px;
list-style-type:disc;
margin:10px;
}

/* conclusion-creation */

.conclusion
{
height:95px;
background-color:black;
border:4px solid red;
color:white;
font-weight:600;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
.conclusion p{
margin:5px;
}
.conclusion #ref
{
color:rgb(70, 191, 232);
text-decoration:none;
}
MY HOME TOWN WEBSITE CODE

<!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>KHARAGPUR HOME TOWN</title>
<link rel="stylesheet" href="styles.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

.nav1 {
height: 50px;
background-color: #CAFE48;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-evenly;
}

li {
display: inline-block;
color: black;
font-weight: 500;
padding: 8px;
margin: 5px;
font-size: 14px;
border: 2px solid blueviolet;
border-radius: 5px;

.nav2 {
height: 45px;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
font-family: cursive;
}

/* hero-section creation */

.hero-section {
background-image: url("back22.webp");
background-size: cover;
height: 628px;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-evenly;
background-color: rgb(174, 174, 174);

background-blend-mode: multiply;

.container {
display: flex;
justify-content: center;
align-items: center;
justify-content: space-evenly;
}

/* BOX STYLE */
.box {
width: 300px;
height: 400px;
/* border:2px solid black; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: space-evenly;
}

.box p {
height: 50px;
width: 290px;
background-color: black;
border-radius: 7px;
text-align: center;
padding-top: 14px;
color: white;
font-weight: 550;
font-family: cursive;
}

/* image styling */
.img1 {
background-size: cover;
height: 135px;
width: 246px;
border-radius: 10px;
}

.img2 {
background-size: cover;
height: 135px;
width: 246px;
}

.visit {
color: blueviolet;
text-align: center;
padding: 7px;
width: 200px;
background-color: white;
font-weight: 800;
border-radius: 10px;
font-family: cursive;
}

.message {
display: flex;
justify-content: center;

align-items: center;
flex-direction: column;
height: 150px;
width: 350px;
/* border: 2px solid black; */
color: white;
text-align:center;
font-weight: 650;
}

.message h3 {
font-size: 22px;
font-weight: 650;
padding-bottom: 15px;
text-align:center;
}

/* end-note creation */

.end-note
{
height:45px;
background-color:#5B618A;
font-size:18px;
color:white;
font-weight:550;
text-align:center;
padding-top:11px;
}

</style>
</head>

<body>
<div class="nav1">
<p style="color:black;font-weight:500;font-size:22px;">Explore
city!!!</p>
<ul>
<li>Travel</li>
<li>Places</li>
<li>Tours</li>
<li>Valleys</li>
<li>Waterfalls</li>
</ul>
<button
style="padding:0.75rem;border-color:blueviolet;background-
color:#CAFE48;color:black;font-weight:700;border-radius:8px;">sign
up!!!</button>
</div>
<div class="nav2">
<!-- <marquee style="font-family:cursive;" behavior=""
direction="right"> Welcome to our city:KHARAGPUR THE MINI
INDIA</marquee> -->
<p style="font-family:cursive;font-weight:400;"> Welcome to our
city:KHARAGPUR THE MINI
INDIA</p>
</div>
<!-- HERO SECTION CREATION -->
<div class="hero-section">
<div class="message">
<h3>Travel And Enjoy</h3>
<p>Travelling and Exploring should be a part of life as
it empowers us with great peace and strength to win over our
problems</p>
</div>

<div class="container">
<!-- box1 -->
<div class="box">
<p>IIT KHARAGPUR</p>
<div style="background-image:url('iit kgp.jpg')"
class="img1"></div>
<div style="background-image:url('club iit.jpg')"
class="img2"></div>
<pre class="visit">Please visit.</pre>
</div>

<!-- box2 -->


<div class="box">
<p> JAGGANATH MANDIR</p>
<div style="background-image:url('jaga 1.jpg');height: 281px;
width: 245px;filter:brightness(100%);" class="img1"></div>
<pre class="visit">Please visit.</pre>
</div>

<!-- box 3 -->

<div class="box">
<p>RAILWAY STATION</p>
<div style="background-image:url('RAIL 1.jpg');height: 143px;
width: 246px;" class="img1"></div>
<div style="background-image:url('rail 2.webp')"
class="img2"></div>
<pre class="visit">Please visit.</pre>
</div>
</div>
</div>

<!-- footer creation -->

<div class="end-note">
<p style="font-family:cursive;">Thank you for visiting our city
website.I wish it helped you in exploring and gathering good knowledge about
different tourist places in our city.</p>
</div>
</body>

</html>

You might also like