diff --git a/src/Components/Algorithms/AlgoMenu.css b/src/Components/Algorithms/AlgoMenu.css index e69de29..b9257fc 100644 --- a/src/Components/Algorithms/AlgoMenu.css +++ b/src/Components/Algorithms/AlgoMenu.css @@ -0,0 +1,428 @@ +body { + margin: 0; + padding: 0; + font-family: 'Comfortaa', cursive; + background-color: black; +} + +#con { + width: 75%; + margin: 0 auto; + margin-top: 200px; + height: auto; +} + +#con2 { + width: 75%; + margin: 0 auto; + margin-top: 30px; + height: auto; +} + +#con3 { + width: 75%; + margin: 0 auto; + margin-top: 30px; + height: auto; +} +.con4{ + width: 75%; + margin: 0 auto; + margin-top: 30px; + height: auto; +} +h4 { + width: 90%; + position: absolute; + font-size: 30px; + padding: 20px; + margin-top: 120px; + color: #fff; +} +.f-title{ + text-align: center; + margin-top: 30px; + font-size: 30px; + font-family: 'Rock Salt', cursive; + -webkit-animation:colorchange 5s infinite alternate; + animation:colorchange 5s infinite alternate; +} +.zayn_1 { + position: relative; + margin-top: -150px; + background: url(http://i.huffpost.com/gen/1960925/images/o-COOLEST-CITIES-IN-AMERICA-facebook.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + border-bottom: 3px solid rgba(255,162,52,0.8); + width: 100%; + height: 280px; + border-radius: 6px; + box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9); + transition: all 0.3s ease; + +} + +.zayn_2 { + position: relative; + margin-top: 1px; + background: url(https://i.ytimg.com/vi/fwoDwajwqdo/maxresdefault.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + border-bottom: 3px solid rgba(2,204,186,0.8); + width: 49%; + height: 300px; + border-radius: 6px; + box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9); + transition: all 0.3s ease; +} + +.zayn_3 { + position: relative; + float: right; + margin-top: -304px; + background: url(https://tinyurl.com/2p97bsmp); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + border-bottom: 3px solid rgba(169,81,237,0.8); + width: 49%; + height: 300px; + border-radius: 6px; + box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9); + transition: all 0.3s ease; +} + +.zayn_4 { + position: relative; + margin-top: 1px; + background: url(http://www.lolwot.com/wp-content/uploads/2015/02/top-16-coolest-buildings-in-the-world.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + border-bottom: 3px solid rgba(255,84,131,0.8); + width: 100%; + height: 280px; + border-radius: 6px; + box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9); + transition: all 0.3s ease; +} + +.new { + color: #fff; + z-index: 1; + position: relative; + left: 2%; + top: 8%; + padding: 15px; + background: linear-gradient(to right, #02b3e4 0%, #02ccba 100%); + border-radius: 50px 120px 120px; +} +.zayn_form{ + position: relative; + margin-top: -150px; + background:#fafafa; + border-bottom: 3px solid rgba(255,162,52,0.8); + width: 100%; + height: 280px; + border-radius: 6px; + box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9); + transition: all 0.3s ease; +} + + +.pop { + color: #fff; + z-index: 1; + position: absolute; + left: 2%; + top: 3%; + padding: 15px; + background: linear-gradient(to right, #fa3350 0%, #fa3380 100%); + border-radius: 50px 120px 120px; +} + +.lat { + color: #fff; + z-index: 1; + position: absolute; + left: 2%; + top: 3%; + padding: 15px; + background: linear-gradient(to right, deeppink 0%, #fa3380 100%); + border-radius: 50px 120px 120px; +} + +.free { + color: #fff; + z-index: 1; + position: absolute; + left: 2%; + top: 3%; + padding: 15px; + background: linear-gradient(to right, deepskyblue 0%, skyblue 100%); + border-radius: 50px 120px 120px; +} + +.overlay { + position: absolute; + z-index: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(000,000,000, 0.6); + border-radius: 6px; +} + + + +@media only screen and (max-width: 840px) { + + h4 { + font-size: 24px; + } + + .zayn_2 { + position: relative; + width: 100%; + } + + .zayn_3 { + position: relative; + width: 100%; + margin-top: 30px; + } + + .zayn_4 { + position: relative; + width: 100%; + margin-top: 360px; + } + + .date { + left: 70%; + } + + .date-1 { + left: 70%; + } +} + +.footer { + margin-top: 50px; + position: absolute; + background: #b24592; + background: -webkit-linear-gradient(to right, #b24592, #f15f79); + background: linear-gradient(to right, #b24592, #f15f79); + padding: 15px; + width: 100%; + border-radius: 4px; +} + +.footer h1 { + color: #fff; + font-size: 20px; + text-align: center; +} + + + +.shadow:hover { + box-shadow: 5px 1px 10px 0px rgba(46,61,73,0.1); + transition: all 0.3s ease; +} + + +@-webkit-keyframes spaceboots { + 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } + 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } + 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } + 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } + 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } + 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } + 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } + 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } + 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } + 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } + 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } +} +@keyframes spaceboots { + 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } + 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } + 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } + 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } + 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } + 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } + 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } + 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } + 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } + 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } + 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } +} +.shadow:hover, +.shadow:focus { + -webkit-animation-name: spaceboots; + animation-name: spaceboots; + -webkit-animation-duration: 0.8s; + animation-duration: 0.8s; + -webkit-transform-origin:50% 50%; + transform-origin:50% 50%; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; +} + + + + + @-webkit-keyframes colorchange { + 0% { + + color: darkviolet; + } + + 10% { + + color: #fa3380; + } + + 20% { + + color: #02b3e4; + } + + 30% { + + color: #02ccba; + } + + 40% { + + color: #a951ed; + } + + 50% { + + color: #ffa234; + } + + 60% { + + color: #ff5483; + } + + 70% { + + color: deepskyblue; + } + 80% { + + color: purple; + } + + 90% { + + color: lightpink; + } + + 100% { + + color: #fff; + } + } + @keyframes colorchange { + 0% { + + color: darkviolet; + } + + 10% { + + color: #fa3380; + } + + 20% { + + color: #02b3e4; + } + + 30% { + + color: #02ccba; + } + + 40% { + + color: #a951ed; + } + + 50% { + + color: #ffa234; + } + + 60% { + + color: #ff5483; + } + + 70% { + + color: deepskyblue; + } + 80% { + + color: purple; + } + + 90% { + + color: lightpink; + } + + 100% { + + color: #fff; + } + } + + + + + +.Follow { background:url("https://pbs.twimg.com/profile_images/959092900708544512/v4Db9QRv_bigger.jpg")no-repeat center / contain; + width: 50px; + height: 50px; + bottom: 9px; + right: 20px; + display:block; + position:fixed; + border-radius:50%; + z-index:999; + animation: rotation 10s infinite linear; + } + +@-webkit-keyframes rotation { + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(359deg); + } +} +@keyframes rotation { + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(359deg); + } +} + + + + + diff --git a/src/Components/Algorithms/AlgoMenu.jsx b/src/Components/Algorithms/AlgoMenu.jsx index 3def885..3bfc8d2 100644 --- a/src/Components/Algorithms/AlgoMenu.jsx +++ b/src/Components/Algorithms/AlgoMenu.jsx @@ -1,11 +1,62 @@ import React from "react"; import './AlgoMenu.css' -import {Container, Col, Image, Row} from 'react-bootstrap' +import { Container, Col, Image, Row } from 'react-bootstrap' +import AlgoPage from "./AlgoPage/AlgoPage"; -export default function AlgoMenu (){ - return( -
-

