diff --git a/Web Development/task_1/Subham_Kumar b/Web Development/task_1/Subham_Kumar
new file mode 100644
index 00000000..28ef58c6
--- /dev/null
+++ b/Web Development/task_1/Subham_Kumar
@@ -0,0 +1 @@
+Web Dev task 1
diff --git a/Web Development/task_1/eight1.jpg b/Web Development/task_1/eight1.jpg
new file mode 100644
index 00000000..ec8678b4
Binary files /dev/null and b/Web Development/task_1/eight1.jpg differ
diff --git a/Web Development/task_1/five.jpg b/Web Development/task_1/five.jpg
new file mode 100644
index 00000000..0fa81fb8
Binary files /dev/null and b/Web Development/task_1/five.jpg differ
diff --git a/Web Development/task_1/four.jpg b/Web Development/task_1/four.jpg
new file mode 100644
index 00000000..44c9fa1a
Binary files /dev/null and b/Web Development/task_1/four.jpg differ
diff --git a/Web Development/task_1/hhhh.html b/Web Development/task_1/hhhh.html
new file mode 100644
index 00000000..a03aff38
--- /dev/null
+++ b/Web Development/task_1/hhhh.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+ SPIDEY
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Web Development/task_1/one.jpg b/Web Development/task_1/one.jpg
new file mode 100644
index 00000000..b8484a83
Binary files /dev/null and b/Web Development/task_1/one.jpg differ
diff --git a/Web Development/task_1/seven.jpg b/Web Development/task_1/seven.jpg
new file mode 100644
index 00000000..65871919
Binary files /dev/null and b/Web Development/task_1/seven.jpg differ
diff --git a/Web Development/task_1/six.jpg b/Web Development/task_1/six.jpg
new file mode 100644
index 00000000..9a727020
Binary files /dev/null and b/Web Development/task_1/six.jpg differ
diff --git a/Web Development/task_1/styles.css b/Web Development/task_1/styles.css
new file mode 100644
index 00000000..e020a7b2
--- /dev/null
+++ b/Web Development/task_1/styles.css
@@ -0,0 +1,125 @@
+*,
+*::after,
+*::before {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Times New Roman', Times, serif;
+ font-size: 10px;
+}
+
+body {
+ width: 100%;
+ height: 100vh;
+ background-color: #eee;
+ display: flex;
+}
+
+.container {
+ width: 100%;
+ max-width: 120rem;
+ margin: auto;
+ padding: 0 1.5rem;
+}
+
+.ttt {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-rows: auto;
+ grid-gap: 1.5rem;
+ grid-template-areas: 'img-1 img-2 img-3 img-3' 'img-1 img-5 img-6 img-6' 'img-4 img-4 img-7 img-7' 'img-4 img-4 img-7 img-7' 'img-8 img-8 img-8 img-8' 'img-8 img-8 img-8 img-8';
+}
+
+.ttt a {
+ width: 100%;
+ height: 25rem;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.ttt a i {
+ color: rgba(255, 255, 255, 0.5);
+ font-size: 3rem;
+ position: relative;
+ z-index: 100;
+ padding: 1rem 3rem;
+ border: 2px solid rgba(255, 255, 255, 0.5);
+ border-radius: .4rem;
+ opacity: 0;
+ transition: opacity 0.5s;
+}
+
+.ttt a::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.8);
+ opacity: 0;
+ transition: opacity 0.5s;
+}
+
+.ttt a:hover i,
+.ttt a:hover::before {
+ opacity: 1;
+}
+
+.img-1 {
+ grid-area: img-1;
+ min-height: 51.5rem;
+ background-image: url("images/one.jpg");
+}
+
+.img-2 {
+ grid-area: img-2;
+ background-image: url("images/two.jpg");
+}
+
+.img-3 {
+ grid-area: img-3;
+ background-image: url("images/three.jpg");
+}
+
+.img-4 {
+ grid-area: img-4;
+ min-height: 51.5rem;
+ background-image: url("images/four.jpg");
+}
+
+.img-5 {
+ grid-area: img-5;
+ background-image: url("images/five.jpg");
+}
+
+.img-6 {
+ grid-area: img-6;
+ background-image: url("images/six.jpg");
+}
+
+.img-7 {
+ grid-area: img-7;
+ min-height: 51.5rem;
+ background-image: url("images/seven.jpg");
+}
+
+.img-8 {
+ grid-area: img-8;
+ min-height: 51.5rem;
+ background-image: url("images/eight1.jpg");
+}
+
+@media screen and (max-width:900px) {
+ .ttt {
+ grid-template-areas: 'img-1 img-2 img-3 img-3' 'img-1 img-5 img-6 img-6' 'img-4 img-4 img-7 img-7' 'img-4 img-4 img-7 img-7' 'img-8 img-8 img-8 img-8';
+ }
+}
\ No newline at end of file
diff --git a/Web Development/task_1/three.jpg b/Web Development/task_1/three.jpg
new file mode 100644
index 00000000..07db47a1
Binary files /dev/null and b/Web Development/task_1/three.jpg differ
diff --git a/Web Development/task_1/two.jpg b/Web Development/task_1/two.jpg
new file mode 100644
index 00000000..18b81a4c
Binary files /dev/null and b/Web Development/task_1/two.jpg differ
