mirror of
https://github.com/PotentiaRobotics/website.git
synced 2025-04-17 19:00:18 -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) {
|
||||
return (
|
||||
<body>
|
||||
<body className="main-content">
|
||||
<section className="hero">
|
||||
<div className="landing-header">
|
||||
<h1 id="potentia"><span className="highlight-gray"> Potentia </span></h1>
|
||||
|
|
@ -22,23 +22,23 @@ export default function Home(props) {
|
|||
alt=""
|
||||
/>
|
||||
</section>
|
||||
{/* <p className="test">hello</p> place this in the section, relative is only to the parent div */}
|
||||
{/* <section className="intro-section">
|
||||
<div className="intro-wrapper">
|
||||
<section className="intro-wrapper">
|
||||
<div className="intro-content">
|
||||
<h1>Who are we?</h1>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<h1 className="intro-header">Who are we?</h1>
|
||||
<p className="intro-text">
|
||||
Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot <strong>entirely from scratch</strong>.
|
||||
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 className="intro-space"></div>
|
||||
<div className="mission-statement">
|
||||
<h1>Our mission</h1>
|
||||
<p>
|
||||
Content
|
||||
<h1 className="intro-header">Our mission</h1>
|
||||
<p className="intro-text">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</section> */}
|
||||
</section>
|
||||
</body>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ class Sponsors extends Component {
|
|||
return (
|
||||
<>
|
||||
<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>
|
||||
<Container fluid className="sponsor-tier-list">
|
||||
<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=Inter:wght@600&display=swap");
|
||||
|
||||
$mobile-small: 575px;
|
||||
$mobile-small: 530px;
|
||||
$mobile: 768px;
|
||||
$tablet: 1024px;
|
||||
$desktop-small: 1250px;
|
||||
|
|
@ -34,10 +35,11 @@ $desktop-small: 1250px;
|
|||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// .test {
|
||||
// position: relative;
|
||||
// }
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Poppins, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
|
|
@ -47,8 +49,27 @@ $desktop-small: 1250px;
|
|||
|
||||
.hero {
|
||||
pointer-events: none;
|
||||
// position:relative
|
||||
// height: 86vh;
|
||||
position: relative;
|
||||
|
||||
@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 {
|
||||
|
|
@ -109,8 +130,6 @@ $desktop-small: 1250px;
|
|||
z-index: 999 !important;
|
||||
width: 45%;
|
||||
|
||||
|
||||
|
||||
@include desktop-small {
|
||||
margin-top: 40vh;
|
||||
}
|
||||
|
|
@ -138,26 +157,61 @@ $desktop-small: 1250px;
|
|||
}
|
||||
|
||||
.intro-wrapper {
|
||||
// position: relative;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
font-family: Inter, sans-serif;
|
||||
margin-top: 3em;
|
||||
// border-style: solid;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.intro-section {
|
||||
position: absolute;
|
||||
top: 50vw;
|
||||
min-height: 50vh;
|
||||
min-width: 100%;
|
||||
background: rgb(235, 235, 235);
|
||||
// background: rgb(235, 235, 235);
|
||||
}
|
||||
|
||||
.intro-content {
|
||||
background: rgb(235, 235, 235);
|
||||
float: left;
|
||||
margin: 0 auto;
|
||||
width: 47%;
|
||||
margin-left: 2vw;
|
||||
padding-left: 2vw;
|
||||
padding-right: 2vw;
|
||||
padding-top: 1vw;
|
||||
padding-bottom: 1vw;
|
||||
background: rgb(243, 243, 243);
|
||||
|
||||
}
|
||||
|
||||
.mission-statement {
|
||||
background: rgb(235, 235, 235);
|
||||
float: right;
|
||||
margin: 0 auto;
|
||||
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 {
|
||||
// overflow-x: hidden;
|
||||
// }
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
.intro-wrapper {
|
||||
.sponsor-intro-wrapper {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user