Clean up CSS, images

diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644 (file)
index 0000000..34d3e66
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,218 @@
+body {
+  margin: 0; /*turning margin off as default*/
+  min-height: 100vh;
+  font-size: 1em;
+  display: flex;
+  flex-direction: column; /*default flex direction is row*/
+  font-family: 'Verdana', sans-serif;
+}
+
+header img {
+  width: 120px;
+  height: 120px;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center; /*vertical centering*/
+  padding: 10px 40px;
+  background: linear-gradient(to bottom, #ccc, white);
+}
+
+header ul {
+  display: flex;
+  margin: 0; /*taking the margin and padding ul default size off*/
+  padding: 0;
+  list-style-type: none;
+}
+
+header li {
+  padding: 2.5em;
+}
+
+header li a {
+  color: #333;
+  text-decoration: none;
+}
+
+main {
+  padding: 2em;
+  line-height: 1.1;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch; /*vertical centering*/
+  flex-grow: 1;
+}
+
+h2 {
+  font-size: 1em;
+  text-align: center;
+}
+
+main section {
+  flex-grow: 1;
+  flex-basis: 33%;
+  padding: 20px;
+  border-right: solid 1px #b9b9b9;
+  text-align: justify;
+}
+
+main section:last-child {
+  border-right: 0;
+}
+
+main section ul li {
+  list-style: square;
+}
+
+main section ul li a {
+  color: #333;
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  40%,
+  60%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.button {
+  animation-name: bounce;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  position:absolute;
+  right: 20px;
+  bottom: 20px;
+  background-color: #666;
+  border-radius: 5px;
+  padding: 10px 65px 15px 65px;
+  cursor: pointer;
+}
+
+.member-button {
+  text-decoration: none;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.hidden-menu {
+  display: none;
+  position: absolute;
+  right: 20px;
+  bottom: 100px;
+  background-color: #666;
+  border-radius: 5px;
+  padding: 25px;
+}
+
+.hidden-menu-buttons {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+.hidden-menu-buttons a {
+  cursor: pointer;
+}
+
+footer {
+  background: linear-gradient(to bottom, white, #ccc);
+  min-height: 15vh;
+  color: #666;
+}
+
+footer ul {
+  margin: 0; /*taking the margin and padding ul default size off */
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  justify-content: center;
+}
+
+footer li {
+  margin: 5px 10px;
+}
+
+h3 {
+  font-size: 0.8em;
+  text-align: center;
+}
+
+footer p {
+  font-size: 0.6em;
+  text-align: center;
+}
+
+@media screen and (min-width: 1024px) {
+  body {
+    font-size: 1.25em;
+  }
+
+a:hover {
+  text-shadow: 2px 2px #aaa;
+}
+
+.title {
+  margin-top: 20px;
+}
+
+.team-section{
+  min-height: 400px;
+  text-align: center;
+  overflow: hidden;
+  background:#34495e;
+  padding:60px;
+  display:flex;
+}
+
+
+.our-team{
+  margin-top: 100px;
+}
+
+.our-team .pic{
+      display: inline-block;
+      width: 85%;
+      height: 85%;
+      padding: 5px;
+      margin-bottom: 1px;
+      transition: all 0.5s ease 0s;
+  }
+.our-team:hover .pic{
+      background: #17bebb;
+      border-radius: 70%;
+  }
+
+  .pic img{
+      width: 100%;
+      height: auto;
+      border-radius: 50%;
+  }
+
+  .our-team .title{
+      display: block;
+      font-size: 15px;
+      font-weight: 600;
+      color: white;
+      margin: 0 0 7px 0;
+  }
+  .our-team .post{
+      display: block;
+      font-size: 15px;
+      color: #17bebb;
+      text-transform: capitalize;
+      margin-bottom: 15px;
+  }
+
+  @media only screen and (max-width: 990px){
+      .our-team{ margin-bottom: 30px; }
+  }

diff --git a/static/images/mstile-310x310.png b/static/images/mstile-310x310.png
new file mode 100644 (file)
index 0000000..afca5b3
Binary files /dev/null and b/static/images/mstile-310x310.png differ

diff --git a/static/team1.jpg b/static/team1.jpg
deleted file mode 100644 (file)
index a36b0b4..0000000
Binary files a/static/team1.jpg and /dev/null differ

diff --git a/templates/base.html b/templates/base.html
index d5856c42e6e9ef1b2a3aab7b33fccf2692b505ce..2d148c013c163d8b923b3664fe721ef49a2e9a60 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,6 +8,8 @@
        <meta charset="UTF-8">
 
        <title>{%block title%}PgDU 2018{%endblock%}</title>
+       <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+       <link rel="stylesheet" href="{{media("css/style.css")}}">
 
        {%block extrahead%}{%endblock%}
    </head>

diff --git a/templates/index_base.html b/templates/index_base.html
index 2d55e633b18062decf24b197c3f43f19fb576049..aab516fc8761dcc3d57ad198e3e3f34c60869df7 100644 (file)
--- a/templates/index_base.html
+++ b/templates/index_base.html
@@ -9,6 +9,8 @@
        <meta name="description" content="PgDU 2018" />
 
        <title>{%block title%}PgDU 2018{%endblock%}</title>
+        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+        <link rel="stylesheet" href="{{media("css/style.css")}}">
 
        {%block extrahead%}{%endblock%}
    </head>