Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
FAQ/public/css/main.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
482 lines (421 sloc)
9.66 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/******************************************************************************************************************** | |
* | |
* General CSS | |
* | |
*********************************************************************************************************************/ | |
body { | |
margin: 0; | |
padding: 0; | |
font-family: 'Montserrat', sans-serif; | |
} | |
header { | |
background: linear-gradient(rgba(8, 61, 119, 0.5), rgba(8, 61, 119, 0.2)), url('https://happygamer.com/wp-content/uploads/2019/05/pexels-photo-735911.jpeg'); | |
background-size: cover; | |
background-position: center; | |
height: 450px; | |
padding: 0 3%; | |
} | |
header > figure{ | |
margin: 0; | |
} | |
header > figure > a > img { | |
height: 90px; | |
float: left; | |
margin: 1%; | |
} | |
header > nav { | |
width: 100%; | |
line-height: 60px; | |
} | |
header > nav > ul { | |
float: right; | |
margin: 1%; | |
} | |
header > nav > ul > li { | |
display: inline-block; | |
margin-left: 25px; | |
} | |
header > nav > ul > li.username { | |
margin-left: 10px; | |
} | |
header > nav > ul > li > a { | |
text-decoration: none; | |
color: #FFF; | |
padding: 1%; | |
} | |
header > nav > ul > li > img.avatar { | |
width: 35px; | |
height: 35px; | |
border-radius: 50%; | |
} | |
header > h1 { | |
font-size: 48px; | |
text-transform: uppercase; | |
letter-spacing: 2px; | |
position: absolute; | |
top: 200px; | |
width: 94%; | |
text-align: center; | |
color: #FFF; | |
} | |
main { | |
background: #F1FAFE; | |
padding: 1% 3%; | |
overflow: auto; | |
} | |
footer { | |
border-top: solid #119DA4; | |
background: #001242; | |
color: #FFF; | |
} | |
footer > p { | |
margin: auto; | |
width: 60%; | |
text-align: center; | |
padding: 5%; | |
} | |
.error-message { | |
padding: 8px 35px 8px 14px; | |
margin-bottom: 18px; | |
color: #FFF; | |
background-color: #fd4b5a; | |
border-radius: 4px; | |
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); | |
} | |
/******************************************************************************************************************** | |
* | |
* Home Page CSS | |
* | |
*********************************************************************************************************************/ | |
main { | |
min-height: 250px; | |
} | |
main > form > input.search { | |
padding: 10px; | |
font-size: 1rem; | |
float: left; | |
width: 91.5%; | |
margin: 1%; | |
border: none; | |
outline: none; | |
border-radius: 10px; | |
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); | |
} | |
main > form > button.search { | |
float: left; | |
width: 4%; | |
padding: 10px; | |
background: #1d7874; | |
color: white; | |
font-size: 1rem; | |
border: none; | |
border-radius: 10px; | |
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); | |
margin-top: 1%; | |
cursor: pointer; | |
} | |
main > a > article.question { | |
background: #FFF; | |
width: 48%; | |
margin: 1%; | |
float: left; | |
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); | |
border-radius: 10px; | |
min-height: 180px; | |
position: relative; | |
text-decoration: none; | |
color: #000000; | |
} | |
main > a > article:hover.question { | |
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); | |
} | |
main > a > article.question > h2 { | |
padding: 0 20px; | |
float: left; | |
color: #001242; | |
font-weight: 700; | |
} | |
main > a > article.question > p { | |
margin: 0; | |
padding: 5px; | |
color: white; | |
background-color: #4bb3fd; | |
text-align: center; | |
border-radius: 10px 10px 0 0; | |
} | |
main > a > article.question > small.user { | |
position: absolute; | |
bottom: 20px; | |
left: 20px; | |
font-weight: 400; | |
} | |
main > a > article.question > small.date { | |
position: absolute; | |
bottom: 20px; | |
right: 20px; | |
font-weight: 400; | |
} | |
main > a > article.question > small > i#bronze { | |
color:rgb(145, 94, 1); | |
} | |
main > a > article.question > small > i#silver { | |
color:silver; | |
} | |
main > a > article.question > small > i#gold { | |
color:gold; | |
} | |
@media (max-width: 870px) { | |
main > form > input.search { | |
width: 80%; | |
margin: 1%; | |
} | |
main > form > button.search { | |
float: left; | |
width: 10%; | |
} | |
} | |
@media (max-width: 700px) { | |
main > a > article.question { | |
width: 98%; | |
margin: 1%; | |
} | |
} | |
/******************************************************************************************************************** | |
* | |
* Answers Page CSS | |
* | |
*********************************************************************************************************************/ | |
main > a.lightbox { | |
display: none; | |
position: fixed; | |
z-index: 999; | |
width: 100%; | |
height: 100%; | |
text-align: center; | |
top: 0; | |
left: 0; | |
background: rgba(0,0,0,0.8); | |
} | |
main > a.lightbox > img { | |
max-width: 90%; | |
max-height: 80%; | |
margin-top: 2%; | |
} | |
main > a.lightbox:target { | |
outline: none; | |
display: block; | |
} | |
main > form > label { | |
margin: 1%; | |
} | |
main > form.textarea > textarea { | |
width: 96%; | |
margin: 1%; | |
font-family: 'Montserrat', sans-serif; | |
font-size: 1rem; | |
padding: 15px; | |
resize: none; | |
height: 50px; | |
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); | |
border: none; | |
} | |
main > form.textarea > input[type=submit] { | |
margin: 1%; | |
border: none; | |
border-radius: 10px; | |
color: #FFF; | |
font-weight: 700; | |
background-color: #4bb3fd; | |
padding: 10px 20px; | |
cursor: pointer; | |
} | |
main > article.answers { | |
background: #FFF; | |
width: 98%; | |
margin: 1%; | |
float: left; | |
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); | |
border-radius: 10px; | |
min-height: 250px; | |
position: relative; | |
text-decoration: none; | |
color: #000000; | |
} | |
main > article.answers > p.is { | |
margin: 0; | |
padding: 5px; | |
text-align: center; | |
border-radius: 10px 10px 0 0; | |
color: #FFF; | |
} | |
main > article.answers > p.is-correct { | |
background-color: #55AE3A; | |
} | |
main > article.answers > p.is-inappropriate { | |
background-color: #fd4b5a; | |
} | |
main > article.answers > p.body { | |
padding: 0 20px 20px 20px; | |
float: left; | |
color: #001242; | |
font-weight: 700; | |
width: 97%; | |
} | |
main > article.answers > small.user { | |
position: absolute; | |
bottom: 60px; | |
left: 25px; | |
font-weight: 400; | |
} | |
main > article.answers > small.date { | |
position: absolute; | |
bottom: 60px; | |
right: 25px; | |
font-weight: 400; | |
} | |
main > article.answers > small > i#bronze { | |
color:rgb(145, 94, 1); | |
} | |
main > article.answers > small > i#silver { | |
color:silver; | |
} | |
main > article.answers > small > i#gold { | |
color:gold; | |
} | |
main > article.answers > form.mark-correct { | |
position: absolute; | |
bottom: 10px; | |
left: 20px; | |
} | |
main > article.answers > form.mark-correct > input[type=submit] { | |
border: none; | |
border-radius: 10px; | |
color: #FFF; | |
font-weight: 700; | |
background-color: #55AE3A; | |
padding: 15px 30px; | |
cursor: pointer; | |
} | |
main > article.answers > form.mark-inappropriate { | |
position: absolute; | |
bottom: 10px; | |
right: 20px; | |
} | |
main > article.answers > form.mark-correct > input[type=submit] { | |
border: none; | |
border-radius: 10px; | |
color: #FFF; | |
font-weight: 700; | |
background-color: #55AE3A; | |
padding: 15px 30px; | |
cursor: pointer; | |
} | |
main > article.answers > form.mark-inappropriate > input[type=submit] { | |
border: none; | |
border-radius: 10px; | |
color: #FFF; | |
font-weight: 700; | |
background-color: #fd4b5a; | |
padding: 15px 30px; | |
cursor: pointer; | |
} | |
main > article.answers > form.rate { | |
padding: 0 20px 100px 20px; | |
float: left; | |
} | |
main > article.answers > p.avg-rate { | |
padding-left: 25px; | |
color: #001242; | |
} | |
/******************************************************************************************************************** | |
* | |
* Register Page CSS | |
* | |
*********************************************************************************************************************/ | |
main > section { | |
margin: auto; | |
width: 60%; | |
text-align: center; | |
} | |
main > section > form.register-login { | |
padding: 5%; | |
background: #fff; | |
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); | |
border-radius: 10px; | |
margin-bottom: 5%; | |
} | |
main > section > form.register-login > p > input[type=text] { | |
width: 100%; | |
padding: 12px 20px; | |
margin: 8px 0; | |
box-sizing: border-box; | |
border: none; | |
border-bottom: 2px solid #4bb3fd; | |
outline: none; | |
font-family: 'Montserrat', sans-serif; | |
font-size: 1rem; | |
} | |
main > section > form.register-login > p > input[type=password] { | |
width: 100%; | |
padding: 12px 20px; | |
margin: 8px 0; | |
box-sizing: border-box; | |
border: none; | |
border-bottom: 2px solid #4bb3fd; | |
outline: none; | |
font-family: 'Montserrat', sans-serif; | |
font-size: 1rem; | |
} | |
main > section > form.register-login > p > input[type=submit] { | |
border: none; | |
border-radius: 10px; | |
color: #FFF; | |
font-weight: 700; | |
background-color: #001242; | |
padding: 15px 30px; | |
cursor: pointer; | |
} | |
/******************************************************************************************************************** | |
* | |
* Create Question Page CSS | |
* | |
*********************************************************************************************************************/ | |
main > section > form.newquestion { | |
padding: 5%; | |
background: #fff; | |
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); | |
border-radius: 10px; | |
margin-bottom: 5%; | |
} | |
main > section > form.newquestion > input[type=text] { | |
width: 100%; | |
padding: 12px 20px; | |
margin: 8px 0; | |
box-sizing: border-box; | |
border: none; | |
border-bottom: 2px solid #4bb3fd; | |
outline: none; | |
font-family: 'Montserrat', sans-serif; | |
font-size: 1rem; | |
} | |
main > section > form.newquestion > textarea { | |
width: 96%; | |
margin: 1%; | |
font-family: 'Montserrat', sans-serif; | |
font-size: 1rem; | |
padding: 15px; | |
resize: none; | |
height: 50px; | |
border: none; | |
border-bottom: 2px solid #4bb3fd; | |
outline: none; | |
} | |
main > section > form.newquestion > p > input[type=submit] { | |
border: none; | |
border-radius: 10px; | |
color: #FFF; | |
font-weight: 700; | |
background-color: #001242; | |
padding: 15px 30px; | |
cursor: pointer; | |
} |