static webpage

anku0512 · Nov 2, 2023 · de153eb · de153eb
1 parent 845cbdc
commit de153eb
Show file tree

Hide file tree

Showing 19 changed files with 300 additions and 22 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/.name b/.idea/.name
diff --git a/.idea/airbnb.iml b/.idea/airbnb.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/public/body-image.png b/public/body-image.png
diff --git a/public/cool.png b/public/cool.png
diff --git a/public/star.png b/public/star.png
diff --git a/public/users/cycle.jpg b/public/users/cycle.jpg
diff --git a/public/users/cycle2.jpg b/public/users/cycle2.jpg
diff --git a/public/users/image12.png b/public/users/image12.png
diff --git a/src/App.css b/src/App.css
@@ -3,10 +3,17 @@
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 15vmin;
   pointer-events: none;
+  padding-right: 20px;
+  padding-left: 10px;
+}
+.gray {
+  color: grey;
+}
+.bold {
+  font-weight: bold;
 }
-
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
@@ -15,19 +22,23 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 5vh;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   font-size: calc(10px + 2vmin);
   color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .App-link {
   color: #61dafb;
 }
 
+section{
+  padding: 20px;
+}
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
@@ -36,3 +47,46 @@
     transform: rotate(360deg);
   }
 }
+
+.home-img {
+  padding-top: 20px;
+  width: 60%;
+  align-items: center;
+  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
+}
+.card {
+  /*padding-left: 30px;*/
+  width: 175px;
+  font-size: 12px;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.card--image {
+  width: 100%;
+  border-radius: 9px;
+}
+.card-stats {
+  display: flex;
+  align-items: center;
+}
+.card--star {
+  height: 14px;
+}
+
+.slider {
+  display: flex;
+  gap: 20px;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.card--badge{
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  background-color: white;
+  padding: 5px 7px;
+  border-radius: 2px;
+  font-weight: bold;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,15 @@
-import logo from './logo.svg';
+
 import './App.css';
+import Navbar from "./component/Navbar";
+import Body from "./component/Body";
+import Slider from "./component/Slider";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <Navbar />
+        <Body />
+        <Slider />
     </div>
   );
 }

diff --git a/src/component/Body.js b/src/component/Body.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import '../App.css';
+
+function Body() {
+    return (
+        <div className="App">
+            <img src="/body-image.png" alt="images" className="home-img"/>
+            <h1>Online Experience</h1>
+            <p>Join unique interactive activities led by one-of-a kind hosts-all without leaving home</p>
+        </div>
+    );
+}
+
+export default Body;
diff --git a/src/component/Card.js b/src/component/Card.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import '../App.css';
+
+
+
+
+function Card(props) {
+    // const {coverImg, rating, reviewCount, price, title, openSpots, location} = props;
+    let badgeText
+    if (props.list.openSpots === 0) {
+        badgeText = "SOLD OUT"
+    } else if (props.list.location === "Online") {
+        badgeText = "ONLINE"
+    }
+    return (
+        <div className="card">
+            {badgeText && <div className="card--badge">{badgeText}</div>}
+            <img src={props.list.coverImg} alt="image" className="card--image"/>
+            <div className="card--stats">
+                <img src="/star.png" alt="star" className="card--star"/>
+                <span>{props.list.stats.rating}</span>
+                <span className="gray"> ({props.list.stats.reviewCount} .)</span>
+                <span className="gray"> {props.list.location}</span>
+            </div>
+            <p>{props.list.title}</p>
+            <p><span className="bold">From ${props.list.price}</span> / person</p>
+        </div>
+    );
+}
+
+export default Card;
diff --git a/src/component/Navbar.js b/src/component/Navbar.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import '../App.css';
+
+function Navbar  () {
+    return (
+        <div className="App-header">
+            <img src="/cool.png" alt="logo" className='App-logo'/>
+            <h1>Cool</h1>
+        </div>
+    );
+}
+
+export default Navbar;
diff --git a/src/component/Slider.js b/src/component/Slider.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import Card from "./Card";
+import data from "../data"
+function Slider() {
+    const dataCard = data.map(list => {
+        return (
+            <Card
+                key = {list.id}
+                list = {list}
+            />
+        )
+    })
+
+    return (
+        <section>
+        <div className="slider">
+            {dataCard}
+        </div>
+        </section>
+    );
+}
+
+
+export default Slider;
diff --git a/src/data.js b/src/data.js
@@ -0,0 +1,119 @@
+export default [
+    {
+        id: 1,
+        title: "Life Lessons with Katie Zaferes",
+        description: "I will share with you what I call \"Positively Impactful Moments of Disappointment.\" Throughout my career, many of my highest moments only came after setbacks and losses. But learning from those difficult moments is what gave me the ability to rise above them and reach my goals.",
+        price: 136,
+        coverImg: "/users/image12.png",
+        stats: {
+            rating: 5.0,
+            reviewCount: 6
+        },
+        location: "Online",
+        openSpots: 0,
+    },
+    {
+        id: 2,
+        title: "Learn Wedding Photography",
+        description: "Interested in becoming a wedding photographer? For beginner and experienced photographers alike, join us in learning techniques required to leave the happy couple with memories that'll last a lifetime.",
+        price: 125,
+        coverImg: "/users/cycle.jpg",
+        stats: {
+            rating: 5.0,
+            reviewCount: 30
+        },
+        location: "Online",
+        openSpots: 27,
+    },
+    {
+        id: 3,
+        title: "Group Mountain Biking",
+        description: "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
+        price: 50,
+        coverImg: "/users/cycle2.jpg",
+        stats: {
+            rating: 4.8,
+            reviewCount: 2
+        },
+        location: "Online",
+        openSpots: 3,
+    },
+    {
+        id: 4,
+        title: "Group Mountain Biking",
+        description: "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
+        price: 50,
+        coverImg: "/users/cycle2.jpg",
+        stats: {
+            rating: 4.8,
+            reviewCount: 2
+        },
+        location: "online",
+        openSpots: 3,
+    },
+    {
+        id: 5,
+        title: "Group Mountain Biking",
+        description: "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
+        price: 50,
+        coverImg: "/users/cycle2.jpg",
+        stats: {
+            rating: 4.8,
+            reviewCount: 2
+        },
+        location: "Norway",
+        openSpots: 3,
+    },
+    {
+        id: 6,
+        title: "Group Mountain Biking",
+        description: "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
+        price: 50,
+        coverImg: "/users/cycle2.jpg",
+        stats: {
+            rating: 4.8,
+            reviewCount: 2
+        },
+        location: "Norway",
+        openSpots: 3,
+    },
+    {
+        id: 7,
+        title: "Group Mountain Biking",
+        description: "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
+        price: 50,
+        coverImg: "/users/cycle2.jpg",
+        stats: {
+            rating: 4.8,
+            reviewCount: 2
+        },
+        location: "Norway",
+        openSpots: 3,
+    },
+    {
+        id: 8,
+        title: "Group Mountain Biking",
+        description: "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
+        price: 50,
+        coverImg: "/users/cycle2.jpg",
+        stats: {
+            rating: 4.8,
+            reviewCount: 2
+        },
+        location: "Norway",
+        openSpots: 3,
+    },
+    {
+        id: 9,
+        title: "Group Mountain Biking",
+        description: "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
+        price: 50,
+        coverImg: "/users/cycle2.jpg",
+        stats: {
+            rating: 4.8,
+            reviewCount: 2
+        },
+        location: "Norway",
+        openSpots: 0,
+    }
+]
diff --git a/src/logo.svg b/src/logo.svg