diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 5366be7..f16de09 100644
--- a/index.html
+++ b/index.html
@@ -6,11 +6,11 @@
-
+
-
+
diff --git a/style.css b/style.css
index 8958a51..4baeeae 100644
--- a/style.css
+++ b/style.css
@@ -2,47 +2,119 @@
padding: 0;
margin: 0;
}
-
+
.nav-container {
margin-top: 20px;
+
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr 40px 40px;
+ justify-items: center;
+ align-items: center;
}
+
.gallery {
width: 900px;
height: 800px;
margin: 0 auto;
- }
+
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 100px 100px 100px 100px 100px 100px 100px 100px;
+ justify-items: center;
+ align-items: center;
+ /* row-gap: 0rem;
+ column-gap: 0rem; */
+ }
.gallery img {
width: 100%;
border: 1px solid black;
}
+ /* #img-1 {
+ grid-row: 1 / 4 ;
+ grid-column: 1 ;
+ }
+
+ #img-2 {
+ grid-row: 1 / 3 ;
+ grid-column: 2 ;
+
+ }
+
+ #img-3 {
+ grid-row: 1 / 6;
+ grid-column: 3 ;
+
+
+ }
+
+ #img-4 {
+ grid-row: 5 / 6 ;
+ grid-column: 1 ;
+
+
+ }
+
+ #img-5 {
+ grid-row: 3 / 6 ;
+ grid-column:2 ;
+
+
+ }
+
+ #img-6 {
+ grid-row: 7 / 8 ;
+ grid-column:3 ;
+
+
+ }
+
+ #img-7 {
+ grid-row: 6 / 9 ;
+ grid-column: 2 ;
+ } */
+
#img-1 {
+ grid-row: 1/5;
+ grid-column: 1/2;
}
#img-2 {
+ grid-row: 1/3;
+ grid-column: 2/3;
}
#img-3 {
+ grid-row:1/7;
+ grid-column: 3/4;
}
#img-4 {
+ grid-row: 5/9;
+ grid-column: 1/2;
}
#img-5 {
+ grid-row: 3/6;
+ grid-column: 2/3;
}
#img-6 {
+ grid-row: 7/9;
+ grid-column: 3/4;
}
#img-7 {
+ grid-row: 6/9;
+ grid-column: 2/3;
- }
-
\ No newline at end of file
+ }
\ No newline at end of file