Merge pull request 'Refactoring and removing unused things' (#29) from refactor/removeThigns into main

This commit is contained in:
cami 2021-06-21 00:55:01 +00:00
commit b25d8fad3a
5 changed files with 1 additions and 196 deletions

View file

@ -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";

View file

@ -1,25 +0,0 @@
import React from "react";
import { Link } from "react-router-dom";
function CardItem(props) {
return (
<>
<li className="cards__item">
<Link className="cards__item__link" to={props.path}>
<figure className="cards__item__pic-wrap" data-category={props.label}>
<img
src={props.src}
alt="Travel Image"
className="cards__item__img"
/>
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">{props.text}</h5>
</div>
</Link>
</li>
</>
);
}
export default CardItem;

View file

@ -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;
}
}

View file

@ -1,51 +0,0 @@
import React from "react";
import CardItem from "./CardItem";
import "./Cards.css";
function Cards() {
return (
<div className="cards">
<h1>Check out these EPIC Destinations</h1>
<div className="cards__container">
<div className="cards__wrapper">
<ul className="cards__items">
<CardItem
src="/images/img-4.jpg"
text="Explore the hidden waterfall deep inside the Amazon Jungle"
label="Adventure"
path="/services"
/>
<CardItem
src="/images/img-4.jpg"
text="Travel through the Islands of Bali in a Private Cruise"
label="Luxury"
path="/services"
/>
</ul>
<ul className="cards__items">
<CardItem
src="/images/img-4.jpg"
text="Explore the hidden waterfall deep inside the Amazon Jungle"
label="Adventure"
path="/services"
/>
<CardItem
src="/images/img-4.jpg"
text="Travel through the Islands of Bali in a Private Cruise"
label="Luxury"
path="/services"
/>
<CardItem
src="/images/img-4.jpg"
text="Travel through the Islands of Bali in a Private Cruise"
label="Luxury"
path="/services"
/>
</ul>
</div>
</div>
</div>
);
}
export default Cards;

View file

@ -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() {