Merge pull request #1 from OSU-CS290-Sp18/aboutpage

Michael's about page
This commit is contained in:
fireball1983 2018-06-11 01:01:59 -07:00 committed by GitHub
commit 59bc24553d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 334 additions and 0 deletions

215
public/css/style.css vendored Normal file
View File

@ -0,0 +1,215 @@
.site-title {
/*background-image: url("background.jpg");*/
margin: -8px;
height: 50px;
background-color: white;
font-weight:bolder;
padding-left: 890px;
padding-top:10px;
color: black;
white-space:nowrap;
}
.navbar{
}
.navlist{
position:relative;
list-style-type:none;
padding: 0px;
padding-left:20px;
height:40px;
min-width:550px;
width:100%;
margin:8px;
margin-left:-8px;
width:end;
background-color: white;
white-space:nowrap;
padding-top:10px;
box-shadow: 0px 3px 0px rgba(0,0,0,.13) ,1px 2px 2px rgba(0,0,0,.1) , 0px 0px 0px rgba(0,0,0,.05);
}
.navlink a{
color:black;
}
.navlink:hover a{
color: #109EF2;
}
.navlink {
display:inline;
padding: 10px;
font-size:21px;
}
.active{
border-bottom:3px solid #109EF2;
}
header{
color:black;
}
body a{
font-family:Roboto;
text-decoration:none;
}
.twit-container{
font-family:Roboto;
background-color: #F5F7FA;
display:flex;
flex-flow: row wrap;
width:71vw;
padding-left:22%;
padding-top:25%;
padding-bottom:10%;
}
.person-photo img:first-child{
padding-top:10px;
height:30%;
width:30%;
display: block;
margin-left: auto;
margin-right: auto;
border-radius:50%;
}
/*img{
display: block;
margin-left: auto;
margin-right: auto;
border-radius:50%;
}*/
.twit{
position:relative;
flex-grow:1;
flex-shrink:1;
flex-basis:100%;
max-width:250px;
width:250px;
margin-top:230px;
margin-bottom:-230px;
min-height:350px;
background-color:white;
}
.toplevel{
z-index:2;
position:absolute;
margin-top:-470px;
height:61%;
width:52.6%;;
background-color:white;
box-shadow: 2px 2px 3px rgba(0,0,0,.13) ,1px 2px 2px rgba(0,0,0,.1) , -1px -2px 2px rgba(0,0,0,.05);
}
.leadership{
z-index:0;
position:absolute;
margin-top:100px;
height:430px;
width:52.6%;;
background-color:white;
box-shadow: 2px -2px 3px rgba(0,0,0,.13) , 1px 3px 5px rgba(0,0,0,.1) , -1px -2px 2px rgba(0,0,0,.05);
}
.Headership{
font-size:45px;
color:#546076;
font-weight:100;
font-family: Roboto;
padding-top:0px;
margin-left: auto;
margin-right: auto;
text-align:center;
}
.Mission{
font-size:40px;
font-weight:100;
color:#546076;
padding-top:16px;
margin-left: auto;
margin-right: auto;
text-align:center;
}
.Person-Name{
font-size:20px;
font-weight:600;
color:#546076;
padding-top:16px;
margin-left: auto;
margin-right: auto;
text-align:center;
}
.twit-text {
position:center;
display: block;
margin: auto;
width:50%;
width:200px;
font:Roboto;
font-style:italic;
font-weight:400;
text-align:center;
padding-top:1%;
color:#5F6076;
}
.mission-text {
position:center;
display: block;
margin: auto;
width:50%;
width:800px;
font:Roboto;
font-weight:400;
text-align:center;
padding-top:1%;
color:#5F6076;
}
.twit-attribution:hover a{
color:#109EF2;
cursor:pointer;
}
.twit-attribution a{
color: #363437;
height:20%;
font-weight:bolder;
display: block;
margin-left: auto;
margin-right: auto;
margin-top:auto;
margin-bottom:auto;
height:50%;
width:50%;
}
.twit-icon{
padding-top:20px;
font-size:25px;
position:absolute;
padding-left:20px;
}
body{
background-color: #F5F7FA;;
}

BIN
public/images/5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
public/images/daa.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
public/images/download.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/images/person2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

119
src/Go/views/about.html Normal file
View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Us</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700" rel="stylesheet">
<link rel="stylesheet" href="../../../public/css/style.css" media="screen">
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" defer></script>
</head>
<body>
<header>
<a href="#">
<h1 class="site-title">GO</h1>
</a>
</header>
<main class="twit-container">
<article class="toplevel">
<div class="twit-content">
<h2 class="Mission" >- Our Mission -</h2>
<p class="mission-text">
Here's where I would write some stuff about something. I made it my task to try to replicate this webpage's design<br/>
<a href="https://apptopia.com/about">Here's the Website</a>
</p>
</div>
</article>
<article class="leadership">
<div class="twit-content">
<h2 class="Headership" >Leadership</h2>
</article>
<article class="twit">
<div class="twit-content">
<div class="person-photo" alt"">
<img src="../../../public/images/download.jpg" alt="daa">
</div>
<h2 class="Person-Name" >Danila Fedorin</h2>
<p class="twit-text">
We don't need a weakened government but a strong government that would take responsibility for the rights of the individual and care for the society as a whole.
</p>
</div>
</article>
<article class="twit">
<div class="twit-content">
<div class="person-photo" alt"">
<img src="../../../public/images/daa.jpg" alt="daa">
</div>
<h2 class="Person-Name" >Matthew Sessions</h2>
<p class="twit-text">
Education is a weapon whose effects depend on who holds it in his hands and at whom it is aimed.
</p>
</div>
</article>
<article class="twit">
<div class="twit-content">
<div class="person-photo" alt"">
<img src="../../../public/images/5.png" alt="daa">
</div>
<h2 class="Person-Name" >Michael Huang</h2>
<p class="twit-text">
To be fair, you have to have a very high IQ to understand Rick and Morty. The humour is extremely subtle, and without a solid grasp of theoretical physics most of the jokes will go over a typical viewer's head.
</p>
</div>
</article>
<article class="twit">
<div class="twit-content">
<div class="person-photo" alt"">
<img src="../../../public/images/person2.jpg" alt="daa">
</div>
<h2 class="Person-Name" >Claire Cahill</h2>
<p class="twit-text">
Unfortunately these two properties are only implemented in Firefox and are behind a -moz- prefix. Heres how you can use the various
</p>
</div>
</article>
</main>
</body>
</html>