Refactoring and removing unused things
This commit is contained in:
parent
86f3320134
commit
ffa2c74ef5
5 changed files with 1 additions and 196 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState, useEffect, Component } from "react";
|
import React from "react";
|
||||||
import Navbar from "./components/Navbar";
|
import Navbar from "./components/Navbar";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
|
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import "../../App.css";
|
import "../../App.css";
|
||||||
import HeroSection from "../HeroSection";
|
import HeroSection from "../HeroSection";
|
||||||
import Cards from "../Cards";
|
|
||||||
import Footer from "../../Footer";
|
import Footer from "../../Footer";
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue