Add files via upload

check

About.css

@@ -0,0 +1,54 @@
+/* main body color and height width */
+
+*{
+    margin: 0px;
+    padding: 0px;
+    height: 100%;
+    width: 100%;
+}
+/* making 3 cards | 100/3 = 33.3% hight | alternative */
+
+.card1{
+    /* background-color: rgb(255, 255, 87); color for temporory understainding */
+    height: 33.33%;
+    width: 100%;
+    display: flex; /*make display fleax for row wise inner img and text classes */
+
+}
+.card2{
+    height: 33.33%;
+    width: 100%;
+    display: flex;
+}
+.img1{
+    background-color: rgb(212, 212, 212); /*you can cahnge the colors*/
+    height: 100%;
+    width: 30%;
+    padding-right: 10px;
+}
+.text1{
+    background-color: rgb(212, 212, 212);
+    height: 100%;
+    width: 70%;
+    /* if text in center */
+    /* display: flex;
+    justify-content: center ;
+    align-content: center; */
+}
+.card3{
+    height: 33.33%;
+    width: 100%;
+    display: flex;
+}
+.text2{
+    background-color: rgb(172, 172, 172);
+    height: 100%;
+    width: 70%;
+}
+.img2{
+    background-color: rgb(172, 172, 172);
+    height: 100%;
+    width: 30%;
+    padding-left: 10px;
+
+}

About.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import './About.css'
+
+function About() {
+  return (
+    <>
+        <div className="MainCard">
+            {/* make 4 card | check with css | check classes */}
+            <div className="card1">
+                {/* images always in public folder projectname-public-imgFolderName-imgname */}
+                <div className="img1"><img src="/img/1.jpg" alt="Image 1" /></div> 
+                <div className="text1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit, quas. Repudiandae ipsa perspiciatis ad esse. Aut cupiditate corporis reprehenderit repellat quis maiores saepe itaque, at sapiente architecto numquam velit quos repellendus ratione vitae expedita illum dolore inventore recusandae reiciendis possimus. 1</div>
+            </div>
+            <div className="card2">
+                <div className="text2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit, quas. Repudiandae ipsa perspiciatis ad esse. Aut cupiditate corporis reprehenderit repellat quis maiores saepe itaque, at sapiente architecto numquam velit quos repellendus ratione vitae expedita illum dolore inventore recusandae reiciendis possimus. 2</div>
+                <div className="img2"><img src="/img/2.jpg" alt="Image 1" /></div>
+            </div>
+            <div className="card3">
+                <div className="img1"><img src="/img/3.jpg" alt="Image 1" /></div>
+                <div className="text1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit, quas. Repudiandae ipsa perspiciatis ad esse. Aut cupiditate corporis reprehenderit repellat quis maiores saepe itaque, at sapiente architecto numquam velit quos repellendus ratione vitae expedita illum dolore inventore recusandae reiciendis possimus. 3</div>
+            </div>
+            <div className="card2">
+                <div className="text2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit, quas. Repudiandae ipsa perspiciatis ad esse. Aut cupiditate corporis reprehenderit repellat quis maiores saepe itaque, at sapiente architecto numquam velit quos repellendus ratione vitae expedita illum dolore inventore recusandae reiciendis possimus. 4</div>
+                <div className="img2"><img src="/img/4.jpg" alt="Image 1" /></div>
+            </div>
+        </div>
+    </>
+  )
+}
+
+export default About

App.js

@@ -0,0 +1,12 @@
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <>
+      <h1>Hello</h1>
+    </>
+  );
+}
+
+export default App;

index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import About from './component/About';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    {/* <App /> */}
+    <About/>
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();