Scribd
Upload
4 views4 pages

u25task

The document is an HTML template for a resume showcasing a web developer named Arjun Singh. It includes sections for personal information, education, experience, skills, projects, and contact details. The design features a sidebar for social media links and a main content area for the resume information.

Uploaded by

arjunrawat66667
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views4 pages

u25task

The document is an HTML template for a resume showcasing a web developer named Arjun Singh. It includes sections for personal information, education, experience, skills, projects, and contact details. The design features a sidebar for social media links and a main content area for the resume information.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Resume | e/curransam07</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}

body {
background-color: #f4f4f4;
color: #1e1e1e;
display: flex;
height: 100vh;
overflow: hidden;
}

.sidebar {
width: 35%;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
}

.logo {
width: 180px;
height: auto;
border-radius: 50%;
margin-top: 2rem;
object-fit: cover;
}

#u25logo {
height: 40px;
margin-right: 25pc;
border-radius: 15px;
}

.username {
text-align: center;
margin-top: 40px;
}

.username h1 {
font-size: 1.8rem;
font-weight: 700;
}

.username p {
margin-top: 0.5rem;
letter-spacing: 2px;
color: #555;
}

.socials {
margin-top: auto;
padding-bottom: 3rem;
display: flex;
gap: 20px;
}

.socials svg {
width: 24px;
height: 24px;
fill: #333;
cursor: pointer;
transition: fill 0.3s;
}

.socials svg:hover {
fill: #0077b5;
/* Change on hover (LinkedIn blue by default) */
}

.content {
flex: 1;
padding: 4rem;
overflow: hidden;
}

.content h1 {
font-size: 3rem;
font-weight: 700;
}

.content .subtitle {
font-size: 1.25rem;
margin-top: 1rem;
color: #666;
}

.resume {
margin-top: 2rem;
background: #fff;
padding: 1.5rem;
border-radius: 8px;
height: calc(100vh - 12rem);
/* Fits on one page */
overflow: hidden;
}

.resume h2 {
margin-top: 1rem;
color: #222;
}
.resume p {
margin: 0.5rem 0;
color: #444;
}
</style>
</head>

<body>
<div class="sidebar">
<p1><img src="C:\Users\rawat\Desktop\WhatsApp Image 2025-05-09 at
16.56.38_8ab5e1e7.jpg" id="u25logo"></p1>
<p2 style=" margin: -34px 13pc 14px 0px;
font-weight: bold;">e/curransam07</p2>

<img src="C:\Users\rawat\Desktop\WhatsApp Image 2025-05-09 at


17.03.12_f05a9dc0.jpg" alt="Profile" class="logo">

<div class="username">
<h1>Arjun Singh</h1>
<p>Web Developer</p>
</div>

<div class="socials">
<!-- Facebook -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M22.675 0H1.325C.593 0 0 .593 0 1.326v21.348C0 23.407.593 24
1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.658-4.788 1.325
0 2.463.099 2.794.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795
1.763v2.312h3.587l-.467 3.622h-3.12V24h6.116C23.407 24 24 23.407 24 22.674V1.326C24
.593 23.407 0 22.675 0z" />
</svg>

<!-- Instagram -->


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.354
3.608 1.33.975.976 1.268 2.243 1.33 3.608.058 1.267.069 1.647.069 4.851s-.011
3.584-.069 4.851c-.062 1.366-.355 2.633-1.33 3.608-.976.975-2.243 1.268-3.608 1.33-
1.267.058-1.647.069-4.851.069s-3.584-.011-4.851-.069c-1.366-.062-2.633-.355-3.608-
1.33-.975-.976-1.268-2.243-1.33-3.608C2.175 15.647 2.163 15.267 2.163 12s.012-
3.584.07-4.851c.062-1.366.355-2.633 1.33-3.608.976-.975 2.243-1.268 3.608-
1.33C8.416 2.175 8.796 2.163 12 2.163zM12 5.838a6.162 6.162 0 1 0 0 12.324A6.162
6.162 0 0 0 12 5.838zm6.406-1.757a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-
2.88z" />
</svg>

<!-- LinkedIn -->


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M22.23 0H1.77C.79 0 0 .774 0 1.728v20.543C0 23.227.79 24
1.77 24h20.46c.98 0 1.77-.773 1.77-1.729V1.728C24 .774 23.21 0 22.23 0zM7.12
20.452H3.56V9.038h3.56v11.414zM5.34 7.577a2.063 2.063 0 1 1 0-4.125 2.063 2.063 0 0
1 0 4.125zM20.452 20.452h-3.558v-5.586c0-1.333-.026-3.047-1.86-3.047-1.863 0-2.148
1.454-2.148 2.953v5.68H9.328V9.038h3.414v1.561h.05c.475-.899 1.637-1.85 3.368-1.85
3.6 0 4.266 2.37 4.266 5.452v6.251z" />
</svg>
<!-- X (Twitter) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M22.615 0h-3.934L13.3 7.975 7.38 0H0l8.944 11.52L0
24h3.934l6.095-7.78L16.857 24H24l-9.474-12.212L22.615 0zM4.636 1.664h1.873l13.152
17.305h-1.873L4.636 1.664z" />
</svg>
</div>
</div>

<div class="content">
<h1>Hello</h1>
<p class="subtitle">Here's who I am & what I do</p>

<div class="resume">
<h2>About Me</h2>
<p>I'm a passionate web developer with a focus on frontend technologies
like HTML, CSS, and JavaScript.</p>

<h2>Education</h2>
<p>12th Board: 90.8%</p>
<p>Currently pursuing graduation.</p>

<h2>Experience</h2>
<p>Participated in multiple creative school and village outreach
projects including street plays and
awareness campaigns.</p>

<h2>Skills</h2>
<p>HTML, CSS, JavaScript, Responsive Design</p>

<h2>Projects</h2>
<p>Personal Resume Website (this project)</p>

<h2>Contact</h2>
<p>Email: arjunrawat66667@gmail.com</p>
</div>
</div>
</body>

</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy