Commit 3c4badbb authored by Navodya Pasqual's avatar Navodya Pasqual

Added about us

parent d5e53ccf
<svg width="118" height="30" viewBox="0 0 118 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.003 13.3516V15.8242C30.003 20.1374 28.6474 23.5852 25.9362 26.1676C23.2527 28.7225 19.836 30 15.6862 30C11.1768 30 7.42813 28.5577 4.44028 25.6731C1.48009 22.7885 0 19.2445 0 15.0412C0 10.8379 1.46626 7.28022 4.39878 4.36813C7.35897 1.45604 10.9693 0 15.2297 0C17.9409 0 20.417 0.604396 22.6579 1.81319C24.9264 3.02198 26.6832 4.61538 27.9281 6.59341L22.2844 9.80769C21.6481 8.81868 20.6936 8.00824 19.421 7.37637C18.1761 6.74451 16.7652 6.42857 15.1882 6.42857C12.726 6.42857 10.6788 7.23901 9.04655 8.85989C7.44196 10.4808 6.63967 12.5549 6.63967 15.0824C6.63967 17.5824 7.46963 19.6291 9.12954 21.2225C10.7895 22.7885 13.0027 23.5714 15.7692 23.5714C19.6147 23.5714 22.0907 22.0879 23.1973 19.1209H15.4372V13.3516H30.003Z" fill="white"/>
<path d="M44.7432 0.576923C47.5927 0.576923 49.9996 1.53846 51.9638 3.46154C53.9281 5.38462 54.9102 7.71978 54.9102 10.467C54.9102 13.2143 53.9281 15.5495 51.9638 17.4725C49.9996 19.3956 47.5927 20.3571 44.7432 20.3571H40.3859V29.4231H33.7462V0.576923H44.7432ZM44.7432 14.1758C45.7668 14.1758 46.6106 13.8187 47.2746 13.1044C47.9385 12.3901 48.2705 11.511 48.2705 10.467C48.2705 9.42308 47.9385 8.54396 47.2746 7.82967C46.6106 7.11538 45.7668 6.75824 44.7432 6.75824H40.3859V14.1758H44.7432Z" fill="white"/>
<path d="M77.3223 0.576923V6.92308H69.8527V29.4231H63.213V6.92308H55.7434V0.576923H77.3223Z" fill="white"/>
<path d="M78.162 20.0687V14.1346H93.9312V20.0687H78.162Z" fill="white"/>
<path d="M111.817 12.2802C113.67 12.9121 115.164 13.9423 116.299 15.3709C117.433 16.772 118 18.4341 118 20.3571C118 23.3791 116.976 25.7418 114.929 27.4451C112.882 29.1484 110.378 30 107.418 30C105.122 30 103.061 29.478 101.235 28.4341C99.4366 27.3901 98.1087 25.8516 97.251 23.8187L102.978 20.522C103.697 22.5549 105.177 23.5714 107.418 23.5714C108.718 23.5714 109.7 23.2692 110.364 22.6648C111.028 22.0604 111.36 21.2912 111.36 20.3571C111.36 19.4231 111.028 18.6538 110.364 18.0495C109.7 17.4451 108.718 17.1429 107.418 17.1429H106.049L103.517 13.3929L108.787 6.75824H98.164V0.576923H116.838V5.93407L111.817 12.2802Z" fill="white"/>
</svg>
...@@ -65,7 +65,7 @@ a { ...@@ -65,7 +65,7 @@ a {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 2rem 6rem; padding: 1.5rem 6rem;
} }
.navbar-links { .navbar-links {
...@@ -80,8 +80,8 @@ a { ...@@ -80,8 +80,8 @@ a {
} }
.navbar-links_logo img { .navbar-links_logo img {
width: 62.56px; width: 55px;
height: 16.02px; height: 55px;
} }
.navbar-links_container { .navbar-links_container {
......
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { RiMenu3Line, RiCloseLine } from 'react-icons/ri'; import { RiMenu3Line, RiCloseLine } from 'react-icons/ri';
import { useHistory, useLocation, Link } from "react-router-dom"; import { useHistory, useLocation, Link } from "react-router-dom";
import logo from './images/logo.svg'; import logo from './images/logo.png';
import './navbar.css'; import './navbar.css';
const Navbar = () => { const Navbar = () => {
...@@ -23,6 +23,7 @@ const Navbar = () => { ...@@ -23,6 +23,7 @@ const Navbar = () => {
<div className="navbar-links"> <div className="navbar-links">
<div className="navbar-links_logo"> <div className="navbar-links_logo">
<img src={logo} /> <img src={logo} />
<p>V'DO</p>
</div> </div>
<div className="navbar-links_container"> <div className="navbar-links_container">
<p><Link style={isActive(history, '/')} to="/">Home</Link></p> <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import './styles/aboutUs.css';
import aim from './images/aim.svg';
import member1 from './images/member1.jpg';
import member2 from './images/member2.jpg';
import member3 from './images/member3.jpg';
import member4 from './images/member4.jpg';
import { FaLinkedinIn, FaTwitter, FaGithub} from "react-icons/fa";
import { ImUsers } from "react-icons/im";
import { MdSubscriptions } from "react-icons/md";
class AboutUs extends Component { class AboutUs extends Component {
render() { render() {
return ( return (
<p>Yet bed any for travelling assistance indulgence unpleasing. Not thoughts all exercise blessing. Indulgence way everything joy alteration boisterous the attachment. Party we years to order allow asked of.</p> <div className='about_us'>
<section className='about_aim'>
<div className='container about_aim-container'>
<div className='about_aim-left'>
<img src={aim} height='400px'></img>
</div>
<div className='about_aim-right'>
<h2 className="gradient_text">ABOUT OUR AIM</h2>
<p>
We are a group of undergraduates who aim to implement an educational assistance which helps students to have summarized version of video lectures along with transcript where student can also search for specific topic and help them to clarify their educational doubts relevant to lecture topic and for further clarifications, give examples and links of relevant sites.
</p>
<div className='aim_cards'>
<article className='aim_card'>
<span className='aim_icon'>
<ImUsers/>
</span>
<h3>450 +</h3>
<p>Subscribers</p>
</article>
<article className='aim_card'>
<span className='aim_icon'>
<MdSubscriptions/>
</span>
<h3>500 +</h3>
<p>Videos</p>
</article>
<article className='aim_card'>
<span className='aim_icon'>
<MdSubscriptions/>
</span>
<h3>500 +</h3>
<p>Videos</p>
</article>
</div>
</div>
</div>
</section>
<section className='team'>
<h2>OUR TEAM MEMBERS</h2>
<div className='container team_container'>
<article className='team_member'>
<div className='team_member-image'>
<img src={member1} width='168px' height='200px'></img>
</div>
<div className='team_member-info'>
<h4>Tandin Wangchen</h4>
<p>Undergraduate</p>
</div>
<div className='team_member-socials'>
<a target='_blank'>
<i><FaLinkedinIn/></i>
</a>
<a target='_blank'>
<i><FaTwitter/></i>
</a>
<a target='_blank'>
<i><FaGithub/></i>
</a>
</div>
</article>
<article className='team_member'>
<div className='team_member-image'>
<img src={member2} width='168px' height='200px'></img>
</div>
<div className='team_member-info'>
<h4>Navodya Pasqual</h4>
<p>Undergraduate</p>
</div>
<div className='team_member-socials'>
<a target='_blank'>
<i><FaLinkedinIn/></i>
</a>
<a target='_blank'>
<i><FaTwitter/></i>
</a>
<a target='_blank'>
<i><FaGithub/></i>
</a>
</div>
</article>
<article className='team_member'>
<div className='team_member-image'>
<img src={member3} width='168px' height='200px'></img>
</div>
<div className='team_member-info'>
<h4>Chaveena De Silva</h4>
<p>Undergraduate</p>
</div>
<div className='team_member-socials'>
<a target='_blank'>
<i><FaLinkedinIn/></i>
</a>
<a target='_blank'>
<i><FaTwitter/></i>
</a>
<a target='_blank'>
<i><FaGithub/></i>
</a>
</div>
</article>
<article className='team_member'>
<div className='team_member-image'>
<img src={member4} width='168px' height='200px'></img>
</div>
<div className='team_member-info'>
<h4>Thushan Walimuni</h4>
<p>Undergraduate</p>
</div>
<div className='team_member-socials'>
<a target='_blank'>
<i><FaLinkedinIn/></i>
</a>
<a target='_blank'>
<i><FaTwitter/></i>
</a>
<a target='_blank'>
<i><FaGithub/></i>
</a>
</div>
</article>
</div>
</section>
</div>
) )
} }
} }
......
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="793.56289" height="662.46368" viewBox="0 0 793.56289 662.46368" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="167.35474" y="277.15781" width="630.1657" height="31.98284" transform="translate(-285.26597 168.12179) rotate(-30.64932)" fill="#f2f2f2"/><rect x="285.18618" y="304.09069" width="630.16572" height="31.98284" transform="translate(-282.53524 231.95258) rotate(-30.64932)" fill="#f2f2f2"/><rect x="389.55116" y="333.54852" width="630.16572" height="31.98284" transform="translate(-282.9729 289.27113) rotate(-30.64932)" fill="#f2f2f2"/><circle cx="353.12035" cy="206.84364" r="169.73576" fill="#fff"/><path d="M385.34074,325.61183c0-94.28862,76.70937-170.99819,170.99819-170.99819s170.99819,76.70957,170.99819,170.99819S650.62775,496.61,556.33893,496.61,385.34074,419.90044,385.34074,325.61183Zm2.525,0c0,92.89626,75.57675,168.47321,168.47322,168.47321s168.47322-75.577,168.47322-168.47321S649.2354,157.13861,556.33893,157.13861,387.86571,232.71556,387.86571,325.61183Z" transform="translate(-203.21856 -118.76816)" fill="#3f3d56"/><path d="M526.08167,326.34979v0A30.25726,30.25726,0,1,1,556.3389,356.607,30.25726,30.25726,0,0,1,526.08167,326.34976Zm30.25723-28.7813a28.81369,28.81369,0,0,0-28.7813,28.78132v0a28.7813,28.7813,0,1,0,28.7813-28.78132Z" transform="translate(-203.21856 -118.76816)" fill="#3f3d56" style="isolation:isolate"/><path d="M498.77636,326.34979v0a57.56256,57.56256,0,1,1,57.56254,57.56259A57.56254,57.56254,0,0,1,498.77636,326.34976Zm57.56254-56.08661a56.08661,56.08661,0,1,0,56.08661,56.08663,56.14995,56.14995,0,0,0-56.08661-56.08663Z" transform="translate(-203.21856 -118.76816)" fill="#ccc" style="isolation:isolate"/><path d="M444.16568,326.34976A112.17322,112.17322,0,1,1,556.3389,438.523,112.30013,112.30013,0,0,1,444.16568,326.34976ZM556.3389,215.65255A110.69725,110.69725,0,1,0,667.03618,326.34981,110.82276,110.82276,0,0,0,556.3389,215.65255Z" transform="translate(-203.21856 -118.76816)" fill="#ccc" style="isolation:isolate"/><circle cx="353.12035" cy="206.84365" r="14.02164" fill="#6c63ff" style="isolation:isolate"/><circle cx="316.95924" cy="247.43264" r="14.02164" fill="#6c63ff" style="isolation:isolate"/><circle cx="458.0353" cy="241.52879" r="14.02164" fill="#6c63ff" style="isolation:isolate"/><circle cx="353.12035" cy="206.84365" r="6.64182" fill="#2f2e41"/><circle cx="458.0353" cy="241.52879" r="6.64184" fill="#2f2e41"/><circle cx="316.95924" cy="248.17061" r="6.64183" fill="#2f2e41"/><circle cx="43.16807" cy="132.3075" r="6.64182" fill="#6c63ff"/><polygon points="352.751 132.677 61.248 132.677 61.248 131.201 354.228 131.201 354.228 207.212 352.751 207.212 352.751 132.677" fill="#2f2e41"/><path d="M227.199,251.07566a19.18754,19.18754,0,1,1,19.18756,19.18752A19.18751,19.18751,0,0,1,227.199,251.07566Zm19.18756-17.71155a17.71156,17.71156,0,1,0,17.71153,17.71155,17.73186,17.73186,0,0,0-17.71153-17.71155Z" transform="translate(-203.21856 -118.76816)" fill="#2f2e41"/><circle cx="87.44698" cy="323.44473" r="6.64183" fill="#6c63ff"/><path d="M271.478,442.21288h0a19.18751,19.18751,0,1,1,19.18751,19.18751A19.18753,19.18753,0,0,1,271.478,442.21288Zm19.18751-17.71156a17.71155,17.71155,0,1,0,17.71153,17.71156,17.73188,17.73188,0,0,0-17.71153-17.71156Z" transform="translate(-203.21856 -118.76816)" fill="#2f2e41"/><circle cx="663.93217" cy="163.30273" r="6.64183" fill="#6c63ff"/><path d="M847.96319,282.07088a19.18753,19.18753,0,1,1,19.18754,19.18754A19.18751,19.18751,0,0,1,847.96319,282.07088Zm19.18754-17.7115a17.73182,17.73182,0,0,0-17.71155,17.7115v0a17.71157,17.71157,0,1,0,17.71155-17.71158Z" transform="translate(-203.21856 -118.76816)" fill="#2f2e41"/><polygon points="457.297 165.528 645.471 162.565 645.494 164.04 458.773 166.981 458.773 241.529 457.297 241.529 457.297 165.528" fill="#2f2e41"/><polygon points="105.897 322.707 316.221 322.707 316.221 248.171 317.697 248.171 317.697 324.182 105.897 324.182 105.897 322.707" fill="#2f2e41"/><rect x="2.57907" y="166.99264" width="81.178" height="5.16587" fill="#ccc"/><rect x="2.57907" y="181.75227" width="81.178" height="5.16587" fill="#ccc"/><rect x="2.57907" y="196.51191" width="81.178" height="5.16587" fill="#ccc"/><rect x="46.85793" y="358.12988" width="81.178" height="5.16586" fill="#ccc"/><rect x="46.85793" y="372.8895" width="81.178" height="5.16586" fill="#ccc"/><rect x="46.85793" y="387.64914" width="81.178" height="5.16586" fill="#ccc"/><rect x="623.34318" y="198.72585" width="81.17797" height="5.16587" fill="#ccc"/><rect x="623.34318" y="213.48548" width="81.17797" height="5.16587" fill="#ccc"/><rect x="623.34318" y="228.24511" width="81.17797" height="5.16586" fill="#ccc"/><polygon points="743.166 638.861 731.622 642.987 710.214 600.421 727.253 594.332 743.166 638.861" fill="#ffb8b8"/><path d="M916.10405,781.07119l-.16846-.4707a15.40481,15.40481,0,0,1,9.31128-19.66748l22.73559-8.12549,5.34668,14.96045Z" transform="translate(-203.21856 -118.76816)" fill="#2f2e41"/><polygon points="668.095 650.28 655.835 650.279 650.003 602.991 668.097 602.992 668.095 650.28" fill="#ffb8b8"/><path d="M874.43974,780.932l-39.53076-.00146v-.5a15.38646,15.38646,0,0,1,15.38672-15.38623h.001l24.1438.001Z" transform="translate(-203.21856 -118.76816)" fill="#2f2e41"/><path d="M899.2535,466.93834l-5.33176-10.53543s-19.86256,4.97638-21.66824,16.48819Z" transform="translate(-203.21856 -118.76816)" fill="#6c63ff"/><polygon points="718.035 468.635 703.535 549.548 742.035 617.635 719.035 626.635 680.035 560.635 675.035 542.635 672.035 636.635 651.292 636.005 641.781 548.232 657.035 466.635 718.035 468.635" fill="#2f2e41"/><path d="M852,602c-.44995-2.00391-1.74065-63.17326-1.74065-63.17326s21.32544-70.00879,21.52051-70.584l.07617-.22461,16.19068-6.07032c.22705-.10351,5.62134-2.50683,10.03564-.5039a8.65063,8.65063,0,0,1,4.60083,5.65429c1.83643,1.36817,15.07032,16.19239,15.07032,36.29981l.49951,47.44922,11.095,51.44043-.49048.10449c-.303.06445-13.82739,4.13867-35.12842,4.13867C881.89363,606.53084,852,602,852,602Z" transform="translate(-203.21856 -118.76816)" fill="#3f3d56"/><circle cx="674.14281" cy="312.43466" r="21.88287" fill="#ffb8b8"/><polygon points="705.318 408.841 667.035 462.257 661.381 437.312 705.318 408.841" opacity="0.2"/><path d="M840.58961,582.17691a9.39072,9.39072,0,0,0,8.79948-11.39812l28.44617-17.44924L862.1276,545.981l-24.60481,17.69671a9.44164,9.44164,0,0,0,3.06682,18.49919Z" transform="translate(-203.21856 -118.76816)" fill="#ffb8b8"/><polygon points="657.035 427.635 647.292 434.462 655.555 449.135 667.035 439.635 657.035 427.635" fill="#6c63ff"/><path d="M855.15291,546.83358l22.917-26.56348-8.78027-36.63867a16.031,16.031,0,0,1,29.70483-11.33594l.19947.37109,8.09057,54.40821-40.6543,41.67089Z" transform="translate(-203.21856 -118.76816)" fill="#3f3d56"/><path d="M896.00075,450.20218l-18.16292.65194c-1.10712.03974-4.11189-11.90855-4.50522-14.38721a6.76485,6.76485,0,0,0-7.05681-5.47254c-1.35961.12843-4.78806-2.41166-8.32588-5.4194-6.71659-5.71022-6.36717-16.43488,1.011-21.26q.30247-.19782.59374-.36125c4.65454-2.6052,10.09951-3.48006,15.43312-3.54678,4.83507-.06047,9.8072.54809,14.0668,2.83662,7.63654,4.10284,11.70069,13.06869,12.05768,21.73025s-2.41975,17.131-5.57072,25.207" transform="translate(-203.21856 -118.76816)" fill="#2f2e41"/><path d="M995.78144,781.23184h-221a1,1,0,0,1,0-2h221a1,1,0,0,1,0,2Z" transform="translate(-203.21856 -118.76816)" fill="#3f3d56"/></svg>
\ No newline at end of file
.about_aim {
margin: 3rem;
}
.about_aim-container {
display: grid;
grid-template-columns: 40% 60%;
gap: 5rem;
}
.about_aim-right {
margin-right: 5rem;
}
.about_aim-right .gradient_text {
background: linear-gradient(45deg, #AE67FA, #F49867);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: var(--font-family);
}
.about_aim-right>p {
margin: 1.6rem 0 2.5rem;
font-family: var(--font-family);
color: white;
}
.aim_cards {
margin-right: 5rem;
margin-left: 2rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
.aim_card {
background: #1f2641;
padding: 1.6rem;
border-radius: 1rem;
text-align: center;
transition: all 400ms ease;
font-family: var(--font-family);
color: white;
}
.aim_card:hover {
background: #14192b;
box-shadow: 1rem 1.3rem rgba(0, 0, 0, 0.322);
}
.aim_icon {
background: rgb(255, 72, 0);
padding: 0.6rem;
border-radius: 1rem;
display: inline-block;
margin-bottom: 2rem;
font-size: 1rem;
font-family: var(--font-family);
}
.aim_card:nth-child(2) .aim_icon {
background: #146b51;
}
.aim_card:nth-child(3) .aim_icon {
background: #663b97;
}
.aim_card p {
margin-top: 1rem;
}
.team {
padding-top: 3rem;
padding-bottom: 2rem;
background: rgba(0, 40, 83, 1);
box-shadow: inset 0 0 3rem rgb(4, 12, 24);
}
.team h2 {
text-align: center;
background: linear-gradient(45deg, #AE67FA, #F49867);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: var(--font-family);
}
.team_container{
margin: 5rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
.team_member {
background: rgba(7, 20, 39, 0.603);
padding: 3rem;
border: 1px solid transparent;
transition: all 400ms ease;
position: relative;
overflow: hidden;
}
.team_member:hover {
background: transparent;
border-color: #F05454;
}
.team_member img {
filter: saturate(0);
}
.team_member:hover img {
filter: saturate(1);
}
.team_member-info * {
text-align: center;
margin-top: 1.4rem;
font-family: var(--font-family);
color: white;
}
.team_member-info p {
color: rgba(255, 255, 255, 0.527);
}
.team_member-socials {
position: absolute;
top: 50%;
transform: translateY(-50%) ;
right: -100%;
display: flex;
flex-direction: column;
background: #F05454;
border-radius: 1rem 0 0 1rem;
box-shadow: -2rem 0 2rem rgba(0, 0, 0, 0.3);
transition: all 400ms ease;
}
.team_member:hover .team_member-socials {
right: 0;
}
.team_member-socials a {
padding: 1rem;
}
@media screen and (max-width: 1024px) {
.about_aim {
margin-top: 2rem;
}
.about_aim-container {
grid-template-columns: 1fr;
gap: 4rem;
}
.about_aim-left {
width: 80%;
margin: 0 auto;
}
.team_container {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.team_member {
padding: 2rem;
}
}
@media screen and (max-width: 600px) {
.aim_cards{
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
}
.team_container {
grid-template-columns: 1fr 1fr;
gap: 0.7rem;
}
.about_aim-left img {
height: 250px;
margin: 0 auto;
}
.team_member {
padding: 0;
}
.team_member p{
margin-bottom: 1.5rem;
}
}
...@@ -30,7 +30,10 @@ body { ...@@ -30,7 +30,10 @@ body {
grid-template-columns: 40% 60%; grid-template-columns: 40% 60%;
gap: 4rem; gap: 4rem;
height: 28rem; height: 28rem;
margin: 7rem 7rem; margin-top: 4rem;
margin-bottom: 8rem;
margin-left: 7rem;
margin-right: 7rem;
border-radius: 1rem; border-radius: 1rem;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment