mirror of
https://github.com/PotentiaRobotics/website.git
synced 2025-04-20 12:20:19 -04:00
Add intro in home page
This commit is contained in:
Aditya Vasantharao
parent
ba893f0cf8
commit
e11ca49272
|
|
@ -5,7 +5,7 @@ import hero from "./assets/img/olympian_hero.png";
|
||||||
|
|
||||||
export default function Home(props) {
|
export default function Home(props) {
|
||||||
return (
|
return (
|
||||||
<body>
|
<body className="main-content">
|
||||||
<section className="hero">
|
<section className="hero">
|
||||||
<div className="landing-header">
|
<div className="landing-header">
|
||||||
<h1 id="potentia"><span className="highlight-gray"> Potentia </span></h1>
|
<h1 id="potentia"><span className="highlight-gray"> Potentia </span></h1>
|
||||||
|
|
@ -22,23 +22,23 @@ export default function Home(props) {
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
{/* <p className="test">hello</p> place this in the section, relative is only to the parent div */}
|
<section className="intro-wrapper">
|
||||||
{/* <section className="intro-section">
|
|
||||||
<div className="intro-wrapper">
|
|
||||||
<div className="intro-content">
|
<div className="intro-content">
|
||||||
<h1>Who are we?</h1>
|
<h1 className="intro-header">Who are we?</h1>
|
||||||
<p>
|
<p className="intro-text">
|
||||||
Content
|
Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot <strong>entirely from scratch</strong>.
|
||||||
</p>
|
It's run by students from the Thomas Jefferson High School for Science and Technology (TJHSST). <br></br><br></br>
|
||||||
|
We're building <span class="text-blue"><strong>Olympian</strong></span>: our low-cost, 6-foot tall, 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>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="intro-space"></div>
|
||||||
<div className="mission-statement">
|
<div className="mission-statement">
|
||||||
<h1>Our mission</h1>
|
<h1 className="intro-header">Our mission</h1>
|
||||||
<p>
|
<p className="intro-text">
|
||||||
Content
|
At Potentia Robotics, we want to push the boundaries of what high-school students can achieve.
|
||||||
|
Our ultimate goal is to further STEM knowledge in the K-12 community while leading by example and showing other students that age isn't a limiting factor for any project, no matter how large-scale.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section> */}
|
|
||||||
</body>
|
</body>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ class Sponsors extends Component {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<GlobalStyle/>
|
<GlobalStyle/>
|
||||||
<div className="intro-wrapper">
|
<div className="sponsor-intro-wrapper">
|
||||||
<h3 className="sponsor-intro" style={{color: '#fff', textAlign: 'center'}}>Our amazing sponsors help make Potentia Robotics' projects possible! <br></br> Contact us to learn more about sponsorship.</h3>
|
<h3 className="sponsor-intro" style={{color: '#fff', textAlign: 'center'}}>Our amazing sponsors help make Potentia Robotics' projects possible! <br></br> Contact us to learn more about sponsorship.</h3>
|
||||||
<Container fluid className="sponsor-tier-list">
|
<Container fluid className="sponsor-tier-list">
|
||||||
<Col className="show-container">
|
<Col className="show-container">
|
||||||
|
|
|
||||||
|
|
@ -129,28 +129,3 @@ $desktop-small: 1250px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-wrapper {
|
|
||||||
// position: relative;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-section {
|
|
||||||
position: absolute;
|
|
||||||
top: 50vw;
|
|
||||||
min-height: 50vh;
|
|
||||||
min-width: 100%;
|
|
||||||
background: rgb(235, 235, 235);
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-content {
|
|
||||||
background: rgb(235, 235, 235);
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mission-statement {
|
|
||||||
background: rgb(235, 235, 235);
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
@ -129,28 +129,3 @@ $desktop-small: 1250px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-wrapper {
|
|
||||||
// position: relative;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-section {
|
|
||||||
position: absolute;
|
|
||||||
top: 50vw;
|
|
||||||
min-height: 50vh;
|
|
||||||
min-width: 100%;
|
|
||||||
background: rgb(235, 235, 235);
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-content {
|
|
||||||
background: rgb(235, 235, 235);
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mission-statement {
|
|
||||||
background: rgb(235, 235, 235);
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap");
|
||||||
|
|
||||||
$mobile-small: 575px;
|
$mobile-small: 530px;
|
||||||
$mobile: 768px;
|
$mobile: 768px;
|
||||||
$tablet: 1024px;
|
$tablet: 1024px;
|
||||||
$desktop-small: 1250px;
|
$desktop-small: 1250px;
|
||||||
|
|
@ -34,10 +35,11 @@ $desktop-small: 1250px;
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.main-content {
|
||||||
// .test {
|
display: flex;
|
||||||
// position: relative;
|
flex-direction: column;
|
||||||
// }
|
font-family: Poppins, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -47,8 +49,27 @@ $desktop-small: 1250px;
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
// position:relative
|
position: relative;
|
||||||
// height: 86vh;
|
|
||||||
|
@include mobile-small {
|
||||||
|
min-height: 41.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
min-height: 44vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include tablet {
|
||||||
|
min-height: 45vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include desktop-small {
|
||||||
|
min-height: 46vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include desktop {
|
||||||
|
min-height: 47.5vw;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.landing-header {
|
.landing-header {
|
||||||
|
|
@ -109,8 +130,6 @@ $desktop-small: 1250px;
|
||||||
z-index: 999 !important;
|
z-index: 999 !important;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@include desktop-small {
|
@include desktop-small {
|
||||||
margin-top: 40vh;
|
margin-top: 40vh;
|
||||||
}
|
}
|
||||||
|
|
@ -138,26 +157,61 @@ $desktop-small: 1250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-wrapper {
|
.intro-wrapper {
|
||||||
// position: relative;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
font-family: Inter, sans-serif;
|
||||||
|
margin-top: 3em;
|
||||||
|
// border-style: solid;
|
||||||
|
|
||||||
|
// background: rgb(235, 235, 235);
|
||||||
}
|
|
||||||
|
|
||||||
.intro-section {
|
|
||||||
position: absolute;
|
|
||||||
top: 50vw;
|
|
||||||
min-height: 50vh;
|
|
||||||
min-width: 100%;
|
|
||||||
background: rgb(235, 235, 235);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-content {
|
.intro-content {
|
||||||
background: rgb(235, 235, 235);
|
margin: 0 auto;
|
||||||
float: left;
|
width: 47%;
|
||||||
|
margin-left: 2vw;
|
||||||
|
padding-left: 2vw;
|
||||||
|
padding-right: 2vw;
|
||||||
|
padding-top: 1vw;
|
||||||
|
padding-bottom: 1vw;
|
||||||
|
background: rgb(243, 243, 243);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mission-statement {
|
.mission-statement {
|
||||||
background: rgb(235, 235, 235);
|
margin: 0 auto;
|
||||||
float: right;
|
width: 47%;
|
||||||
|
margin-right: 2vw;
|
||||||
|
padding-right: 2vw;
|
||||||
|
padding-left: 2vw;
|
||||||
|
padding-top: 1vw;
|
||||||
|
padding-bottom: 1vw;
|
||||||
|
background: rgb(233, 247, 253);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.intro-space {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-header {
|
||||||
|
// margin-left: 10vw;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.6vw;
|
||||||
|
padding-bottom: 1vw;
|
||||||
|
font-family: Poppins, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-text {
|
||||||
|
font-size: 1.3vw;
|
||||||
|
line-height: 1.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-blue {
|
||||||
|
color: #009dff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -113,9 +113,9 @@ nav {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// body {
|
body {
|
||||||
// overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
// }
|
}
|
||||||
|
|
||||||
@media (max-width: $desktop-small) {
|
@media (max-width: $desktop-small) {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -129,28 +129,3 @@ $desktop-small: 1250px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-wrapper {
|
|
||||||
// position: relative;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-section {
|
|
||||||
position: absolute;
|
|
||||||
top: 50vw;
|
|
||||||
min-height: 50vh;
|
|
||||||
min-width: 100%;
|
|
||||||
background: rgb(235, 235, 235);
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-content {
|
|
||||||
background: rgb(235, 235, 235);
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mission-statement {
|
|
||||||
background: rgb(235, 235, 235);
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
//background: linear-gradient(to right, #ee6c4d, #3d5a80, #293241);
|
//background: linear-gradient(to right, #ee6c4d, #3d5a80, #293241);
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-wrapper {
|
.sponsor-intro-wrapper {
|
||||||
margin-top: 3em;
|
margin-top: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user