mirror of
https://github.com/hazemKrimi/pexta.git
synced 2026-05-01 18:30:26 +00:00
Add files via upload
This commit is contained in:
Hazem Krimi
Generated
+14668
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "pexta",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"node-sass": "^4.12.0",
|
||||
"react": "^16.9.0",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-router-dom": "^5.0.1",
|
||||
"react-scripts": "3.1.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta lang="en-US">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<title>Pexta</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Route } from 'react-router-dom';
|
||||
import LandingPage from './components/LandingPage';
|
||||
import HomePage from './components/HomePage';
|
||||
import PostPage from './components/PostPage';
|
||||
import './App.scss';
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Router>
|
||||
<Route path="/" exact component={LandingPage} />
|
||||
<Route path="/home" exact component={HomePage} />
|
||||
<Route path="/post" exact component={PostPage} />
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,50 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
|
||||
@import './scss/variables';
|
||||
|
||||
:root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: none;
|
||||
height: 100%;
|
||||
font-family: Montserrat;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: .3rem;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(#ee64d1, #eacc56);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: Montserrat;
|
||||
font-size: inherit;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.route-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import '../scss/AddPost.scss';
|
||||
|
||||
class AddPost extends React.Component {
|
||||
close = () => {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div id="add-post-container" style={{display: this.props.display ? "grid" : "none"}}>
|
||||
<div id="add-post">
|
||||
<svg className="close-add-post" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="438.533px" height="438.533px" viewBox="0 0 438.533 438.533" onClick={this.close}>
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="275.62" y1="495.12" x2="71.68" y2="291.18" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
|
||||
c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
|
||||
c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
|
||||
s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
|
||||
C438.533,179.485,428.732,142.795,409.133,109.203z M322.621,270.939c3.617,3.613,5.428,7.905,5.428,12.854
|
||||
c0,5.133-1.811,9.514-5.428,13.127l-25.693,25.701c-3.614,3.613-7.994,5.42-13.135,5.42c-4.948,0-9.236-1.807-12.847-5.42
|
||||
l-51.676-51.682l-51.678,51.682c-3.616,3.613-7.898,5.42-12.847,5.42c-5.14,0-9.517-1.807-13.134-5.42l-25.697-25.701
|
||||
c-3.616-3.613-5.424-7.994-5.424-13.127c0-4.948,1.809-9.24,5.424-12.854l51.678-51.673l-51.678-51.678
|
||||
c-3.616-3.612-5.424-7.898-5.424-12.847c0-5.14,1.809-9.517,5.424-13.134l25.697-25.693c3.617-3.616,7.994-5.424,13.134-5.424
|
||||
c4.949,0,9.231,1.809,12.847,5.424l51.678,51.674l51.676-51.674c3.61-3.616,7.898-5.424,12.847-5.424
|
||||
c5.141,0,9.521,1.809,13.135,5.424l25.693,25.693c3.617,3.617,5.428,7.994,5.428,13.134c0,4.948-1.811,9.235-5.428,12.847
|
||||
l-51.675,51.678L322.621,270.939z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<h2>Add a Post</h2>
|
||||
<form>
|
||||
<input type="text" placeholder="Title" />
|
||||
<textarea rows="10" placeholder="Content"></textarea>
|
||||
<button className="btn btn-gradient">Post</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AddPost;
|
||||
@@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import "../scss/DesktopProfileSettings.scss";
|
||||
|
||||
class DesktopProfileSettings extends React.Component {
|
||||
close = () => {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div id="desktop-profile-settings-container" style={{display: this.props.display ? "grid" : "none"}}>
|
||||
<div id="desktop-profile-settings">
|
||||
<div>
|
||||
<h2>Profile Settings</h2>
|
||||
<svg onClick={this.close} className="close-profile-settings" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="438.533px" height="438.533px" viewBox="0 0 438.533 438.533">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="275.62" y1="495.12" x2="71.68" y2="291.18" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
|
||||
c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
|
||||
c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
|
||||
s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
|
||||
C438.533,179.485,428.732,142.795,409.133,109.203z M322.621,270.939c3.617,3.613,5.428,7.905,5.428,12.854
|
||||
c0,5.133-1.811,9.514-5.428,13.127l-25.693,25.701c-3.614,3.613-7.994,5.42-13.135,5.42c-4.948,0-9.236-1.807-12.847-5.42
|
||||
l-51.676-51.682l-51.678,51.682c-3.616,3.613-7.898,5.42-12.847,5.42c-5.14,0-9.517-1.807-13.134-5.42l-25.697-25.701
|
||||
c-3.616-3.613-5.424-7.994-5.424-13.127c0-4.948,1.809-9.24,5.424-12.854l51.678-51.673l-51.678-51.678
|
||||
c-3.616-3.612-5.424-7.898-5.424-12.847c0-5.14,1.809-9.517,5.424-13.134l25.697-25.693c3.617-3.616,7.994-5.424,13.134-5.424
|
||||
c4.949,0,9.231,1.809,12.847,5.424l51.678,51.674l51.676-51.674c3.61-3.616,7.898-5.424,12.847-5.424
|
||||
c5.141,0,9.521,1.809,13.135,5.424l25.693,25.693c3.617,3.617,5.428,7.994,5.428,13.134c0,4.948-1.811,9.235-5.428,12.847
|
||||
l-51.675,51.678L322.621,270.939z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="settings">
|
||||
<div className="change-photo">
|
||||
<h3>Change Profile Picture</h3>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1855 1855">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="-356" y1="927.47" x2="2276" y2="927.47" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M1927,1000.5C1927,489.09,1510.91,73,999.5,73S72,489.09,72,1000.5c0,270.12,116.16,513.6,301.05,683.25l-.88.77,30.09,25.37c1.95,1.65,4.08,3,6,4.62,16,13.25,32.55,25.83,49.42,38,5.46,3.94,10.92,7.89,16.49,11.73q27,18.63,55.38,35.35c4.11,2.43,8.26,4.79,12.41,7.15,20.67,11.77,41.79,22.87,63.41,33,1.58.75,3.2,1.42,4.79,2.16a919,919,0,0,0,224.32,71l6.2,1.11c24.42,4.22,49.11,7.59,74.1,9.85,3,.27,6.07.44,9.14.71,24.89,2,50,3.37,75.55,3.37,25.26,0,50.19-1.32,74.94-3.31,3.14-.27,6.28-.43,9.41-.7q37.19-3.39,73.46-9.68c2.09-.37,4.22-.75,6.31-1.15a919.21,919.21,0,0,0,221.15-69.31c2.56-1.18,5.16-2.29,7.72-3.51q31.21-14.67,61.08-31.57c5-2.8,9.88-5.63,14.81-8.53,18.14-10.69,36-21.85,53.32-33.73,6.24-4.25,12.34-8.73,18.52-13.18,14.8-10.66,29.34-21.66,43.47-33.16,3.14-2.53,6.51-4.72,9.58-7.32l30.86-25.76-.91-.78C1809.73,1516.59,1927,1272,1927,1000.5Zm-1787.55,0c0-474.24,385.81-860,860.05-860s860.05,385.81,860.05,860.05c0,255.55-112.15,485.3-289.69,642.94a253.6,253.6,0,0,0-30.12-18.11l-285.57-142.77a74.75,74.75,0,0,1-41.55-67.21v-99.74c6.61-8.16,13.59-17.4,20.81-27.55a687.14,687.14,0,0,0,88.23-172.79A122.38,122.38,0,0,0,1392,1004.34V884.78a122.73,122.73,0,0,0-29.91-79.9V647.48c1.75-17.54,8-116.3-63.51-197.78-62.16-71-162.77-106.88-299.06-106.88S762.6,378.74,700.44,449.67C629,531.15,635.18,630,636.93,647.44V804.85A122.87,122.87,0,0,0,607,884.75v119.56a122.72,122.72,0,0,0,45.19,95.15c27.32,107,83.54,188,104.32,215.48v97.61a75.23,75.23,0,0,1-39.19,66L450.66,1624.05a244.6,244.6,0,0,0-25.37,16C250,1482.53,139.45,1254.2,139.45,1000.5Z" transform="translate(-72 -73)"/>
|
||||
</svg>
|
||||
<input type="file" accept="image/*"/>
|
||||
<button className="btn btn-gradient">Change</button>
|
||||
</div>
|
||||
<div className="change-password">
|
||||
<h3>Change Password</h3>
|
||||
<form>
|
||||
<input type="password" placeholder="Old Password"/>
|
||||
<input type="password" placeholder="New Password"/>
|
||||
<input type="password" placeholder="Confirm New Password"/>
|
||||
</form>
|
||||
<button className="btn btn-gradient">Change</button>
|
||||
</div>
|
||||
<div className="change-email">
|
||||
<h3>Change Email</h3>
|
||||
<form>
|
||||
<input type="email" placeholder="Old Email"/>
|
||||
<input type="email" placeholder="New Email"/>
|
||||
<input type="email" placeholder="Confirm New Email"/>
|
||||
</form>
|
||||
<button className="btn btn-gradient">Change</button>
|
||||
</div>
|
||||
<div className="change-username">
|
||||
<h3>Change Username</h3>
|
||||
<input type="text" placeholder="New Username"/>
|
||||
<button className="btn btn-gradient">Change</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DesktopProfileSettings;
|
||||
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import '../scss/Footer.scss';
|
||||
|
||||
class Footer extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<footer>
|
||||
<div className="container">
|
||||
<svg className="footer-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 758.29 291.67">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="275.62" y1="495.12" x2="71.68" y2="291.18" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path className="cls-1" d="M159.5,233.17A145.84,145.84,0,1,0,305.33,379,145.83,145.83,0,0,0,159.5,233.17ZM141.64,349.46l-14.15,101A12.41,12.41,0,1,1,102.92,447l14.14-101a12.41,12.41,0,0,1,24.58,3.44Zm44.85,57.13a50.23,50.23,0,0,1-8.82-.78L161,403.74a12.53,12.53,0,0,1-10.9-14h0a12.53,12.53,0,0,1,14-10.9l18.42,2.28c12.52,1.18,23.92-8,25.73-20.92,1.87-13.31-7.11-25.57-20-27.38-.41-.06-.82-.09-1.22-.12l0-.08-77-10.78a12.54,12.54,0,0,1-10.68-14.17h0A12.54,12.54,0,0,1,113.48,297l78.9,11.06a8.08,8.08,0,0,1,1,.19,49.39,49.39,0,0,1-6.87,98.34Z" transform="translate(-13.67 -233.17)"/>
|
||||
<g>
|
||||
<path className="cls-2" d="M401.21,340.1A37.87,37.87,0,0,1,417.85,355q5.79,9.67,5.79,23,0,13.14-5.79,22.9a37.68,37.68,0,0,1-16.64,14.95Q390.37,421,375.74,421h-25.4v34.91h-20.9v-121h46.3Q390.37,334.92,401.21,340.1Zm-5.7,55.65q7.07-6.22,7.07-17.8t-7.07-17.8q-7.08-6.22-20.74-6.22H350.34v48h24.43Q388.44,402,395.51,395.75Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M522.65,416.66H455.3a25.45,25.45,0,0,0,9.24,16.16q7.48,6,18.57,6,14.14,0,23.31-10l10.77,13.3a36.54,36.54,0,0,1-14.63,11.24,50.09,50.09,0,0,1-19.93,3.8q-14.14,0-24.92-6.05a41.88,41.88,0,0,1-16.63-16.85,50.29,50.29,0,0,1-5.87-24.45,51.09,51.09,0,0,1,5.71-24.28,42,42,0,0,1,15.83-16.85,43.67,43.67,0,0,1,22.82-6.05,42.62,42.62,0,0,1,22.43,6,41,41,0,0,1,15.43,16.76q5.54,10.81,5.54,25C523,411.76,522.87,413.9,522.65,416.66ZM463.26,386q-6.67,6.13-8.12,16.33h48.7A26.12,26.12,0,0,0,496,386.07a23,23,0,0,0-16.4-6.22A23.2,23.2,0,0,0,463.26,386Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M594.5,455.89l-22-32-22.18,32H528.12l33.43-46.83-32-45.45h22.35L573,393.85,594,363.61h21.7l-32.15,45.1,33.6,47.18Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M683.55,450.88a23,23,0,0,1-8.6,4.66,36.08,36.08,0,0,1-10.69,1.56q-14.14,0-21.86-8T634.69,426V381.58H620.54V364.3h14.15V343.21h20.09V364.3h23v17.28h-23v43.89q0,6.75,3.05,10.29t8.84,3.54a16.85,16.85,0,0,0,11.25-3.8Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M761.91,372.33Q772,382.1,772,401.8v54.09H753V444.66a23.88,23.88,0,0,1-10.53,9.24A38.69,38.69,0,0,1,726,457.1a37.92,37.92,0,0,1-16.87-3.54A26,26,0,0,1,694,429.45q0-12.45,8.6-20T729.68,402h22.18v-1.38q0-9.68-5.38-14.86t-16-5.19A43.29,43.29,0,0,0,716.26,383a34.29,34.29,0,0,0-11.81,6.74L696.57,374a47.42,47.42,0,0,1,16.23-8.47,67.53,67.53,0,0,1,20.1-2.94Q751.86,362.57,761.91,372.33Zm-18.33,65.33A19.86,19.86,0,0,0,751.86,427V416.31H731.13q-17.37,0-17.36,12.27a11.3,11.3,0,0,0,4.34,9.34q4.33,3.45,12,3.45A24.5,24.5,0,0,0,743.58,437.66Z" transform="translate(-13.67 -233.17)"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div className="copyright">
|
||||
Copyright © Pexta
|
||||
</div>
|
||||
<div className="footer-links">
|
||||
<span>Terms of Use</span>
|
||||
<span>Privacy Policies</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,149 @@
|
||||
import React from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
import '../scss/HomeNav.scss';
|
||||
|
||||
const openMobileMenu = () => {
|
||||
new Promise(resolve => {
|
||||
document.querySelector(".mobile-menu").style.display = "block";
|
||||
document.querySelector(".mobile-menu").animate([
|
||||
{left: "100%"},
|
||||
{left: "50%"}
|
||||
], 100);
|
||||
document.querySelector(".mobile-menu-overlay").style.display = "block";
|
||||
document.querySelector(".mobile-menu-overlay").animate([
|
||||
{opacity: 0},
|
||||
{opacity: 1}
|
||||
], 100);
|
||||
resolve();
|
||||
})
|
||||
.then(() => {
|
||||
document.querySelector(".mobile-menu").style.left = "50%";
|
||||
document.querySelector(".mobile-menu-overlay").style.opacity = "1";
|
||||
});
|
||||
}
|
||||
|
||||
const closeMobileMenu = () => {
|
||||
new Promise(resolve => {
|
||||
document.querySelector(".mobile-menu").animate([
|
||||
{left: "50%"},
|
||||
{left: "100%"}
|
||||
], 100);
|
||||
resolve();
|
||||
})
|
||||
.then(() => document.querySelector(".mobile-menu").style.left = "100%")
|
||||
new Promise(resolve => {
|
||||
document.querySelector(".mobile-menu-overlay").animate([
|
||||
{opacity: 1},
|
||||
{opacity: 0}
|
||||
], 100);
|
||||
resolve();
|
||||
})
|
||||
.then(() => {
|
||||
document.querySelector(".mobile-menu-overlay").style.opacity = "0";
|
||||
});
|
||||
setTimeout(() => {
|
||||
document.querySelector(".mobile-menu").style.display = "none";
|
||||
document.querySelector(".mobile-menu-overlay").style.display = "none";
|
||||
}, 100);
|
||||
}
|
||||
|
||||
class HomeNav extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
displayMobileMenu: false
|
||||
}
|
||||
}
|
||||
|
||||
toggleMobileMenu = () => {
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
displayMobileMenu: !this.state.displayMobileMenu
|
||||
});
|
||||
}, 70);
|
||||
if (this.state.displayMobileMenu) {
|
||||
openMobileMenu();
|
||||
} else {
|
||||
closeMobileMenu();
|
||||
}
|
||||
}
|
||||
|
||||
openAddPost = () => {
|
||||
closeMobileMenu();
|
||||
this.props.showAddPost();
|
||||
}
|
||||
|
||||
openMobileProfileSettings = () => {
|
||||
closeMobileMenu();
|
||||
this.props.showMobileProfileSettings();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<nav id="home-nav">
|
||||
<svg className="nav-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 758.29 291.67">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="275.62" y1="495.12" x2="71.68" y2="291.18" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path className="cls-1" d="M159.5,233.17A145.84,145.84,0,1,0,305.33,379,145.83,145.83,0,0,0,159.5,233.17ZM141.64,349.46l-14.15,101A12.41,12.41,0,1,1,102.92,447l14.14-101a12.41,12.41,0,0,1,24.58,3.44Zm44.85,57.13a50.23,50.23,0,0,1-8.82-.78L161,403.74a12.53,12.53,0,0,1-10.9-14h0a12.53,12.53,0,0,1,14-10.9l18.42,2.28c12.52,1.18,23.92-8,25.73-20.92,1.87-13.31-7.11-25.57-20-27.38-.41-.06-.82-.09-1.22-.12l0-.08-77-10.78a12.54,12.54,0,0,1-10.68-14.17h0A12.54,12.54,0,0,1,113.48,297l78.9,11.06a8.08,8.08,0,0,1,1,.19,49.39,49.39,0,0,1-6.87,98.34Z" transform="translate(-13.67 -233.17)"/>
|
||||
<g>
|
||||
<path className="cls-2" d="M401.21,340.1A37.87,37.87,0,0,1,417.85,355q5.79,9.67,5.79,23,0,13.14-5.79,22.9a37.68,37.68,0,0,1-16.64,14.95Q390.37,421,375.74,421h-25.4v34.91h-20.9v-121h46.3Q390.37,334.92,401.21,340.1Zm-5.7,55.65q7.07-6.22,7.07-17.8t-7.07-17.8q-7.08-6.22-20.74-6.22H350.34v48h24.43Q388.44,402,395.51,395.75Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M522.65,416.66H455.3a25.45,25.45,0,0,0,9.24,16.16q7.48,6,18.57,6,14.14,0,23.31-10l10.77,13.3a36.54,36.54,0,0,1-14.63,11.24,50.09,50.09,0,0,1-19.93,3.8q-14.14,0-24.92-6.05a41.88,41.88,0,0,1-16.63-16.85,50.29,50.29,0,0,1-5.87-24.45,51.09,51.09,0,0,1,5.71-24.28,42,42,0,0,1,15.83-16.85,43.67,43.67,0,0,1,22.82-6.05,42.62,42.62,0,0,1,22.43,6,41,41,0,0,1,15.43,16.76q5.54,10.81,5.54,25C523,411.76,522.87,413.9,522.65,416.66ZM463.26,386q-6.67,6.13-8.12,16.33h48.7A26.12,26.12,0,0,0,496,386.07a23,23,0,0,0-16.4-6.22A23.2,23.2,0,0,0,463.26,386Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M594.5,455.89l-22-32-22.18,32H528.12l33.43-46.83-32-45.45h22.35L573,393.85,594,363.61h21.7l-32.15,45.1,33.6,47.18Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M683.55,450.88a23,23,0,0,1-8.6,4.66,36.08,36.08,0,0,1-10.69,1.56q-14.14,0-21.86-8T634.69,426V381.58H620.54V364.3h14.15V343.21h20.09V364.3h23v17.28h-23v43.89q0,6.75,3.05,10.29t8.84,3.54a16.85,16.85,0,0,0,11.25-3.8Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M761.91,372.33Q772,382.1,772,401.8v54.09H753V444.66a23.88,23.88,0,0,1-10.53,9.24A38.69,38.69,0,0,1,726,457.1a37.92,37.92,0,0,1-16.87-3.54A26,26,0,0,1,694,429.45q0-12.45,8.6-20T729.68,402h22.18v-1.38q0-9.68-5.38-14.86t-16-5.19A43.29,43.29,0,0,0,716.26,383a34.29,34.29,0,0,0-11.81,6.74L696.57,374a47.42,47.42,0,0,1,16.23-8.47,67.53,67.53,0,0,1,20.1-2.94Q751.86,362.57,761.91,372.33Zm-18.33,65.33A19.86,19.86,0,0,0,751.86,427V416.31H731.13q-17.37,0-17.36,12.27a11.3,11.3,0,0,0,4.34,9.34q4.33,3.45,12,3.45A24.5,24.5,0,0,0,743.58,437.66Z" transform="translate(-13.67 -233.17)"/>
|
||||
</g>
|
||||
</svg>
|
||||
<button className="btn btn-gradient" onClick={this.openAddPost}>Add Post</button>
|
||||
<svg className="mobile-menu-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 701 458" onClick={this.toggleMobileMenu}>
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="1133.82" y1="598.18" x2="-208.55" y2="-34.48" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#ee64d1"/>
|
||||
<stop offset="1" stopColor="#eacc56"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path className="cls-1" d="M50,279H651a50,50,0,0,0,0-100H50c-1,0-2,0-3,.1V99.9c1,.06,2,.1,3,.1H651A50,50,0,0,0,651,0H50a50,50,0,0,0-4,99.83v79.34a50,50,0,0,0,0,99.66v79.34A50,50,0,0,0,50,458H651a50,50,0,0,0,0-100H50c-1,0-2,0-3,.1V278.9C48,279,49,279,50,279Z"/>
|
||||
</svg>
|
||||
<div className="mobile-menu-overlay"></div>
|
||||
<div className="mobile-menu">
|
||||
<svg className="close-mobile-menu-btn" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="438.533px" height="438.533px" viewBox="0 0 438.533 438.533" onClick={this.toggleMobileMenu}>
|
||||
<g>
|
||||
<path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
|
||||
c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
|
||||
c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
|
||||
s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
|
||||
C438.533,179.485,428.732,142.795,409.133,109.203z M322.621,270.939c3.617,3.613,5.428,7.905,5.428,12.854
|
||||
c0,5.133-1.811,9.514-5.428,13.127l-25.693,25.701c-3.614,3.613-7.994,5.42-13.135,5.42c-4.948,0-9.236-1.807-12.847-5.42
|
||||
l-51.676-51.682l-51.678,51.682c-3.616,3.613-7.898,5.42-12.847,5.42c-5.14,0-9.517-1.807-13.134-5.42l-25.697-25.701
|
||||
c-3.616-3.613-5.424-7.994-5.424-13.127c0-4.948,1.809-9.24,5.424-12.854l51.678-51.673l-51.678-51.678
|
||||
c-3.616-3.612-5.424-7.898-5.424-12.847c0-5.14,1.809-9.517,5.424-13.134l25.697-25.693c3.617-3.616,7.994-5.424,13.134-5.424
|
||||
c4.949,0,9.231,1.809,12.847,5.424l51.678,51.674l51.676-51.674c3.61-3.616,7.898-5.424,12.847-5.424
|
||||
c5.141,0,9.521,1.809,13.135,5.424l25.693,25.693c3.617,3.617,5.428,7.994,5.428,13.134c0,4.948-1.811,9.235-5.428,12.847
|
||||
l-51.675,51.678L322.621,270.939z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div className="current-user">
|
||||
<svg className="avatar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1855 1855">
|
||||
<path className="cls-1" d="M1927,1000.5C1927,489.09,1510.91,73,999.5,73S72,489.09,72,1000.5c0,270.12,116.16,513.6,301.05,683.25l-.88.77,30.09,25.37c1.95,1.65,4.08,3,6,4.62,16,13.25,32.55,25.83,49.42,38,5.46,3.94,10.92,7.89,16.49,11.73q27,18.63,55.38,35.35c4.11,2.43,8.26,4.79,12.41,7.15,20.67,11.77,41.79,22.87,63.41,33,1.58.75,3.2,1.42,4.79,2.16a919,919,0,0,0,224.32,71l6.2,1.11c24.42,4.22,49.11,7.59,74.1,9.85,3,.27,6.07.44,9.14.71,24.89,2,50,3.37,75.55,3.37,25.26,0,50.19-1.32,74.94-3.31,3.14-.27,6.28-.43,9.41-.7q37.19-3.39,73.46-9.68c2.09-.37,4.22-.75,6.31-1.15a919.21,919.21,0,0,0,221.15-69.31c2.56-1.18,5.16-2.29,7.72-3.51q31.21-14.67,61.08-31.57c5-2.8,9.88-5.63,14.81-8.53,18.14-10.69,36-21.85,53.32-33.73,6.24-4.25,12.34-8.73,18.52-13.18,14.8-10.66,29.34-21.66,43.47-33.16,3.14-2.53,6.51-4.72,9.58-7.32l30.86-25.76-.91-.78C1809.73,1516.59,1927,1272,1927,1000.5Zm-1787.55,0c0-474.24,385.81-860,860.05-860s860.05,385.81,860.05,860.05c0,255.55-112.15,485.3-289.69,642.94a253.6,253.6,0,0,0-30.12-18.11l-285.57-142.77a74.75,74.75,0,0,1-41.55-67.21v-99.74c6.61-8.16,13.59-17.4,20.81-27.55a687.14,687.14,0,0,0,88.23-172.79A122.38,122.38,0,0,0,1392,1004.34V884.78a122.73,122.73,0,0,0-29.91-79.9V647.48c1.75-17.54,8-116.3-63.51-197.78-62.16-71-162.77-106.88-299.06-106.88S762.6,378.74,700.44,449.67C629,531.15,635.18,630,636.93,647.44V804.85A122.87,122.87,0,0,0,607,884.75v119.56a122.72,122.72,0,0,0,45.19,95.15c27.32,107,83.54,188,104.32,215.48v97.61a75.23,75.23,0,0,1-39.19,66L450.66,1624.05a244.6,244.6,0,0,0-25.37,16C250,1482.53,139.45,1254.2,139.45,1000.5Z" transform="translate(-72 -73)"/>
|
||||
</svg>
|
||||
<h3>Username</h3>
|
||||
</div>
|
||||
<div>
|
||||
<div className="small-btns">
|
||||
<button className="btn-mobile" onClick={this.openAddPost}>Add a Post</button>
|
||||
<button className="btn-mobile" onClick={this.openMobileProfileSettings}>Profile Settings</button>
|
||||
<button className="btn-mobile">
|
||||
<Link className="route-link" to="/">Log Out</Link>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HomeNav;
|
||||
@@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
import HomeNav from './HomeNav';
|
||||
import Posts from './Posts';
|
||||
import ProfileInfo from './ProfileInfo';
|
||||
import Footer from './Footer';
|
||||
import AddPost from './AddPost';
|
||||
import DesktopProfileSettings from './DesktopProfileSettings';
|
||||
import MobileProfileSettings from "./MobileProfileSettings";
|
||||
import UserProfile from './UserProfile';
|
||||
import '../scss/HomePage.scss';
|
||||
|
||||
class HomePage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
displayAddPost: false,
|
||||
displayDesktopProfileSettings: false,
|
||||
displayMobileProfileSettings: false,
|
||||
displayUserProfile: false
|
||||
}
|
||||
}
|
||||
|
||||
openAddPost = () => {
|
||||
this.setState({
|
||||
displayAddPost: true
|
||||
});
|
||||
}
|
||||
|
||||
openDesktopProfileSettings = () => {
|
||||
this.setState({
|
||||
displayDesktopProfileSettings: true
|
||||
});
|
||||
}
|
||||
|
||||
openMobileProfileSettings = () => {
|
||||
this.setState({
|
||||
displayMobileProfileSettings: true
|
||||
});
|
||||
}
|
||||
|
||||
openUserProfile = () => {
|
||||
this.setState({
|
||||
displayUserProfile: true
|
||||
});
|
||||
}
|
||||
|
||||
close = () => {
|
||||
this.setState({
|
||||
displayAddPost: false,
|
||||
displayDesktopProfileSettings: false,
|
||||
displayMobileProfileSettings: false,
|
||||
displayUserProfile: false
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div id="home-page">
|
||||
<div className="container">
|
||||
<HomeNav showAddPost={this.openAddPost} showMobileProfileSettings={this.openMobileProfileSettings} />
|
||||
<main>
|
||||
<Posts />
|
||||
<ProfileInfo showDesktopProfileSettings={this.openDesktopProfileSettings} showUserProfile={this.openUserProfile} />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
<AddPost display={this.state.displayAddPost} close={this.close} />
|
||||
<DesktopProfileSettings display={this.state.displayDesktopProfileSettings} close={this.close} />
|
||||
<MobileProfileSettings display={this.state.displayMobileProfileSettings} close={this.close} />
|
||||
<UserProfile display={this.state.displayUserProfile} close={this.close} />
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HomePage;
|
||||
@@ -0,0 +1,142 @@
|
||||
import React from 'react';
|
||||
import '../scss/LandingNav.scss';
|
||||
|
||||
const openMobileMenu = () => {
|
||||
new Promise(resolve => {
|
||||
document.querySelector(".mobile-menu").style.display = "block";
|
||||
document.querySelector(".mobile-menu").animate([
|
||||
{left: "100%"},
|
||||
{left: "50%"}
|
||||
], 100);
|
||||
document.querySelector(".mobile-menu-overlay").style.display = "block";
|
||||
document.querySelector(".mobile-menu-overlay").animate([
|
||||
{opacity: 0},
|
||||
{opacity: 1}
|
||||
], 100);
|
||||
resolve();
|
||||
})
|
||||
.then(() => {
|
||||
document.querySelector(".mobile-menu").style.left = "50%";
|
||||
document.querySelector(".mobile-menu-overlay").style.opacity = "1";
|
||||
});
|
||||
}
|
||||
|
||||
const closeMobileMenu = () => {
|
||||
new Promise(resolve => {
|
||||
document.querySelector(".mobile-menu").animate([
|
||||
{left: "50%"},
|
||||
{left: "100%"}
|
||||
], 100);
|
||||
resolve();
|
||||
})
|
||||
.then(() => document.querySelector(".mobile-menu").style.left = "100%")
|
||||
new Promise(resolve => {
|
||||
document.querySelector(".mobile-menu-overlay").animate([
|
||||
{opacity: 1},
|
||||
{opacity: 0}
|
||||
], 100);
|
||||
resolve();
|
||||
})
|
||||
.then(() => {
|
||||
document.querySelector(".mobile-menu-overlay").style.opacity = "0";
|
||||
});
|
||||
setTimeout(() => {
|
||||
document.querySelector(".mobile-menu").style.display = "none";
|
||||
document.querySelector(".mobile-menu-overlay").style.display = "none";
|
||||
}, 100);
|
||||
}
|
||||
|
||||
class LandingNav extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
displayMobileMenu: false
|
||||
}
|
||||
}
|
||||
|
||||
toggleMobileMenu = () => {
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
displayMobileMenu: !this.state.displayMobileMenu
|
||||
});
|
||||
}, 70);
|
||||
if (this.state.displayMobileMenu) {
|
||||
openMobileMenu();
|
||||
} else {
|
||||
closeMobileMenu();
|
||||
}
|
||||
}
|
||||
|
||||
openSignUp = () => {
|
||||
closeMobileMenu();
|
||||
this.props.showSignUp();
|
||||
}
|
||||
|
||||
openLogin = () => {
|
||||
closeMobileMenu();
|
||||
this.props.showLogin();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<nav id="landing-nav">
|
||||
<svg className="nav-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 758.29 291.67">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="275.62" y1="495.12" x2="71.68" y2="291.18" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path className="cls-1" d="M159.5,233.17A145.84,145.84,0,1,0,305.33,379,145.83,145.83,0,0,0,159.5,233.17ZM141.64,349.46l-14.15,101A12.41,12.41,0,1,1,102.92,447l14.14-101a12.41,12.41,0,0,1,24.58,3.44Zm44.85,57.13a50.23,50.23,0,0,1-8.82-.78L161,403.74a12.53,12.53,0,0,1-10.9-14h0a12.53,12.53,0,0,1,14-10.9l18.42,2.28c12.52,1.18,23.92-8,25.73-20.92,1.87-13.31-7.11-25.57-20-27.38-.41-.06-.82-.09-1.22-.12l0-.08-77-10.78a12.54,12.54,0,0,1-10.68-14.17h0A12.54,12.54,0,0,1,113.48,297l78.9,11.06a8.08,8.08,0,0,1,1,.19,49.39,49.39,0,0,1-6.87,98.34Z" transform="translate(-13.67 -233.17)"/>
|
||||
<g>
|
||||
<path className="cls-2" d="M401.21,340.1A37.87,37.87,0,0,1,417.85,355q5.79,9.67,5.79,23,0,13.14-5.79,22.9a37.68,37.68,0,0,1-16.64,14.95Q390.37,421,375.74,421h-25.4v34.91h-20.9v-121h46.3Q390.37,334.92,401.21,340.1Zm-5.7,55.65q7.07-6.22,7.07-17.8t-7.07-17.8q-7.08-6.22-20.74-6.22H350.34v48h24.43Q388.44,402,395.51,395.75Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M522.65,416.66H455.3a25.45,25.45,0,0,0,9.24,16.16q7.48,6,18.57,6,14.14,0,23.31-10l10.77,13.3a36.54,36.54,0,0,1-14.63,11.24,50.09,50.09,0,0,1-19.93,3.8q-14.14,0-24.92-6.05a41.88,41.88,0,0,1-16.63-16.85,50.29,50.29,0,0,1-5.87-24.45,51.09,51.09,0,0,1,5.71-24.28,42,42,0,0,1,15.83-16.85,43.67,43.67,0,0,1,22.82-6.05,42.62,42.62,0,0,1,22.43,6,41,41,0,0,1,15.43,16.76q5.54,10.81,5.54,25C523,411.76,522.87,413.9,522.65,416.66ZM463.26,386q-6.67,6.13-8.12,16.33h48.7A26.12,26.12,0,0,0,496,386.07a23,23,0,0,0-16.4-6.22A23.2,23.2,0,0,0,463.26,386Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M594.5,455.89l-22-32-22.18,32H528.12l33.43-46.83-32-45.45h22.35L573,393.85,594,363.61h21.7l-32.15,45.1,33.6,47.18Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M683.55,450.88a23,23,0,0,1-8.6,4.66,36.08,36.08,0,0,1-10.69,1.56q-14.14,0-21.86-8T634.69,426V381.58H620.54V364.3h14.15V343.21h20.09V364.3h23v17.28h-23v43.89q0,6.75,3.05,10.29t8.84,3.54a16.85,16.85,0,0,0,11.25-3.8Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M761.91,372.33Q772,382.1,772,401.8v54.09H753V444.66a23.88,23.88,0,0,1-10.53,9.24A38.69,38.69,0,0,1,726,457.1a37.92,37.92,0,0,1-16.87-3.54A26,26,0,0,1,694,429.45q0-12.45,8.6-20T729.68,402h22.18v-1.38q0-9.68-5.38-14.86t-16-5.19A43.29,43.29,0,0,0,716.26,383a34.29,34.29,0,0,0-11.81,6.74L696.57,374a47.42,47.42,0,0,1,16.23-8.47,67.53,67.53,0,0,1,20.1-2.94Q751.86,362.57,761.91,372.33Zm-18.33,65.33A19.86,19.86,0,0,0,751.86,427V416.31H731.13q-17.37,0-17.36,12.27a11.3,11.3,0,0,0,4.34,9.34q4.33,3.45,12,3.45A24.5,24.5,0,0,0,743.58,437.66Z" transform="translate(-13.67 -233.17)"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div className="big-btns">
|
||||
<button className="btn btn-white" onClick={this.openLogin}>Login</button>
|
||||
<button className="btn btn-gradient" onClick={this.openSignUp}>Sign Up</button>
|
||||
</div>
|
||||
<svg className="mobile-menu-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 701 458" onClick={this.toggleMobileMenu}>
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="1133.82" y1="598.18" x2="-208.55" y2="-34.48" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#ee64d1"/>
|
||||
<stop offset="1" stopColor="#eacc56"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path className="cls-1" d="M50,279H651a50,50,0,0,0,0-100H50c-1,0-2,0-3,.1V99.9c1,.06,2,.1,3,.1H651A50,50,0,0,0,651,0H50a50,50,0,0,0-4,99.83v79.34a50,50,0,0,0,0,99.66v79.34A50,50,0,0,0,50,458H651a50,50,0,0,0,0-100H50c-1,0-2,0-3,.1V278.9C48,279,49,279,50,279Z"/>
|
||||
</svg>
|
||||
<div className="mobile-menu-overlay"></div>
|
||||
<div className="mobile-menu">
|
||||
<svg className="close-mobile-menu-btn" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="438.533px" height="438.533px" viewBox="0 0 438.533 438.533" onClick={this.toggleMobileMenu}>
|
||||
<g>
|
||||
<path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
|
||||
c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
|
||||
c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
|
||||
s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
|
||||
C438.533,179.485,428.732,142.795,409.133,109.203z M322.621,270.939c3.617,3.613,5.428,7.905,5.428,12.854
|
||||
c0,5.133-1.811,9.514-5.428,13.127l-25.693,25.701c-3.614,3.613-7.994,5.42-13.135,5.42c-4.948,0-9.236-1.807-12.847-5.42
|
||||
l-51.676-51.682l-51.678,51.682c-3.616,3.613-7.898,5.42-12.847,5.42c-5.14,0-9.517-1.807-13.134-5.42l-25.697-25.701
|
||||
c-3.616-3.613-5.424-7.994-5.424-13.127c0-4.948,1.809-9.24,5.424-12.854l51.678-51.673l-51.678-51.678
|
||||
c-3.616-3.612-5.424-7.898-5.424-12.847c0-5.14,1.809-9.517,5.424-13.134l25.697-25.693c3.617-3.616,7.994-5.424,13.134-5.424
|
||||
c4.949,0,9.231,1.809,12.847,5.424l51.678,51.674l51.676-51.674c3.61-3.616,7.898-5.424,12.847-5.424
|
||||
c5.141,0,9.521,1.809,13.135,5.424l25.693,25.693c3.617,3.617,5.428,7.994,5.428,13.134c0,4.948-1.811,9.235-5.428,12.847
|
||||
l-51.675,51.678L322.621,270.939z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div>
|
||||
<div className="small-btns">
|
||||
<button onClick={this.openSignUp} className="btn-mobile" id="sign-up-btn">Sign Up</button>
|
||||
<button onClick={this.openLogin} className="btn-mobile">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LandingNav;
|
||||
@@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import LandingNav from './LandingNav';
|
||||
import Showcase from './Showcase';
|
||||
import SignUp from './SignUp';
|
||||
import Login from './Login';
|
||||
import '../scss/LandingPage.scss';
|
||||
|
||||
class LandingPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
displaySignUp: false,
|
||||
displayLogin: false
|
||||
}
|
||||
}
|
||||
|
||||
openSignUp = () => {
|
||||
this.setState({
|
||||
displaySignUp: true
|
||||
});
|
||||
}
|
||||
|
||||
openLogin = () => {
|
||||
this.setState({
|
||||
displayLogin: true
|
||||
});
|
||||
}
|
||||
|
||||
close = () => {
|
||||
this.setState({
|
||||
displaySignUp: false,
|
||||
displayLogin: false
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="landing-page">
|
||||
<div className="container">
|
||||
<div id="landing-page-container">
|
||||
<LandingNav showSignUp={this.openSignUp} showLogin={this.openLogin} />
|
||||
<Showcase />
|
||||
<SignUp display={this.state.displaySignUp} close={this.close} />
|
||||
<Login display={this.state.displayLogin} close={this.close} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LandingPage;
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import '../scss/Login.scss';
|
||||
|
||||
class Login extends React.Component {
|
||||
close = () => {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div id="log-in-container" style={{display: this.props.display ? "grid" : "none"}} >
|
||||
<div id="log-in">
|
||||
<svg className="close-log-in" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="438.533px" height="438.533px" viewBox="0 0 438.533 438.533" onClick={this.close}>
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="275.62" y1="495.12" x2="71.68" y2="291.18" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
|
||||
c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
|
||||
c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
|
||||
s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
|
||||
C438.533,179.485,428.732,142.795,409.133,109.203z M322.621,270.939c3.617,3.613,5.428,7.905,5.428,12.854
|
||||
c0,5.133-1.811,9.514-5.428,13.127l-25.693,25.701c-3.614,3.613-7.994,5.42-13.135,5.42c-4.948,0-9.236-1.807-12.847-5.42
|
||||
l-51.676-51.682l-51.678,51.682c-3.616,3.613-7.898,5.42-12.847,5.42c-5.14,0-9.517-1.807-13.134-5.42l-25.697-25.701
|
||||
c-3.616-3.613-5.424-7.994-5.424-13.127c0-4.948,1.809-9.24,5.424-12.854l51.678-51.673l-51.678-51.678
|
||||
c-3.616-3.612-5.424-7.898-5.424-12.847c0-5.14,1.809-9.517,5.424-13.134l25.697-25.693c3.617-3.616,7.994-5.424,13.134-5.424
|
||||
c4.949,0,9.231,1.809,12.847,5.424l51.678,51.674l51.676-51.674c3.61-3.616,7.898-5.424,12.847-5.424
|
||||
c5.141,0,9.521,1.809,13.135,5.424l25.693,25.693c3.617,3.617,5.428,7.994,5.428,13.134c0,4.948-1.811,9.235-5.428,12.847
|
||||
l-51.675,51.678L322.621,270.939z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<h2>Login</h2>
|
||||
<form>
|
||||
<input type="text" placeholder="Username" />
|
||||
<input type="password" placeholder="Password" />
|
||||
<Link className="route-link" to="/home">
|
||||
<button>Jump In</button>
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Login;
|
||||
@@ -0,0 +1,136 @@
|
||||
import React from 'react';
|
||||
import '../scss/MobileProfileSettings.scss';
|
||||
|
||||
class MobileProfileSettings extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
mainSettings: true,
|
||||
photoSettings: false,
|
||||
passwordSettings: false,
|
||||
emailSettings: false,
|
||||
usernameSettings: false
|
||||
}
|
||||
}
|
||||
|
||||
openMainSettings = () => {
|
||||
this.setState({
|
||||
mainSettings: true,
|
||||
photoSettings: false,
|
||||
passwordSettings: false,
|
||||
emailSettings: false,
|
||||
usernameSettings: false
|
||||
});
|
||||
}
|
||||
|
||||
openSpeceficSettings = (event) => {
|
||||
this.setState({
|
||||
mainSettings: false,
|
||||
photoSettings: event.target.id === "photo-settings" ? true : false,
|
||||
passwordSettings: event.target.id === "password-settings" ? true : false,
|
||||
emailSettings: event.target.id === "email-settings" ? true : false,
|
||||
usernameSettings: event.target.id === "username-settings" ? true : false
|
||||
});
|
||||
}
|
||||
|
||||
close = () => {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div id="mobile-profile-settings-container" style={{display: this.props.display ? "grid" : "none"}}>
|
||||
<div id="mobile-profile-settings" style={{display: this.state.mainSettings ? "grid" : "none"}}>
|
||||
<div>
|
||||
<h2>Profile Settings</h2>
|
||||
<svg onClick={this.close} className="close-profile-settings" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="438.533px" height="438.533px" viewBox="0 0 438.533 438.533">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="275.62" y1="495.12" x2="71.68" y2="291.18" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
|
||||
c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
|
||||
c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
|
||||
s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
|
||||
C438.533,179.485,428.732,142.795,409.133,109.203z M322.621,270.939c3.617,3.613,5.428,7.905,5.428,12.854
|
||||
c0,5.133-1.811,9.514-5.428,13.127l-25.693,25.701c-3.614,3.613-7.994,5.42-13.135,5.42c-4.948,0-9.236-1.807-12.847-5.42
|
||||
l-51.676-51.682l-51.678,51.682c-3.616,3.613-7.898,5.42-12.847,5.42c-5.14,0-9.517-1.807-13.134-5.42l-25.697-25.701
|
||||
c-3.616-3.613-5.424-7.994-5.424-13.127c0-4.948,1.809-9.24,5.424-12.854l51.678-51.673l-51.678-51.678
|
||||
c-3.616-3.612-5.424-7.898-5.424-12.847c0-5.14,1.809-9.517,5.424-13.134l25.697-25.693c3.617-3.616,7.994-5.424,13.134-5.424
|
||||
c4.949,0,9.231,1.809,12.847,5.424l51.678,51.674l51.676-51.674c3.61-3.616,7.898-5.424,12.847-5.424
|
||||
c5.141,0,9.521,1.809,13.135,5.424l25.693,25.693c3.617,3.617,5.428,7.994,5.428,13.134c0,4.948-1.811,9.235-5.428,12.847
|
||||
l-51.675,51.678L322.621,270.939z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 id="photo-settings" onClick={this.openSpeceficSettings}>Change Profile Picture</h3>
|
||||
<h3 id="password-settings" onClick={this.openSpeceficSettings}>Change Password</h3>
|
||||
<h3 id="email-settings" onClick={this.openSpeceficSettings}>Change Email</h3>
|
||||
<h3 id="username-settings" onClick={this.openSpeceficSettings}>Change Username</h3>
|
||||
</div>
|
||||
<div className="change-photo" style={{display: this.state.photoSettings ? "grid" : "none"}}>
|
||||
<div className="settings-return">
|
||||
<h2 onClick={this.openMainSettings}>Return</h2>
|
||||
</div>
|
||||
<div className="settings">
|
||||
<h3>Change Profile Picture</h3>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1855 1855">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="-356" y1="927.47" x2="2276" y2="927.47" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M1927,1000.5C1927,489.09,1510.91,73,999.5,73S72,489.09,72,1000.5c0,270.12,116.16,513.6,301.05,683.25l-.88.77,30.09,25.37c1.95,1.65,4.08,3,6,4.62,16,13.25,32.55,25.83,49.42,38,5.46,3.94,10.92,7.89,16.49,11.73q27,18.63,55.38,35.35c4.11,2.43,8.26,4.79,12.41,7.15,20.67,11.77,41.79,22.87,63.41,33,1.58.75,3.2,1.42,4.79,2.16a919,919,0,0,0,224.32,71l6.2,1.11c24.42,4.22,49.11,7.59,74.1,9.85,3,.27,6.07.44,9.14.71,24.89,2,50,3.37,75.55,3.37,25.26,0,50.19-1.32,74.94-3.31,3.14-.27,6.28-.43,9.41-.7q37.19-3.39,73.46-9.68c2.09-.37,4.22-.75,6.31-1.15a919.21,919.21,0,0,0,221.15-69.31c2.56-1.18,5.16-2.29,7.72-3.51q31.21-14.67,61.08-31.57c5-2.8,9.88-5.63,14.81-8.53,18.14-10.69,36-21.85,53.32-33.73,6.24-4.25,12.34-8.73,18.52-13.18,14.8-10.66,29.34-21.66,43.47-33.16,3.14-2.53,6.51-4.72,9.58-7.32l30.86-25.76-.91-.78C1809.73,1516.59,1927,1272,1927,1000.5Zm-1787.55,0c0-474.24,385.81-860,860.05-860s860.05,385.81,860.05,860.05c0,255.55-112.15,485.3-289.69,642.94a253.6,253.6,0,0,0-30.12-18.11l-285.57-142.77a74.75,74.75,0,0,1-41.55-67.21v-99.74c6.61-8.16,13.59-17.4,20.81-27.55a687.14,687.14,0,0,0,88.23-172.79A122.38,122.38,0,0,0,1392,1004.34V884.78a122.73,122.73,0,0,0-29.91-79.9V647.48c1.75-17.54,8-116.3-63.51-197.78-62.16-71-162.77-106.88-299.06-106.88S762.6,378.74,700.44,449.67C629,531.15,635.18,630,636.93,647.44V804.85A122.87,122.87,0,0,0,607,884.75v119.56a122.72,122.72,0,0,0,45.19,95.15c27.32,107,83.54,188,104.32,215.48v97.61a75.23,75.23,0,0,1-39.19,66L450.66,1624.05a244.6,244.6,0,0,0-25.37,16C250,1482.53,139.45,1254.2,139.45,1000.5Z" transform="translate(-72 -73)"/>
|
||||
</svg>
|
||||
<input type="file" accept="image/*" align="center"/>
|
||||
<button className="btn btn-gradient">Change</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="change-password" style={{display: this.state.passwordSettings ? "grid" : "none"}}>
|
||||
<div className="settings-return">
|
||||
<h2 onClick={this.openMainSettings}>Return</h2>
|
||||
</div>
|
||||
<div className="settings">
|
||||
<h3>Change Password</h3>
|
||||
<form>
|
||||
<input type="password" placeholder="Old Password"/>
|
||||
<input type="password" placeholder="New Password"/>
|
||||
<input type="password" placeholder="Confirm New Password"/>
|
||||
</form>
|
||||
<button className="btn btn-gradient">Change</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="change-email" style={{display: this.state.emailSettings ? "grid" : "none"}}>
|
||||
<div className="settings-return">
|
||||
<h2 onClick={this.openMainSettings}>Return</h2>
|
||||
</div>
|
||||
<div className="settings">
|
||||
<h3>Change Email</h3>
|
||||
<form>
|
||||
<input type="email" placeholder="Old Email"/>
|
||||
<input type="email" placeholder="New Email"/>
|
||||
<input type="email" placeholder="Confirm New Email"/>
|
||||
</form>
|
||||
<button className="btn btn-gradient">Change</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="change-username" style={{display: this.state.usernameSettings ? "grid" : "none"}}>
|
||||
<div className="settings-return">
|
||||
<h2 onClick={this.openMainSettings}>Return</h2>
|
||||
</div>
|
||||
<div className="settings">
|
||||
<h3>Change Username</h3>
|
||||
<input type="text" placeholder="New Username"/>
|
||||
<button className="btn btn-gradient">Change</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MobileProfileSettings;
|
||||
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import '../scss/Post.scss';
|
||||
|
||||
class Post extends React.Component {
|
||||
openUserProfile = () => {
|
||||
this.props.showUserProfile();
|
||||
}
|
||||
|
||||
render() {
|
||||
const otherComments = [0,1,2,3,4,5,6,7,8,9].map((comment, key) => {
|
||||
return(
|
||||
<div className="comment" key={key}>
|
||||
<div className="other-user" onClick={this.openUserProfile}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1855 1855">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="-356" y1="927.47" x2="2276" y2="927.47" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M1927,1000.5C1927,489.09,1510.91,73,999.5,73S72,489.09,72,1000.5c0,270.12,116.16,513.6,301.05,683.25l-.88.77,30.09,25.37c1.95,1.65,4.08,3,6,4.62,16,13.25,32.55,25.83,49.42,38,5.46,3.94,10.92,7.89,16.49,11.73q27,18.63,55.38,35.35c4.11,2.43,8.26,4.79,12.41,7.15,20.67,11.77,41.79,22.87,63.41,33,1.58.75,3.2,1.42,4.79,2.16a919,919,0,0,0,224.32,71l6.2,1.11c24.42,4.22,49.11,7.59,74.1,9.85,3,.27,6.07.44,9.14.71,24.89,2,50,3.37,75.55,3.37,25.26,0,50.19-1.32,74.94-3.31,3.14-.27,6.28-.43,9.41-.7q37.19-3.39,73.46-9.68c2.09-.37,4.22-.75,6.31-1.15a919.21,919.21,0,0,0,221.15-69.31c2.56-1.18,5.16-2.29,7.72-3.51q31.21-14.67,61.08-31.57c5-2.8,9.88-5.63,14.81-8.53,18.14-10.69,36-21.85,53.32-33.73,6.24-4.25,12.34-8.73,18.52-13.18,14.8-10.66,29.34-21.66,43.47-33.16,3.14-2.53,6.51-4.72,9.58-7.32l30.86-25.76-.91-.78C1809.73,1516.59,1927,1272,1927,1000.5Zm-1787.55,0c0-474.24,385.81-860,860.05-860s860.05,385.81,860.05,860.05c0,255.55-112.15,485.3-289.69,642.94a253.6,253.6,0,0,0-30.12-18.11l-285.57-142.77a74.75,74.75,0,0,1-41.55-67.21v-99.74c6.61-8.16,13.59-17.4,20.81-27.55a687.14,687.14,0,0,0,88.23-172.79A122.38,122.38,0,0,0,1392,1004.34V884.78a122.73,122.73,0,0,0-29.91-79.9V647.48c1.75-17.54,8-116.3-63.51-197.78-62.16-71-162.77-106.88-299.06-106.88S762.6,378.74,700.44,449.67C629,531.15,635.18,630,636.93,647.44V804.85A122.87,122.87,0,0,0,607,884.75v119.56a122.72,122.72,0,0,0,45.19,95.15c27.32,107,83.54,188,104.32,215.48v97.61a75.23,75.23,0,0,1-39.19,66L450.66,1624.05a244.6,244.6,0,0,0-25.37,16C250,1482.53,139.45,1254.2,139.45,1000.5Z" transform="translate(-72 -73)"/>
|
||||
</svg>
|
||||
<span>Username</span>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, sit?
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
return(
|
||||
<div id="post">
|
||||
<div className="info">
|
||||
<div className="data">
|
||||
<h2>Post</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Perspiciatis libero ipsa soluta enim vitae quas ex dolore nulla repudiandae eius?
|
||||
</p>
|
||||
</div>
|
||||
<div className="stats">
|
||||
<div className="user" onClick={this.openUserProfile}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1855 1855">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="-356" y1="927.47" x2="2276" y2="927.47" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M1927,1000.5C1927,489.09,1510.91,73,999.5,73S72,489.09,72,1000.5c0,270.12,116.16,513.6,301.05,683.25l-.88.77,30.09,25.37c1.95,1.65,4.08,3,6,4.62,16,13.25,32.55,25.83,49.42,38,5.46,3.94,10.92,7.89,16.49,11.73q27,18.63,55.38,35.35c4.11,2.43,8.26,4.79,12.41,7.15,20.67,11.77,41.79,22.87,63.41,33,1.58.75,3.2,1.42,4.79,2.16a919,919,0,0,0,224.32,71l6.2,1.11c24.42,4.22,49.11,7.59,74.1,9.85,3,.27,6.07.44,9.14.71,24.89,2,50,3.37,75.55,3.37,25.26,0,50.19-1.32,74.94-3.31,3.14-.27,6.28-.43,9.41-.7q37.19-3.39,73.46-9.68c2.09-.37,4.22-.75,6.31-1.15a919.21,919.21,0,0,0,221.15-69.31c2.56-1.18,5.16-2.29,7.72-3.51q31.21-14.67,61.08-31.57c5-2.8,9.88-5.63,14.81-8.53,18.14-10.69,36-21.85,53.32-33.73,6.24-4.25,12.34-8.73,18.52-13.18,14.8-10.66,29.34-21.66,43.47-33.16,3.14-2.53,6.51-4.72,9.58-7.32l30.86-25.76-.91-.78C1809.73,1516.59,1927,1272,1927,1000.5Zm-1787.55,0c0-474.24,385.81-860,860.05-860s860.05,385.81,860.05,860.05c0,255.55-112.15,485.3-289.69,642.94a253.6,253.6,0,0,0-30.12-18.11l-285.57-142.77a74.75,74.75,0,0,1-41.55-67.21v-99.74c6.61-8.16,13.59-17.4,20.81-27.55a687.14,687.14,0,0,0,88.23-172.79A122.38,122.38,0,0,0,1392,1004.34V884.78a122.73,122.73,0,0,0-29.91-79.9V647.48c1.75-17.54,8-116.3-63.51-197.78-62.16-71-162.77-106.88-299.06-106.88S762.6,378.74,700.44,449.67C629,531.15,635.18,630,636.93,647.44V804.85A122.87,122.87,0,0,0,607,884.75v119.56a122.72,122.72,0,0,0,45.19,95.15c27.32,107,83.54,188,104.32,215.48v97.61a75.23,75.23,0,0,1-39.19,66L450.66,1624.05a244.6,244.6,0,0,0-25.37,16C250,1482.53,139.45,1254.2,139.45,1000.5Z" transform="translate(-72 -73)"/>
|
||||
</svg>
|
||||
<span>Username</span>
|
||||
</div>
|
||||
<div className="stats">
|
||||
<div className="likes">
|
||||
<span>??</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1801 1656.95">
|
||||
<path className="cls-1" d="M994.11,464.16C1066.8,291.88,1232.86,171.49,1426,171.49c260.18,0,447.56,222.58,471.12,487.83,0,0,12.71,65.85-15.27,184.39-38.11,161.45-127.7,304.88-248.48,414.35L994.11,1828.41,365.63,1258c-120.78-109.43-210.37-252.9-248.48-414.34-28-118.55-15.27-184.39-15.27-184.39C125.44,394,312.82,171.46,573,171.46,766.18,171.46,921.43,291.88,994.11,464.16Z" transform="translate(-99 -171.46)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="dislikes">
|
||||
<span>??</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1732 1732">
|
||||
<path className="cls-1" d="M1000,134c-478.28,0-866,387.72-866,866s387.72,866,866,866,866-387.72,866-866S1478.28,134,1000,134ZM271,1000c0-402.62,326.38-729,729-729,194.94,0,372,76.51,502.8,201.15L735.65,1140.9,706.77,1109l647.34-564.31a288.44,288.44,0,0,0-71.35-8.85c-128,0-238.14,79.81-286.33,194-48.19-114.22-151.12-194-279.19-194-172.49,0-296.71,147.55-312.33,323.41,0,0-8.43,43.65,10.13,122.24,23.11,97.92,74.8,185.86,144.74,255.67l19.44-16.94h0l.06,0a4.24,4.24,0,0,1,1.19-1l126.14-110L735.5,1141,609.7,1250.7l-.23-.23h0l.23.23L408.46,1426.13A725.69,725.69,0,0,1,271,1000Zm729,729c-194.18,0-370.62-75.93-501.27-199.7l208.12-181.43.1.09h0l-.09-.09,120.72-105.23,28.88,31.86L737.33,1378.33l-.07-.07h0l.08.07-11.73,10.22,270.83,245.8,423.81-378.12c80.07-72.58,139.46-167.67,164.72-274.7,18.56-78.59,10.13-122.25,10.13-122.25-5.78-65-26.41-126.16-58.83-177.42L856.61,1274.35l-28.88-31.86,765-666.91A725.69,725.69,0,0,1,1729,1000C1729,1402.62,1402.62,1729,1000,1729Z" transform="translate(-134 -134)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="comments">
|
||||
<span>??</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1678 580.88">
|
||||
<path className="cls-1" d="M1548.56,753.3c-145.88,0-266.62,107.54-287.3,247.67H1133.71c-19.46-99.21-106.88-174.07-211.79-174.07S729.59,901.76,710.13,1001H588.63C569.17,901.76,481.75,826.9,376.84,826.9,257.64,826.9,161,923.54,161,1042.74s96.64,215.85,215.84,215.85S592.68,1162,592.68,1042.74a216.62,216.62,0,0,0-3.86-40.78H709.94a216.62,216.62,0,0,0-3.86,40.78c0,119.21,96.63,215.85,215.84,215.85s215.84-96.64,215.84-215.85a217.45,217.45,0,0,0-3.86-40.78h127.22a292.26,292.26,0,0,0-3,41.78c0,160.41,130,290.44,290.44,290.44s290.44-130,290.44-290.44S1709,753.3,1548.56,753.3Z" transform="translate(-161 -753.3)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="other-users-comments">
|
||||
<h2>Comments</h2>
|
||||
<div className="other-comments">
|
||||
{otherComments}
|
||||
</div>
|
||||
<div className="add-comment">
|
||||
<input type="text" placeholder="Type a Comment"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Post;
|
||||
@@ -0,0 +1,153 @@
|
||||
import React from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
import '../scss/PostNav.scss';
|
||||
|
||||
const openMobileMenu = () => {
|
||||
new Promise(resolve => {
|
||||
document.querySelector(".mobile-menu").style.display = "block";
|
||||
document.querySelector(".mobile-menu").animate([
|
||||
{left: "100%"},
|
||||
{left: "50%"}
|
||||
], 100);
|
||||
document.querySelector(".mobile-menu-overlay").style.display = "block";
|
||||
document.querySelector(".mobile-menu-overlay").animate([
|
||||
{opacity: 0},
|
||||
{opacity: 1}
|
||||
], 100);
|
||||
resolve();
|
||||
})
|
||||
.then(() => {
|
||||
document.querySelector(".mobile-menu").style.left = "50%";
|
||||
document.querySelector(".mobile-menu-overlay").style.opacity = "1";
|
||||
});
|
||||
}
|
||||
|
||||
const closeMobileMenu = () => {
|
||||
new Promise(resolve => {
|
||||
document.querySelector(".mobile-menu").animate([
|
||||
{left: "50%"},
|
||||
{left: "100%"}
|
||||
], 100);
|
||||
resolve();
|
||||
})
|
||||
.then(() => document.querySelector(".mobile-menu").style.left = "100%")
|
||||
new Promise(resolve => {
|
||||
document.querySelector(".mobile-menu-overlay").animate([
|
||||
{opacity: 1},
|
||||
{opacity: 0}
|
||||
], 100);
|
||||
resolve();
|
||||
})
|
||||
.then(() => {
|
||||
document.querySelector(".mobile-menu-overlay").style.opacity = "0";
|
||||
});
|
||||
setTimeout(() => {
|
||||
document.querySelector(".mobile-menu").style.display = "none";
|
||||
document.querySelector(".mobile-menu-overlay").style.display = "none";
|
||||
}, 100);
|
||||
}
|
||||
|
||||
class PostNav extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
displayMobileMenu: false
|
||||
}
|
||||
}
|
||||
|
||||
toggleMobileMenu = () => {
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
displayMobileMenu: !this.state.displayMobileMenu
|
||||
});
|
||||
}, 70);
|
||||
if (this.state.displayMobileMenu) {
|
||||
openMobileMenu();
|
||||
} else {
|
||||
closeMobileMenu();
|
||||
}
|
||||
}
|
||||
|
||||
openAddPost = () => {
|
||||
closeMobileMenu();
|
||||
this.props.showAddPost();
|
||||
}
|
||||
|
||||
openMobileProfileSettings = () => {
|
||||
closeMobileMenu();
|
||||
this.props.showMobileProfileSettings();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<nav id="post-nav">
|
||||
<svg className="nav-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 758.29 291.67">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="275.62" y1="495.12" x2="71.68" y2="291.18" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path className="cls-1" d="M159.5,233.17A145.84,145.84,0,1,0,305.33,379,145.83,145.83,0,0,0,159.5,233.17ZM141.64,349.46l-14.15,101A12.41,12.41,0,1,1,102.92,447l14.14-101a12.41,12.41,0,0,1,24.58,3.44Zm44.85,57.13a50.23,50.23,0,0,1-8.82-.78L161,403.74a12.53,12.53,0,0,1-10.9-14h0a12.53,12.53,0,0,1,14-10.9l18.42,2.28c12.52,1.18,23.92-8,25.73-20.92,1.87-13.31-7.11-25.57-20-27.38-.41-.06-.82-.09-1.22-.12l0-.08-77-10.78a12.54,12.54,0,0,1-10.68-14.17h0A12.54,12.54,0,0,1,113.48,297l78.9,11.06a8.08,8.08,0,0,1,1,.19,49.39,49.39,0,0,1-6.87,98.34Z" transform="translate(-13.67 -233.17)"/>
|
||||
<g>
|
||||
<path className="cls-2" d="M401.21,340.1A37.87,37.87,0,0,1,417.85,355q5.79,9.67,5.79,23,0,13.14-5.79,22.9a37.68,37.68,0,0,1-16.64,14.95Q390.37,421,375.74,421h-25.4v34.91h-20.9v-121h46.3Q390.37,334.92,401.21,340.1Zm-5.7,55.65q7.07-6.22,7.07-17.8t-7.07-17.8q-7.08-6.22-20.74-6.22H350.34v48h24.43Q388.44,402,395.51,395.75Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M522.65,416.66H455.3a25.45,25.45,0,0,0,9.24,16.16q7.48,6,18.57,6,14.14,0,23.31-10l10.77,13.3a36.54,36.54,0,0,1-14.63,11.24,50.09,50.09,0,0,1-19.93,3.8q-14.14,0-24.92-6.05a41.88,41.88,0,0,1-16.63-16.85,50.29,50.29,0,0,1-5.87-24.45,51.09,51.09,0,0,1,5.71-24.28,42,42,0,0,1,15.83-16.85,43.67,43.67,0,0,1,22.82-6.05,42.62,42.62,0,0,1,22.43,6,41,41,0,0,1,15.43,16.76q5.54,10.81,5.54,25C523,411.76,522.87,413.9,522.65,416.66ZM463.26,386q-6.67,6.13-8.12,16.33h48.7A26.12,26.12,0,0,0,496,386.07a23,23,0,0,0-16.4-6.22A23.2,23.2,0,0,0,463.26,386Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M594.5,455.89l-22-32-22.18,32H528.12l33.43-46.83-32-45.45h22.35L573,393.85,594,363.61h21.7l-32.15,45.1,33.6,47.18Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M683.55,450.88a23,23,0,0,1-8.6,4.66,36.08,36.08,0,0,1-10.69,1.56q-14.14,0-21.86-8T634.69,426V381.58H620.54V364.3h14.15V343.21h20.09V364.3h23v17.28h-23v43.89q0,6.75,3.05,10.29t8.84,3.54a16.85,16.85,0,0,0,11.25-3.8Z" transform="translate(-13.67 -233.17)"/>
|
||||
<path className="cls-2" d="M761.91,372.33Q772,382.1,772,401.8v54.09H753V444.66a23.88,23.88,0,0,1-10.53,9.24A38.69,38.69,0,0,1,726,457.1a37.92,37.92,0,0,1-16.87-3.54A26,26,0,0,1,694,429.45q0-12.45,8.6-20T729.68,402h22.18v-1.38q0-9.68-5.38-14.86t-16-5.19A43.29,43.29,0,0,0,716.26,383a34.29,34.29,0,0,0-11.81,6.74L696.57,374a47.42,47.42,0,0,1,16.23-8.47,67.53,67.53,0,0,1,20.1-2.94Q751.86,362.57,761.91,372.33Zm-18.33,65.33A19.86,19.86,0,0,0,751.86,427V416.31H731.13q-17.37,0-17.36,12.27a11.3,11.3,0,0,0,4.34,9.34q4.33,3.45,12,3.45A24.5,24.5,0,0,0,743.58,437.66Z" transform="translate(-13.67 -233.17)"/>
|
||||
</g>
|
||||
</svg>
|
||||
<button className="btn btn-gradient">
|
||||
<Link className="route-link" to="/home">Return</Link>
|
||||
</button>
|
||||
<svg className="mobile-menu-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 701 458" onClick={this.toggleMobileMenu}>
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="1133.82" y1="598.18" x2="-208.55" y2="-34.48" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#ee64d1"/>
|
||||
<stop offset="1" stopColor="#eacc56"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path className="cls-1" d="M50,279H651a50,50,0,0,0,0-100H50c-1,0-2,0-3,.1V99.9c1,.06,2,.1,3,.1H651A50,50,0,0,0,651,0H50a50,50,0,0,0-4,99.83v79.34a50,50,0,0,0,0,99.66v79.34A50,50,0,0,0,50,458H651a50,50,0,0,0,0-100H50c-1,0-2,0-3,.1V278.9C48,279,49,279,50,279Z"/>
|
||||
</svg>
|
||||
<div className="mobile-menu-overlay"></div>
|
||||
<div className="mobile-menu">
|
||||
<svg className="close-mobile-menu-btn" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="438.533px" height="438.533px" viewBox="0 0 438.533 438.533" onClick={this.toggleMobileMenu}>
|
||||
<g>
|
||||
<path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
|
||||
c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
|
||||
c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
|
||||
s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
|
||||
C438.533,179.485,428.732,142.795,409.133,109.203z M322.621,270.939c3.617,3.613,5.428,7.905,5.428,12.854
|
||||
c0,5.133-1.811,9.514-5.428,13.127l-25.693,25.701c-3.614,3.613-7.994,5.42-13.135,5.42c-4.948,0-9.236-1.807-12.847-5.42
|
||||
l-51.676-51.682l-51.678,51.682c-3.616,3.613-7.898,5.42-12.847,5.42c-5.14,0-9.517-1.807-13.134-5.42l-25.697-25.701
|
||||
c-3.616-3.613-5.424-7.994-5.424-13.127c0-4.948,1.809-9.24,5.424-12.854l51.678-51.673l-51.678-51.678
|
||||
c-3.616-3.612-5.424-7.898-5.424-12.847c0-5.14,1.809-9.517,5.424-13.134l25.697-25.693c3.617-3.616,7.994-5.424,13.134-5.424
|
||||
c4.949,0,9.231,1.809,12.847,5.424l51.678,51.674l51.676-51.674c3.61-3.616,7.898-5.424,12.847-5.424
|
||||
c5.141,0,9.521,1.809,13.135,5.424l25.693,25.693c3.617,3.617,5.428,7.994,5.428,13.134c0,4.948-1.811,9.235-5.428,12.847
|
||||
l-51.675,51.678L322.621,270.939z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div className="current-user">
|
||||
<svg className="avatar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1855 1855">
|
||||
<path className="cls-1" d="M1927,1000.5C1927,489.09,1510.91,73,999.5,73S72,489.09,72,1000.5c0,270.12,116.16,513.6,301.05,683.25l-.88.77,30.09,25.37c1.95,1.65,4.08,3,6,4.62,16,13.25,32.55,25.83,49.42,38,5.46,3.94,10.92,7.89,16.49,11.73q27,18.63,55.38,35.35c4.11,2.43,8.26,4.79,12.41,7.15,20.67,11.77,41.79,22.87,63.41,33,1.58.75,3.2,1.42,4.79,2.16a919,919,0,0,0,224.32,71l6.2,1.11c24.42,4.22,49.11,7.59,74.1,9.85,3,.27,6.07.44,9.14.71,24.89,2,50,3.37,75.55,3.37,25.26,0,50.19-1.32,74.94-3.31,3.14-.27,6.28-.43,9.41-.7q37.19-3.39,73.46-9.68c2.09-.37,4.22-.75,6.31-1.15a919.21,919.21,0,0,0,221.15-69.31c2.56-1.18,5.16-2.29,7.72-3.51q31.21-14.67,61.08-31.57c5-2.8,9.88-5.63,14.81-8.53,18.14-10.69,36-21.85,53.32-33.73,6.24-4.25,12.34-8.73,18.52-13.18,14.8-10.66,29.34-21.66,43.47-33.16,3.14-2.53,6.51-4.72,9.58-7.32l30.86-25.76-.91-.78C1809.73,1516.59,1927,1272,1927,1000.5Zm-1787.55,0c0-474.24,385.81-860,860.05-860s860.05,385.81,860.05,860.05c0,255.55-112.15,485.3-289.69,642.94a253.6,253.6,0,0,0-30.12-18.11l-285.57-142.77a74.75,74.75,0,0,1-41.55-67.21v-99.74c6.61-8.16,13.59-17.4,20.81-27.55a687.14,687.14,0,0,0,88.23-172.79A122.38,122.38,0,0,0,1392,1004.34V884.78a122.73,122.73,0,0,0-29.91-79.9V647.48c1.75-17.54,8-116.3-63.51-197.78-62.16-71-162.77-106.88-299.06-106.88S762.6,378.74,700.44,449.67C629,531.15,635.18,630,636.93,647.44V804.85A122.87,122.87,0,0,0,607,884.75v119.56a122.72,122.72,0,0,0,45.19,95.15c27.32,107,83.54,188,104.32,215.48v97.61a75.23,75.23,0,0,1-39.19,66L450.66,1624.05a244.6,244.6,0,0,0-25.37,16C250,1482.53,139.45,1254.2,139.45,1000.5Z" transform="translate(-72 -73)"/>
|
||||
</svg>
|
||||
<h3>Username</h3>
|
||||
</div>
|
||||
<div>
|
||||
<div className="small-btns">
|
||||
<button className="btn-mobile">
|
||||
<Link className="route-link" to="/home">Return</Link>
|
||||
</button>
|
||||
<button className="btn-mobile" onClick={this.openMobileProfileSettings}>Profile Settings</button>
|
||||
<button className="btn-mobile">
|
||||
<Link className="route-link" to="/">Log Out</Link>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PostNav
|
||||
@@ -0,0 +1,68 @@
|
||||
import React from 'react';
|
||||
import PostNav from './PostNav';
|
||||
import Post from './Post';
|
||||
import ProfileInfo from './ProfileInfo';
|
||||
import Footer from './Footer';
|
||||
import DesktopProfileSettings from './DesktopProfileSettings';
|
||||
import MobileProfileSettings from './MobileProfileSettings';
|
||||
import UserProfile from './UserProfile';
|
||||
import '../scss/PostPage.scss';
|
||||
|
||||
class PostPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
displayDesktopProfileSettings: false,
|
||||
displayMobileProfileSettings: false,
|
||||
displayUserProfile: false
|
||||
}
|
||||
}
|
||||
|
||||
openDesktopProfileSettings = () => {
|
||||
this.setState({
|
||||
displayDesktopProfileSettings: true
|
||||
});
|
||||
}
|
||||
|
||||
openMobileProfileSettings = () => {
|
||||
this.setState({
|
||||
displayMobileProfileSettings: true
|
||||
});
|
||||
}
|
||||
|
||||
openUserProfile = () => {
|
||||
this.setState({
|
||||
displayUserProfile: true
|
||||
});
|
||||
}
|
||||
|
||||
close = () => {
|
||||
this.setState({
|
||||
displayDesktopProfileSettings: false,
|
||||
displayMobileProfileSettings: false,
|
||||
displayUserProfile: false
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<React.Fragment>
|
||||
<div id="post-page">
|
||||
<div className="container">
|
||||
<PostNav showMobileProfileSettings={this.openMobileProfileSettings} />
|
||||
<main>
|
||||
<Post showUserProfile={this.openUserProfile} />
|
||||
<ProfileInfo showDesktopProfileSettings={this.openDesktopProfileSettings} showUserProfile={this.openUserProfile} />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
<DesktopProfileSettings display={this.state.displayDesktopProfileSettings} close={this.close} />
|
||||
<MobileProfileSettings display={this.state.displayMobileProfileSettings} close={this.close} />
|
||||
<UserProfile display={this.state.displayUserProfile} close={this.close} />
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PostPage;
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import '../scss/Posts.scss';
|
||||
|
||||
class Posts extends React.Component {
|
||||
render() {
|
||||
const posts = [1,2,3,4,5].map((post, key) => {
|
||||
return(
|
||||
<div className="post" key={key.toString()}>
|
||||
<div className="info">
|
||||
<div className="data">
|
||||
<div className="user">User {post}</div>
|
||||
<div className="title">
|
||||
<h2>
|
||||
<Link className="route-link" to="/post">Post {post}</Link>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="content">Content {post}</div>
|
||||
</div>
|
||||
<div className="stats">
|
||||
<div className="likes">?? Likes</div>
|
||||
<div className="dislikes">?? Dislikes</div>
|
||||
<div className="comments">?? Comments</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="interaction">
|
||||
<button className="like">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1801 1656.95">
|
||||
<path className="cls-1" d="M994.11,464.16C1066.8,291.88,1232.86,171.49,1426,171.49c260.18,0,447.56,222.58,471.12,487.83,0,0,12.71,65.85-15.27,184.39-38.11,161.45-127.7,304.88-248.48,414.35L994.11,1828.41,365.63,1258c-120.78-109.43-210.37-252.9-248.48-414.34-28-118.55-15.27-184.39-15.27-184.39C125.44,394,312.82,171.46,573,171.46,766.18,171.46,921.43,291.88,994.11,464.16Z" transform="translate(-99 -171.46)"/>
|
||||
</svg>
|
||||
<span>Like</span>
|
||||
</button>
|
||||
<button className="dislike">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1732 1732">
|
||||
<path className="cls-1" d="M1000,134c-478.28,0-866,387.72-866,866s387.72,866,866,866,866-387.72,866-866S1478.28,134,1000,134ZM271,1000c0-402.62,326.38-729,729-729,194.94,0,372,76.51,502.8,201.15L735.65,1140.9,706.77,1109l647.34-564.31a288.44,288.44,0,0,0-71.35-8.85c-128,0-238.14,79.81-286.33,194-48.19-114.22-151.12-194-279.19-194-172.49,0-296.71,147.55-312.33,323.41,0,0-8.43,43.65,10.13,122.24,23.11,97.92,74.8,185.86,144.74,255.67l19.44-16.94h0l.06,0a4.24,4.24,0,0,1,1.19-1l126.14-110L735.5,1141,609.7,1250.7l-.23-.23h0l.23.23L408.46,1426.13A725.69,725.69,0,0,1,271,1000Zm729,729c-194.18,0-370.62-75.93-501.27-199.7l208.12-181.43.1.09h0l-.09-.09,120.72-105.23,28.88,31.86L737.33,1378.33l-.07-.07h0l.08.07-11.73,10.22,270.83,245.8,423.81-378.12c80.07-72.58,139.46-167.67,164.72-274.7,18.56-78.59,10.13-122.25,10.13-122.25-5.78-65-26.41-126.16-58.83-177.42L856.61,1274.35l-28.88-31.86,765-666.91A725.69,725.69,0,0,1,1729,1000C1729,1402.62,1402.62,1729,1000,1729Z" transform="translate(-134 -134)"/>
|
||||
</svg>
|
||||
<span>Dislike</span>
|
||||
</button>
|
||||
<button className="comment">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1678 580.88">
|
||||
<path className="cls-1" d="M1548.56,753.3c-145.88,0-266.62,107.54-287.3,247.67H1133.71c-19.46-99.21-106.88-174.07-211.79-174.07S729.59,901.76,710.13,1001H588.63C569.17,901.76,481.75,826.9,376.84,826.9,257.64,826.9,161,923.54,161,1042.74s96.64,215.85,215.84,215.85S592.68,1162,592.68,1042.74a216.62,216.62,0,0,0-3.86-40.78H709.94a216.62,216.62,0,0,0-3.86,40.78c0,119.21,96.63,215.85,215.84,215.85s215.84-96.64,215.84-215.85a217.45,217.45,0,0,0-3.86-40.78h127.22a292.26,292.26,0,0,0-3,41.78c0,160.41,130,290.44,290.44,290.44s290.44-130,290.44-290.44S1709,753.3,1548.56,753.3Z" transform="translate(-161 -753.3)"/>
|
||||
</svg>
|
||||
<span>Comment</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
return(
|
||||
<div id="posts">
|
||||
<div id="posts-filter">
|
||||
<button className="filter active">Popular</button>
|
||||
<button className="filter">Newest</button>
|
||||
<button className="filter">Best</button>
|
||||
</div>
|
||||
<div id="posts-container">
|
||||
{posts}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Posts;
|
||||
@@ -0,0 +1,88 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import '../scss/ProfileInfo.scss';
|
||||
|
||||
class ProfileInfo extends React.Component {
|
||||
openDesktopProfileSettings = () => {
|
||||
this.props.showDesktopProfileSettings();
|
||||
}
|
||||
|
||||
openUserProfile = () => {
|
||||
this.props.showUserProfile();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div id="profile-info">
|
||||
<div className="profile">
|
||||
<svg onClick={this.openDesktopProfileSettings} className="settings-btn" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"viewBox="0 0 268.8 268.8">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="-55.4026" y1="137.5011" x2="370.5974" y2="130.5011">
|
||||
<stop offset="0" style={{stopColor:"#EACC56"}}/>
|
||||
<stop offset="1" style={{stopColor:"#EE64D1"}}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path className="st0" d="M267.9,119.5c-0.4-3.8-4.8-6.6-8.6-6.6c-12.3,0-23.2-7.2-27.8-18.4c-4.7-11.5-1.7-24.8,7.5-33.2
|
||||
c2.9-2.6,3.2-7.1,0.8-10.1c-6.3-8-13.5-15.2-21.3-21.5c-3.1-2.5-7.6-2.1-10.2,0.8c-8,8.9-22.4,12.2-33.5,7.5
|
||||
c-11.6-4.9-18.9-16.6-18.2-29.2c0.2-4-2.7-7.4-6.6-7.8c-10-1.2-20.2-1.2-30.2-0.1c-3.9,0.4-6.8,3.8-6.7,7.7
|
||||
c0.4,12.5-6.9,24-18.4,28.7c-11,4.5-25.3,1.2-33.3-7.6c-2.6-2.9-7.1-3.3-10.1-0.9c-8.1,6.3-15.4,13.6-21.7,21.5
|
||||
c-2.5,3.1-2.1,7.6,0.8,10.2c9.4,8.5,12.4,21.9,7.5,33.5c-4.6,11-16.1,18.2-29.2,18.2c-4.3-0.1-7.3,2.7-7.8,6.6
|
||||
c-1.2,10.1-1.2,20.4-0.1,30.6c0.4,3.8,5,6.6,8.8,6.6c11.7-0.3,22.9,6.9,27.6,18.4c4.7,11.5,1.7,24.8-7.5,33.2
|
||||
c-2.9,2.6-3.2,7.1-0.8,10.1c6.2,8,13.4,15.2,21.3,21.5c3.1,2.5,7.6,2.1,10.2-0.8c8-8.9,22.4-12.2,33.5-7.5
|
||||
c11.6,4.9,18.9,16.6,18.2,29.2c-0.2,4,2.7,7.4,6.6,7.9c5.1,0.6,10.3,0.9,15.5,0.9c4.9,0,9.8-0.3,14.8-0.8c3.9-0.4,6.8-3.8,6.7-7.7
|
||||
c-0.5-12.5,6.9-24,18.4-28.7c11.1-4.5,25.3-1.2,33.3,7.6c2.7,2.9,7,3.2,10.1,0.8c8-6.3,15.3-13.5,21.7-21.5
|
||||
c2.5-3.1,2.1-7.6-0.8-10.2c-9.4-8.5-12.4-21.9-7.5-33.5c4.6-10.9,15.6-18.2,27.5-18.2l1.7,0c3.9,0.3,7.4-2.7,7.9-6.6
|
||||
C269,139.9,269.1,129.6,267.9,119.5z M134.6,179.5c-24.7,0-44.8-20.1-44.8-44.8c0-24.7,20.1-44.8,44.8-44.8
|
||||
c24.7,0,44.8,20.1,44.8,44.8C179.4,159.4,159.3,179.5,134.6,179.5z"/>
|
||||
</svg>
|
||||
<div className="user">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1855 1855">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="-356" y1="927.47" x2="2276" y2="927.47" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M1927,1000.5C1927,489.09,1510.91,73,999.5,73S72,489.09,72,1000.5c0,270.12,116.16,513.6,301.05,683.25l-.88.77,30.09,25.37c1.95,1.65,4.08,3,6,4.62,16,13.25,32.55,25.83,49.42,38,5.46,3.94,10.92,7.89,16.49,11.73q27,18.63,55.38,35.35c4.11,2.43,8.26,4.79,12.41,7.15,20.67,11.77,41.79,22.87,63.41,33,1.58.75,3.2,1.42,4.79,2.16a919,919,0,0,0,224.32,71l6.2,1.11c24.42,4.22,49.11,7.59,74.1,9.85,3,.27,6.07.44,9.14.71,24.89,2,50,3.37,75.55,3.37,25.26,0,50.19-1.32,74.94-3.31,3.14-.27,6.28-.43,9.41-.7q37.19-3.39,73.46-9.68c2.09-.37,4.22-.75,6.31-1.15a919.21,919.21,0,0,0,221.15-69.31c2.56-1.18,5.16-2.29,7.72-3.51q31.21-14.67,61.08-31.57c5-2.8,9.88-5.63,14.81-8.53,18.14-10.69,36-21.85,53.32-33.73,6.24-4.25,12.34-8.73,18.52-13.18,14.8-10.66,29.34-21.66,43.47-33.16,3.14-2.53,6.51-4.72,9.58-7.32l30.86-25.76-.91-.78C1809.73,1516.59,1927,1272,1927,1000.5Zm-1787.55,0c0-474.24,385.81-860,860.05-860s860.05,385.81,860.05,860.05c0,255.55-112.15,485.3-289.69,642.94a253.6,253.6,0,0,0-30.12-18.11l-285.57-142.77a74.75,74.75,0,0,1-41.55-67.21v-99.74c6.61-8.16,13.59-17.4,20.81-27.55a687.14,687.14,0,0,0,88.23-172.79A122.38,122.38,0,0,0,1392,1004.34V884.78a122.73,122.73,0,0,0-29.91-79.9V647.48c1.75-17.54,8-116.3-63.51-197.78-62.16-71-162.77-106.88-299.06-106.88S762.6,378.74,700.44,449.67C629,531.15,635.18,630,636.93,647.44V804.85A122.87,122.87,0,0,0,607,884.75v119.56a122.72,122.72,0,0,0,45.19,95.15c27.32,107,83.54,188,104.32,215.48v97.61a75.23,75.23,0,0,1-39.19,66L450.66,1624.05a244.6,244.6,0,0,0-25.37,16C250,1482.53,139.45,1254.2,139.45,1000.5Z" transform="translate(-72 -73)"/>
|
||||
</svg>
|
||||
<h3>Username</h3>
|
||||
<div className="user-btns">
|
||||
<button onClick={this.openUserProfile} >Profile</button>
|
||||
<button>
|
||||
<Link className="route-link" to="/">Log Out</Link>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="profile-stats">
|
||||
<h3>My Post Stats</h3>
|
||||
<div className="stats">
|
||||
<div className="likes">
|
||||
<span>??</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1801 1656.95">
|
||||
<path className="cls-1" d="M994.11,464.16C1066.8,291.88,1232.86,171.49,1426,171.49c260.18,0,447.56,222.58,471.12,487.83,0,0,12.71,65.85-15.27,184.39-38.11,161.45-127.7,304.88-248.48,414.35L994.11,1828.41,365.63,1258c-120.78-109.43-210.37-252.9-248.48-414.34-28-118.55-15.27-184.39-15.27-184.39C125.44,394,312.82,171.46,573,171.46,766.18,171.46,921.43,291.88,994.11,464.16Z" transform="translate(-99 -171.46)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="dislikes">
|
||||
<span>??</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1732 1732">
|
||||
<path className="cls-1" d="M1000,134c-478.28,0-866,387.72-866,866s387.72,866,866,866,866-387.72,866-866S1478.28,134,1000,134ZM271,1000c0-402.62,326.38-729,729-729,194.94,0,372,76.51,502.8,201.15L735.65,1140.9,706.77,1109l647.34-564.31a288.44,288.44,0,0,0-71.35-8.85c-128,0-238.14,79.81-286.33,194-48.19-114.22-151.12-194-279.19-194-172.49,0-296.71,147.55-312.33,323.41,0,0-8.43,43.65,10.13,122.24,23.11,97.92,74.8,185.86,144.74,255.67l19.44-16.94h0l.06,0a4.24,4.24,0,0,1,1.19-1l126.14-110L735.5,1141,609.7,1250.7l-.23-.23h0l.23.23L408.46,1426.13A725.69,725.69,0,0,1,271,1000Zm729,729c-194.18,0-370.62-75.93-501.27-199.7l208.12-181.43.1.09h0l-.09-.09,120.72-105.23,28.88,31.86L737.33,1378.33l-.07-.07h0l.08.07-11.73,10.22,270.83,245.8,423.81-378.12c80.07-72.58,139.46-167.67,164.72-274.7,18.56-78.59,10.13-122.25,10.13-122.25-5.78-65-26.41-126.16-58.83-177.42L856.61,1274.35l-28.88-31.86,765-666.91A725.69,725.69,0,0,1,1729,1000C1729,1402.62,1402.62,1729,1000,1729Z" transform="translate(-134 -134)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="comments">
|
||||
<span>??</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1678 580.88">
|
||||
<path className="cls-1" d="M1548.56,753.3c-145.88,0-266.62,107.54-287.3,247.67H1133.71c-19.46-99.21-106.88-174.07-211.79-174.07S729.59,901.76,710.13,1001H588.63C569.17,901.76,481.75,826.9,376.84,826.9,257.64,826.9,161,923.54,161,1042.74s96.64,215.85,215.84,215.85S592.68,1162,592.68,1042.74a216.62,216.62,0,0,0-3.86-40.78H709.94a216.62,216.62,0,0,0-3.86,40.78c0,119.21,96.63,215.85,215.84,215.85s215.84-96.64,215.84-215.85a217.45,217.45,0,0,0-3.86-40.78h127.22a292.26,292.26,0,0,0-3,41.78c0,160.41,130,290.44,290.44,290.44s290.44-130,290.44-290.44S1709,753.3,1548.56,753.3Z" transform="translate(-161 -753.3)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ad">
|
||||
Advert
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ProfileInfo;
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import '../scss/Showcase.scss';
|
||||
|
||||
class Showcase extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<main id="showcase">
|
||||
<h1>
|
||||
Fast, easy, simple. <br/>
|
||||
Pexta for posts. <br/>
|
||||
Make posts fast and easy. <br/>
|
||||
</h1>
|
||||
<div className="contact">
|
||||
<svg className="facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1668 1668">
|
||||
<g>
|
||||
<path className="cls-1" d="M1000,166c-460.58,0-834,373.42-834,834s373.42,834,834,834,834-373.42,834-834S1460.58,166,1000,166Zm215.59,833.89-136.67.11-.11,500.39H891.27V1000H766.17V827.57l125.1-.1-.21-101.54c0-140.74,38.15-226.33,203.81-226.33h138V672.14h-86.32c-64.53,0-67.65,24.08-67.65,69l-.21,86.32h155.12Z" transform="translate(-166 -166)"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg className="instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1818 1818">
|
||||
<g>
|
||||
<path d="M1174,1000a174,174,0,1,1-174-174A174,174,0,0,1,1174,1000Z" transform="translate(-91 -91)"/>
|
||||
<path d="M1406.9,692.16a172.93,172.93,0,0,0-99.06-99.06c-18.4-7.14-46-15.64-96.92-18-55.05-2.51-71.55-3-210.92-3s-155.89.53-210.92,3c-50.89,2.33-78.54,10.83-96.92,18a173,173,0,0,0-99.07,99.06c-7.14,18.4-15.65,46-18,96.93-2.51,55-3,71.54-3,210.92s.54,155.88,3,210.93c2.31,50.89,10.82,78.52,18,96.91a172.78,172.78,0,0,0,99.06,99.06c18.39,7.16,46,15.66,96.93,18,55,2.51,71.52,3,210.91,3s155.9-.52,210.92-3c50.89-2.32,78.53-10.82,96.93-18a172.86,172.86,0,0,0,99.06-99.06c7.14-18.39,15.64-46,18-96.91,2.51-55,3-71.56,3-210.93s-.53-155.88-3-210.92C1422.56,738.2,1414.05,710.56,1406.9,692.16ZM1000,1268c-148,0-268-120-268-268s120-268,268-268,268,120,268,268S1148,1268,1000,1268Zm278.63-484a62.64,62.64,0,1,1,62.63-62.64A62.63,62.63,0,0,1,1278.63,784Z" transform="translate(-91 -91)"/>
|
||||
<path d="M1000,91C498.05,91,91,498.05,91,1000s407.05,909,909,909,909-407,909-909S1502,91,1000,91Zm518.82,1124.2c-2.53,55.56-11.36,93.5-24.26,126.7a266.89,266.89,0,0,1-152.66,152.66c-33.19,12.9-71.14,21.72-126.69,24.26S1141.77,1522,1000,1522s-159.53-.61-215.21-3.14-93.5-11.36-126.69-24.26A266.84,266.84,0,0,1,505.46,1341.9c-12.9-33.19-21.74-71.14-24.26-126.69S478,1141.75,478,1000s.59-159.54,3.14-215.2,11.35-93.5,24.25-126.7A267,267,0,0,1,658.1,505.44c33.2-12.9,71.14-21.72,126.7-24.26S858.25,478,1000,478s159.54.61,215.2,3.16,93.5,11.34,126.7,24.23A266.95,266.95,0,0,1,1494.56,658.1c12.91,33.2,21.73,71.14,24.27,126.7S1522,858.25,1522,1000,1521.37,1159.54,1518.82,1215.2Z" transform="translate(-91 -91)"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg className="mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1867.98 1868">
|
||||
<g>
|
||||
<path d="M1000,43C484.16,43,66,461.17,66,977s418.16,934,934,934,934-418.21,934-934S1515.79,43,1000,43Zm0,328.06,552.7,344.65H447.3Zm559.59,895h-.06a100.07,100.07,0,0,1-100.08,100.08H540.54a100.07,100.07,0,0,1-100.08-100.08V737.64A99.73,99.73,0,0,1,442,720.52l528.08,329.29c.65.41,1.34.68,2,1s1.41.76,2.12,1.12a55.93,55.93,0,0,0,11.5,4.49c.41.11.81.16,1.22.25a56.66,56.66,0,0,0,13,1.65h.09a55.67,55.67,0,0,0,13-1.65c.4-.1.8-.14,1.21-.25a56.6,56.6,0,0,0,11.5-4.49c.71-.36,1.42-.73,2.12-1.12s1.35-.64,2-1L1558,720.52a99.63,99.63,0,0,1,1.57,17.12v528.43Z" transform="translate(-66 -43)"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Showcase;
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import '../scss/SignUp.scss';
|
||||
|
||||
class SignUp extends React.Component {
|
||||
close = () => {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div id="sign-up-container" style={{display: this.props.display ? "grid" : "none"}}>
|
||||
<div id="sign-up">
|
||||
<svg className="close-sign-up" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="438.533px" height="438.533px" viewBox="0 0 438.533 438.533" onClick={this.close}>
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="275.62" y1="495.12" x2="71.68" y2="291.18" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
|
||||
c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
|
||||
c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
|
||||
s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
|
||||
C438.533,179.485,428.732,142.795,409.133,109.203z M322.621,270.939c3.617,3.613,5.428,7.905,5.428,12.854
|
||||
c0,5.133-1.811,9.514-5.428,13.127l-25.693,25.701c-3.614,3.613-7.994,5.42-13.135,5.42c-4.948,0-9.236-1.807-12.847-5.42
|
||||
l-51.676-51.682l-51.678,51.682c-3.616,3.613-7.898,5.42-12.847,5.42c-5.14,0-9.517-1.807-13.134-5.42l-25.697-25.701
|
||||
c-3.616-3.613-5.424-7.994-5.424-13.127c0-4.948,1.809-9.24,5.424-12.854l51.678-51.673l-51.678-51.678
|
||||
c-3.616-3.612-5.424-7.898-5.424-12.847c0-5.14,1.809-9.517,5.424-13.134l25.697-25.693c3.617-3.616,7.994-5.424,13.134-5.424
|
||||
c4.949,0,9.231,1.809,12.847,5.424l51.678,51.674l51.676-51.674c3.61-3.616,7.898-5.424,12.847-5.424
|
||||
c5.141,0,9.521,1.809,13.135,5.424l25.693,25.693c3.617,3.617,5.428,7.994,5.428,13.134c0,4.948-1.811,9.235-5.428,12.847
|
||||
l-51.675,51.678L322.621,270.939z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<h2>Sign Up</h2>
|
||||
<form>
|
||||
<input type="text" placeholder="Username" />
|
||||
<input type="email" placeholder="Email" />
|
||||
<input type="email" placeholder="Confirm Email" />
|
||||
<input type="password" placeholder="Password" />
|
||||
<input type="password" placeholder="Confirm Password" />
|
||||
<Link className="route-link" to="/home">
|
||||
<button>Join</button>
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SignUp;
|
||||
@@ -0,0 +1,91 @@
|
||||
import React from 'react';
|
||||
import '../scss/UserProfile.scss';
|
||||
|
||||
class UserProfile extends React.Component {
|
||||
close = () => {
|
||||
this.props.close();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div id="user-profile-container" style={{display: this.props.display ? "grid" : "none"}}>
|
||||
<div id="user-profile">
|
||||
<svg className="close-user-profile" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="438.533px" height="438.533px" viewBox="0 0 438.533 438.533" onClick={this.close}>
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="275.62" y1="495.12" x2="71.68" y2="291.18" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
|
||||
c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
|
||||
c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
|
||||
s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
|
||||
C438.533,179.485,428.732,142.795,409.133,109.203z M322.621,270.939c3.617,3.613,5.428,7.905,5.428,12.854
|
||||
c0,5.133-1.811,9.514-5.428,13.127l-25.693,25.701c-3.614,3.613-7.994,5.42-13.135,5.42c-4.948,0-9.236-1.807-12.847-5.42
|
||||
l-51.676-51.682l-51.678,51.682c-3.616,3.613-7.898,5.42-12.847,5.42c-5.14,0-9.517-1.807-13.134-5.42l-25.697-25.701
|
||||
c-3.616-3.613-5.424-7.994-5.424-13.127c0-4.948,1.809-9.24,5.424-12.854l51.678-51.673l-51.678-51.678
|
||||
c-3.616-3.612-5.424-7.898-5.424-12.847c0-5.14,1.809-9.517,5.424-13.134l25.697-25.693c3.617-3.616,7.994-5.424,13.134-5.424
|
||||
c4.949,0,9.231,1.809,12.847,5.424l51.678,51.674l51.676-51.674c3.61-3.616,7.898-5.424,12.847-5.424
|
||||
c5.141,0,9.521,1.809,13.135,5.424l25.693,25.693c3.617,3.617,5.428,7.994,5.428,13.134c0,4.948-1.811,9.235-5.428,12.847
|
||||
l-51.675,51.678L322.621,270.939z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div className="user">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1855 1855">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient" x1="-356" y1="927.47" x2="2276" y2="927.47" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stopColor="#eacc56"/>
|
||||
<stop offset="1" stopColor="#ee64d1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M1927,1000.5C1927,489.09,1510.91,73,999.5,73S72,489.09,72,1000.5c0,270.12,116.16,513.6,301.05,683.25l-.88.77,30.09,25.37c1.95,1.65,4.08,3,6,4.62,16,13.25,32.55,25.83,49.42,38,5.46,3.94,10.92,7.89,16.49,11.73q27,18.63,55.38,35.35c4.11,2.43,8.26,4.79,12.41,7.15,20.67,11.77,41.79,22.87,63.41,33,1.58.75,3.2,1.42,4.79,2.16a919,919,0,0,0,224.32,71l6.2,1.11c24.42,4.22,49.11,7.59,74.1,9.85,3,.27,6.07.44,9.14.71,24.89,2,50,3.37,75.55,3.37,25.26,0,50.19-1.32,74.94-3.31,3.14-.27,6.28-.43,9.41-.7q37.19-3.39,73.46-9.68c2.09-.37,4.22-.75,6.31-1.15a919.21,919.21,0,0,0,221.15-69.31c2.56-1.18,5.16-2.29,7.72-3.51q31.21-14.67,61.08-31.57c5-2.8,9.88-5.63,14.81-8.53,18.14-10.69,36-21.85,53.32-33.73,6.24-4.25,12.34-8.73,18.52-13.18,14.8-10.66,29.34-21.66,43.47-33.16,3.14-2.53,6.51-4.72,9.58-7.32l30.86-25.76-.91-.78C1809.73,1516.59,1927,1272,1927,1000.5Zm-1787.55,0c0-474.24,385.81-860,860.05-860s860.05,385.81,860.05,860.05c0,255.55-112.15,485.3-289.69,642.94a253.6,253.6,0,0,0-30.12-18.11l-285.57-142.77a74.75,74.75,0,0,1-41.55-67.21v-99.74c6.61-8.16,13.59-17.4,20.81-27.55a687.14,687.14,0,0,0,88.23-172.79A122.38,122.38,0,0,0,1392,1004.34V884.78a122.73,122.73,0,0,0-29.91-79.9V647.48c1.75-17.54,8-116.3-63.51-197.78-62.16-71-162.77-106.88-299.06-106.88S762.6,378.74,700.44,449.67C629,531.15,635.18,630,636.93,647.44V804.85A122.87,122.87,0,0,0,607,884.75v119.56a122.72,122.72,0,0,0,45.19,95.15c27.32,107,83.54,188,104.32,215.48v97.61a75.23,75.23,0,0,1-39.19,66L450.66,1624.05a244.6,244.6,0,0,0-25.37,16C250,1482.53,139.45,1254.2,139.45,1000.5Z" transform="translate(-72 -73)"/>
|
||||
</svg>
|
||||
<h3>Username</h3>
|
||||
</div>
|
||||
<div className="user-posts">
|
||||
<h3>Posts</h3>
|
||||
<div className="posts">
|
||||
<div className="post">
|
||||
<div className="info">
|
||||
<h4>Post 1</h4>
|
||||
<p>Lorem ipsum dolor sit amet consectetur</p>
|
||||
</div>
|
||||
<div className="stats">
|
||||
<div className="likes">?? Likes</div>
|
||||
<div className="dislikes">?? Dislikes</div>
|
||||
<div className="comments">?? Comments</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="post">
|
||||
<div className="info">
|
||||
<h4>Post 2</h4>
|
||||
<p>Lorem ipsum dolor sit amet consectetur</p>
|
||||
</div>
|
||||
<div className="stats">
|
||||
<div className="likes">?? Likes</div>
|
||||
<div className="dislikes">?? Dislikes</div>
|
||||
<div className="comments">?? Comments</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="post">
|
||||
<div className="info">
|
||||
<h4>Post 3</h4>
|
||||
<p>Lorem ipsum dolor sit amet consectetur</p>
|
||||
</div>
|
||||
<div className="stats">
|
||||
<div className="likes">?? Likes</div>
|
||||
<div className="dislikes">?? Dislikes</div>
|
||||
<div className="comments">?? Comments</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default UserProfile;
|
||||
@@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1163.5 136">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: url(#linear-gradient-2);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="linear-gradient" x1="1204.93" y1="810.25" x2="-37.07" y2="808.25" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#eacc56"/>
|
||||
<stop offset="1" stop-color="#ee64d1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="linear-gradient-2" x1="1205" y1="766.82" x2="-37" y2="764.82" xlink:href="#linear-gradient"/>
|
||||
</defs>
|
||||
<title>page 2 wave</title>
|
||||
<g>
|
||||
<path class="cls-1" d="M214,782.5c-83.1,3-152.76,22.34-214,52H456.5C368.08,801.5,286.08,781.77,214,782.5Z" transform="translate(0 -698.5)"/>
|
||||
<path class="cls-2" d="M1072.5,736c-85.67-.62-158.27,41.05-226,98.48h317v-136C1150.79,717.78,1133.67,736,1072.5,736Z" transform="translate(0 -698.5)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1001 B |
@@ -0,0 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1163.5 834.5">
|
||||
<defs>
|
||||
<style>
|
||||
svg path {
|
||||
fill: url(#linear-gradient);
|
||||
box-shadow: ;
|
||||
d: path("M756,1080l1163.5-.5v-834c-1.91,92.4-58.33,172.83-124.5,199.5-67,27-131,81-180,190-56.5,136.5-231,170-403.5,191.5S888,893,756,1080Z");
|
||||
animation: morph 5s alternate infinite linear;
|
||||
}
|
||||
|
||||
@keyframes morph {
|
||||
from {
|
||||
d: path("M756,1080l1163.5-.5v-834c-1.91,92.4-58.33,172.83-124.5,199.5-67,27-131,81-180,190-56.5,136.5-231,170-403.5,191.5S888,893,756,1080Z");
|
||||
}
|
||||
|
||||
to {
|
||||
d: path("M756,1080l1163.5-.5v-834C1900,264,1831,314,1808,386c-29,79,31,219-193,249-153,9-270,14-403.5,191.5S1139,998,756,1080Z");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="linear-gradient" x1="1733.54" y1="394.22" x2="1141.12" y2="1420.33" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#eacc56">
|
||||
<animate attributeName="stop-color" values="#eacc56; #ee64d1; #eacc56" dur="5s" repeatCount="indefinite"></animate>
|
||||
</stop>
|
||||
<stop offset="100%" stop-color="#ee64d1">
|
||||
<animate attributeName="stop-color" values="#ee64d1; #eacc56; #ee64d1" dur="5s" repeatCount="indefinite"></animate>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M756,1080l1163.5-.5v-834c-1.91,92.4-58.33,172.83-124.5,199.5-67,27-131,81-180,190-56.5,136.5-231,170-403.5,191.5S888,893,756,1080Z" transform="translate(-756 -245.5)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1163.5 87">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: url(#linear-gradient-2);
|
||||
}
|
||||
</style>
|
||||
<linearGradient id="linear-gradient" x1="-94.64" y1="812.53" x2="1573.28" y2="676.04" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#eacc56"/>
|
||||
<stop offset="1" stop-color="#ee64d1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="linear-gradient-2" x1="-87.93" y1="894.49" x2="1579.98" y2="757.99" xlink:href="#linear-gradient"/>
|
||||
</defs>
|
||||
<title>page wave</title>
|
||||
<g>
|
||||
<path class="cls-1" d="M90.34,783.36C74.5,741.5,14.51,765.47,0,747.5v87H337C264.06,783.85,120.67,863.49,90.34,783.36Z" transform="translate(0 -747.5)"/>
|
||||
<path class="cls-2" d="M951.5,767c-71.82,6.2-172.37,17.17-249.83,67.5H1163.5V786C1029.5,785.5,1034.5,762,951.5,767Z" transform="translate(0 -747.5)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1018 B |
@@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
@@ -0,0 +1,97 @@
|
||||
@import './variables';
|
||||
|
||||
#add-post-container {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
z-index: 3;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: #70707040;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
#add-post {
|
||||
padding: 1rem;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 15px #707070;
|
||||
background: white;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
grid-row-gap: .5rem;
|
||||
|
||||
.close-add-post {
|
||||
cursor: pointer;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
// padding: .5rem;
|
||||
justify-self: flex-end;
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
background: linear-gradient(#eacc56, #ee64d1);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-row-gap: .5rem;
|
||||
|
||||
input, textarea {
|
||||
font-family: Montserrat;
|
||||
width: 100%;
|
||||
padding: .5rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ee64d1;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$bigScreens} {
|
||||
#add-post-container {
|
||||
|
||||
#add-post {
|
||||
width: 70%;
|
||||
padding: .5rem;
|
||||
height: auto;
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.close-add-post {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
form {
|
||||
grid-row-gap: 1rem;
|
||||
|
||||
input, textarea {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
@import './variables';
|
||||
|
||||
#desktop-profile-settings-container {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
z-index: 3;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: #70707040;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
#desktop-profile-settings {
|
||||
width: auto;
|
||||
padding: .8rem;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 15px #707070;
|
||||
background: white;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-row-gap: .5rem;
|
||||
|
||||
& > div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
}
|
||||
|
||||
.close-profile-settings {
|
||||
cursor: pointer;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
justify-self: flex-end;
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
background: linear-gradient(#eacc56, #ee64d1);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
.settings {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
grid-gap: .5rem;
|
||||
|
||||
@media only screen and (max-width: 1440px) {
|
||||
grid-template-columns: repeat(2, auto);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="email"], input[type="password"] {
|
||||
padding: .5rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ee64d1;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: none;
|
||||
background: linear-gradient(60deg, #eacc56, #ee64d1);
|
||||
}
|
||||
|
||||
input[type="file"]::-webkit-file-upload-button {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: #7D7D7D;
|
||||
background: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.change-photo, .change-password, .change-email, .change-username {
|
||||
padding: .5rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #CFCBCB;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
justify-items: flex-start;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
grid-row-gap: .5rem;
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.change-photo {
|
||||
grid-template-rows: repeat(4, auto);
|
||||
|
||||
svg {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
@import './variables';
|
||||
|
||||
footer {
|
||||
height: auto;
|
||||
background-color: #4e4e4e;
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: auto;
|
||||
grid-column-gap: .1rem;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
fill: rgba(255,255,255,.75);
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
justify-self: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
text-align: right;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$bigScreens} {
|
||||
footer {
|
||||
font-size: 1rem;
|
||||
|
||||
.container {
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
justify-self: flex-end;
|
||||
grid-template-rows: none;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
grid-column-gap: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
@import './variables';
|
||||
|
||||
#home-nav {
|
||||
height: 10vh;
|
||||
padding: .5rem 0rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.nav-logo {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
display: none;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
cursor: pointer;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
|
||||
@media #{$bigScreens} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-overlay {
|
||||
background: #70707040;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
background: linear-gradient(120deg, #ee64d1, #eacc56);
|
||||
height: 100vh;
|
||||
width: 50%;
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 100%;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
|
||||
.current-user {
|
||||
padding-top: 2rem;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
justify-items: center;
|
||||
|
||||
h3 {
|
||||
font-size: 1.7rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
|
||||
.cls-1 {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small-btns {
|
||||
padding-top: 2.5rem;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
grid-row-gap: 3rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.close-mobile-menu-btn {
|
||||
cursor: pointer;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: .5rem;
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
@import './variables';
|
||||
|
||||
#home-page {
|
||||
background: 100% 100% / contain no-repeat url(../img/home-page-wave.svg) !important;
|
||||
}
|
||||
|
||||
.btn-mobile {
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
color: $mainTextColor;
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: .3rem;
|
||||
font-size: 1.1rem;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
background: linear-gradient(60deg, #eacc56, #ee64d1);
|
||||
transition: all .3s ease-in-out;
|
||||
color: white !important;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
background: linear-gradient(150deg, #eacc56, #ee64d1);
|
||||
}
|
||||
}
|
||||
|
||||
main:not(#showcase) {
|
||||
height: auto;
|
||||
padding: 2rem 0rem;
|
||||
padding-top: 0;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
height: auto;
|
||||
padding: 2rem 0rem 7rem 0rem;
|
||||
padding-top: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-column-gap: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
@import './variables';
|
||||
|
||||
#landing-nav {
|
||||
height: 10vh;
|
||||
padding: 1rem 0rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.nav-logo {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
.big-btns {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
cursor: pointer;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-overlay {
|
||||
background: #70707040;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
background: linear-gradient(120deg, #ee64d1, #eacc56);
|
||||
height: 100vh;
|
||||
width: 50%;
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 100%;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
|
||||
.small-btns {
|
||||
padding-top: 10rem;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
grid-row-gap: 3rem;
|
||||
}
|
||||
|
||||
#sign-up-btn {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.close-mobile-menu-btn {
|
||||
cursor: pointer;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: .5rem;
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (orientation: landscape) {
|
||||
#landing-nav {
|
||||
padding: 2.5rem 0rem;
|
||||
|
||||
.big-btns {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
@import './variables';
|
||||
|
||||
#landing-page {
|
||||
height: 100vh;
|
||||
background: 100% 100% / contain no-repeat url(../img/landing-page-wave.svg) !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
color: $mainTextColor;
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: .3rem;
|
||||
font-size: 1.1rem;
|
||||
margin: .5rem 1rem;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.btn-mobile {
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
background: linear-gradient(60deg, #eacc56, #ee64d1);
|
||||
transition: all .3s ease-in-out;
|
||||
color: white !important;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
background: linear-gradient(150deg, #eacc56, #ee64d1);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-white {
|
||||
background: white;
|
||||
transition: all .3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
@import './variables';
|
||||
|
||||
#log-in-container {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
z-index: 3;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: #70707040;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
#log-in {
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 15px #707070;
|
||||
background: white;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
grid-row-gap: .5rem;
|
||||
|
||||
.close-log-in {
|
||||
cursor: pointer;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: .5rem;
|
||||
justify-self: flex-end;
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
background: linear-gradient(#eacc56, #ee64d1);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-row-gap: .2rem;
|
||||
|
||||
input {
|
||||
padding: .5rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ee64d1;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: .5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
margin-top: 1rem;
|
||||
color: white;
|
||||
background: linear-gradient(60deg, #eacc56, #ee64d1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (orientation: landscape) {
|
||||
#log-in {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
right: 7%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 2rem 4rem;
|
||||
|
||||
input {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
@import './variables';
|
||||
|
||||
#mobile-profile-settings-container {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
z-index: 3;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: #70707040;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
#mobile-profile-settings {
|
||||
width: 70%;
|
||||
padding: 2rem 1rem;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 15px #707070;
|
||||
background: white;
|
||||
grid-row-gap: 1.5rem;
|
||||
|
||||
& > div {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
|
||||
.close-profile-settings {
|
||||
cursor: pointer;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
justify-self: flex-end;
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
background: linear-gradient(#eacc56, #ee64d1);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
cursor: pointer;
|
||||
justify-self: center;
|
||||
font-size: 1rem;
|
||||
color: #7D7D7D;
|
||||
}
|
||||
}
|
||||
|
||||
.change-photo, .change-password, .change-email, .change-username {
|
||||
grid-template-rows: repeat(2, auto);
|
||||
grid-row-gap: 1rem;
|
||||
align-items: center;
|
||||
width: 70%;
|
||||
padding: 2rem 1rem;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 15px #707070;
|
||||
background: white;
|
||||
display: none;
|
||||
|
||||
.settings-return {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
justify-self: flex-start;
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
background: linear-gradient(#eacc56, #ee64d1);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
justify-self: center;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-row-gap: 1rem;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-row-gap: .5rem;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
width: 80%;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: #7D7D7D;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"], input[type="email"], input[type="password"] {
|
||||
padding: .1rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ee64d1;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
@import './variables';
|
||||
|
||||
#post {
|
||||
padding: .5rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
grid-row-gap: .5rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
padding: 0rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #CFCBCB;
|
||||
box-shadow: 0px 0px 5px #17171777;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
grid-row-gap: .5rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
padding: 1rem;
|
||||
grid-row-gap: 1rem;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-row-gap: .5rem;
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
color: #171717;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
height: auto;
|
||||
align-self: center;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
.user {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
margin-left: .3rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
justify-self: flex-end;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
align-items: center;
|
||||
grid-column-gap: .5rem;
|
||||
|
||||
.likes, .dislikes, .comments {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: .2rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.cls-1 {
|
||||
fill: #6A6A6A;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: .2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.other-users-comments {
|
||||
background: linear-gradient(60deg, rgba(238, 119, 184, 0.2), rgba(235, 170, 126, 0.2));
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-row-gap: 1rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: inline-block;
|
||||
padding: .5rem 0rem 0rem .5rem;
|
||||
font-size: 1rem;
|
||||
color: #6A6A6A;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
padding: 1rem 0rem 0rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.other-comments {
|
||||
padding: 0rem 1.5rem;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-row-gap: 1rem;
|
||||
|
||||
.comment {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
grid-column-gap: 1rem;
|
||||
|
||||
.other-user {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: .8rem;
|
||||
margin-left: .3rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
padding: .5rem;
|
||||
height: auto;
|
||||
font-size: .5rem;
|
||||
line-height: 1.2;
|
||||
border: 1px solid #B8B3B3;
|
||||
border-radius: 6px;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-comment {
|
||||
padding: 0rem 1.5rem;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: .5rem;
|
||||
border: 1px solid #B8B3B3;
|
||||
border-radius: 6px;
|
||||
background: none;
|
||||
justify-self: center;
|
||||
margin-bottom: 1rem;
|
||||
outline: none;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
padding: .7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
@import './variables';
|
||||
|
||||
#post-nav {
|
||||
height: 10vh;
|
||||
padding: .5rem 0rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.nav-logo {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
display: none;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
cursor: pointer;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
.cls-1 {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
|
||||
@media #{$bigScreens} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-overlay {
|
||||
background: #70707040;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
background: linear-gradient(120deg, #ee64d1, #eacc56);
|
||||
height: 100vh;
|
||||
width: 50%;
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 100%;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
|
||||
.current-user {
|
||||
padding-top: 2rem;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
justify-items: center;
|
||||
|
||||
h3 {
|
||||
font-size: 1.7rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
|
||||
.cls-1 {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small-btns {
|
||||
padding-top: 2.5rem;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
grid-row-gap: 3rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.close-mobile-menu-btn {
|
||||
cursor: pointer;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: .5rem;
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
@import './variables';
|
||||
|
||||
#post-page {
|
||||
background: 100% 100% / contain no-repeat url(../img/post-page-wave.svg) !important;
|
||||
}
|
||||
|
||||
.btn-mobile {
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
color: $mainTextColor;
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: .3rem;
|
||||
font-size: 1.1rem;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
background: linear-gradient(60deg, #eacc56, #ee64d1);
|
||||
transition: all .3s ease-in-out;
|
||||
color: white !important;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
background: linear-gradient(150deg, #eacc56, #ee64d1);
|
||||
}
|
||||
}
|
||||
|
||||
main:not(#showcase) {
|
||||
height: auto;
|
||||
padding: 2rem 0rem;
|
||||
padding-top: 0;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
height: auto;
|
||||
padding: 1rem 0rem 7rem 0rem;
|
||||
padding-top: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-column-gap: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
@import './variables';
|
||||
|
||||
#posts {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-row-gap: 1.5rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #CFCBCB;
|
||||
box-shadow: 0px 0px 5px #17171777;
|
||||
padding: 2rem;
|
||||
grid-row-gap: 1rem;
|
||||
}
|
||||
|
||||
#posts-filter {
|
||||
font-size: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #EE72BF;
|
||||
}
|
||||
}
|
||||
|
||||
#posts-container {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-row-gap: 1rem;
|
||||
|
||||
.post {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #CFCBCB;
|
||||
box-shadow: 0px 0px 5px #17171777;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr .3fr;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: .5rem 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
padding: 1rem;
|
||||
grid-template-columns: none;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-row-gap: 1rem;
|
||||
}
|
||||
|
||||
.data {
|
||||
justify-self: flex-start;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-row-gap: .1rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
grid-row-gap: .5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
justify-self: flex-end;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
justify-self: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.interaction {
|
||||
padding: .2rem .5rem;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
background: #E3E3E3;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
padding: .5rem;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
grid-template-columns: none;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.like, .dislike, .comment {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: .5rem 1rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: rgb(190, 189, 189);
|
||||
border-radius: 8px;
|
||||
|
||||
.cls-1 {
|
||||
fill: rgb(80, 78, 78);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: .2rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.cls-1 {
|
||||
fill: #6A6A6A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
@import './variables';
|
||||
|
||||
#profile-info {
|
||||
display: none;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto) 1fr;
|
||||
grid-row-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.profile-stats, .contact, .ad {
|
||||
padding: 1rem 3rem;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #CFCBCB;
|
||||
box-shadow: 0px 0px 5px #17171777;
|
||||
}
|
||||
|
||||
.profile {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #CFCBCB;
|
||||
box-shadow: 0px 0px 5px #17171777;
|
||||
|
||||
.settings-btn {
|
||||
cursor: pointer;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: .5rem;
|
||||
position: relative;
|
||||
left: 85%;
|
||||
|
||||
.st0{
|
||||
fill:url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
padding: 1rem 3rem;
|
||||
padding-top: 0;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.user-btns {
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
grid-row-gap: .3rem;
|
||||
font-size: 1.1rem;
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-stats {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-row-gap: 1rem;
|
||||
|
||||
h3 {
|
||||
text-align: left;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-column-gap: 1rem;
|
||||
justify-items: center;
|
||||
font-size: 1.1rem;
|
||||
|
||||
svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-left: .1rem;
|
||||
|
||||
.cls-1 {
|
||||
fill: #6A6A6A;
|
||||
}
|
||||
}
|
||||
|
||||
.likes, .dislikes, .comments {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ad {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
@import './variables';
|
||||
|
||||
#showcase {
|
||||
height: 85vh;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 2.5rem;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.contact {
|
||||
text-align: right;
|
||||
align-self: flex-end;
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
fill: #d3d3d3;
|
||||
transition: fill .3s ease-in-out;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: .2rem;
|
||||
margin-right: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.facebook:hover {
|
||||
fill: #4267b2;
|
||||
}
|
||||
|
||||
.instagram:hover {
|
||||
fill: #e4405f;
|
||||
}
|
||||
|
||||
.mail:hover {
|
||||
fill: #dd4b39;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (orientation: landscape) {
|
||||
#showcase {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
text-align: left;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.contact {
|
||||
text-align: left;
|
||||
|
||||
svg {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
@import './variables';
|
||||
|
||||
#sign-up-container {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
z-index: 3;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: #70707040;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
#sign-up {
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 15px #707070;
|
||||
background: white;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
grid-row-gap: .5rem;
|
||||
|
||||
.close-sign-up {
|
||||
cursor: pointer;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: .5rem;
|
||||
justify-self: flex-end;
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
background: linear-gradient(#eacc56, #ee64d1);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-row-gap: .2rem;
|
||||
|
||||
input {
|
||||
padding: .5rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ee64d1;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: .5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
margin-top: 1rem;
|
||||
color: white;
|
||||
background: linear-gradient(60deg, #eacc56, #ee64d1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (orientation: landscape) {
|
||||
#sign-up {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
right: 7%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 2rem 4rem;
|
||||
|
||||
input {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
@import './variables';
|
||||
|
||||
#user-profile-container {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
z-index: 3;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: #70707040;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
#user-profile {
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 15px #707070;
|
||||
background: white;
|
||||
display: grid;
|
||||
grid-row-gap: .2rem;
|
||||
|
||||
.close-user-profile {
|
||||
cursor: pointer;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: .5rem;
|
||||
justify-self: flex-end;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-row-gap: .2rem;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: url(#linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-posts {
|
||||
padding: .5rem 2rem 2rem 2rem;
|
||||
display: grid;
|
||||
grid-row-gap: .5rem;
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.posts {
|
||||
padding: .1rem;
|
||||
height: 150px;
|
||||
overflow-y: scroll;
|
||||
display: grid;
|
||||
grid-row-gap: .5rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
padding: .3rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: .2rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #707070;
|
||||
}
|
||||
|
||||
.post {
|
||||
background: white;
|
||||
padding: .5rem;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #CFCBCB;
|
||||
box-shadow: 0px 0px 1px #17171777;
|
||||
display: grid;
|
||||
grid-row-gap: .3rem;
|
||||
|
||||
h4 {
|
||||
font-size: .8rem;
|
||||
|
||||
@media #{$bigScreens} {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@media #{$bigScreens} {
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
$mainTextColor: #1d1d1d;
|
||||
$bigScreens: "only screen and (min-width:769px) and (orientation: landscape)";
|
||||
Reference in New Issue
Block a user