Family pages links members

homestead/src/App.css

@@ -11,6 +11,7 @@ body {
   --division-color: #DAC6AF;
   --lighter-circlek-color: #B9DBE2;
   --lightest-circlek-color: hsl(190, 41%, 81%, 0.25);
+  --oswaldo: Oswald;
 
 
 

homestead/src/App.js

@@ -1,43 +1,124 @@
-import React from 'react';
-import Home from './Home.js';
-import Navbar from './Navbar.js';
-import About from './about/About.js';
-import Calendar from './calendar/Calendar.js';
-import Account from './account/Account.js';
-import LParent from './login/LParent.js';
-import General from './about/subCategories/General.js';
-import OurClub from './about/subCategories/OurClub.js';
-import Structure from './about/subCategories/Structure.js';
-import './App.css';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import React from 'react'
+import Home from './Home.js'
+import Navbar from './Navbar.js'
+import About from './about/About.js'
+import Calendar from './calendar/Calendar.js'
+import Account from './account/Account.js'
+import LParent from './login/LParent.js'
+import General from './about/subCategories/General.js'
+import OurClub from './about/subCategories/OurClub.js'
+import Structure from './about/subCategories/Structure.js'
+import Props from './family_pages/FamilyPages.js'
+import './App.css'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 
-function App() {
+function App () {
   return (
     <div className='app'>
       <style>
-        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
+        @import
+        url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
+        @import
+        url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
+        @import
+        url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
+        @import
+        url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
       </style>
       <Router>
         <Navbar />
-          <Switch>
-            <Route path='/about/ourclub'><OurClub /></Route>
-            <Route path='/about/structure'><Structure /></Route>
-            <Route path='/about'><General /></Route>
-            <Route path='/login'><LParent /></Route>
-            <Route path='/resources'><Account /></Route>
-            <Route path='/calendar'><Calendar /></Route>
-            <Route path='/'><Home /></Route>
-          </Switch>
+        <Switch>
+          // Farmers over Flowers
+          <Route path='/about/family/FarmersOverFlowers'>
+            <Props
+              avatar={
+                'https://c4.wallpaperflare.com/wallpaper/877/604/1005/anime-one-piece-minimalist-monkey-d-luffy-wallpaper-preview.jpg'
+              }
+              title={'Farmers over Flowers'}
+              sidePicture={
+                'https://cdn2.lamag.com/wp-content/uploads/sites/6/2018/03/california-poppies.jpg'
+              }
+              welcoming={'Welcome to Farmers over Flowers'}
+              message={
+                'Dreamier than any K-drama lead. The family with super cool, fun, and welcoming members. Together, we are F4!'
+              }
+              family={'FarmersOverFlowers'}
+            />
+          </Route>
+          // Breath of the Sun
+          <Route path='/about/family/BreathoftheSun'>
+            <Props
+              avatar={'https://wallpapercave.com/wp/wp5244984.jpg'}
+              title={'Breath of the Sun'}
+              sidePicture={
+                'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMmZuacljtNXB39-stJFmKB2CQhxnCveIUXQ&usqp=CAU'
+              }
+              welcoming={'Welcome to Breath of the Sun'}
+              message={
+                'We are all about geeking over anime and game at full throttle! You will be placed in various challenges within these two cultures, but be rewarded as an elite, creative genius. Join us to expose your imagination. '
+              }
+              family={'BreathOfTheSun'}
+            />
+          </Route>
+          // White Lotus
+          <Route path='/about/family/WhiteLotus'>
+            <Props
+              avatar={
+                'https://i.pinimg.com/originals/84/e6/18/84e61804536e07d96ba088ede497d4dc.png'
+              }
+              title={'White Lotus'}
+              sidePicture={
+                'https://i2.wp.com/practicalmotoring.com.au/wp-content/uploads/2020/03/Lotus_EvoraGT410_06.jpg?fit=1200%2C675&ssl=1'
+              }
+              welcoming={'Welcome to White Lotus'}
+              message={
+                "Our general vibe is tea drinking mellow type of atmosphere, uncle iroh from avatar the last Airbender vibes where it's wise but also funny at the same time, quirky, and more of a lofi t than high energy. The reason why we chose white lotus is because of how it represents all the elements and contains the best of the best and most powerfulest."
+              }
+              family={'WhiteLotus'}
+            />
+          </Route>
+          // Head in the clouds
+          <Route path='/about/family/HeadintheClouds'>
+            <Props
+              avatar={
+                'https://i.pinimg.com/originals/36/3f/63/363f63d90dbe7de5d8290b341085dff3.jpg'
+              }
+              title={'Head in the Clouds'}
+              sidePicture={
+                'https://disneyanimation.com/img/uploads/resources/clouds/cloud-readme.jpg'
+              }
+              welcoming={'Welcome to Head in the Clouds'}
+              message={
+                "Head in the Clouds is all about total immersion. There's no better way to really dive deep into ideas! We are the most chill family and the most dedicated to service, shown by our score. Compared to the other families, our innovations are second to none! Scroll down to meet our members."
+              }
+              family={'HeadInTheClouds'}
+            />
+          </Route>
+          <Route path='/about/ourclub'>
+            <OurClub />
+          </Route>
+          <Route path='/about/structure'>
+            <Structure />
+          </Route>
+          <Route path='/about'>
+            <General />
+          </Route>
+          <Route path='/login'>
+            <LParent />
+          </Route>
+          <Route path='/resources'>
+            <Account />
+          </Route>
+          <Route path='/calendar'>
+            <Calendar />
+          </Route>
+          <Route path='/'>
+            <Home />
+          </Route>
+        </Switch>
       </Router>
     </div>
-  );
+  )
 }
 
-export default App;
-
-
-
-
+export default App

homestead/src/Family.css

@@ -7,11 +7,17 @@
   width: 200px;
   height: 200px;
   margin: 0 auto;
+  transition: all .2s ease-in-out;
+  color: black;
 }
 
-.family > h3 {
+.family>h3 {
   text-align: center;
   position: relative;
   top: 210px;
   font-family: var(--font-form);
 }
+
+.family:hover {
+  transform: scale(1.1);
+}

homestead/src/Family.js

@@ -1,12 +1,16 @@
-import React from "react";
-import "./Family.css";
+import React from 'react'
+import './Family.css'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
-function Family({ image, title }) {
+function Family ({ image, title, familyUrl }) {
   return (
-    <div style={{ backgroundImage: `url(${image})`}} className="family">
-      <h3>{title}</h3>
-    </div>
-  );
+    <Link to= {familyUrl} style={{ textDecoration: 'none' }}> 
+      <div style={{ backgroundImage: `url(${image})` }} className='family'>
+        <h3>{title}</h3>
+      </div>
+    </Link>
+  )
 }
 
-export default Family;
+export default Family

homestead/src/Footer.js

@@ -16,7 +16,7 @@ function Footer() {
       </div>
       <div className="footer_copyRight">
         <CopyrightIcon />
-        <p>2017-2020 UC San Diego Circle K International</p>
+        <p>2017-2021 UC San Diego Circle K International</p>
       </div>
     </div>
   );