-
-
Save adrianhajdin/997a8cdf94234e889fa47be89a4759f1 to your computer and use it in GitHub Desktop.
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700"); | |
@import url("https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"); | |
* { | |
margin: 0; | |
border: 0; | |
box-sizing: border-box; | |
} | |
:root { | |
--font-roboto: "Roboto Slab", serif; | |
--font-raleway: "Raleway", sans-serif; | |
} | |
body { | |
font-family: var(--font-roboto); | |
background-color: #212426; | |
} | |
.app { | |
padding: 4rem; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-direction: column; | |
} | |
h1 { | |
font-size: 3rem; | |
letter-spacing: 0.9px; | |
background: linear-gradient( | |
90deg, | |
rgba(249, 211, 180, 1) 0%, | |
rgba(249, 211, 180, 0) 100% | |
); | |
background-clip: text; | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
width: fit-content; | |
} | |
.search { | |
width: 71%; | |
margin: 4rem 0 2rem; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
padding: 1.5rem 1.75rem; | |
border-radius: 3rem; | |
background: #1f2123; | |
-webkit-box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527; | |
box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527; | |
} | |
.search input { | |
flex: 1; | |
border: none; | |
font-size: 1.5rem; | |
font-family: var(--font-raleway); | |
font-weight: 500; | |
padding-right: 1rem; | |
outline: none; | |
color: #a1a1a1; | |
background: #1f2123; | |
} | |
.search img { | |
width: 35px; | |
height: 35px; | |
cursor: pointer; | |
} | |
/* .search button { | |
padding: 20px 40px; | |
border-radius: 0.5rem; | |
margin-left: 15px; | |
color: #a1a1a1; | |
font-family: var(--font-raleway); | |
font-weight: 900; | |
letter-spacing: 0.75px; | |
font-size: 1.25rem; | |
cursor: pointer; | |
background: #1f2123; | |
-webkit-box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527; | |
box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527; | |
} */ | |
.empty { | |
width: 100%; | |
margin-top: 3rem; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.empty h2 { | |
font-size: 1.25rem; | |
color: #f9d3b4; | |
font-family: var(--font-raleway); | |
} | |
.container { | |
width: 100%; | |
margin-top: 3rem; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-wrap: wrap; | |
} | |
.movie { | |
width: 310px; | |
height: 460px; | |
margin: 1.5rem; | |
position: relative; | |
border-radius: 12px; | |
overflow: hidden; | |
border: none; | |
transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1); | |
box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1); | |
} | |
.movie div:nth-of-type(1) { | |
position: absolute; | |
padding: 16px; | |
width: 100%; | |
opacity: 0; | |
top: 0; | |
color: #f9d3b4; | |
} | |
.movie:hover { | |
box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1); | |
transform: scale(1.05, 1.05); | |
} | |
.movie div:nth-of-type(2) { | |
width: 100%; | |
height: 100%; | |
} | |
.movie div:nth-of-type(2) img { | |
height: 100%; | |
width: 100%; | |
} | |
.movie div:nth-of-type(3) { | |
z-index: 2; | |
background-color: #343739; | |
padding: 16px 24px 24px 24px; | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
left: 0; | |
} | |
.movie div:nth-of-type(3) span { | |
font-family: "Raleway", sans-serif; | |
text-transform: uppercase; | |
font-size: 13px; | |
letter-spacing: 2px; | |
font-weight: 500; | |
color: #f0f0f0; | |
} | |
.movie div:nth-of-type(3) h3 { | |
margin-top: 5px; | |
font-family: "Roboto Slab", serif; | |
color: #f9d3b4; | |
} | |
.movie:hover div:nth-of-type(2) { | |
height: 100%; | |
opacity: 0.3; | |
} | |
.movie:hover div:nth-of-type(3) { | |
background-color: transparent; | |
} | |
.movie:hover div:nth-of-type(1) { | |
opacity: 1; | |
} | |
@media screen and (max-width: 600px) { | |
.app { | |
padding: 4rem 2rem; | |
} | |
.search { | |
padding: 1rem 1.75rem; | |
width: 100%; | |
} | |
.search input { | |
font-size: 1rem; | |
} | |
.search img { | |
width: 20px; | |
height: 20px; | |
} | |
} | |
@media screen and (max-width: 400px) { | |
.app { | |
padding: 4rem 1rem; | |
} | |
h1 { | |
font-size: 2rem; | |
} | |
.container { | |
margin-top: 2rem; | |
} | |
.movie { | |
width: "100%"; | |
margin: 1rem; | |
} | |
} |
import React, { useState, useEffect } from "react"; | |
import MovieCard from "./MovieCard"; | |
import SearchIcon from "./search.svg"; | |
import "./App.css"; | |
const API_URL = "http://www.omdbapi.com?apikey=b6003d8a"; | |
const App = () => { | |
const [searchTerm, setSearchTerm] = useState(""); | |
const [movies, setMovies] = useState([]); | |
useEffect(() => { | |
searchMovies("Batman"); | |
}, []); | |
const searchMovies = async (title) => { | |
const response = await fetch(`${API_URL}&s=${title}`); | |
const data = await response.json(); | |
setMovies(data.Search); | |
}; | |
return ( | |
<div className="app"> | |
<h1>MovieLand</h1> | |
<div className="search"> | |
<input | |
value={searchTerm} | |
onChange={(e) => setSearchTerm(e.target.value)} | |
placeholder="Search for movies" | |
/> | |
<img | |
src={SearchIcon} | |
alt="search" | |
onClick={() => searchMovies(searchTerm)} | |
/> | |
</div> | |
{movies?.length > 0 ? ( | |
<div className="container"> | |
{movies.map((movie) => ( | |
<MovieCard movie={movie} /> | |
))} | |
</div> | |
) : ( | |
<div className="empty"> | |
<h2>No movies found</h2> | |
</div> | |
)} | |
</div> | |
); | |
}; | |
export default App; |
import React from 'react'; | |
const MovieCard = ({ movie: { imdbID, Year, Poster, Title, Type } }) => { | |
return ( | |
<div className="movie" key={imdbID}> | |
<div> | |
<p>{Year}</p> | |
</div> | |
<div> | |
<img src={Poster !== "N/A" ? Poster : "https://via.placeholder.com/400"} alt={Title} /> | |
</div> | |
<div> | |
<span>{Type}</span> | |
<h3>{Title}</h3> | |
</div> | |
</div> | |
); | |
} | |
export default MovieCard; |
search.svg is there just click this "<>" it wll show thats how i got it
Can anyone provide the readme description?
Folks initially the codes worked well on my end but now nothing to display its dissapointing
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M29.8594 29.8594L39.4219 39.4219" stroke="#D88769" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.9062 33.0469C26.2682 33.0469 33.0469 26.2682 33.0469 17.9062C33.0469 9.54431 26.2682 2.76562 17.9062 2.76562C9.54431 2.76562 2.76562 9.54431 2.76562 17.9062C2.76562 26.2682 9.54431 33.0469 17.9062 33.0469Z" stroke="#D88769" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
CSS is not Working as display in the Video
Thanks, it works. Upon clicking that icon, it went up to app.jss and scrolled back to look at the search.svg, lo and behold, the code appeared there. I tried to paste it here: