Skip to content

Commit

Permalink
Updated Landing page to a responsive page with Enhanced UI (#35)
Browse files Browse the repository at this point in the history 
* Added Achievements Section

* Removed Achievements Description  part

* Update resumegenerator.html

Remove bold in achievements 1

* Update script.js

Remove bold in achievements preview 2

* Enhanced UI for landing Page and Made it Responsive

---------

Co-authored-by: Kishan Ved <kishan.ved@iitgn.ac.in>
  • Loading branch information
@priyamaggarwal18 @Kishan-Ved
priyamaggarwal18 and Kishan-Ved authored Oct 3, 2024
1 parent 04e62b4 commit 27a35cf
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 75 deletions.
Binary file added images/Check_ring.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/expand_right.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/generate button.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/right.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
257 changes: 182 additions & 75 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,191 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MKEW6GTMGN"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
<head>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-MKEW6GTMGN"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());

gtag('config', 'G-MKEW6GTMGN');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
/* background-color: #f4f4f4; */
background-color: rgb(150, 255, 197);
}
gtag("config", "G-MKEW6GTMGN");
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.img-5 {
width: 500px;
border-radius: 40px;
object-fit: contain;
}
.button {
display: flex;
background-color: black;
color: white;
padding: 10px;
margin: 20px;
border-radius: 10px;
}

#content {
padding: 20px;
}
.button:hover {
opacity: 0.7;
transition: all 0.6s ease;
cursor: pointer;
}
.container {
background-color: rgba(233, 230, 230, 1);
display: flex;
align-items: center;
gap: 40px 91px;
justify-content: center;
width: 100vw;
height: 100vh;
font: 600 18px IBM Plex Sans Hebrew, -apple-system, Roboto, Helvetica,
sans-serif;
}
.div-2 {
display: flex;
min-width: 240px;
flex-direction: column;
align-items: start;
justify-content: start;
width: 592px;
margin: auto 0;
}
.div-3 {
display: flex;
width: 337px;
max-width: 100%;
gap: 9px;
font-size: 30px;
color: rgba(0, 0, 0, 1);
letter-spacing: -0.9px;
line-height: 64px;
}
.resume-generator {
flex-grow: 1;
width: 258px;
flex-basis: auto;
margin: auto 0;
}
.h-1 {
color: var(--primary, rgba(0, 0, 0, 0.85));
font-size: 56px;
line-height: 64px;
letter-spacing: -1.68px;
margin-top: 24px;
}
.div-4 {
display: flex;
margin-top: 24px;
flex-direction: column;
color: var(--secondary, rgba(0, 0, 0, 0.65));
font-weight: 400;
letter-spacing: -0.72px;
justify-content: start;
}
.div-5 {
align-self: start;
display: flex;
align-items: start;
gap: 8px;
line-height: 1;
justify-content: start;
}
.div-6 {
display: flex;
margin-top: 8px;
align-items: start;
gap: 8px;
line-height: 24px;
justify-content: start;
flex-wrap: wrap;
}
@media (max-width: 1200px) {
.container {
padding: 0;
margin: 0;
height: auto;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}

#image {
background-image: url('images/eg.png');
background-size: 90%;
background-position: center;
height: 100vh; /* Adjust as needed */
background-repeat: no-repeat;

}

button {
margin-top: 10px;
}
</style>
<title>Resume Generator</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6" id="content">
<h1>Professional Resumes in perfect LaTeX</h1><br>
<h2>No code required.</h2><br><br>
<h2>Steps to Generate Your Resume:</h2>
<ul>
<li>Step 1: Click the button below.</li>
<li>Step 2: Fill in your personal information.</li>
<li>Step 3: Copy the LaTeX code.</li>
<li>Step 4: Paste it in a LaTeX editor like Overleaf and Compile.</li>
</ul>
Here's a sample resume generated using this tool...<br>
<button onclick="generateResume()" class="btn btn-primary">Generate Resume</button>
</div>
<div class="col-md-6">
<div id="image"></div>
.div-2 {
scale: 0.9;
margin: 0;
padding: 0;
height: 70vh;
}
.img-5 {
width: 80vw;
}
}
@media (max-width: 600px) {
.div-2 {
scale: 0.5;
height: 50vh;
}
}
</style>
<title>Resume Generator</title>
</head>
<body>
<div class="container">
<div class="div-2">
<div class="div-3">
<img src="./images/logo.png" class="img" />
<h4 class="resume-generator">Resume Generator</h4>
</div>
<h2 class="h-1">Professional Resumes in perfect LaTeX</h2>
<div class="div-4">
<div class="div-5">
<img src="./images/Check_ring.png" class="img-2" />
<p>No code required.</p>
</div>
<div class="div-6">
<img src="./images/Check_ring.png" class="img-3" />
<p class="steps-to-generate-your-resume">
Steps to Generate Your Resume:
<br />
Step 1: Click the button below.
<br />
Step 2: Fill in your personal information.
<br />
Step 3: Copy the LaTeX code.
<br />
Step 4: Paste it in a LaTeX editor like Overleaf and Compile.
<br />
Here's a sample resume generated using this tool...
</p>
</div>
</div>
<div class="button" onclick="generateResume()" class="btn btn-primary">
<span class="span">Generate Resume</span>
<img src="./images/expand_right.png" class="img-4" />
</div>
</div>
<img src="./images/right.png" class="img-5" />
</div>
</div>

<!-- Add Bootstrap JS and Popper.js (required for some Bootstrap components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
function generateResume() {
// Add your resume generation logic here

// Navigate to resume.html
window.location.href = 'resumegenerator.html';
}
</script>
</body>
</html>


<script>
function generateResume() {
// Add your resume generation logic here

<!-- <li>Step 1: Click the button below.</li>
<li>Step 2: Fill in your personal information.</li>
<li>Step 3: Copy the LaTeX code.</li>
<li>Step 4: Paste it in a LaTeX editor like Overleaf and Compile.</li> -->
// Navigate to resume.html
window.location.href = "resumegenerator.html";
}
</script>
</body>
</html>

0 comments on commit 27a35cf

Please sign in to comment.