css classes

Author: arjun-sudo

src/App.css

@@ -1,3 +1,4 @@
+
 .App {
  text-align: center;
 }
@@ -36,3 +37,40 @@
  transform: rotate(360deg);
  }
 }
+
+.navbar{
+
+ height: 100px;
+ background-color:darkcyan;
+ color: whitesmoke;
+ margin-bottom: 15px;
+ text-align: center;
+ font-size: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.main{
+ height:200px;
+ background-color: turquoise;
+ color: black;
+ margin-bottom: 20px;
+ text-align:center;
+ font-size: large;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.footer{
+ height: 50px;
+ text-align: center;
+ background-color: black;
+ color: white;
+ font-weight: 100;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+

src/components/Footer.js

@@ -3,7 +3,7 @@ import React from "react"
 function Footer()
 {
  return(
- <footer>
+ <footer className="footer">
  <h3>This is my footer element .</h3>
  </footer>
  )

src/components/Header.js

@@ -1,10 +1,11 @@
 import React from "react"
+import "../App.css"
 
 function Header()
 {
  return(
- <header>
- This is header.
+ <header className="navbar">
+ Welcome to React World .
  </header>
  )
 }

src/components/MainContent.js

@@ -4,7 +4,7 @@ function MainContents()
 {
  return(
 
- <main>
+ <main className="main">
  This is the header .
  </main>