newadd

src/App.css

-.main {
- background-color: aliceblue;
- margin:10px; 
 
-}
 
-.container >div {
-  padding:10px;
-  text-align: center;
-  font-size: 2em;
-  color: rgb(245, 241, 236);
+.container {
   display: grid;
-  grid-template-areas: 
-  "one two three"
-  "four five "
-  ;
-  
+  grid-template-areas: "one two three";
+  padding: 10px;
 }
-.one {
 
-  background-color: brown;
-}`
-.two {
+.container>div {
+  padding: 20px 0;
+  font-size: 30px;
+  height: 325px;
+}
 
-  background-color: rgb(63, 228, 74);
+.one {
+  background-color:#57a890 ;
+}
+.two {
+  background-color: #ddae71;
 }
 .three {
-
-  background-color: rgb(198, 89, 89);
+  background-color: #727cda;
 }
 .four {
-
-  background-color: rgb(204, 50, 204);
+  background-color: #faa46b;
 }
-.five {`
-
-  background-color: rgb(240, 8, 155);
+.five {
+  background-color: #863456;
 }
 .six {
- 
-  background-color: rgb(91, 53, 217);
+  background-color: #71bedd;
 }
 

src/MainPage.js

 import React from 'react';
-
+import Image1 from './Images/image-1.png';
 const MainPage = () => {
     return (
         <div className='main'>
             <div className='container'>
-                <div className='one'>1</div>
+                <div className='one'><img src={Image1} alt="image" style={{height:"250px", width:"150px"}}/></div>
                 <div className='two'>2</div>
                 <div className='three'>3</div>
                 <div className='four'>4</div>
                 <div className='five'>5</div>
                 <div className='six'>6</div>
 
-
             </div>
         </div>
     )