Skip to content

Commit

Permalink
Merge pull request #204 from Ishikabaid/refactorDiscord
Browse files Browse the repository at this point in the history 
fixed and refactored discord page
  • Loading branch information
@Rucha1499
Rucha1499 committed Jan 2, 2022
2 parents 66d2428 + daa3d93 commit 2c830c7
Show file tree
Hide file tree
Showing 5 changed files with 261 additions and 205 deletions.
288 changes: 167 additions & 121 deletions css/discord.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,125 +8,117 @@ body {
font: 16px 'Roboto', sans-serif;
}

.d-flex,
.jacenter,
.block--hero-inner .container,
.header__container {
display: flex;
flex-wrap: wrap;
a {
text-decoration: none;
color: #0000ff;
}

.jacenter,
.block--hero-inner .container,
.header__container {
.animation-container .animation-heading-container {
align-items: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 2;
height: 100%;
}

.btn {
padding: 0.5rem 1.5rem;
border: 2px solid #d1d1d1;
background: #ededed;
border-radius: 4px;
.animation-container {
position: relative;
height: 300px;
background: url(../img/discord-page/bg-top-inner.png) no-repeat center center;
background-size: cover;
color: #ffffff;
overflow: hidden;
padding: 3.5rem 0;
}

.btn--border {
background: transparent;
.animation-heading-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.btn--border-primary {
border-color: #041287;
.new-heading {
font-weight: 400;
color: #05117c;
font-size: 2.125rem;
margin-top: 3.5rem;
width: 95%;
}

.btn--border-primary:hover {
background: #e40062;
color: #ffffff;
border-color: #e40062;
.rds-name {
color: #e30062;
}

.header {
position: sticky;
top: 0;
background: #ffffff;
z-index: 9;
box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
.discord-info-para {
margin-top: 2rem;
margin-left: 10rem;
width: 80%;
}

.header__container {
justify-content: space-between;
.discord-info-para p {
font-size: 1.125rem;
}

.header__logo-link {
display: inline-block;
padding: 5px;
.center-block {
text-align: center;
}

.header__logo-link img {
width: 60px;
.get-started-heading {
font-weight: 400;
color: #030f79;
font-size: 2.125rem;
margin: 2rem 0;
display: flex;
align-items: center;
justify-content: center;
width: 97%;
}

.header__list {
.rds-channels-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}

.header__list li {
display: inline-block;
padding: 0 0.75rem;
.rds-channels-list li {
margin: 0 0 0.75rem 0;
}

.header__list a {
display: inline-block;
padding: 0.75rem 0;
border-bottom: 1px solid transparent;
.end-block {
background: #f2f2f2;
margin-top: 3rem;
display: flex;
align-items: center;
justify-content: center;
}

.header__list a:hover,
.header__list a:focus {
border-color: #00084d;
.discord-image {
margin-top: 4rem;
object-fit: cover;
width: 90%;
margin: 20px auto;
}

.block {
padding: 3.5rem 0;
.image-div {
width: 40%;
}

.block__title {
font-weight: 400;
color: #041187;
font-size: 2.125rem;
margin: 0 0 2rem 0;
.rds-info-block {
width: 35%;
}

.block--center {
footer {
position: relative;
margin-top: 40px;
bottom: 0;
width: 100%;
padding: 15px;
text-align: center;
}

.block__content * {
margin-top: 0;
}

.block__content p {
font-size: 1.125rem;
}

.block--bg-gray {
background: #f2f2f2;
}

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

a {
text-decoration: none;
color: #0000ff;
}

@keyframes moveLeftBounce {
0% {
transform: translateX(0);
Expand Down Expand Up @@ -167,106 +159,160 @@ a {
}
}

.block--hero-inner {
position: relative;
height: 300px;
background: url(../img/discord-page/bg-top-inner.png) no-repeat center center;
background-size: cover;
color: #ffffff;
overflow: hidden;
}

.block--hero-inner .container {
position: relative;
z-index: 2;
height: 100%;
}

.hero__title {
.animation-heading {
font-size: 2.5rem;
margin: 0;
text-align: center;
}

.hero__shape {
.animation-shapes {
position: absolute;
}

.hero__shape--1 {
.animation-shape-1 {
top: 40px;
right: 84px;
max-width: 40px;
z-index: 1;
animation: rotateme 25s linear infinite;
}

.hero__shape--2 {
.animation-shape-2 {
top: 55px;
right: 95px;
max-width: 25px;
animation: rotateme 25s linear infinite;
}

.hero__shape--3 {
.animation-shape-3 {
top: 160px;
left: 350px;
animation: animationFramesOne 15s infinite linear;
}

.hero__shape--4 {
.animation-shape-4 {
top: 50%;
left: 50%;
-webkit-animation: animationFramesOne 25s infinite linear;
animation: animationFramesOne 25s infinite linear;
}

.hero__shape--5 {
.animation-shape-5 {
top: 70px;
right: 50px;
animation: animationFramesOne 25s infinite linear;
}

.hero__shape--6 {
.animation-shape-6 {
left: 20px;
bottom: 30px;
animation: rotateme 25s linear infinite;
max-width: 50px;
}

.hero__shape--7 {
.animation-shape-7 {
bottom: 1rem;
right: 1rem;
animation: moveLeftBounce 3s linear infinite;
}

.hero__shape--8 {
.animation-shape-8 {
top: 10px;
left: 10px;
animation: animationFramesOne 25s infinite linear;
}

.list-reset {
padding: 0;
margin: 0;
list-style: none;
@media (max-width: 1024px) {
.discord-info-para {
margin-left: 6rem;
}
}

.list-reset li {
margin: 0 0 0.75rem 0;
@media (max-width: 768px) {
.end-block {
display: flex;
flex-direction: column;
}
.image-div {
width: 60%;
}
.rds-info-block {
flex: 0 0 100%;
min-width: 80%;
}
.discord-info-para {
margin-left: 5rem;
}
}

footer {
position: relative;
margin-top: 40px;
bottom: 0;
width: 100%;
padding: 15px;
text-align: center;
@media (max-width: 625px) {
.get-started-heading {
font-size: 20px;
font-weight: 700;
}
.discord-info-para {
margin-left: 2.75rem;
}
.new-heading {
font-size: 1.75rem;
font-weight: 700;
margin-left: 0.6rem;
}
.help-heading {
font-size: 20px;
margin-right: 0.4rem;
}
.animation-heading {
font-size: 2rem;
}
.server-heading {
display: block;
}
}

@media (max-width: 767.98px) {
.col-xs-12 {
flex: 0 0 100%;
max-width: 100%;
@media (max-width: 375px) {
.discord-info-para {
font-size: 1rem;
margin: 1rem 2rem;
}

.new-heading {
width: 97%;
margin-bottom: 2rem;
font-size: 1.5rem;
font-weight: 700;
margin-left: 0.6rem;
}

.help-heading {
font-size: 20px;
margin-right: 0.4rem;
}

.animation-heading {
font-size: 2rem;
}

.end-block {
display: flex;
flex-direction: column;
}

.rds-info-block {
min-width: 75%;
}

.image-div {
width: 80%;
margin-top: 1rem;
}

.get-started-heading {
font-size: 20px;
font-weight: 700;
}

.server-heading {
display: block;
}
}

0 comments on commit 2c830c7

Please sign in to comment.