diff options
| -rw-r--r-- | landing.html | 55 | ||||
| -rw-r--r-- | react-frontend/src/css/Landing.css | 69 | ||||
| -rw-r--r-- | react-frontend/src/images/reagan.png | bin | 0 -> 2150995 bytes |
3 files changed, 56 insertions, 68 deletions
diff --git a/landing.html b/landing.html index 80bb9dc..c87d582 100644 --- a/landing.html +++ b/landing.html @@ -7,13 +7,13 @@ </head> <body> <div class="nav-bar"> - <div class="topnav"> - <a href="#about">About</a> - <a href="#contact">Contact</a> - <a href="#news">News</a> - <a class="active" href="#home">Home</a> + <div class="topnav"> + <a href="#about">About</a> + <a href="#contact">Contact</a> + <a href="#news">News</a> + <a class="active" href="#home">Home</a> + </div> </div> - </div> <main> <section class="intro">Hello welcome to watchdog @@ -23,50 +23,45 @@ <section class="app-preview">pic preview</section> <section id="app-intro"> - <h1 class="s-i-p-heading"> Our App </h1> - <p class="s-i-p-text">subtitle</p> + <h1 class="heading"> Our App </h1> + <p class="text">subtitle</p> <p>who we are; our inspiration; purpose of our app: who for, what it's not</p> <div>our data</div> <div>our algorithm</div> </section> <section id="team"> - <div class="s-i s2-i-s"> - <div id="s3-i-t-p" class="s-i-p"> - <h1 id="s-i-p-heading-team" class="s-i-p-heading">Meet the Team</h1> - <p id="s-i-p-heading-text">subtext</p> + <div class="team"> + <div id="team-holder" class="center"> + <h1 id="team-heading" class="heading">Meet the Team</h1> - <div id="s-i-p-team-c"> - <div class="s-i-p-team-person-c"> - <div class="s-i-p-team-person"> + <div id="people-holder"> + <div class="team-person-holder"> + <div class="team-person"> <img src="" height="100%"> </div> - <p class="s-i-p-team-text">Clark</p> - <p class="s-i-p-team-text">subtxt</p> + <p class="team-text">Clark</p> </div> - <div class="s-i-p-team-person-c"> - <div class="s-i-p-team-person"> + <div class="team-person-holder"> + <div class="team-person"> <img src="" height="100%"> </div> - <p class="s-i-p-team-text">Julia</p> - <p class="s-i-p-team-text">subtxt</p> + <p class="team-text">Julia</p> </div> - <div class="s-i-p-team-person-c"> - <div class="s-i-p-team-person"> + <div class="team-person-holder"> + <div class="team-person"> <img src="" height="100%"> </div> - <p class="s-i-p-team-text">Michael</p> - <p class="s-i-p-team-text">subtxt</p> + <p class="team-text">Michael</p> </div> - <div class="s-i-p-team-person-c"> - <div class="s-i-p-team-person"> - <img src="" height="100%"> + <div class="team-person-holder"> + <div class="team-person"> + <img src="react-frontend/src/images/reagan.png" height="100%"> </div> - <p class="s-i-p-team-text">Reagan</p> - <p class="s-i-p-team-text">subtxt</p> + <p class="team-text">Reagan Hunt</p> </div> </div> </div> diff --git a/react-frontend/src/css/Landing.css b/react-frontend/src/css/Landing.css index 5a39bfe..e6841f8 100644 --- a/react-frontend/src/css/Landing.css +++ b/react-frontend/src/css/Landing.css @@ -40,31 +40,34 @@ body { font-family:Verdana, Geneva, Tahoma, sans-serif; overflow-y: scroll; overflow-x: hidden; - position: relative; - left: 0px; - + display: flex; + flex-direction: column; + width: 80vw; } main { margin-top: 65px; display: flex; flex-direction: column; - position: relative; - left: 0px; } .intro { - height: 120vh; + height: 1000px; width: 100vw; background-color: rgb(3, 2, 24); - color: white; - + color: white; + position: relative; + left: -10px; } .app-preview { - height: 90vh; + height: 1000px; width: 100vw; background-color: #b7ffb9; color: white; + position: relative; + left: 0px; + position: relative; + left: -10px; } section { @@ -74,35 +77,39 @@ section { flex-direction: column; justify-content: center; align-items: center; + } #app-intro{ padding-top: 160px; } -.s-i { +.team { width: 100%; max-width: 1600px; display: flex; flex-direction: row; justify-content: space-evenly; padding-top: 0px; + width: 80%; + min-height: 500px; + align-items: center; } -.s-i-p { +.center { display: flex; flex-direction: column; justify-content: center; } -.s-i-p-heading{ +.heading{ font-size: 45px; margin: 10px 0 0 0; text-align: center; font-weight: bold; } -.s-i-p-text{ +.text{ color: rgba(0,0,0, 0.6); font-size: 18px; display: flex; @@ -113,44 +120,27 @@ section { margin: 10px 0 20px 0; } -.s2-i-s { - padding-top: 0px; - width: 80%; - max-width: 1600px; - min-height: 500px; - align-items: center; -} - #team { width: 100vw; padding: 50px 0 200px 0; justify-content: flex-start; background-color: #cccccc; + position: relative; + left: -10px; } -#s-i-p-heading-team{ +#team-heading{ margin-bottom: 0px; } -#s-i-p-heading-text { - color: rgba(0,0,0, 1); - font-size: 18px; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - width: 100%; - margin: 0; -} - -#s3-i-t-p { +#team-holder { flex-direction: column; max-width: 1000px; max-height: 500px; height: 500px; } -#s-i-p-team-c{ +#people-holder{ display: flex; flex-direction: row; justify-content: center; @@ -158,7 +148,7 @@ section { width: 100%; } -.s-i-p-team-person-c{ +.team-person-holder{ display: flex; flex-direction: column; justify-content: center; @@ -166,7 +156,7 @@ section { margin-top: 50px; } -.s-i-p-team-person{ +.team-person{ border-radius: 100px; overflow: hidden; margin: 20px; @@ -175,7 +165,7 @@ section { box-shadow: 0 0 2px 2px rgba(0,0,0,0.15); } -.s-i-p-team-text{ +.team-text{ color: rgba(0,0,0, 1); font-size: 18px; display: flex; @@ -193,6 +183,8 @@ section { flex-direction: column; justify-content: center; align-items: center; + position: relative; + left: -10px; } .footer-item{ @@ -200,3 +192,4 @@ section { font-size: 20px; } + diff --git a/react-frontend/src/images/reagan.png b/react-frontend/src/images/reagan.png Binary files differnew file mode 100644 index 0000000..15c02f0 --- /dev/null +++ b/react-frontend/src/images/reagan.png |
