diff --git a/README.md b/README.md
index a97baf8..88349d1 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,2 @@
# HTML-CSS-Project
-View this layout projects click here >> https://layout-1-html-css-by-subhajit.netlify.app/
+View this layout projects click here >>https://layout5-html-css-by-subhajit.netlify.app/
diff --git a/index.html b/index.html
index b31afbf..4bc900e 100644
--- a/index.html
+++ b/index.html
@@ -1,30 +1,30 @@
+
- Project 1
+ Project 5
-
-
-
-
-
+
\ No newline at end of file
diff --git a/style.css b/style.css
index a55070f..c981301 100644
--- a/style.css
+++ b/style.css
@@ -1,77 +1,91 @@
+:root{
+ --bg: #9dc783;
+ --container:#fff;
+ --red:#d01010;
+ --dark-green:#0AAE42;
+ --light-green:#1bff69;
+}
-* {
+*{
margin: 0;
padding: 0;
box-sizing: border-box;
- }
- body{
- background-color: #ebd6fb;
- }
-
- .container {
- max-width: 1200px;
- height: 800px;
- background-color:white;
- margin: 80px 60px;
- }
-
- .box {
+}
+
+body{
+
+background-color: var(--bg);
+
+}
+
+.container{
+ max-width: 1050px;
+ margin: 0 auto;
+ background-color: var(--container);
+}
+
+.top-container{
+ min-height: 550px;
+ width: 1050px;
+ margin-top: 32px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap:16px ;
+ padding: 16px;
+}
+
+.red-box {
+ background-color: var(--red);
+ height: 100%;
width: 100%;
- height: 200px;
- background-color: white;
- }
-
- .box-container {
+}
+
+.bottom-container{
+ margin-top: 24px;
+ min-height: 350px;
display: flex;
-
- }
-
- .box1 {
- background-color: #eec4dc;
- }
-
- .box2 {
- background-color:#e5a0c6 ;
- }
- .box3 {
- background-color: #e27bb1;
- }
- .box4 {
- background-color:#e2619f ;
- }
- .box5 {
- background-color: #e44b8d;
- }
- .box6 {
- background-color:#d24787 ;
- }
- .box7 {
- background-color: #bb437e;
- }
- .box8 {
- background-color: #a53e76;
- }
-
-
- @media screen and (width > 1200px) {
- .container {
- margin: 80px auto;
- }
- }
-
- @media screen and (width < 1200px) and (width > 450px) {
- .container {
- margin: 40px 24px;
- }
- }
-
- @media screen and (width < 450px) {
- .container {
- margin: 24px 16px;
+ flex-direction: column;
+ padding: 16px;
+ gap: 16px;
+}
+
+.dark-green-box{
+ background-color: var(--dark-green);
+ width: 100%;
+ height: 100%;
+ flex-grow: 1;
+}
+
+.light-green-box{
+ background-color: var(--light-green);
+ width: 100%;
+ height: 100%;
+}
+
+.green-grid{
+ height: 68px;
+ display: grid;
+
+ gap: 16px;
+ grid-template-columns: 1fr 1fr 1fr 1fr ;
+}
+
+
+@media screen and ( width > 1200px ){
+ .layout-main-spacing {
+ padding: 32px;
}
+
+}
+
+@media screen and ( width < 1200px) and (width > 450px) {
+ .layout-main-spacing {
+ padding: 64px;
}
-
-
+}
-
-
\ No newline at end of file
+@media screen and (width < 600px){
+ .layout-main-spacing {
+ padding: 16px;
+ }
+}
\ No newline at end of file