rushilwiz/website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/website.git synced 2025-04-16 10:20:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better styling

Browse Source
This commit is contained in:
Ram Reddy 2021-07-13 18:01:36 -04:00
parent 2720a03db2
commit 799dfd23d3
4 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/About.js
View File

@ -14,6 +14,7 @@ import kedar from './assets/img/Kedar.PNG'
import icon from './assets/img/aboutlogo.PNG' import icon from './assets/img/aboutlogo.PNG'
import raghav from './assets/img/Raghav.PNG' import raghav from './assets/img/Raghav.PNG'
import shruti from './assets/img/shruti.png' import shruti from './assets/img/shruti.png'
import group from './assets/img/group.png'
import classnames from 'classnames' import classnames from 'classnames'
import GroupPhoto from './assets/img/team_picture.png' import GroupPhoto from './assets/img/team_picture.png'
@ -62,12 +63,15 @@ class About extends Component {
return ( return (
<body className="backColor"> <body className="backColor">
<h1 id='title'>About Us</h1> <h1 id='title'><span className="backColor3" >About Us</span></h1>
<Container fluid id='container'> <Container fluid id='container'>
{/* Put something else here later */} <Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}><img className="imgStyle" id = "teamimage" src = {group} alt = "Group Pic"></img></Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}><p className="rowColor" id = "ourDescription">Potentia Robotics is the first high school team building a fully-functional humanoid robot. It is run entirely by students from Thomas Jefferson High School for Science and Technology (TJHSST). Our goal is to build Olympian, a 6-foot tall, low-cost bipedal humanoid robot with a human-like dynamically stable gait, limb mobility, and balance capabilities, that can be controlled effectively and efficiently from afar.</p></Col>
</Row>
</Container> </Container>
<Tabs> <Tabs className="backColor2">
<TabList> <TabList>
<Tab>Leadership</Tab> <Tab>Leadership</Tab>
<Tab>Programming Subteam</Tab> <Tab>Programming Subteam</Tab>
@ -89,7 +93,7 @@ class About extends Component {
</Col> </Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}> <Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={adi} alt='Image of Team member' /> <img className="imgStyle2" src={adi} alt='Image of Team member' />
</Col> </Col>
</Row> </Row>

27
src/components/assets/About.scss
View File

@ -6,10 +6,24 @@
} }
.backColor { .backColor {
background-color: #293241; background-color: #3D5A80;
color: #E0FBFC; color: #E0FBFC;
} }
.imgStyle {
border: 15px solid #98C1D9;
padding: 10px;
}
.imgStyle2 {
border: 5px solid #EE6C4D;
padding: 5px;
}
.backColor2 {
background-color: #293241;
}
.nameStyle { .nameStyle {
display:inline-block; display:inline-block;
border-bottom:2px solid#98C1D9; border-bottom:2px solid#98C1D9;
@ -62,6 +76,13 @@ img{
} }
.simple-highlight{ .simple-highlight{
background-color: #E0FBFC; background-color: #98C1D9;
color:#293241;
padding:0.1em 0.2em; padding:0.1em 0.2em;
} }
.backColor3 {
background-color: #E0FBFC;
color:#3D5A80;
padding:0.1em 0.2em;
}

BIN
src/components/assets/img/group.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 KiB

9
src/components/assets/react-tabs.scss
View File

@ -2,7 +2,7 @@
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
&__tab-list { &__tab-list {
border-bottom: 1px solid #98C1D9; border-bottom: 1px solid #293241;
margin: 0 0 10px; margin: 0 0 10px;
padding: 0; padding: 0;
} }
@ -19,14 +19,15 @@
background-color:#98C1D9; background-color:#98C1D9;
&--selected { &--selected {
background: #EE6C4D; background: #293241;
border-color: #aaa; border-color: #aaa;
color: #E0FBFC; color: #98C1D9;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
} }
&--disabled { &--disabled {
color: #E0FBFC; color: #293241;
background-color:#98C1D9;
cursor: default; cursor: default;
} }