-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathPortfolio Website
More file actions
122 lines (99 loc) · 2.42 KB
/
Portfolio Website
File metadata and controls
122 lines (99 loc) · 2.42 KB
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
🔹 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>My Image Gallery</h2>
<!-- Thumbnail images -->
<div class="gallery">
<img src="image1.jpg" alt="Image 1" onclick="openLightbox(this)">
<img src="image2.jpg" alt="Image 2" onclick="openLightbox(this)">
<img src="image3.jpg" alt="Image 3" onclick="openLightbox(this)">
</div>
<!-- Lightbox modal -->
<div id="lightbox" class="lightbox">
<span class="close" onclick="closeLightbox()">×</span>
<img class="lightbox-content" id="lightbox-img">
<div id="caption"></div>
</div>
<script src="script.js"></script>
</body>
</html>
🔹 CSS (style.css)
body {
font-family: Arial, sans-serif;
text-align: center;
}
.gallery img {
width: 200px;
margin: 10px;
cursor: pointer;
transition: 0.3s;
}
.gallery img:hover {
transform: scale(1.05);
}
/* Lightbox styles */
.lightbox {
display: none;
position: fixed;
z-index: 1000;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(0,0,0,0.9);
}
.lightbox-content {
display: block;
margin: auto;
max-width: 80%;
max-height: 80%;
}
.close {
position: absolute;
top: 20px;
right: 35px;
font-size: 40px;
font-weight: bold;
color: white;
cursor: pointer;
}
#caption {
margin: 15px;
color: #ccc;
}
🔹 JavaScript (script.js)
// Open lightbox
function openLightbox(img) {
document.getElementById("lightbox").style.display = "block";
document.getElementById("lightbox-img").src = img.src;
document.getElementById("caption").innerHTML = img.alt;
}
// Close lightbox
function closeLightbox() {
document.getElementById("lightbox").style.display = "none";
}
# Portfolio Website
This is my portfolio project for the final assignment.
## Features
- Built using **HTML** and **CSS**
- Sections: About Me, Projects, Contact
- Simple responsive design
## Projects Completed in this Course
1. Personal Blog Website (HTML & CSS)
2. Responsive Layout with Flexbox
3. JavaScript To-Do App
4. Portfolio Website (Final Project)
## Live Demo
https://manage.wix.com/account/websites?referralAdditionalInfo=Route
Portfolio Website
https://cristopherblanco.wixsite.com/my-site-5
https://github.com/Techacademyprojects/HTML-AND-CSS-COURSE.git