Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dachoka3000/tf 35/creation of single person view #18

Closed
wants to merge 6 commits into from
Closed

Dachoka3000/tf 35/creation of single person view #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a74f909
add single person view
Dachoka3000 Feb 22, 2023
7bf608d
add route for single person view
Dachoka3000 Feb 22, 2023
ef0667b
add more styling
Dachoka3000 Mar 1, 2023
e64145b
change images and add icons
Dachoka3000 Mar 1, 2023
d550da9
change route for single person view
Dachoka3000 Mar 1, 2023
7cfe00c
Merge branch 'master' of https://github.com/sinatra-pod/the-force int…
Dachoka3000 Mar 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import "./App.css";
import Home from "./views/Home";
import Register from "./views/Register";
import Login from "./views/Login";
import Person from "./views/Person";
import FilmDetail from "./views/FilmDetail";
import Planets from "./views/Planets";

Expand All @@ -13,6 +14,9 @@ function App() {
<Route path="/" element={<Home />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
<Route path ="/person" element={<Person/>}>
<Route path="/person/:id" element={<Person/>}/>
</Route>
<Route path="/filmdetail" element={<FilmDetail />} />
<Route path="/planets" element={<Planets />} />
</Routes>
Expand Down
110 changes: 110 additions & 0 deletions src/views/Person.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import {FaQuoteLeft, FaQuoteRight} from "react-icons/fa"


function Person(){
return (
<div className="bg-black text-white">
<div className="person-section">
<div className="card-section">
<div className="flex justify-center items-center w-100%">
<div className="flex flex-col md:flex-row max-w-[80%] m-6 rounded-lg shadow-lg" style={{ backgroundColor: "#423E3E" }}>
<img className=" w-full h-[500px] md:h-[600px] object-cover md:w-[600px] rounded-t-lg md:rounded-none md:rounded-l-lg" src="https://images.pexels.com/photos/4310574/pexels-photo-4310574.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Darth Vader" />
<div className="p-6 flex flex-col justify-start">
<h5 className="text-gray-500 text-xl font-medium mb-2">Darth Vader</h5>
<p className="text-white-700 text-base mb-10">Once the heroic Jedi Knight named Anakin Skywalker, Darth Vader was seduced by the dark side of the Force. Forever scarred by his defeat on Mustafar, Vader was transformed into a cybernetically-enhanced Sith Lord. At the dawn of the Empire, Vader led the Empire’s eradication of the Jedi Order and the search for survivors. He remained in service of the Emperor -- the evil Darth Sidious -- for decades, enforcing his Master’s will and seeking to crush the Rebel Alliance and other detractors. But there was still good in him…</p>
<p className="text-yellow-300 text-xs italic "><FaQuoteLeft/> Luke, I am your father<FaQuoteRight/></p>
</div>
</div>
</div>
</div>
<div className="data-section mb-[20px] mt-[20px]">

<div className="flex flex-col justify-center">
<h2 className="p-6 text-xl font-large ">STATS</h2><hr></hr>
<div className="grid grid-cols-1 md:grid-cols-4 justify-items-start md:justify-items-center " >



<div className="items-start p-6">
<h3 className="text-gray-500 hover:text-yellow-300 hover:underline hover:decoration-4 hover:decoration-yellow-300 text-xl font-medium mb-2">Origin</h3>
<p>Species: Human</p>
<p> Homeworld: Tatooine</p>
<p>Birth Year: 41.9 BBY</p>
<p>Gender: Male</p>
</div>



<div className="items-start p-6">
<h3 className="text-gray-500 hover:text-yellow-300 hover:underline hover:decoration-4 hover:decoration-yellow-300 text-xl font-medium mb-2">Appearance</h3>
<p>Height: 202</p>
<p> Mass: 136</p>
<p>Eye color: Yellow</p>
<p>Hair color: None</p>
<p>Skin color: White </p>
</div>

<div className="items-start p-6">
<h3 className="text-gray-500 hover:text-yellow-300 hover:underline hover:decoration-4 hover:decoration-yellow-300 text-xl font-medium mb-2">Films</h3>
<p>Star Wars: A New Hope</p>
<p>Star Wars: The Empire Strikes Back</p>
<p>Star Wars: Return of the Jedi</p>
<p>Star Wars: Revenge of the Sith</p>

</div>

<div className="items-start p-6">
<h3 className="text-gray-500 hover:text-yellow-300 hover:underline hover:decoration-4 hover:decoration-yellow-300 text-xl font-medium mb-2">Databank</h3>
<p>Vehicles: TIE Advanced x1</p>
</div>

</div>
</div>

</div>

</div>
<div className="others">
<div className="flex flex-col">
<h3 className="p-6 text-xl font-large ">MORE CHARACTERS</h3><hr />
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 justify-items-center">

<div className="flex justify-center items-center">
<div className="max-w-lg justify-center mt-20">
<img className="h-[300px] object-cover w-[250px] rounded-lg" src="https://thumbs.dreamstime.com/b/star-wars-identities-exhibition-ottawa-canada-july-over-costumes-props-models-artwork-canada-july-34010411.jpg" alt="c-3po"/>
<p className="mt-2 mb-10 text-sm text-center text-gray-500 dark:text-gray-400">C-3PO</p>
</div>

</div>
<div className="flex justify-center items-center" >

<div className="max-w-lg justify-center mt-20">
<img className="h-[300px] object-cover w-[250px] rounded-lg" src="https://images.pexels.com/photos/3526020/pexels-photo-3526020.jpeg?auto=compress&cs=tinysrgb&w=600" alt="chewbacca"/>
<p className="mt-2 mb-10 text-sm text-center text-gray-500 dark:text-gray-400">Chewbacca</p>
</div>

</div>
<div className="flex justify-center items-center">
<div className="max-w-lg justify-center mt-20">
<img className="h-[300px] object-cover w-[250px] rounded-lg" src="https://images.pexels.com/photos/7829101/pexels-photo-7829101.jpeg?auto=compress&cs=tinysrgb&w=600" alt="yoda"/>
<p className="mt-2 mb-10 text-center text-sm text-gray-500 dark:text-gray-400">Yoda</p>
</div>

</div>
<div className="flex justify-center items-center">
<div className="max-w-lg justify-center mt-20 ">
<img className="h-[300px] object-cover w-[250px] rounded-lg" src="https://thumbs.dreamstime.com/b/grayscale-girl-cosplaying-princess-leia-star-wars-fantasy-fest-fuenlabrada-261658065.jpg" alt="princess leia"/>
<p className="mt-2 mb-10 text-sm text-center text-gray-500 dark:text-gray-400">Princess Leia</p>
</div>

</div>
</div>

</div>

</div>
</div>
)
}

export default Person