Added the main component

Author: RiyaGupta89

news-app/src/Components/Main.css

@@ -0,0 +1,146 @@
+.main {
+    background-color: rgb(252, 252, 252);
+}
+
+.tesla-main {
+    max-width: 1250px;
+    margin: 0 auto;
+}
+
+.main-heading {
+    padding: 30px 0;
+    font-size: 26px;
+    color: #111;
+}
+
+.card-container {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 1250px;
+    margin: 0 auto;
+    justify-content: space-between;
+}
+
+.tesla-container {
+    display: flex;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    padding: 20px;
+    margin: 30px 0;
+}
+
+.tesla-heading {
+    border-bottom: 1px solid rgb(214, 214, 214);
+    padding-bottom: 30px;
+}
+
+.tesla-container::-webkit-scrollbar {
+    display: none;
+}
+
+.card {
+    width: 370px;
+    height: 420px;
+    background-color: #fff;
+    box-shadow: 2px 3px 9px rgba(0, 0, 0, 0.8);
+    margin-bottom: 70px;
+    overflow: hidden;
+    transition: all 0.5s;
+}
+
+.card:hover {
+    transform: scale(0.9);
+}
+
+.card1 {
+    width: 500px;
+    height: 100px;
+    display: flex;
+    align-items: center;
+}
+
+.card1 .image {
+    width: 140px;
+    height: 100px;
+    transition: all 0.5s;
+}
+
+.card1 .image:hover {
+    transform: scale(1.15);
+}
+
+.info {
+    width:360px;
+    height: 90px;
+    overflow: hidden;
+    padding-left: 20px;
+    text-align: left;
+    padding-right: 30px;
+}
+
+.info h3 {
+    font-size: 19px;
+    font-weight: 300;
+    height: 50px;
+    overflow: hidden;
+    padding-bottom: 10px;
+}
+
+.info p {
+    font-size: 13px;
+    height: 50px;
+    overflow: hidden;
+    color: gray;
+}
+
+.image img {
+    height: 100%;
+    width: 100%;
+}
+
+
+.card .img {
+    width: 370px; 
+    height: 180px;
+}
+
+.card .img img {
+    height: 100%;
+    width: 100%;
+}
+
+.text {
+    padding: 13px 9px;
+}
+
+.text h3 {
+    font-weight: 300;
+    color: black;
+    font-size: 22px;
+}
+
+.text p {
+    color: rgb(138, 138, 138);
+    font-size: 13px;
+    line-height: 1.5;
+    padding: 10px 9px;
+}
+
+@media (max-width: 1290px) {
+    .main,
+    .tesla-main {
+        padding: 0 40px;
+    }
+}
+
+@media (max-width: 830px) {
+    .card-container {
+        justify-content: space-around;
+    }
+}
+
+@media (max-width: 410px) {
+    .tesla-main {
+        padding: 0 10px;
+    }
+}

news-app/src/Components/Main.js

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from "react";
+import "./Main.css";
+
+const Main = () => {
+  const [news, setNews] = useState([]);
+  const [tnews, setTNews] = useState([]);
+
+  const loadNews = async () => {
+    const response = await fetch(
+      "https://newsapi.org/v2/everything?q=Apple&from=2021-07-19&sortBy=popularity&apiKey=4fc8ad23db54411c8dce19801bccff07"
+    );
+    const data = await response.json();
+    setNews(data.articles);
+  };
+
+  const loadTesla = async () => {
+    const response = await fetch("https://newsapi.org/v2/everything?q=tesla&from=2021-06-19&sortBy=publishedAt&apiKey=4fc8ad23db54411c8dce19801bccff07");
+    const data = await response.json();
+    console.log(data.articles);
+    setTNews(data.articles);
+    console.log(tnews)
+  }
+
+  useEffect(() => {
+    loadNews();
+    loadTesla();
+  }, []);
+
+
+  return (
+    <div className="main">
+      <h2 className="main-heading">Latest News</h2>
+
+      <div className="card-container">
+        {news.map((data) => {
+          return (
+            <div className="card">
+              <div className="img">
+                <img src={data.urlToImage} alt="" />
+              </div>
+              <div className="text">
+                <h3>{data.title}</h3>
+                <p>{data.description}</p>
+              </div>
+            </div>
+          );
+        })}
+        </div>
+<div className="tesla-main">
+      <h2 className="tesla-heading">Tesla News</h2>
+      
+      <div className="tesla-container">
+        {tnews.map(data => {
+          return(
+          <div className="card1">
+            <div className="image">
+              <img src={data.urlToImage} alt="" />
+            </div>
+            <div className="info">
+              <h3>{data.title}</h3>
+
+              <p>{data.description}</p>
+            </div>
+          </div>
+          );
+        })}
+      </div>
+    </div>
+    </div>
+   
+  );
+};
+
+export default Main;