299 styles.css → style.css
View file
@@ -1,58 +1,56 @@
:root{
--main-colour:rgb(76, 175, 80);
--shadow-colour: rgba(29,36,27,0.6);
--accent-colour: rgb(255,215,64);
--dark-colour: rgb(99,121,97);
:root {
--main-colour: rgb(76, 175, 80);
--shadow-colour: rgba(29, 36, 27, 0.6);
--accent-colour: rgb(255, 215, 64);
--dark-colour: rgb(99, 121, 97);
--light-colour: #efefef;
--back-colour:rgb(219,219,218);
--back-colour: rgb(219, 219, 218);
--text-colour: #333;
}

body {
background-color: var(--light-colour);
}

button{
button {
font: bold 20px 'Ubuntu', Sans-Serif !important;
}

h1{
h1 {
font: bold 4em 'Ubuntu', Sans-Serif;
}

h4{
font: 2em 'Lato', Sans-Serif;
h4 {
font: 2em 'Lato', Sans-Serif;
}

.textbox h4{
.textbox h4 {
text-align: left;
}

.content .container h1 {
text-align: center;
}


.hero-content h1{
.hero-content h1 {
font: bold 5em 'Ubuntu', Sans-Serif;
}
.hero-content h4{
width: 600px;
font: 2.5em 'Lato', Sans-Serif;

.hero-content h4 {
width: 500px;
font: 2.5em 'Lato', Sans-Serif;
color: var(--text-colour);
}


h6>a {
position: relative;
font: bold 1em 'Ubuntu', Sans-Serif;

color: var(--text-colour) ;
font: 900 1.2em 'Ubuntu', Sans-Serif;
color: var(--text-colour);
text-decoration: none;
}

h6>a:hover {
color: var(--text-colour) ;
color: var(--text-colour);
}

h6>a:before {
@@ -76,18 +74,26 @@ h6>a:hover:before {
transform: scaleX(1);
}


.sponsor-endorsement .row h4 {
color: aliceblue;
}

.sponsor-name h6 {
color: aliceblue;
margin: 0px;
}

#projects h4{
#projects h4 {
letter-spacing: 1px;

}

.project-text h1 {
margin: auto;
text-align: center;
}

.project-text h4 {
margin: auto 10%;
}

.sponsor-name h4 {
@@ -100,16 +106,14 @@ h6>a:hover:before {
#contact .row h1 {
text-align: center;
color: white;
text-shadow: 2px 2px var(--main-colour) ;
text-shadow: 2px 2px var(--main-colour);
}


#how-you-help h1 {
text-align: center;
}

.project-title {

background-color: var(--light-colour);
width: 80%;
height: 100px;
@@ -120,31 +124,32 @@ h6>a:hover:before {
position: relative;
}

.project-title h1{
.project-title h1 {
align-self: flex-end;
position:absolute;
position: absolute;
margin: 0;
}

.project-title button{
.project-title button {
align-self: flex-end;
position: absolute;
right: 10%
}

.project-container{
.project-container {
display: flex;
justify-content: center;
}

#backdrop{
top:50px;
#backdrop {
top: 50px;
height: 100%;
width: 100%;
position: absolute;
background-color: rgba(0,0,0,0.6);
background-color: rgba(0, 0, 0, 0.6);
z-index: -1;
}

.cover {
width: 100%;
height: 100%;
@@ -165,9 +170,8 @@ h6>a:hover:before {
background-color: var(--light-colour);
}


.site-header {
background-color: var(--main-colour) ;
background-color: var(--main-colour);
height: 50px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
position: fixed;
@@ -184,7 +188,6 @@ h6>a:hover:before {
align-items: center;
}


.hero-content .buttons {
height: 100px;
justify-content: center;
@@ -202,7 +205,7 @@ h6>a:hover:before {
}

.blank {
background-color: var(--accent-colour) ;
background-color: var(--accent-colour);
padding: 10px;
box-shadow: 0 5px 3px rgba(0, 0, 0, 0.35);
}
@@ -211,7 +214,6 @@ h6>a:hover:before {
padding: 0 32px;
}


.jumbotron {
height: 100vh;
display: flex;
@@ -220,12 +222,12 @@ h6>a:hover:before {
}

.hero-image {
width: 300px;
height: 500px;
}

.hero-image img {
width: auto;
height: 100%;
width: 100%;
}

.hero {
@@ -235,8 +237,15 @@ h6>a:hover:before {
justify-content: center;
}

.hero-container{
display: flex;
align-content: center;
justify-content: center;
width: 80%;
}

.hero-content {
padding: 50px;
padding: 50px 0px 50px 50px;
}

.donate {
@@ -246,43 +255,34 @@ h6>a:hover:before {
}

#about-us {
background-color: var(--light-colour) ;
background-color: var(--light-colour);
padding: 70px;
text-align: center;
}

#projects{
#projects {
background: var(--back-colour);
padding-bottom: 70px;
}

#projects .mdl-cell {
height: 37vh;
height: 50;
}

.project-image {
height: 100%;
height: 500px;
width: 50%;
}

.project-text {
width: 50%;
height: 100%;
background-color: var(--main-colour) ;
background-color: var(--main-colour);
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.project-text h1{
font-size: 3em;
margin:auto;
}

.project-text h4{
margin: auto 10%;
}

.project-module {
height: 100%;
display: flex;
@@ -298,7 +298,6 @@ h6>a:hover:before {
text-align: center;
padding-top: 70px;
padding-bottom: 40px;

}

.sponsor-endorsement {
@@ -310,7 +309,7 @@ h6>a:hover:before {
}

.sponsor-endorsement .row {
background: var(--shadow-colour) ;
background: var(--shadow-colour);
overflow: hidden;
height: 100%;
z-index: 2;
@@ -323,8 +322,6 @@ h6>a:hover:before {
padding: 100px;
}



.img-circle {
float: left;
border-radius: 50%;
@@ -335,9 +332,6 @@ h6>a:hover:before {
padding-left: 1em;
}




.sponsor-list {
display: flex;
padding: 50px 0;
@@ -358,23 +352,22 @@ h6>a:hover:before {

#contact {
height: 600px;
background: url(/U-HelpWebsite/Images/larm-rmah-216854.jpg);
background: url(/Images/larm-rmah-216854.jpg);
background-size: cover;
background-position: center;
}

.flexbutton{
.flexbutton {
display: flex;
align-content: center;

}

.flexbutton-image{
.flexbutton-image {
margin-left: 4px;
}

#contact .row {
background: var(--shadow-colour) ;
background: var(--shadow-colour);
overflow: hidden;
height: 100%;
z-index: 2;
@@ -383,7 +376,6 @@ h6>a:hover:before {
align-items: center;
}


#contact .row .container {
display: flex;
align-content: space-between;
@@ -402,9 +394,8 @@ h6>a:hover:before {
background-color: var(--back-colour);
}


.mdl-mini-footer {
background-color: rgb(29,36,27);
background-color: rgb(29, 36, 27);
}

.project-page-container {
@@ -424,13 +415,11 @@ h6>a:hover:before {
justify-content: center;
}


.project-page-container .content {
display: flex;
padding: 50px 0;
align-items: center;
justify-content: center;

background-color: var(--light-colour);
}

@@ -441,96 +430,178 @@ h6>a:hover:before {
align-content: space-between;
}

#project-card{
#project-card {
padding: 30px 0px;
position: relative;
}

#project-card-animate{
margin:30px 0px;
#project-card img {
height: 300px;
width: 500px;
object-fit: cover;
}

#project-card-animate {
margin: 30px 0px;
height: 300px;
width: 100%;
position:absolute;
top:0;
background: rgba(0,0,0,.6);
position: absolute;
top: 0;
background: rgba(0, 0, 0, .6);
opacity: 0;
transition: opacity .25s ease-in-out;
}
#project-card-animate:hover{

#project-card-animate:hover {
opacity: 1;
}

#project-card-text{
#project-card-text {
position: absolute;
top:190px;
top: 190px;
left: 0;
width: 100%;
}

#project-card-text span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 9px;
#project-card-text span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 9px;
}

#project-card-text span.spacer {
padding:0 5px;
background: rgba(0, 0, 0, 0); /* fallback color */
padding: 0 5px;
background: rgba(0, 0, 0, 0);
/* fallback color */
}

#about-us-icon{
width:160px;
#about-us-icon {
width: 160px;
}

@keyframes slideleft{
@keyframes slideleft {
0% {
transform: translate3d(100%,0,0);
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0%,0,0);
transform: translate3d(0%, 0, 0);
}

}
#support-animation{
transform: translate3d(110%,0,0);

#support-animation {
transform: translate3d(110%, 0, 0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#support-animation.animate{
transform: translate3d(5%,0,0);
#support-animation.animate {
transform: translate3d(5%, 0, 0);
}

#project-text{
#project-text {
text-align: left;
width:70%;
width: 70%;
}

.textbox{
width:400px;
.textbox {
width: 400px;
margin: 50px 0px 50px 50px;
}

.about-flex{
display:flex;
.about-flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.about-flex-inner{
.about-flex-inner {
display: flex;

width: 100%;
}

.about-card{
display:flex;
width: 700px;
.about-card {
display: flex;
width: 50%;
justify-content: center;
align-items: center;
}
}

@media screen and (max-width: 1439px) {
h1 {
font-size: 3em;
}
h4 {
font-size: 1.5em;
}
.hero-content h1 {
font-size: 4em;
}
.hero-content h4 {
font-size: 1.5em;
width: 100%;
}
#projects h1 {
font-size: 2.5em;
}
#projects h4 {
letter-spacing: 0px;
}
#about-us-icon {
width: 120px;
}
.textbox {
margin: 5% 0px 5% 5%;
}
.about-flex .container {
width: 90%;
}
.project-image {
height: 300px;
width: 50%;
}
.hero-image {
height: 450px;
}

.button-container {
padding: 0 22px;
}
}

@media screen and (max-width: 1023px) {
h1 {
font-size: 3em;
}
h4 {
font-size: 1.5em;
}
.hero-content h1 {
font-size: 3.5em;
}
.hero-content h4 {
font-size: 1.5em;
width: 100%;
}

.project-image {
height: 300px;
width: 50%;
}
#projects .project-text h1 {
font-size: 2em;
}
#projects .project-text h4 {
font-size: 1.3em;
}

h6>a {
font-size: .95em;
}
}