diff --git a/frontend/src/App.js b/frontend/src/App.js index 024fab6..50b3cb5 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, Component } from "react"; +import React from "react"; import Navbar from "./components/Navbar"; import "./App.css"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; diff --git a/frontend/src/components/CardItem.js b/frontend/src/components/CardItem.js deleted file mode 100644 index 6e2ddb6..0000000 --- a/frontend/src/components/CardItem.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; - -function CardItem(props) { - return ( - <> -
  • - -
    - Travel Image -
    -
    -
    {props.text}
    -
    - -
  • - - ); -} - -export default CardItem; diff --git a/frontend/src/components/Cards.css b/frontend/src/components/Cards.css deleted file mode 100644 index 4e5df7d..0000000 --- a/frontend/src/components/Cards.css +++ /dev/null @@ -1,118 +0,0 @@ -.cards { - padding: 4rem; - background: #fff; -} - -h1 { - text-align: center; -} - -.cards__container { - display: flex; - flex-flow: column; - align-items: center; - max-width: 1120px; - width: 90%; - margin: 0 auto; -} - -.cards__wrapper { - position: relative; - margin: 50px 0 45px; -} - -.cards__items { - margin-bottom: 24px; -} - -.cards__item { - display: flex; - flex: 1; - margin: 0 1rem; - border-radius: 10px; -} - -.cards__item__link { - display: flex; - flex-flow: column; - width: 100%; - box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17); - -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); - filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017)); - border-radius: 10px; - overflow: hidden; - text-decoration: none; -} - -.cards__item__pic-wrap { - position: relative; - width: 100%; - padding-top: 67%; - overflow: hidden; -} - -.fade-img { - animation-name: fade-img; - animation-duration: 2s; -} - -.cards__item__pic-wrap::after { - content: attr(data-category); - position: absolute; - bottom: 0; - margin-left: 10px; - padding: 6px 8px; - max-width: calc((100%) - 60px); - font-size: 12px; - font-weight: 700; - color: #fff; - background-color: #1f98f4; - box-sizing: border-box; -} - -.cards__item__img { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - width: 100%; - max-width: 100%; - height: 100%; - max-height: 100%; - object-fit: cover; - transition: all 0.2s linear; -} - -.cards__item__img:hover { - transform: scale(1.1); -} - -.cards__item__info { - padding: 20px 30px 30px; -} - -.cards__item__text { - color: #252e48; - font-size: 18px; - line-height: 24px; -} - -@media only screen and (min-width: 1200px) { - .content__blog__container { - width: 84%; - } -} - -@media only screen and (min-width: 1024px) { - .cards__items { - display: flex; - } -} - -@media only screen and (max-width: 1024px) { - .cards__item { - margin-bottom: 2rem; - } -} diff --git a/frontend/src/components/Cards.js b/frontend/src/components/Cards.js deleted file mode 100644 index cf0985a..0000000 --- a/frontend/src/components/Cards.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react"; -import CardItem from "./CardItem"; -import "./Cards.css"; - -function Cards() { - return ( -
    -

    Check out these EPIC Destinations

    -
    -
    -
      - - -
    -
      - - - -
    -
    -
    -
    - ); -} - -export default Cards; diff --git a/frontend/src/components/pages/Home.js b/frontend/src/components/pages/Home.js index 6fdf947..968475b 100644 --- a/frontend/src/components/pages/Home.js +++ b/frontend/src/components/pages/Home.js @@ -1,7 +1,6 @@ import React from "react"; import "../../App.css"; import HeroSection from "../HeroSection"; -import Cards from "../Cards"; import Footer from "../../Footer"; function Home() {