Clean up about page.
This commit is contained in:
parent
7e17bba627
commit
b844a83db1
250
public/css/style.css
vendored
250
public/css/style.css
vendored
|
|
@ -1,215 +1,95 @@
|
|||
|
||||
.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;
|
||||
|
||||
body {
|
||||
font-family: Roboto;
|
||||
background-image: url(/images/clouds.jpg);
|
||||
background-color: #F5F7FA;
|
||||
color: #2d2d2d;
|
||||
}
|
||||
|
||||
.navbar{
|
||||
a {
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
|
||||
.card {
|
||||
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);
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
max-width: 750px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.navlink a{
|
||||
color:black;
|
||||
.member-container{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.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;
|
||||
.person-photo img{
|
||||
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;
|
||||
|
||||
border-radius:50%;
|
||||
}
|
||||
|
||||
.member {
|
||||
padding: 20px;
|
||||
|
||||
box-sizing: border-box;
|
||||
flex-grow:1;
|
||||
flex-basis:50%;
|
||||
|
||||
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);
|
||||
|
||||
position:relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
h2 {
|
||||
font-size:30px;
|
||||
color:#546076;
|
||||
font-weight:100;
|
||||
text-align:center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Mission{
|
||||
font-size:40px;
|
||||
font-weight:100;
|
||||
color:#546076;
|
||||
padding-top:16px;
|
||||
margin-left: auto;
|
||||
font-size:40px;
|
||||
font-weight:100;
|
||||
padding-top:16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align:center;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.Person-Name{
|
||||
font-size:20px;
|
||||
font-weight:600;
|
||||
color:#546076;
|
||||
padding-top:16px;
|
||||
margin-left: auto;
|
||||
font-size:20px;
|
||||
font-weight:600;
|
||||
padding-top:16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align:center;
|
||||
text-align:center;
|
||||
}
|
||||
.twit-text {
|
||||
position:center;
|
||||
display: block;
|
||||
.member-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;
|
||||
font:Roboto;
|
||||
font-style:italic;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.mission-text {
|
||||
position:center;
|
||||
display: block;
|
||||
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;;
|
||||
|
||||
width:50%;
|
||||
width:800px;
|
||||
font:Roboto;
|
||||
font-weight:400;
|
||||
text-align:center;
|
||||
padding-top:1%;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
BIN
public/images/clouds.jpg
Normal file
BIN
public/images/clouds.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
BIN
public/images/danila.jpg
Normal file
BIN
public/images/danila.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
BIN
public/images/matthew.jpg
Normal file
BIN
public/images/matthew.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
public/images/michael.jpg
Normal file
BIN
public/images/michael.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -162,6 +162,10 @@ def handle_message(id, game, socket, message)
|
|||
end
|
||||
end
|
||||
|
||||
get "/about" do |env|
|
||||
render "src/Go/views/about.ecr"
|
||||
end
|
||||
|
||||
get "/" do |env|
|
||||
render "src/Go/views/index.ecr", "src/Go/views/base.ecr"
|
||||
end
|
||||
|
|
@ -260,4 +264,4 @@ Kemal.run
|
|||
# For save on close
|
||||
# at_exit do
|
||||
# save_all(GAME_CACHE)
|
||||
# end
|
||||
# end
|
||||
|
|
|
|||
72
src/Go/views/about.ecr
Normal file
72
src/Go/views/about.ecr
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<!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="/css/style.css" media="screen">
|
||||
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="card">
|
||||
<h2>Hello!</h2>
|
||||
<p>
|
||||
Welcome to our Go website. We are Group 4 from CS 290. Our mission is very ambitious - to get an A in CS 290, Web Development. Despite the immense difficulty of this task, we did our best to bring you this website, so that you may enjoy playing the game of Go with your friends. After Google's AlphaGo's victory against the best human Go player, there's not really a point to playing against a computer - you will lose.
|
||||
</p>
|
||||
</div>
|
||||
<div class="member-container card">
|
||||
<h2>Group Members</h2>
|
||||
<div class="toplevel">
|
||||
<article class="member">
|
||||
<div class="member-content">
|
||||
<div class="person-photo" alt"">
|
||||
<img src="/images/danila.jpg" alt="daa">
|
||||
</div>
|
||||
<h2 class="Person-Name" >Danila Fedorin</h2>
|
||||
<p class="member-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="member">
|
||||
<div class="member-content">
|
||||
<div class="person-photo" alt"">
|
||||
<img src="/images/matthew.jpg" alt="daa">
|
||||
</div>
|
||||
<h2 class="Person-Name" >Matthew Sessions</h2>
|
||||
<p class="member-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="member">
|
||||
<div class="member-content">
|
||||
<div class="person-photo" alt"">
|
||||
<img src="/images/michael.jpg" alt="daa">
|
||||
</div>
|
||||
<h2 class="Person-Name" >Michael Huang</h2>
|
||||
<p class="member-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="member">
|
||||
<div class="member-content">
|
||||
<div class="person-photo" alt"">
|
||||
<img src="/images/claire.jpg" alt="daa">
|
||||
</div>
|
||||
<h2 class="Person-Name" >Claire Cahill</h2>
|
||||
<p class="member-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>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
<!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 using twit as a baseline<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