Skip to content

Instantly share code, notes, and snippets.

@manabubannai
Created Mar 29, 2022
Embed
What would you like to do?
@import url('https://fonts.googleapis.com/css2?family=Hind+Guntur:wght@300&display=swap');
header {
padding-bottom: 25px;
}
article {
max-width: 5000px;
background-color: #F6F8FA;
padding-top: 35px;
}
.cover {
font-family: 'Songti SC', serif;
max-width: 960px;
margin: 0 auto;
color: #1F3F65;
h1 {
text-align: center;
margin-bottom: 15px;
font-size: 38px;
@media all and (max-width: 450px) {
font-size: 32px;
}
}
}
.top_ranker {
max-width: 980px;
margin: 0 auto;
text-align: center;
.box {
display: inline-block;
width: 28%;
margin:10px;
background: #fff;
position: relative;
padding: 20px 0 25px;
box-shadow: 2px 2px 2px 2px rgb(241 241 241);
@media all and (max-width: 850px) {
width: 34%;
}
@media all and (max-width: 700px) {
width: 45%;
}
@media all and (max-width: 450px) {
width: 75%;
}
img {
width: 35%;
border-radius: 80px;
margin-bottom: 20px;
@media all and (max-width: 450px) {
width: 32%;
}
}
p {
font-size: 18px;
margin: 0 auto;
}
.name {
}
.price {
font-size: 25px;
font-weight: 600;
}
.rank_icon {
position: absolute;
top: 115px;
left: 28px;
width: 30px;
@media all and (max-width: 450px) {
top: 120px;
left: 30px;
}
}
}
.donate-btn {
margin: 30px 0 10px;
a {
background: #5b9dff;
color: #fff;
border-radius: 40px;
padding: 10px 55px 4px 55px;
text-decoration: none;
font-size: 18px;
font-family: "Hind Guntur", sans-serif;
font-weight: 600;
}
}
}
.ranking {
margin-top: 30px;
@media all and (max-width: 450px) {
padding: 0 10px;
}
.box-left, .box-right {
float: left;
width: 50%;
background-color: #fff;
font-size: 20px;
margin-bottom: 20px;
}
.box-left {
@media all and (max-width: 450px) {
width: 100%;
}
}
.box-left {
ul {
padding: 0;
margin: 10px 0 8px;
outline: 0;
background-color: #fff;
li {
display: inline;
vertical-align: middle;
margin-left: 18px;
@media all and (max-width: 450px) {
margin-left: 5px;
font-size: 17px;
}
img {
max-width: 11.5%;
display: inherit;
margin: 0% auto;
border-radius: 100px;
}
}
.price {
font-size: 24px;
font-weight: 600;
}
}
}
.box-right {
@media all and (max-width: 450px) {
display: none;
}
text-align: right;
p {
margin: 25px;
a {
text-decoration: none;
font-size: 18px;
}
}
}
}
.donate-form {
background-color: #fff;
h2 {
text-align: center;
font-size: 32px;
padding-top: 20px;
padding-bottom: 5px;
&:before{
content: "";
}
@media all and (max-width: 450px) {}
font-size: 30px;
}
ul {
background-color: #fff;
outline: none;
text-align: center;
margin: 0;
padding: 15px 0 30px;
li {
display: inline;
input, button {
width: 25%;
height: 35px;
border-radius: 5px;
background-color: #F4F8FF;
border: 1.1px solid #25708e;
margin-left: 15px;
padding-left: 7px;
@media all and (max-width: 450px) {
width: 75%;
margin-bottom: 15px;
}
}
button {
background-color: #4CB8DE;
border: none;
color: #fff;
height: 40px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
@media all and (max-width: 450px) {
width: 79%;
height: 44px;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment