Merge pull request #1 from OSU-CS290-Sp18/aboutpage
Michael's about page
This commit is contained in:
fireball1983
GitHub
commit
59bc24553d
215
public/css/style.css
vendored
Normal file
215
public/css/style.css
vendored
Normal 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
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
BIN
public/images/daa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
public/images/download.jpg
Normal file
BIN
public/images/download.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
public/images/person2.jpg
Normal file
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
119
src/Go/views/about.html
Normal 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. Here’s how you can use the various
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user