-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathimage.html
84 lines (73 loc) · 3.84 KB
/
image.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Projects</title>
<link href="http://fonts.googleapis.com/css?family=Oxygen:400,700,300" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<style>
.image-projects {
display: flex;
justify-content: space-between; /* Adjust as needed */
}
.project {
width: 48%; /* Adjust as needed */
box-sizing: border-box;
position: relative;
border-right: 2px solid #000; /* Adjust line thickness and color as needed */
padding-right: 15px; /* Adjust padding as needed */
}
.project:last-child {
border-right: none; /* Remove border for the last project */
}
.project img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<body>
<div id="wrapper">
<div id="menu-wrapper">
<div id="menu" class="container">
<ul>
<!-- NAVIGATION MENU. THERE SHOULD BE ONE LIST ITEM FOR EACH BUTTON IN YOUR NAVIGATION BAR. -->
<!-- REPLACE THE # IN THE LINK WITH THE FILE NAME OF THE APPROPRIATE PAGE. -->
<li><a href="index.html">About</a></li>
<li class="current_page_item"><a href="image.html">Image Editing</a></li>
<li><a href="web.html">Web Design</a></li>
<li><a href="video.html">Video Production</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="screencast.html">Screencast</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</div>
</div>
<div id="page" class="container">
<div class="centered-content">
<h2>Graphic Design Projects</h2>
<div class="image-projects">
<div class="project">
<h3>Virat Kohli Book Cover</h3>
<p>I developed my book cover about Virat Kohli (Indian Cricketer). I used Canva tool to develop this book cover. The blurred cricket stadium sets the context of the book – cricket. By blurring it, the background doesn't overpower the main images, ensuring that Virat remains the central focus.
I have collected 3 pictures of Virat Kohli which conveys different stages of his career. Each image depicts a unique phase of his journey in Cricket. I used Adobe Photoshop to extract the object(Virat Kohli) by removing the background for these images. Then I have added these images to Canva on top of the blurred cricket Stadium.
The name "Virat Kohli" is written in big letters and below his name, "Rise of the King" tells what the book is about.</p>
<img src="viratbook.png" alt="Book cover of Virat Kohli" />
</div>
<div class="project">
<h3>Personalized Logo</h3>
<p>This logo is for a project I wanted to work on called "Jobgram". It is a social media platform for Employees and Recruiters. Jobgram is different from Traditional job search platforms, in this platform instead of employees looking for jobs, the jobs look for them. So, employees just make a profile with their work details, and companies will reach out to them if they're interested. I wanted to convey this idea in the logo, in the logo I have added a person figure(employee) under a magnifying glass. It depicts that the companies are searching for employes.
The words "Let jobs find you" tell everyone what Jobgram is all about. You just set up your profile, and then wait for a job to find you. I used black and white colors to keep it simple and used a Canva tool to make the logo.</p>
<img src="logo.png" alt="Personalized Logo" />
</div>
</div>
</div>
</div>
<!-- Footer from the existing HTML -->
</div>
</body>
</html>