From c3541dcc632f8a1252949d27f22cd53c411a131a Mon Sep 17 00:00:00 2001 From: Priyansh S Shrivastav Date: Wed, 20 Dec 2023 20:57:09 +0530 Subject: [PATCH] Changed Overall Suggest Page --- src/App.js | 7 ++- src/Components/Home.jsx | 7 +-- src/Components/Navbar.jsx | 9 +++ src/Components/SuggestModal.css | 101 ++++++++++++++++++++++++++++++++ src/Components/SuggestModal.jsx | 54 +++++++++++++++++ src/Components/Suggestion.css | 4 +- src/Components/cross.png | Bin 0 -> 333 bytes src/Components/suggest_img.jpg | Bin 0 -> 9073717 bytes src/styles/Suggestion.css | 4 +- 9 files changed, 175 insertions(+), 11 deletions(-) create mode 100644 src/Components/SuggestModal.css create mode 100644 src/Components/SuggestModal.jsx create mode 100644 src/Components/cross.png create mode 100644 src/Components/suggest_img.jpg diff --git a/src/App.js b/src/App.js index 24fac49..382ba12 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import Home from './Components/Home'; import About from './Components/About'; import Suggestion from './Components/Suggestion'; import Navbar from './Components/Navbar'; +import SuggestModal from "./Components/SuggestModal"; import { BrowserRouter as Router, @@ -31,12 +32,12 @@ function App() { return( - + }> - }> - }> + }> + }> diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx index 5b7518a..6758ead 100644 --- a/src/Components/Home.jsx +++ b/src/Components/Home.jsx @@ -7,10 +7,10 @@ import '../styles/styles.css'; import hollywood from '../images/hollywood.png'; import bollywood from '../images/bollywood.webp'; import tollywood from '../images/tollywood.webp'; +import SuggestModal from "./SuggestModal"; - -const Home = ( ) => { +const Home = ({modal,closeModal} ) => { const carouselContainerStyle = { position: 'relative', @@ -45,7 +45,7 @@ const Home = ( ) => { fontSize: '55px', // Increased font size fontWeight: '900', }; - + return ( <> @@ -71,7 +71,6 @@ const Home = ( ) => {
- ); diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx index ceb7eff..41793b6 100644 --- a/src/Components/Navbar.jsx +++ b/src/Components/Navbar.jsx @@ -6,6 +6,7 @@ import '../styles/styles.css'; import React, { useState } from "react"; import { FaHome, FaInfoCircle,FaLightbulb } from 'react-icons/fa'; import styled from 'styled-components'; +import SuggestModal from "./SuggestModal"; const Button = styled.div` position: relative; @@ -39,6 +40,8 @@ const Button = styled.div` export default function Navbar(props) { const [checked, setChecked] = useState(false); + + return ( @@ -62,6 +65,9 @@ export default function Navbar(props) {
Suggest
+ + + @@ -81,6 +87,9 @@ export default function Navbar(props) { */} + + + ); }; diff --git a/src/Components/SuggestModal.css b/src/Components/SuggestModal.css new file mode 100644 index 0000000..68d26fa --- /dev/null +++ b/src/Components/SuggestModal.css @@ -0,0 +1,101 @@ +.modal-div{ + width: 60%; + display: block; + margin: 5vh auto; + background-color: blue; + font-family: "Montserrat"; +} +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); + +.suggest-subheader{ + text-align: center; + margin:4vh 0; + font-family: "Montserrat"; + font-size: 2rem; + font-weight: 500; + color: black; +} +.input-box{ + background-color:inherit; + border:none; + border-bottom:2px solid black; + border-radius:none; + font-size: 1.5rem; + border-color: blueviolet; + padding: 1px 5px; + width: 50%; + +} +.input-box:focus{ + outline: none; + border-color: rgb(14, 5, 138); +} +.input-header{ + font-size: 1.25rem; + color: #7B66FF; + font-weight: 600; + font-family: "Montserrat"; + margin-bottom: 0.5rem; +} +.suggest-textarea{ + width: 80%; + margin: 1vh 0; + border-radius: 5px; + background-color: #F3F8FF; + border: 2px solid #7B66FF; + font-size: 1.5rem; + padding: 5px; +} +.suggest-textarea:focus{ + border-color: rgb(14, 5, 138); +} +.suggest-btn{ + display: block; + margin: auto; + padding: 1vh 4vh; + font-size: 1.5rem; + background-color: #7B66FF; + color: white; + border: none; + box-shadow:3px 3px 3px black ; + border-radius:5px ; + cursor: pointer; +} +.suggest-btn:active{ + box-shadow: none; +} +.suggest-btn:hover{ + background-color: #4833ce; +} +.banner-img-suggest{ + width:40%; + border-radius:10px 0 0 10px; + max-height:fit-content; +} +.input-suggest-flexbox{ + display: flex; +} +@media only screen and (max-width: 768px) +{ + .modal-box{ + flex-direction: column; + } + *{ + font-size: 70%; + } + .banner-img-suggest{ + width: 100%; + height: 20vh; + display: none; + } + .input-suggest-flexbox{ + flex-direction: column; + } + .modal-div{ + width: 100%; + } + .suggest-textarea{ + width: 100%; + } +} + diff --git a/src/Components/SuggestModal.jsx b/src/Components/SuggestModal.jsx new file mode 100644 index 0000000..ea233a1 --- /dev/null +++ b/src/Components/SuggestModal.jsx @@ -0,0 +1,54 @@ +import React from 'react' +import './SuggestModal.css' +import banner from "./suggest_img.jpg" +import cross from './cross.png' + +const SuggestModal = () => { + return ( + +
+ + +
+ +

Suggest Movie/Webseries

+
+
+

Name

+ + +
+ +
+

Email

+ + +
+
+
+
+

Movie Name

+ + +
+ +
+

Genre

+ + +
+
+ +
+

Additional Description

+