Fix bootstrap formatting

This commit is contained in:
Aditya Vasantharao 2021-03-05 18:09:52 -05:00
parent 41d3afd0df
commit c9bfff7cdb
5 changed files with 37 additions and 25 deletions

View File

@ -4,7 +4,6 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="The TJHSST Humanoid Robot Project" /> <meta name="description" content="The TJHSST Humanoid Robot Project" />

View File

@ -8,12 +8,12 @@ export default function Home(props) {
<body> <body>
<section className="hero"> <section className="hero">
<div className="landing-header"> <div className="landing-header">
<h1 id="potentia">Potentia</h1> <h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics">Robotics</h1> <h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>
</div> </div>
<div className="landing-subheader"> <div className="landing-subheader">
<p> <p>
The first high school team to design and build a full-size bipedal humanoid robot. <span className="highlight-gray">&nbsp;The first high school team to design and&nbsp;<br></br>&nbsp;build a full-size bipedal humanoid robot.&nbsp;</span>
</p> </p>
</div> </div>
<img <img

View File

@ -10,7 +10,7 @@ const GlobalStyle = createGlobalStyle`
} }
body { body {
background-color: #293241; background-color: #293241;
font-family: Arial, Helvetica, sans-serif; font-family: Poppins, sans-serif;
height: 100%; height: 100%;
margin: 0; margin: 0;
color: #555; color: #555;
@ -25,27 +25,23 @@ class Sponsors extends Component {
return ( return (
<> <>
<GlobalStyle/> <GlobalStyle/>
<div> <div className="intro-wrapper">
<span><br></br></span> <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>
<span><br></br></span> <Container fluid className="sponsor-tier-list">
<h3 style={{color: '#fff', textAlign: 'center'}}>The Humanoid Robotics Club could not have happened without the support of these amazing sponsors!</h3> <Col className="show-container">
<span><br></br></span> <Col md={4}>
<span><br></br></span> <h1 style={{color: '#FFD753'}} className='glow'><b>Gold</b></h1>
<Container fluid> <h2 style={{textAlign: 'center'}} className="tier-detail">Donation amount: $1000+<br></br>Perks: Silver + logo on Olympian</h2>
<Row className = "show-container">
<Col md = {4}>
<h1 style={{color: '#FFD753'}} class = 'glow'><b>Gold</b></h1>
<h2 style={{textAlign: 'center'}}>Sponsors</h2>
</Col> </Col>
<Col md = {4}> <Col md={4}>
<h1 style={{color: '#C8C3C3'}} class = 'glow'><b>Silver</b></h1> <h1 style={{color: '#C8C3C3'}} className='glow'><b>Silver</b></h1>
<h2 style={{textAlign: 'center'}}>Sponsors</h2> <h2 style={{textAlign: 'center'}} className="tier-detail">Donation amount: $500-$999<br></br>Perks: Bronze + logo on all Potentia merchandise</h2>
</Col> </Col>
<Col md = {4}> <Col md={4}>
<h1 style={{color: '#E2964E'}} class = 'glow'><b>Bronze</b></h1> <h1 style={{color: '#E2964E'}} className='glow'><b>Bronze</b></h1>
<h2 style={{textAlign: 'center'}}>Sponsors</h2> <h2 style={{textAlign: 'center'}} className="tier-detail">Donation amount: $100-$499<br></br>Perks: logo on website + recognition on social media</h2>
</Col> </Col>
</Row> </Col>
</Container> </Container>
</div> </div>
</> </>

View File

@ -51,7 +51,7 @@ $desktop-small: 1250px;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-size: 4vw; font-size: 4vw;
margin-left: 0.4em; margin-left: 0.4em;
padding-top: 0.2em; padding-top: 0.3em;
#potentia { #potentia {
padding-left: 0.4em; padding-left: 0.4em;
@ -62,7 +62,7 @@ $desktop-small: 1250px;
#robotics { #robotics {
position: relative; position: relative;
top: -0.3em; top: -0.3em;
padding-left: 1em; padding-left: 1.35em;
z-index: 999 !important; z-index: 999 !important;
} }
} }
@ -89,6 +89,10 @@ $desktop-small: 1250px;
} }
} }
.highlight-gray {
background-color: rgb(235, 235, 235);
}
.landing-subheader { .landing-subheader {
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-size: 2vw; font-size: 2vw;

View File

@ -1,4 +1,17 @@
.glow { .glow {
text-align: center; text-align: center;
font-size: 3em;
//background: linear-gradient(to right, #ee6c4d, #3d5a80, #293241); //background: linear-gradient(to right, #ee6c4d, #3d5a80, #293241);
} }
.intro-wrapper {
margin-top: 3em;
}
.sponsor-tier-list {
margin-top: 2em;
}
.tier-detail {
margin-bottom: 2em;
}