Skip to content

Commit 25095fc

Browse files
Anujit1Anujit1
committed
updated projects
1 parent 9a5d9b9 commit 25095fc

2 files changed

Lines changed: 213 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Projects</title>
8+
9+
<!-- css -->
10+
<link rel="stylesheet" href="styles.css">
11+
12+
<!-- fonts -->
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playwrite+RO:wght@100..400&display=swap" rel="stylesheet">
16+
17+
</head>
18+
19+
<body>
20+
<header class="navbar">
21+
<h1 class="brand">Anujit Singh</h1>
22+
<h1 class="title">Projects</h1>
23+
</header>
24+
25+
<div id="navbarMargin"><div>
26+
27+
<div class="canvas">
28+
<div class="projects-container">
29+
30+
<!-- card 1 -->
31+
<div class="project-card">
32+
<div class="project-snapshot">
33+
<img src="project_Snapshot/color_changer.png" alt="Project Snapshot">
34+
</div>
35+
<div class="project-info">
36+
<h2><a href="colorChanger/index.html" class="project-link" target="_blank" rel="noopener noreferrer">Color Changer</a></h2>
37+
<p>Test vibrant colors.</p>
38+
</div>
39+
</div>
40+
41+
<!-- card 2 -->
42+
<div class="project-card">
43+
<div class="project-snapshot">
44+
<img src="project_Snapshot/bmi_calculator.png" alt="Project Snapshot">
45+
</div>
46+
<div class="project-info">
47+
<h2><a href="BMI_Calculator/index.html" class="project-link" target="_blank" rel="noopener noreferrer">Bmi CalCulator</a></h2>
48+
<p>Calculate your Bmi.</p>
49+
</div>
50+
</div>
51+
52+
<!-- card 3 -->
53+
<div class="project-card">
54+
<div class="project-snapshot">
55+
<img src="project_Snapshot/Ticker_clock.png" alt="Project Snapshot">
56+
</div>
57+
<div class="project-info">
58+
<h2><a href="Clock/index.html" class="project-link" target="_blank" rel="noopener noreferrer">Ticker</a></h2>
59+
<p>Time is money, so I built a clock.</p>
60+
</div>
61+
</div>
62+
63+
<!-- card 4 -->
64+
<div class="project-card">
65+
<div class="project-snapshot">
66+
<img src="project_Snapshot/Number_Guess.png" alt="Project Snapshot">
67+
</div>
68+
<div class="project-info">
69+
<h2><a href="guess_number/index.html" class="project-link" target="_blank" rel="noopener noreferrer">Guess Number</a></h2>
70+
<p>Try and guess the number.</p>
71+
</div>
72+
</div>
73+
74+
</div>
75+
76+
</div>
77+
</body>
78+
79+
</html>

‎styles.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body{
7+
background-color: #141313;
8+
color: whitesmoke;
9+
font-family: "PT Serif", serif;
10+
font-weight: 400;
11+
font-style: normal;
12+
}
13+
14+
header {
15+
position: relative;
16+
display: flex;
17+
justify-content: center; /* Centers the title */
18+
align-items: center;
19+
height: 60px; /* adjust as needed */
20+
}
21+
22+
.brand {
23+
position: absolute;
24+
left: 20px; /* distance from the left */
25+
font-family: "Playwrite RO", cursive;
26+
font-size: 1.5em;
27+
}
28+
29+
.title {
30+
font-family: "PT Serif", serif;
31+
font-weight: 700;
32+
font-style: normal;
33+
}
34+
35+
#navbarMargin {
36+
background-color: #f0f0f0;
37+
height: 1px;
38+
width: 100%;
39+
}
40+
41+
42+
.canvas{
43+
display: flex;
44+
justify-content: center;
45+
align-items: center;
46+
}
47+
48+
49+
/* project card */
50+
51+
.projects-container {
52+
display: flex;
53+
flex-direction: column;
54+
gap: 2rem;
55+
padding: 2rem;
56+
max-width: 50rem;
57+
}
58+
59+
.project-card {
60+
display: grid;
61+
grid-template-columns: 1fr 1fr;
62+
background-color: #1e1e1e;
63+
border-radius: 10px;
64+
overflow: hidden;
65+
box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
66+
align-items: center;
67+
}
68+
69+
.project-snapshot img {
70+
width: 100%;
71+
height: auto;
72+
object-fit: cover;
73+
border-radius: 5px;
74+
transition: transform 0.5s ease-in-out;
75+
}
76+
77+
.project-info {
78+
display: flex;
79+
justify-content: center;
80+
align-items: center;
81+
flex-direction: column;
82+
padding: 1.5rem;
83+
color: #fff;
84+
}
85+
86+
.project-info h2 {
87+
font-size: 1.5rem;
88+
margin-bottom: 0.5rem;
89+
}
90+
91+
.project-info p {
92+
font-size: 1rem;
93+
color: whitesmoke;
94+
}
95+
96+
.project-link{
97+
text-decoration: none;
98+
color: whitesmoke;
99+
}
100+
101+
.project-link:hover{
102+
color: rgb(252, 227, 195);
103+
}
104+
105+
.project-snapshot img:hover {
106+
transform: scale(0.96);
107+
}
108+
109+
110+
111+
/* change responsiveness*/
112+
113+
@media (max-width: 850px){
114+
.brand{
115+
display: none;
116+
}
117+
}
118+
119+
@media (max-width: 768px) {
120+
121+
.project-card {
122+
grid-template-columns: 1fr;
123+
text-align: center;
124+
}
125+
126+
.project-snapshot img {
127+
max-height: 250px;
128+
height: 100%;
129+
}
130+
131+
.project-info {
132+
padding: 1rem;
133+
}
134+
}

0 commit comments

Comments
 (0)