diff --git a/backend/models/UploadModel.js b/backend/models/UploadModel.js
index 1c522616cecb8f2958b5f5da4b15173f7f072a4f..60a146482a8de56a217820a69fa53911045d613a 100644
--- a/backend/models/UploadModel.js
+++ b/backend/models/UploadModel.js
@@ -26,6 +26,10 @@ const postSchema = new mongoose.Schema({
type: String,
required: true
},
+ upvotes: {
+ type: [String],
+ required: false
+ },
photo: {
type: String,
required: true
diff --git a/backend/routes/routes.js b/backend/routes/routes.js
index a0ae05499768938f7068ae6c61c62eefb968c239..5508d1439405216d0d1ff659721d116d118e2f13 100644
--- a/backend/routes/routes.js
+++ b/backend/routes/routes.js
@@ -98,15 +98,60 @@ router.post("/post", uploadMiddleware.single("photo"), (req, res) => {
//Get posts
router.get('/posts', async (req, res) => {
- const posts = await postModel.find()
- res.send(posts)
+
+
+ const loads = req.headers.loads
+
+console.log(loads)
+
+ if (req.headers.search.length == 0) {
+ const posts = await postModel.find().limit(loads*2).exec()
+ return res.send(posts)
+
+ } else if(req.headers.search.length > 0){
+
+ const search = req.headers.search; // Get the search query from the request query parameters
+
+ console.log(search)
+ const posts = await postModel.find({
+ $or: [
+ { name: { $regex: search, $options: "i" } },
+ { recipe: { $regex: search, $options: "i" } }
+ // add as many components as needed
+ ],
+ }).limit(loads*2).exec()
+
+ return res.send(posts)
+
+ }
+
+
+
+})
+router.get('/search', async (req, res) => {
+
+
+ const search = req.headers.search; // Get the search query from the request query parameters
+
+ console.log(search)
+ const posts = await postModel.find({
+ $or: [
+ { name: { $regex: searchString, $options: "i" } },
+ { recipe: { $regex: searchString, $options: "i" } }
+ // add as many components as needed
+ ],
+ })
+
+ return res.send(posts)
+
+
})
//get profile posts
router.get('/profilePosts', async (req, res) => {
-const userId = req.headers.author
+ const userId = req.headers.author
postModel.find({ author: userId })
.populate('author')
@@ -115,7 +160,6 @@ const userId = req.headers.author
res.json(posts)
})
-
})
//fetch profile
@@ -143,21 +187,59 @@ router.get('/profile', (req, res) => {
});
router.post('/deletePost', async (req, res) => {
-
+
const deletedPost = await postModel.findByIdAndDelete(req.body.id)
- if(!deletedPost){
+ if (!deletedPost) {
return res("Post not found")
- }else{
+ } else {
res.json("Post deleted successfully")
- fs.unlinkSync(`./public/uploads/${req.body.image}`)
+ fs.unlinkSync(`./public/uploads/${req.body.image}`)
}
-
+
+
+})
+
+
+// adding user id to upvote list
+router.put('/upvote', async (req, res) => {
+
+ console.log(req.body)
+
+ const post = await postModel.findById(req.body.post_id)
+
+ if (!post) {
+ return res.json("Not a valid post")
+ }
+
+ if (post.upvotes.includes(req.body.upvote)) {
+
+
+ const carIndex = post.upvotes.indexOf(req.body.upvote)
+ post.upvotes.splice(req.body.upvote, 1)
+ await post.save()
+ return res.json("upvote deleted")
+ }
+
+ post.upvotes.push(req.body.upvote)
+ await post.save()
+
+ res.send(post)
})
+router.get("/api/posts/search", (req, res) => {
+ const search = req.headers.search; // Get the search query from the request query parameters
+ postModel.find({ $text: { $search: search } }, (err, posts) => {
+ if (err) {
+ console.log(err);
+ return res.status(500).send("Internal server error");
+ }
+ return res.json(posts); // Send the matching posts back to the frontend
+ });
+});
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 9a3234e3d428fa4c2844bdd4c1bc24f5af21315c..ac68912fea04c6cad643d0265e431082adc1dc6f 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -1,22 +1,72 @@
import React from 'react'
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
import styles from '../styles/header.module.css'
+import { useState, useEffect } from 'react'
+import axios from 'axios'
const Header = () => {
- return (
-
- <div className={styles.header}>
- <Link to='/register'>
- <div className={styles.button}>Register</div>
- </Link>
- <Link to='/login'>
- <div className={styles.button}>Login</div>
- </Link>
- <Link to='/feed'>
- <div className={styles.button}>Feed</div>
- </Link>
- </div>
- )
+
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+
+ const checkLoggedIn = async () => {
+
+ const token = localStorage.getItem('token');
+ if (!token) {
+ logout()
+ return;
+ }
+ const response = await axios.get('http://localhost:5000/profile', {
+ headers: { Authorization: `Bearer ${token}` },
+ }).then((res) => {
+ setIsLoggedIn(true);
+ }).catch(err => {
+ localStorage.removeItem("token")
+ logout()
+ })
+ }
+
+ useEffect(() => {
+ checkLoggedIn()
+
+
+ }, [])
+
+ const logout = () => {
+ localStorage.removeItem("token")
+ setIsLoggedIn(false)
+ }
+
+ if (!isLoggedIn) {
+ return (
+
+ <div className={styles.header}>
+ <Link to='/register'>
+ <div className={styles.button}>Register</div>
+ </Link>
+ <Link to='/login'>
+ <div className={styles.button}>Login</div>
+ </Link>
+ <Link to='/feed'>
+ <div className={styles.button}>Feed</div>
+ </Link>
+ </div>
+ )
+ } else {
+ return (
+ <div className={styles.header}>
+ <Link to='/profile'>
+ <div className={styles.button}>Profile</div>
+ </Link>
+ <button className={styles.button} onClick={logout}><div>Log out</div></button>
+ <Link to='/feed'>
+ <div className={styles.button}>Feed</div>
+ </Link>
+ </div>
+ )
+
+ }
+
}
export default Header
\ No newline at end of file
diff --git a/frontend/src/components/Landing.js b/frontend/src/components/Landing.js
index 80f8e25edc206cd00131fe6ae14e3731046c0da1..b22f64994bb84cac685dcd9fa8c19125d75e7539 100644
--- a/frontend/src/components/Landing.js
+++ b/frontend/src/components/Landing.js
@@ -19,10 +19,10 @@ const Landing = () => {
<div className={styles.card}>
<h1>Functionality ðŸº</h1>
<ul className={styles.list}>
- <li className={styles.item}>Creating Posts ✅ </li>
- <li className={styles.item}>Account Sign Up ✅ </li>
- <li className={styles.item}>Logging In ✅</li>
- <li className={styles.item}>Authentication Checking ✅</li>
+ <li className={styles.item}>Creating Posts </li>
+ <li className={styles.item}>Account Sign Up </li>
+ <li className={styles.item}>Logging In </li>
+ <li className={styles.item}>Authentication Checking </li>
<li className={styles.item}>Post filtering and priority</li>
</ul>
</div>
@@ -30,10 +30,10 @@ const Landing = () => {
<h1>PagesðŸº</h1>
<ul className={styles.list}>
<li className={styles.item}>Home </li>
- <li className={styles.item}>Profile ✅</li>
+ <li className={styles.item}>Profile </li>
<li className={styles.item}>Discover </li>
- <li className={styles.item}>Log In and Sign Up ✅</li>
- <li className={styles.item}>Crate Post ✅</li>
+ <li className={styles.item}>Log In and Sign Up </li>
+ <li className={styles.item}>Crate Post </li>
</ul>
</div>
<div className={styles.card}>
diff --git a/frontend/src/components/Post.js b/frontend/src/components/Post.js
index 42403105ab6c71549ebef097b57a36d1ffb7f6a0..4c909f25d0c49dbb0304c8048e7cf02c72376be2 100644
--- a/frontend/src/components/Post.js
+++ b/frontend/src/components/Post.js
@@ -6,6 +6,7 @@ import styles from '../styles/feed.module.css'
import { useNavigate } from 'react-router-dom'
import jwt_decode from 'jwt-decode';
import { isLoggedIn } from '../functions/Functions'
+import buttons from '../styles/buttons.module.css'
const Post = () => {
@@ -54,7 +55,6 @@ const Post = () => {
setProfileData(res.data)
})
- console.log(profileData)
}
@@ -118,27 +118,31 @@ const Post = () => {
return (
<div className={styles.post_container}>
- <h1>Make your drink!</h1>
- <input className={styles.post_input1} onChange={(e) => setName(e.target.value)} placeholder='Title of your drink' type='text' />
-
- <textarea className={styles.post_input2} onChange={(e) => setIngredient(e.target.value)} placeholder='Ingredient' type='text' />
- <button className={styles.button} onClick={add_ingredient}>add ingredient</button>
- <div className={styles.tag_container}>
- <ul>{recipe.map((item, index) => (
- <li key={index} >{item}</li>
- ))}</ul>
+ <div className={styles.post_header}>
+ <h1>Make your drink!</h1>
</div>
- <textarea className={styles.post_input2} value={description} onChange={(e) => setDescription(e.target.value)} placeholder='How to make it...' type='text' cols='40' rows="5" />
-
- <div className={styles.addpicture}>
- <p >Add a picture here 👉👉:</p>
- <label className={styles.pick_file} htmlFor={styles.file_picker}>
- <AiOutlineCamera />
- <input hidden type="file" name={styles.file_picker} id={styles.file_picker} onChange={handlePictureChange} />
- {picturePreview && <img src={picturePreview} className={styles.preview_img_container} />}
- </label>
+
+
+ <div className={styles.input_fields}>
+ <input className={styles.post_input1} onChange={(e) => setName(e.target.value)} placeholder='Title of your drink' type='text' />
+
+ <input className={styles.post_input1} onChange={(e) => setIngredient(e.target.value)} placeholder='Ingredient' type='text' />
+ <button className={buttons.button2} onClick={add_ingredient}>add ingredient</button>
+ <div className={styles.tag_container}>
+ <ul>{recipe.map((item, index) => (
+ <li key={index} >{item}</li>
+ ))}</ul>
+ </div>
+ <textarea className={styles.post_input2} value={description} onChange={(e) => setDescription(e.target.value)} placeholder='How to make it...' type='text' cols='40' rows="5" />
+
+
+ <label className={buttons.button2} id="button">add image
+ <input hidden type="file" id="button" onChange={(e) => handlePictureChange(e)}/>
+ </label>
+
+
</div>
- <button onClick={createPost}>Upload</button>
+ <button className={buttons.button2} onClick={createPost}>Upload</button>
diff --git a/frontend/src/components/Posts.js b/frontend/src/components/Posts.js
index c633a151ae3de6466d1ebfb261c6d3c56b49d2c9..8aa66c84bd9054ef40b0eeb0fd33f1bd3428d9dd 100644
--- a/frontend/src/components/Posts.js
+++ b/frontend/src/components/Posts.js
@@ -2,23 +2,31 @@ import React, { useState, useEffect } from 'react'
import styles from '../styles/feed.module.css'
import { FaSearch } from "react-icons/fa";
import axios from 'axios'
-import Upvote from './Upvote'
import Loading from './Loading'
+import jwt_decode from 'jwt-decode';
+import buttons from '../styles/buttons.module.css'
const Posts = () => {
const [posts, setPosts] = useState([])
- const [searchFilter, setSearchFilter] = useState([]);
const [loading, setLoading] = useState(false)
const [drinks, setDrinks] = useState([])
+ const [loads, setLoads] = useState(1)
+ const [search, setSearch] = useState("")
+ const [searchChange, setSearchChange] = useState()
+
+
const loadPosts = () => {
- axios.get("http://localhost:5000/posts")
+ setLoading(true)
+
+ console.log(loads)
+ axios.get("http://localhost:5000/posts", { headers: { loads: loads, search: search } })
.then((res) => {
- console.log(res.data)
setPosts(res.data)
- setSearchFilter(res.data);
+ setLoading(false)
})
+ setLoads(loads + 1)
}
useEffect(() => {
@@ -27,51 +35,88 @@ const Posts = () => {
}, [])
+ const handleChange = (e) => {
+
+ setSearch(e.target.value)
+ setLoads(1)
+ console.log(searchChange)
+ }
+
+ const handleUpvote = (id) => {
+
+ const token = localStorage.getItem('token')
+ const decodedToken = jwt_decode(token);
+
+ const author = decodedToken.userId;
+ console.log(id)
+
+ axios.put("http://localhost:5000/upvote", { upvote: author, post_id: id })
+ .then((res) => {
+ console.log(res.data)
+
+ }).catch(err => console.log(err))
+
+ }
+
+
if (loading) {
return (
- <div>
- <Loading/>
- </div>
+ <div>
+ <Loading />
+ </div>
)
-} else
+ } else
console.log(posts)
-return (
+ return (
<div>
<input className={styles.searchbar}
type="text"
- placeholder="Filter your drinks by name..."
- />
-
+ placeholder="Filter your drinks by name..."
+ onChange={(e) => handleChange(e)}
+ />
+ <button className={buttons.button2} onClick={loadPosts}>Search</button>
<div>{posts.map((post) => {
return (
- <div className={styles.posts_container} key={post._id}>
- <div className={styles.post_img_container}>
- <img className={styles.img} src={`http://localhost:5000/uploads/${post.photo}`} />
+ <>
+ <div className={styles.posts_header}>
+ <img className={styles.img} src={`http://localhost:5000/uploads/${post.profile_picture}`} />
+ <p>{post.profile_name}</p>
+
+ <button className={styles.upvote} onClick={() => handleUpvote(post._id)}>Upvotes: {post.upvotes.length}</button>
+
</div>
- <div>
- <h1>{post.name}</h1>
- <div >
- <h3>Recipe:</h3>
- <div className={styles.tag_container}>
- <ul>
- {post.recipe[0].split(',').map((ingredient, index) => (
- <li key={index}>
- {ingredient}
- </li>
- ))}
- </ul>
+ <div className={styles.posts_container} key={post._id}>
+ <div className={styles.post_img_container}>
+ <img className={styles.img} src={`http://localhost:5000/uploads/${post.photo}`} />
+ </div>
+ <div>
+ <h2>{post.name}</h2>
+ <div >
+ <h3>Recipe:</h3>
+ <div className={styles.tag_container}>
+ <ul>
+ {post.recipe[0].split(',').map((ingredient, index) => (
+ <li key={index}>
+ {ingredient}
+ </li>
+
+ ))}
+ </ul>
+ </div>
</div>
+
+ <div className={styles.description}><p>Description: {post.description}</p> </div>
+
</div>
- <div className={styles.description}>Description: <p>{post.description}</p> </div>
</div>
- <Upvote />
- </div>
+ </>
)
})}</div>
+ <button onClick={loadPosts} className={buttons.button2} >Load 2 more</button>
</div>
)
diff --git a/frontend/src/components/ProfilePosts.js b/frontend/src/components/ProfilePosts.js
index c28c006d0e3da98bec3cc55ff36683358472ed13..3bbdfb629e146aa8d349e5b5279d39d579ce3e9a 100644
--- a/frontend/src/components/ProfilePosts.js
+++ b/frontend/src/components/ProfilePosts.js
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
import styles from '../styles/feed.module.css'
import { FaSearch } from "react-icons/fa";
import axios from 'axios'
-import Upvote from './Upvote'
import jwt_decode from 'jwt-decode';
import Loading from './Loading';
@@ -22,7 +21,6 @@ const ProfilePosts = () => {
const token = localStorage.getItem('token');
const decodedToken = jwt_decode(token);
-
const author = decodedToken.userId;
console.log(decodedToken.userId)
@@ -57,42 +55,44 @@ const ProfilePosts = () => {
if (loading) {
return (
<div>
- <Loading/>
+ <Loading />
</div>
)
} else
- return (
- <div className={styles.container}>
- <div>{posts.map((post) => {
- return (
- <div className={styles.posts_container} key={post._id}>
- <div className={styles.post_img_container}>
- <img className={styles.img} src={`http://localhost:5000/uploads/${post.photo}`} />
- </div>
- <div>
- <h1>{post.name}</h1>
- <div >
- <h3>Recipe:</h3>
- <div className={styles.tag_container}>
- <ul>
- {post.recipe[0].split(',').map((ingredient, index) => (
- <li key={index}>
- {ingredient}
- </li>
- ))}
- </ul>
+ return (
+ <div className={styles.container}>
+ <div>{posts.map((post) => {
+ return (
+ <div className={styles.wrapper}>
+ <div className={styles.posts_container} key={post._id}>
+ <div className={styles.post_img_container}>
+ <img className={styles.img} src={`http://localhost:5000/uploads/${post.photo}`} />
</div>
- </div>
+ <div>
+ <h1>{post.name}</h1>
+ <div >
+ <h3>Recipe:</h3>
+ <div className={styles.tag_container}>
+ <ul>
+ {post.recipe[0].split(',').map((ingredient, index) => (
+ <li key={index}>
+ {ingredient}
+ </li>
+ ))}
+ </ul>
+ </div>
+ </div>
+
+ <div className={styles.description}>Description: <p>{post.description}</p> </div>
- <div className={styles.description}>Description: <p>{post.description}</p> </div>
+ </div>
+ </div>
<button className={styles.delete} onClick={() => deletePost(post.photo, post._id)}>delete</button>
</div>
- <Upvote />
- </div>
- )
- })}</div>
- </div>
- )
+ )
+ })}</div>
+ </div>
+ )
}
export default ProfilePosts
\ No newline at end of file
diff --git a/frontend/src/components/Upvote.js b/frontend/src/components/Upvote.js
deleted file mode 100644
index 6afc6f376b968cc13f3ba3dd82ed1e8c83823d35..0000000000000000000000000000000000000000
--- a/frontend/src/components/Upvote.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useState } from 'react';
-import axios from 'axios'
-import styles from '../styles/feed.module.css'
-const Upvote = ({postId}) =>{
- const [count, setCount] = useState(0);
- const [upvotes, setUpvotes] = useState(0);
-
-
- const increment = () => {
- setCount(count + 1)
- }
-
- const decrement = () => {
- setCount(count - 1)
- }
-
- if (count<0){
- setCount(0);
- }
-
-
- // const formData = new FormData()
-
- //formData.append('Upvotes',count);
-
- //axios.post("http://localhost:5000/save",
- // formData
- // )
- return (
- <div className = {styles.upvote}>
- <button className={styles.upvote} onClick={increment}>
- ðŸº
- </button>
- <div>{count}</div>
-
-
- </div>
- )
-}
-
-export default Upvote;
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 89bc1d5f87f4ea97229cff2782586781e0926af4..f3b518b600e45d092353ca115fcfedd1bd3c8722 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -6,8 +6,8 @@
body {
margin: 0;
box-sizing: border-box;
- background: rgb(60, 72, 107);
- color: white;
+ background: #ffffff;
+ color: rgb(0, 0, 0);
font-family: 'Outfit', sans-serif;
}
.img{
diff --git a/frontend/src/pages/Feed.js b/frontend/src/pages/Feed.js
index 391454333bfaa66df94901383f6780ad7ffe4b3b..b9ded43003d5a99f9560b63bc5b491b3f2315e8c 100644
--- a/frontend/src/pages/Feed.js
+++ b/frontend/src/pages/Feed.js
@@ -1,25 +1,30 @@
import React from 'react'
import styles from '../styles/feed.module.css'
-import {useState, useEffect} from 'react'
+import { useState, useEffect } from 'react'
import Posts from '../components/Posts'
import Post from '../components/Post'
-
+import buttons from '../styles/buttons.module.css'
+import { FaArrowLeft } from 'react-icons/fa';
+import { Link } from 'react-router-dom'
const Feed = () => {
-return(
+ return (
+
+ <div>
+ <div className={styles.header}>
+ <div className={buttons.arrow}><Link to='/'><FaArrowLeft /></Link></div>
+ </div>
+ <Post />
+ <div className={styles.container} >
+ <Posts />
+ </div>
+ </div>
- <div>
- <Post/>
- <div className = {styles.container} >
- <Posts/>
- </div>
- </div>
-
-)
+ )
}
diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.js
index 1bd9cab489b15731ef89abb4c47139da823de172..1502d677162eaaea816bb01b9b6f582f7e98327d 100644
--- a/frontend/src/pages/Login.js
+++ b/frontend/src/pages/Login.js
@@ -3,17 +3,19 @@ import styles from '../styles/login.module.css'
import LoginForm from '../components/LoginForm'
import { FaArrowLeft } from 'react-icons/fa';
import { Link } from 'react-router-dom';
-
+import buttons from '../styles/login.module.css'
const Login = () => {
return (
<div className={styles.parent}>
- <div className={styles.left}>
- <div className={styles.arrow}><Link to='/'><FaArrowLeft/></Link></div>
- <h1 className={styles.label}>LOGIN🎈</h1>
+ <div className={styles.left}>
+ <div className={buttons.arrow}><Link to='/'><FaArrowLeft /></Link></div>
+ <h1 className={styles.label}>LOG IN</h1>
<LoginForm />
+
+ <p>or register <Link to='/register'>here</Link></p>
</div>
<div className={styles.right}>
<div className={styles.image_container}>
diff --git a/frontend/src/pages/Profile.js b/frontend/src/pages/Profile.js
index 9f29e9335a9f41acc41c57c4b88b1ce7aebe767d..6f09bb5c9f5a40b9905cdb867e16194128da704e 100644
--- a/frontend/src/pages/Profile.js
+++ b/frontend/src/pages/Profile.js
@@ -6,7 +6,8 @@ import styles from '../styles/profile.module.css'
import Post from '../components/Post'
import ProfilePosts from '../components/ProfilePosts'
import Loading from '../components/Loading';
-
+import { FaArrowLeft } from 'react-icons/fa';
+import buttons from '../styles/buttons.module.css'
const Profile = () => {
const [profileData, setProfileData] = useState()
@@ -73,22 +74,23 @@ const Profile = () => {
return (
<>
<div className={styles.header}>
+ <div className={buttons.arrow}><Link to='/'><FaArrowLeft /></Link></div>
<h1>Welcome to your profile page</h1>
- <h3>Redirect through these links ðŸ‘</h3>
+ <p>Redirect through these links</p>
<div className={styles.text_container}>
- <Link to='/feed'>
- <div className={styles.button}>discover</div>
+ <Link style={{ textDecoration:'none'}} to='/feed'>
+ <div className={buttons.button}>discover</div>
</Link>
<h3>|</h3>
- <Link to='/'>
- <div className={styles.button}>home</div>
+ <Link style={{ textDecoration:'none'}} to='/'>
+ <div className={buttons.button}>home</div>
</Link>
<h3>|</h3>
- <div className={styles.button} onClick={logout}>log out</div>
+ <div className={buttons.button} onClick={logout}>log out</div>
</div>
</div>
diff --git a/frontend/src/pages/Register.js b/frontend/src/pages/Register.js
index 8e52bca3c3d51f6878d901b7e8803bc7f1a0e097..1a4088fbb279df6ef5196f9b17d16e6354031d1d 100644
--- a/frontend/src/pages/Register.js
+++ b/frontend/src/pages/Register.js
@@ -1,11 +1,16 @@
import React from 'react'
import styles from '../styles/login.module.css'
import SignUp from '../components/SignUp'
+import { FaArrowLeft } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
+import buttons from '../styles/login.module.css'
+
const Register = () => {
return (
<div className={styles.parent}>
<div className={styles.left}>
- <h1 className={styles.label}>Sign upâ¤ï¸</h1>
+ <div className={buttons.arrow}><Link to='/'><FaArrowLeft /></Link></div>
+ <h1 className={styles.label}>Register</h1>
<SignUp/>
</div>
<div className={styles.right}>
diff --git a/frontend/src/styles/buttons.module.css b/frontend/src/styles/buttons.module.css
index 684cb06221d739ee8e9a08c6f082ba7ffd2f3ef4..d7918793e08e7c1793e5c2b6f39d9c2213906237 100644
--- a/frontend/src/styles/buttons.module.css
+++ b/frontend/src/styles/buttons.module.css
@@ -1,6 +1,6 @@
-button {
+.button {
font-size: 18px;
- color: #e1e1e1;
+ color: #000000;
font-family: inherit;
font-weight: 800;
cursor: pointer;
@@ -11,20 +11,21 @@ button {
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 400ms;
transition-property: color;
+
}
- button:focus,
- button:hover {
- color: #fff;
+ .button:focus,
+ .button:hover {
+ color: #7f9ec5;
}
- button:focus:after,
- button:hover:after {
+ .button:focus:after,
+ .button:hover:after {
width: 100%;
left: 0%;
}
- button:after {
+ .button:after {
content: "";
pointer-events: none;
bottom: -2px;
@@ -32,8 +33,76 @@ button {
position: absolute;
width: 0%;
height: 2px;
- background-color: #fff;
+ background-color: #7f9ec5;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 400ms;
transition-property: width, left;
- }
\ No newline at end of file
+ }
+ .arrow{
+ position: absolute;
+ justify-self: left;
+ margin: 15px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgb(0, 0, 0);
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ align-items: center;
+ transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition-duration: 400ms;
+ color: rgb(255, 255, 255);
+ }
+ .arrow:hover{
+ transform: scale(1.2);
+
+ }
+ .arrow:hover a{
+ transform: scale(1.1);
+
+
+ }
+ .arrow a{
+ color: rgb(255, 251, 190);
+ font-size: 120%;
+ justify-self: center;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ }
+ .button2 {
+ font-family: 'Outfit', sans-serif;
+ appearance: none;
+ background-color: #ffcd6f;
+ border: 1px solid #ffffff;
+ border-radius: 5px;
+ color: #ffffff;
+ cursor: pointer;
+ font-size: 18px;
+ line-height: normal;
+ height: 54px;
+ width: 130px;
+ outline: none;
+ text-align: center;
+ transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ will-change: transform;
+ margin:10px;
+ }
+
+
+
+ .button2:hover {
+ color: #ffffff;
+ background-color: #5cbbd8;
+ border: 1px solid #30a5af;
+ box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
+ }
+
+ .button2:active {
+ box-shadow: none;
+
+ }
\ No newline at end of file
diff --git a/frontend/src/styles/feed.module.css b/frontend/src/styles/feed.module.css
index feff1b54a7bc0190f0d565ac4792326f966a34b5..cbc46522c1ca09c8caebcf6f34e2bd6354c94578 100644
--- a/frontend/src/styles/feed.module.css
+++ b/frontend/src/styles/feed.module.css
@@ -1,266 +1,307 @@
+input {
+ text-align: start;
+ margin-left: 10px;
+ font-family: 'Outfit', sans-serif;
-input{
- text-align: start;
- margin-left:10px;
- font-family: 'Outfit', sans-serif;
+}
+
+:focus::placeholder {
+ color: rgb(197, 197, 197);
+}
- }
- :focus::placeholder {
- color: transparent;
- }
+textarea {
+ text-align: start;
+ margin-left: 10px;
+ resize: none;
+ font-family: 'Outfit', sans-serif;
- textarea{
- text-align: start;
- margin-left:10px;
- resize: none;
- font-family: 'Outfit', sans-serif;
+}
- }
- .pick_file {
- color: rgb(67, 1, 128);
+.pick_file {
+ color: rgb(0, 0, 0);
font-size: 35px;
- margin-left:30px;
- margin-top:5px;
+ margin-left: 30px;
+ margin-top: 5px;
display: flex;
justify-content: center;
align-items: center;
-
-
}
-.recipe{
- background:green;
-width:300px;
-border: none;
-background-color: rgb(26, 100, 100);
-border-radius:4px;
-color: aliceblue;
-margin: 10px;
+.recipe {
+ width: 300px;
+ border: none;
+ background-color: rgb(161, 161, 161);
+ border-radius: 4px;
+ color: rgb(255, 255, 255);
+ margin: 10px;
}
-.description{
- background:green;
-width:300px;
-border: none;
-background-color: rgb(26, 100, 100);
-border-radius:4px;
-color: aliceblue;
-margin: 10px;
+.description {
+ width: 300px;
+ border: none;
+ background-color: rgb(49, 49, 49);
+ border-radius: 4px;
+ color: rgb(255, 255, 255);
+ margin: 10px;
}
+
.image_container {
- width: 300px; /* set width of image container */
- height: 300px; /* set height of image container */
- border-radius: 20px; /* make image container circular */
+ width: 300px;
+ /* set width of image container */
+ height: 300px;
+ /* set height of image container */
+ border-radius: 20px;
+ /* make image container circular */
overflow: hidden;
- display: flex; /* Add display flex to center image vertically */
- align-items: center; /* Center image vertically */
- justify-content: center; /* Center image horizontally */
-
- }
-
-.image_container img {
-height: 100%;
-width: 100%;
-object-fit: cover;
+ display: flex;
+ /* Add display flex to center image vertically */
+ align-items: center;
+ /* Center image vertically */
+ justify-content: center;
+ /* Center image horizontally */
+
+}
+.image_container img {
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+}
+.header{
+ height: 20vh;
}
.container {
- background: rgb(49, 117, 121);
- border-radius: 2px;
- box-shadow: 0 8px 13px 0 rgba(41, 41, 43, 0.548);
- width: 90%;
- margin:auto;
- text-align: center;
- padding: 20px;
- backdrop-filter: blur(10px);
+ background: rgb(255, 255, 255);
+ border-radius: 2px;
+ box-shadow: 0 8px 13px 0 rgba(41, 41, 43, 0.705);
+ width: 90%;
+ margin: auto;
+ padding: 20px;
+ backdrop-filter: blur(10px);
+ justify-content: center;
+ display: flex;
+ text-align: center;
+
}
-.searchbar{
- border: none;
- background-color: rgb(26, 100, 100);
- width: 500px;
- height: 50px;
- color: aliceblue;
- outline: none;
- margin-left: 50px;
- margin-bottom: 10px;
- margin-top: 15px;
- border-radius:4px;
- font-size: 16px;
+
+.searchbar {
+ background-color: rgb(255, 255, 255);
+ width: 500px;
+ height: 50px;
+ color: rgb(0, 0, 0);
+ border: solid 1px black;
+ outline: none;
+ margin: 10px;
+ border-radius: 5px;
+ font-size: 18px;
}
-.post_container{
- min-height: 35vh;
- margin: auto;
- margin-top:20px;
- margin-bottom: 20px;
- width: 600px;
- text-align: center;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- background: linear-gradient(135deg,rgb(48, 51, 51),rgb(36, 44, 44),0 );
- backdrop-filter: blur(10px);
- -webkit-backdrop-filter: blur(10px);
- border-radius: 10px;
- box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
- box-align: center;
- }
- .post_container h1{
- margin: auto;
- margin-top: 10px;
- }
- .post_input1{
- border: none;
- background-color: rgb(26, 100, 100);
- width: 500px;
- height: 30px;
- color: aliceblue;
- outline: none;
- margin-left: 50px;
- margin-bottom: 10px;
- margin-top: 15px;
- border-radius:4px;
- }
- .post_input2{
- border: none;
- background-color: rgb(26, 100, 100);
- width: 500px;
- height: 100px;
- color: rgb(250, 250, 250);
- outline: none;
- margin-left: 50px;
- margin-bottom: 10px;
- margin-right: 20px;
- border-radius:4px;
- }
- .post_container button{
- background: rgb(150, 172, 110);
- color: white;
- font-size: 18px;
- border: none;
- min-width: 100px;
- height: 50px;
- margin-left: 50px;
- margin-bottom: 25px;
- font-family: 'Outfit', sans-serif;
- border-radius: 5px;
-
-
-
- }
- .delete{
-
- background: rgb(177, 79, 61);
- color: white;
- font-size: 18px;
- border: none;
- min-width: 100px;
- height: 50px;
- margin-left: 50px;
- margin-bottom: 25px;
- font-family: 'Outfit', sans-serif;
- border-radius: 5px;
-
- }
+
+.post_container {
+ height: 65vh;
+ align-self: center;
+ justify-self: center;
+ margin: auto;
+ width:93%;
+ display: flex;
+ flex-direction: column;
+ box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
+ background-color: #F28482;
+}
+
+
+.post_header{
+ margin: 25px;
+ display: flex;
+ width: 100%;
+ color: white;
+}
+.input_fields{
+ display: flex;
+ flex-direction: column;
- .upvote{
- background-color: rgb(25, 100, 100);
- height: 40px;
- width:40px;
- box-align: center;
- margin-top: 25px;
- margin-left:40px;
- font-size: 22px;
- font-family: 'Poppins', sans-serif;
- border-radius: 5px;
- border: none;
- color: white;
-
- }
-
- .upvote button{
- background: rgb(150, 172, 110);
- color: white;
- margin: auto;
- }
- .posts_container{
- min-height: 35vh;
- margin: auto;
- margin-top: 30px;
-
- width: 900px;
- text-align: center;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- background: linear-gradient(135deg,rgb(48, 51, 51),rgb(36, 44, 44),0 );
- backdrop-filter: blur(10px);
- -webkit-backdrop-filter: blur(10px);
- border-radius: 10px;
- box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
- }
- .preview_img_container{
- width: 60px; /* set width of image container */
- height: 60px;
- border-radius: 50%; /* make image container circular */
- overflow: hidden;
- /* Add display flex to center image vertically */
- align-items: center; /* Center image vertically */
- justify-content: center; /* Center image horizontally */
- margin-left: 20px;
- }
- .post_img_container{
- width: 300px; /* set width of image container */
- height: 35vh; /* set height of image container */
- border-top-left-radius: 10px;
- border-bottom-left-radius: 10px;
-
- overflow: hidden;
- display: flex; /* Add display flex to center image vertically */
- align-items: center; /* Center image vertically */
- justify-content: center; /* Center image horizontally */
- margin-right: 10%;
-
- }
- .post_img_container img{
+}
+
+.post_input1 {
+ border: none;
+ background-color: rgb(235, 235, 235);
+ width: 500px;
+ height: 30px;
+ color: rgb(0, 0, 0);
+ outline: none;
+ border-radius: 4px;
+ border: 2px solid rgb(255, 255, 255);
+ margin-top: 10px;
+
+}
+
+.post_input2 {
+ border: none;
+ background-color: rgb(235, 235, 235);
+ width: 500px;
+ height: 100px;
+ color: rgb(0, 0, 0);
+ outline: none;
+ border-radius: 4px;
+ border: 2px solid rgb(255, 255, 255);
+}
+
+
+.delete {
+ background: rgb(182, 55, 55);
+ color: rgb(255, 255, 255);
+ font-size: 18px;
+ border: none;
+ min-width: 100px;
+ height: 50px;
+ font-family: 'Outfit', sans-serif;
+ border-radius: 5px;
+ box-sizing: border-box;
+ transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+ transition-duration: 400ms;
+ margin-left: 50px;
+}
+
+.delete:hover {
+ transform: scale(1.1);
+
+}
+
+.upvote {
+ height: 40px;
+ width: 110px;
+ font-size: 18px;
+ border-radius: 5px;
+ border: none;
+ background-color: #ffcd6f;
+ color: rgb(255, 255, 255);
+ margin-left: auto;
+ margin-right: 20px;
+ font-family: 'Outfit', sans-serif;
+}
+
+
+.posts_container {
+ min-height: 35vh;
+ width: 900px;
+ display: flex;
+ background: linear-gradient(135deg, rgb(48, 51, 51), rgb(36, 44, 44), 0);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
+ text-align: left;
+}
+
+.preview_img_container {
+ width: 60px;
+ /* set width of image container */
+ height: 60px;
+ border-radius: 50%;
+ /* make image container circular */
+ overflow: hidden;
+ /* Add display flex to center image vertically */
+ align-items: center;
+ /* Center image vertically */
+ justify-content: center;
+ /* Center image horizontally */
+ margin-left: 20px;
+}
+
+.post_img_container {
+ width: 300px;
+ /* set width of image container */
+ height: 35vh;
+ /* set height of image container */
+ border-bottom-left-radius: 10px;
+
+ overflow: hidden;
+ display: flex;
+ /* Add display flex to center image vertically */
+ align-items: center;
+ /* Center image vertically */
+ justify-content: center;
+ /* Center image horizontally */
+ margin-right: 10%;
+
+}
+
+.post_img_container img {
+
height: 100%;
- width: 100%;
- object-fit: cover;
- }
-
- .addpicture{
- text-align: center;
- margin-right: 30px;
- margin-left:31%;
- margin-bottom: 30px;
- height:50px;
- width:500px;
- display:flex;
- }
- ::placeholder {
- color:aliceblue;
- text-align: start;
- }
-
- .tag_container {
- display: flex;
- flex-direction: row;
- margin: 5px;
- }
- .tag_container ul {
- list-style: none;
- margin: 0;
- padding: 0;
- }
- .tag_container li {
- background-color: rgb(26, 100, 100);
- border-radius: 3px;
- padding: 5px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: inline-block;
- }
\ No newline at end of file
+ width: 100%;
+ object-fit: cover;
+}
+
+.addpicture {
+ text-align: center;
+ margin-right: 30px;
+ margin-left: 31%;
+ margin-bottom: 30px;
+ height: 50px;
+ width: 500px;
+ display: flex;
+}
+
+::placeholder {
+ color: rgb(0, 0, 0);
+ text-align: start;
+}
+
+.tag_container {
+ display: flex;
+ flex-direction: row;
+ margin: 5px;
+}
+
+.tag_container ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.tag_container li {
+ background-color: rgb(32, 32, 32);
+ color: white;
+ border-radius: 3px;
+ padding: 5px;
+ margin-right: 10px;
+ margin-bottom: 10px;
+ display: inline-block;
+}
+
+.wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 50px;
+}
+
+.posts_header {
+ height: 55px;
+ background-color: #F28482;
+ margin-top: 30px;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ box-shadow: 2px;
+ box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.808);
+ color: white;
+ display: flex;
+ align-items: center;
+
+}
+
+.posts_header img {
+ width: 45px;
+ height: 45px;
+ border-radius: 50%;
+ object-fit: cover;
+ margin: 5px;
+ border: solid 1px white;
+ margin-left: 10px;
+}
\ No newline at end of file
diff --git a/frontend/src/styles/header.module.css b/frontend/src/styles/header.module.css
index 544ffac84bc905e7139f53ef2a38fcea763fc71f..41d5435a3cfb0388bdceeb12ab3df83a71309d5c 100644
--- a/frontend/src/styles/header.module.css
+++ b/frontend/src/styles/header.module.css
@@ -4,14 +4,17 @@ margin: 0;
padding: 10px;
display: flex;
justify-content: flex-end;
+align-items: center;
+
}
+
.button {
appearance: none;
- background-color: rgb(255, 240, 153);
- border: 0.125em solid #383838;
- border-radius: 0.9375em;
+ background-color: #ffffff;
+ border: 0.125em solid #000000;
+ border-radius: 5px;
box-sizing: border-box;
- color: #383838;
+ color: #000000;
cursor: pointer;
display: inline-block;
font-size: 16px;
@@ -36,8 +39,9 @@ justify-content: flex-end;
}
.button:hover {
- color: #fff;
- background-color: #1A1A1A;
+ color: #ffffff;
+ background-color: #292929;
+ border: 0.125em solid #4DA1A9;
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
transform: translateY(-2px);
}
diff --git a/frontend/src/styles/login.module.css b/frontend/src/styles/login.module.css
index 38bef5db77f3a449393b2ab35bc0a0753d18385a..229d6a34651c1b36ef705a72589f568b0315a5fd 100644
--- a/frontend/src/styles/login.module.css
+++ b/frontend/src/styles/login.module.css
@@ -1,3 +1,7 @@
+p{
+ font-size: 18px;
+}
+
.parent{
display: flex;
height: 100vh;
@@ -9,37 +13,47 @@
width: 40px;
height: 40px;
border-radius: 50%;
- background: rgb(49, 117, 121);
+ background: #c0c0c0;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 400ms;
- color: rgb(255, 240, 153);
+ color: rgb(0, 0, 0);
}
.arrow:hover{
- width: 42px;
- height: 42px;
+ width: 48px;
+ height: 48px;
}
-.arrow a{
- color: yellow;
+.arrow:hover a{
+ font-size: 120%;
+
+}
+.arrow a{
+ color: #000000;
+ font-size: 120%;
+ justify-self: center;
+ align-items: center;
+ justify-content: center;
+ display: flex;
}
.left{
width: 30%;
- background: rgb(49, 117, 121);
- border-right: solid 4px rgb(255, 240, 153);
+ background: #ffffff;
+ border-right: solid 4px #000000;
box-shadow: 200px 300px 300px 400px rgba(8, 8, 8, 0.863);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
+ text-align: center;
}
.left h1{
margin: 10;
font-size: 300%;
- color: rgb(255, 240, 153);
+ color: #203ec5;
text-align: center;
}
@@ -69,7 +83,7 @@
border-radius: .5rem;
padding: 0 1rem;
border: 2px solid transparent;
- font-size: 1rem;
+ font-size: 20px;
transition: border-color .3s cubic-bezier(.25,.01,.25,1) 0s, color .3s cubic-bezier(.25,.01,.25,1) 0s,background .2s cubic-bezier(.25,.01,.25,1) 0s;
}
@@ -78,19 +92,19 @@
margin-bottom: .3rem;
font-size: .9rem;
font-weight: bold;
- color: #05060f99;
+ color: #00000099;
transition: color .3s cubic-bezier(.25,.01,.25,1) 0s;
}
.input:hover, .input:focus, .input-group:hover .input {
outline: none;
- border-color: #05060f;
+ border-color: #000000;
}
.input-group:hover .label, .input:focus {
- color: #05060fc2;
+ color: #000000c2;
}
.inputs{
margin: 15px;
@@ -105,11 +119,11 @@
}
.button {
appearance: none;
- background-color: rgb(255, 240, 153);
- border: 0.125em solid #383838;
- border-radius: 0.9375em;
+ background-color: #ffffff;
+ border: 0.125em solid #000000;
+ border-radius: 5px;
box-sizing: border-box;
- color: #383838;
+ color: #000000;
cursor: pointer;
display: inline-block;
font-size: 16px;
@@ -127,16 +141,16 @@
touch-action: manipulation;
will-change: transform;
margin: 5px;
- font-family: 'Questrial', sans-serif;
-}
+ }
.button:disabled {
pointer-events: none;
}
.button:hover {
- color: #fff;
- background-color: #1A1A1A;
+ color: #ffffff;
+ background-color: #292929;
+ border: 0.125em solid #5e5e5e;
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
transform: translateY(-2px);
}
@@ -144,4 +158,4 @@
.button:active {
box-shadow: none;
transform: translateY(0);
- }
+ }
\ No newline at end of file
diff --git a/frontend/src/styles/profile.module.css b/frontend/src/styles/profile.module.css
index 00305dc1fd3b14b368466a2a0f10c3f1dc164509..c2c3f99a727001e00d4efed4d67a250f1607d7cf 100644
--- a/frontend/src/styles/profile.module.css
+++ b/frontend/src/styles/profile.module.css
@@ -1,13 +1,11 @@
-body{
- text-align: center;
-
-}
+
h1{
- color: rgb(255, 240, 153);
-
+ font-size: 50px;
+ text-align: center;
}
h2{
margin: 0;
+
}
h3{
margin: 20px;
@@ -21,27 +19,29 @@ h3{
display: block;
overflow: hidden;
margin: 20px auto;
- border: 2px solid rgba(211, 188, 113, 0.664);
+ border: 3px solid rgb(0, 0, 0);
}
.profile{
- background: rgb(49, 117, 121);
+ background: rgb(255, 255, 255);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
- border-radius: 10px;
- border: 2px solid rgba(169, 173, 173, 0.2);
+ border-radius: 5px;
+ border: 2px solid rgb(0, 0, 0);
box-shadow: 0 8px 23px 0 rgba(37, 37, 37, 0.562);
text-align: center;
width: 40vw;
margin: 100px auto;
min-height: 50vh;
+
}
.header{
max-width: 100vw;
min-height: 10vh;
margin: 0;
- background-color: rgb(49, 117, 121);
+ background-color: rgb(255, 255, 255);
box-sizing: border-box;
+ text-align: center;
}
.text_container{
@@ -49,45 +49,10 @@ h3{
flex-direction: row;
justify-content: center;
text-align: center;
-
+ justify-content: center;
+ align-items: center;
+ text-decoration: none;
+}
+.text_container Link{
+ text-decoration: none;
}
-.button {
- appearance: none;
- background-color: rgb(255, 240, 153);
- border: 0.125em solid #383838;
- border-radius: 0.9375em;
- box-sizing: border-box;
- color: #383838;
- cursor: pointer;
- display: inline-block;
- font-size: 16px;
- font-weight: 600;
- line-height: normal;
- margin: 0;
- min-height: 3.75em;
- min-width: 0;
- outline: none;
- padding: 1em 2.3em;
- text-align: center;
- transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
- user-select: none;
- -webkit-user-select: none;
- touch-action: manipulation;
- will-change: transform;
- margin: 5px;
- }
- .button:disabled {
- pointer-events: none;
- }
-
- .button:hover {
- color: #fff;
- background-color: #1A1A1A;
- box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
- transform: translateY(-2px);
- }
-
- .button:active {
- box-shadow: none;
- transform: translateY(0);
- }
\ No newline at end of file
diff --git a/frontend/src/styles/styles.module.css b/frontend/src/styles/styles.module.css
index d75be0ff6d7845b93603cfcd0360170774502cda..19077064383bf4b63b4a374256297db7add7e39e 100644
--- a/frontend/src/styles/styles.module.css
+++ b/frontend/src/styles/styles.module.css
@@ -1,8 +1,6 @@
p{
- color:rgb(240, 240, 240);
font-family: 'Outfit', sans-serif;
-
}
input{
@@ -18,8 +16,8 @@ textarea{
display: flex;
justify-content: center;
align-items: center;
- background-color: rgb(60, 72, 107);
- color: rgb(240, 240, 240);
+ background-color: #ffffff;
+ color: rgb(0, 0, 0);
flex-wrap: wrap; /* Add flex-wrap property to allow text to wrap */
}
.Header p{
@@ -29,7 +27,7 @@ textarea{
}
.Header h1{
margin: 0;
- color: rgb(255, 240, 153);
+ color: #000000;
font-size: 350%;
}
@@ -76,29 +74,31 @@ object-fit: cover;
height: 70vh;
display: flex;
justify-content: center;
- background: rgb(60, 72, 107);
+ background: #ffffff;
flex-wrap: wrap; /* Add flex-wrap property to allow text to wrap */
}
.card {
margin: 30px;
- width: 350px;
- height: 350px;
- color: rgb(240, 240, 240);
- border-radius: 10px;
+ width: 400px;
+ height: 450px;
+ margin: auto;
+ color: rgb(0, 0, 0);
+ border-radius: 5px;
+ border: solid 3px black;
box-shadow: 0 8px 13px 0 rgba(41, 41, 43, 0.548);
text-align: center;
- background: rgb(60, 72, 107);
+ background: #ffffff;
}
.card h1{
-
- color: rgb(240, 240, 240);
+ font-size: 250%;
+ color: #000000;
}
.list{
list-style: none;
padding: 0;
margin: 0;
- background: rgb(60, 72, 107);
+ background: #ffffff;
font-size: 120%;
}
@@ -144,7 +144,7 @@ object-fit: cover;
background-color: rgb(26, 100, 100);
width: 500px;
height: 100px;
- color: rgb(250, 250, 250);
+ color: rgb(0, 0, 0);
outline: none;
margin-left: 50px;
margin-bottom: 10px;
@@ -153,7 +153,7 @@ object-fit: cover;
}
.post_container button{
background: rgb(150, 172, 110);
- color: white;
+ color: rgb(0, 0, 0);
font-weight: bold;
font-size: 18px;
border: none;