Hello World!

-
+ +export default function AlgoMenu() { + return ( + <> + + + + +
+
+ +
+ + +

ALGORITHM NAME

+
+
+ + +
+
+ +
+ + +

He is not a lover who does not love forever.

+
+ + +
+ +
+ + +

Show me your garden and I shall tell you what you are.

+
+
+ + +
+
+ +
+ + +

All theory, dear friend, is gray, but the golden tree of life springs + ever green.

+
+
+ +
+
+ + + ) } \ No newline at end of file diff --git a/src/Components/Algorithms/AlgoPage/About/About.css b/src/Components/Algorithms/AlgoPage/About/About.css new file mode 100644 index 0000000..3ed6174 --- /dev/null +++ b/src/Components/Algorithms/AlgoPage/About/About.css @@ -0,0 +1,96 @@ + + +*, *:before, *:after { + box-sizing: border-box; +} + +body { + background-color: #f3f3f3; +} + +.product-card { + background-color: #fdfefe; + max-width: 550px; + min-height: 400px; + margin: 0 auto; + margin-top: 50px; + margin-bottom: 150px; + box-shadow: 8px 12px 30px darken( #f3f3f3, 25%);; + color: #919495; + font-weight: normal; + text-align: left; + font-size: 18px; + position: relative; +} + +.product-details { + width: 53%; + float: left; + height: 100%; + padding: 30px; +}; + + h1 { + color: #333; + font-family: 'Pacifico', cursive; + margin-bottom: 35px; + }; + button { + width: 150px; + height: 50px; + margin-top: 20px; + background-color: #337AB7; + border-radius: 0; + color: #fff; + box-shadow: 2px 2px 7px darken(#337AB7, 25%); + + }; + +.product-image { + position: absolute; + right: -20px; + top: -40px; + +}; +img { + max-width: 400px; + }; + +@media (max-width: 700px) { + .product-card { + margin-left: 20px; + margin-right: 20px; + } + +} + +@media (max-width: 540px) { + .product-card { + overflow: hidden; + margin-bottom: 50px; + } + .product-details { + width: 60%; + z-index: 1; + } + .product-image { + width: 100%; + left: 40%; + top: -50px; + } +} + +@media (max-width: 440px) { + .product-details { + width: 65%; + } +} + +@media (max-width: 365px) { + .product-details { + width: 80%; + position: relative; + color: #333; + background-color: rgba(255, 255, 255, 0.7); + } +} \ No newline at end of file diff --git a/src/Components/Algorithms/AlgoPage/About/About.jsx b/src/Components/Algorithms/AlgoPage/About/About.jsx new file mode 100644 index 0000000..bfe6c77 --- /dev/null +++ b/src/Components/Algorithms/AlgoPage/About/About.jsx @@ -0,0 +1,26 @@ +import React from 'react' + +const About = () => { + return ( +
+
+
+ +
+
+

Product title

+

Great product title for a great product and all of the extra things a product might need to make it fill an entire card.

+
+
+
+
+
+
+
+ + +
+ ) +} + +export default About diff --git a/src/Components/Algorithms/AlgoPage/AlgoPage.css b/src/Components/Algorithms/AlgoPage/AlgoPage.css new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Algorithms/AlgoPage/AlgoPage.jsx b/src/Components/Algorithms/AlgoPage/AlgoPage.jsx new file mode 100644 index 0000000..afcc8a0 --- /dev/null +++ b/src/Components/Algorithms/AlgoPage/AlgoPage.jsx @@ -0,0 +1,18 @@ +import React from 'react' +import GetStartPath from '../../Pathfinder/GetStartPath' +import Landing from '../../Pathfinder/Landing' +import About from './About/About' +import Video from './Video/Video' + +const AlgoPage = () => { + return ( +
+ + + +
+ ) +} + +export default AlgoPage diff --git a/src/Components/Algorithms/AlgoPage/Video/Video.css b/src/Components/Algorithms/AlgoPage/Video/Video.css new file mode 100644 index 0000000..3e1e67f --- /dev/null +++ b/src/Components/Algorithms/AlgoPage/Video/Video.css @@ -0,0 +1,86 @@ +body { + background: #333; + } + a{ + color: inherit; + text-decoration: none + } + /* Amimated Play Button */ + .play-button { + position: absolute; + top: 50%; + left: auto; + right: 12%; + margin: 0; + padding: 0; + list-style: none; + width: 65px; + height: 65px; + background: #fff; + text-align: center; + border-radius: 50%; + /* border-left: 100px solid transparent; + border-right: 100px solid transparent; + border-top: 0 solid red; + border-bottom: 100px solid black; */ + + /* border-radius: 20%; */ + /* border-top-right-radius: 50%; + border-bottom-right-radius: 50%; */ + -webkit-animation: ripple-white3 3s linear infinite; + animation: ripple-white3 3s linear infinite; + } + @keyframes ripple-white3 { + 0% { + -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1); } + 100% { + -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0); + box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 100px rgba(255, 255, 255, 0); } } + .play-button::after { + content:''; + top:21px; + left:23px; + position: absolute; + border-left: 20px solid black; + border-top: 13px solid transparent; + border-bottom: 13px solid transparent; + border-right: 20px solid transparent; + } + + + + /* Pop Up Style */ + .video-pop { + position: absolute; + left:0; + top: 0; + width: 100%; + height: 100%; + visibility: hidden; + opacity: 0; + } + .video-pop:target { + visibility: visible; + opacity: 1; + } + + .pop-bg { + background: rgba(0, 0, 0, .2); + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + } + .pop-container { + width: 50%; + text-align: right; + font-size: 30px; + font-weight: bold; + color: #fff; + } + .pop-container iframe { + width:100%; + height: 450px; + } \ No newline at end of file diff --git a/src/Components/Algorithms/AlgoPage/Video/Video.jsx b/src/Components/Algorithms/AlgoPage/Video/Video.jsx new file mode 100644 index 0000000..629f8dc --- /dev/null +++ b/src/Components/Algorithms/AlgoPage/Video/Video.jsx @@ -0,0 +1,30 @@ +import React from 'react' + +const Video = () => { + return ( +
+ + + +
+
+ +
+
+ + + + +
+
+
+ × + +
+
+
+
+ ) +} + +export default Video diff --git a/src/Components/Algorithms/pictures/algorithm.jpg b/src/Components/Algorithms/pictures/algorithm.jpg new file mode 100644 index 0000000..20b3b99 Binary files /dev/null and b/src/Components/Algorithms/pictures/algorithm.jpg differ diff --git a/src/Components/Developers/Developers.css b/src/Components/Developers/Developers.css index 4324de0..6d2b8e3 100644 --- a/src/Components/Developers/Developers.css +++ b/src/Components/Developers/Developers.css @@ -16,8 +16,6 @@ body { } h1, -h2, -h3, h4, h5, h6 { @@ -25,11 +23,25 @@ h6 { text-transform: none; color: rgba(254, 82, 76, 1); font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 600; + font-weight: 700; letter-spacing: 1px; line-height: 1.5; } - +h2{ + font-size: 3rem !important; + color: rgba(254, 82, 76, 1); + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 600 !important; +} +h3{ + font-size: 2rem !important; + font-weight: 500 !important; +} +.heading-text{ + display: flex; + flex-direction: column; + align-items: center; +} a:link, a:active, a:visited{ diff --git a/src/Components/Developers/Developers.jsx b/src/Components/Developers/Developers.jsx index d0009a1..78cf1d0 100644 --- a/src/Components/Developers/Developers.jsx +++ b/src/Components/Developers/Developers.jsx @@ -20,8 +20,9 @@ export default function Developers (){
-
+

Our Team

+

Meet the people who made this amazing page.

diff --git a/src/Components/Landing/Navbar/Navbars.jsx b/src/Components/Landing/Navbar/Navbars.jsx index b8e69b5..cd03b71 100644 --- a/src/Components/Landing/Navbar/Navbars.jsx +++ b/src/Components/Landing/Navbar/Navbars.jsx @@ -17,9 +17,8 @@ const Navbars = () => { diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx index 379c373..75b8e95 100644 --- a/src/Components/Navbar/Navbar.jsx +++ b/src/Components/Navbar/Navbar.jsx @@ -65,10 +65,12 @@ export default function NavBar() { + +