-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor CSS styles for consistency and readability
- Loading branch information
1 parent
0aeb2ed
commit 4bd5a56
Showing
15 changed files
with
738 additions
and
705 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,198 +1,209 @@ | ||
| * { | ||
| box-sizing: border-box; | ||
| padding: 0; | ||
| margin: 0; | ||
| scroll-behavior: smooth; | ||
| box-sizing: border-box; | ||
| padding: 0; | ||
| margin: 0; | ||
| scroll-behavior: smooth; | ||
| } | ||
|
|
||
| body { | ||
| background: var(--color-bg); | ||
| background: var(--color-bg); | ||
| } | ||
|
|
||
| a { | ||
| color: unset; | ||
| text-decoration: none; | ||
| color: unset; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .gradient__bg { | ||
|
|
||
| /* ff 3.6+ */ | ||
| background: -moz-radial-gradient(circle at 3% 25%, rgba(18, 14, 67, 1) 0%, rgba(36, 43, 46, 1) 100%); | ||
|
|
||
| /* safari 5.1+,chrome 10+ */ | ||
| background: -webkit-radial-gradient(circle at 3% 25%, rgba(18, 14, 67, 1) 0%, rgba(36, 43, 46, 1) 100%); | ||
|
|
||
| /* opera 11.10+ */ | ||
| background: -o-radial-gradient(circle at 3% 25%, rgba(18, 14, 67, 1) 0%, rgba(36, 43, 46, 1) 100%); | ||
|
|
||
| /* ie 10+ */ | ||
| background: -ms-radial-gradient(circle at 3% 25%, rgba(18, 14, 67, 1) 0%, rgba(36, 43, 46, 1) 100%); | ||
|
|
||
| /* global 92%+ browsers support */ | ||
| background: radial-gradient(circle at 3% 25%, rgba(18, 14, 67, 1) 0%, rgba(36, 43, 46, 1) 100%); | ||
|
|
||
|
|
||
|
|
||
| /* ff 3.6+ */ | ||
| background: -moz-radial-gradient( | ||
| circle at 3% 25%, | ||
| rgba(18, 14, 67, 1) 0%, | ||
| rgba(36, 43, 46, 1) 100% | ||
| ); | ||
|
|
||
| /* safari 5.1+,chrome 10+ */ | ||
| background: -webkit-radial-gradient( | ||
| circle at 3% 25%, | ||
| rgba(18, 14, 67, 1) 0%, | ||
| rgba(36, 43, 46, 1) 100% | ||
| ); | ||
|
|
||
| /* opera 11.10+ */ | ||
| background: -o-radial-gradient( | ||
| circle at 3% 25%, | ||
| rgba(18, 14, 67, 1) 0%, | ||
| rgba(36, 43, 46, 1) 100% | ||
| ); | ||
|
|
||
| /* ie 10+ */ | ||
| background: -ms-radial-gradient( | ||
| circle at 3% 25%, | ||
| rgba(18, 14, 67, 1) 0%, | ||
| rgba(36, 43, 46, 1) 100% | ||
| ); | ||
|
|
||
| /* global 92%+ browsers support */ | ||
| background: radial-gradient( | ||
| circle at 3% 25%, | ||
| rgba(18, 14, 67, 1) 0%, | ||
| rgba(36, 43, 46, 1) 100% | ||
| ); | ||
| } | ||
|
|
||
| .gradient__text { | ||
| background: var(--gradient-text); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| background: var(--gradient-text); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| } | ||
|
|
||
| .section__padding { | ||
| padding: 4rem 6rem; | ||
| padding: 4rem 6rem; | ||
| } | ||
|
|
||
| .section__margin { | ||
| margin: 4rem 6rem; | ||
| margin: 4rem 6rem; | ||
| } | ||
|
|
||
| .scale-up-center { | ||
| -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; | ||
| animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; | ||
| -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) | ||
| both; | ||
| animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; | ||
| } | ||
|
|
||
| @-webkit-keyframes scale-up-center { | ||
| 0% { | ||
| -webkit-transform: scale(0.5); | ||
| transform: scale(0.5); | ||
| } | ||
| 0% { | ||
| -webkit-transform: scale(0.5); | ||
| transform: scale(0.5); | ||
| } | ||
|
|
||
| 100% { | ||
| -webkit-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| 100% { | ||
| -webkit-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| @keyframes scale-up-center { | ||
| 0% { | ||
| -webkit-transform: scale(0.5); | ||
| transform: scale(0.5); | ||
| } | ||
| 0% { | ||
| -webkit-transform: scale(0.5); | ||
| transform: scale(0.5); | ||
| } | ||
|
|
||
| 100% { | ||
| -webkit-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| 100% { | ||
| -webkit-transform: scale(1); | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 700px) { | ||
| .section__padding { | ||
| padding: 4rem; | ||
| } | ||
| .gradient__bg{ | ||
| height: 90vh; | ||
| } | ||
| .section__padding { | ||
| padding: 4rem; | ||
| } | ||
| .gradient__bg { | ||
| height: 90vh; | ||
| } | ||
|
|
||
| .section__margin { | ||
| margin: 4rem; | ||
| } | ||
| .section__margin { | ||
| margin: 4rem; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 550px) { | ||
| .section__padding { | ||
| padding: 4rem; | ||
| } | ||
| .gradient__bg{ | ||
| height: 90vh; | ||
| } | ||
| .section__padding { | ||
| padding: 4rem; | ||
| } | ||
| .gradient__bg { | ||
| height: 90vh; | ||
| } | ||
|
|
||
| .section__margin { | ||
| margin: 4rem 2rem; | ||
| } | ||
| .section__margin { | ||
| margin: 4rem 2rem; | ||
| } | ||
| } | ||
| @media screen and (max-width: 1050px) { | ||
| .gradient__bg{ | ||
| height: 90vh; | ||
| } | ||
| .gradient__bg { | ||
| height: 90vh; | ||
| } | ||
| } | ||
|
|
||
| /*---------courses----------*/ | ||
| .container_ab { | ||
| display: flex; | ||
| justify-content: center; | ||
| background: #031B34; | ||
| display: flex; | ||
| justify-content: center; | ||
| background: #031b34; | ||
|
|
||
| /* background-color: transparent; */ | ||
| /* background-color: transparent; */ | ||
| } | ||
|
|
||
| .p { | ||
| font-family: 'Poppins', sans-serif; | ||
| font-family: "Poppins", sans-serif; | ||
| } | ||
|
|
||
| .outer { | ||
| width: 80%; | ||
| width: 80%; | ||
| } | ||
|
|
||
| .fa { | ||
| color: #E90606; | ||
| margin: 0 3px; | ||
| font-size: 10px; | ||
| animation: pound .35s infinite alternate; | ||
| -webkit-animation: pound .35s infinite alternate; | ||
| color: #e90606; | ||
| margin: 0 3px; | ||
| font-size: 10px; | ||
| animation: pound 0.35s infinite alternate; | ||
| -webkit-animation: pound 0.35s infinite alternate; | ||
| } | ||
|
|
||
| .row_ab{ | ||
| padding-top: 5.5rem; | ||
| padding-bottom: 2rem; | ||
| .row_ab { | ||
| padding-top: 5.5rem; | ||
| padding-bottom: 2rem; | ||
| } | ||
|
|
||
| .row_ab>div { | ||
| margin-top: 1rem; | ||
| .row_ab > div { | ||
| margin-top: 1rem; | ||
| } | ||
|
|
||
|
|
||
| .profile-img { | ||
| position: absolute; | ||
| width: 15rem; | ||
| z-index: 2; | ||
| top: -7.5rem; | ||
|
|
||
| position: absolute; | ||
| width: 15rem; | ||
| z-index: 2; | ||
| top: -7.5rem; | ||
| } | ||
|
|
||
| .profile { | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| z-index: 1; | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| z-index: 1; | ||
| position: relative; | ||
| } | ||
|
|
||
| .profile-content { | ||
| height: 100%; | ||
| padding-top: 40%; | ||
| background-color: #45768f; | ||
| padding-bottom: 2rem; | ||
| border-radius: 2em; | ||
| box-shadow: 0 5px 10px rgba(0, 0, 0, .2); | ||
| height: 100%; | ||
| padding-top: 40%; | ||
| background-color: #45768f; | ||
| padding-bottom: 2rem; | ||
| border-radius: 2em; | ||
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); | ||
| } | ||
|
|
||
| .card-body img, | ||
| .profile-img { | ||
| border-radius: 100%; | ||
| background-color: black; | ||
|
|
||
| border-radius: 100%; | ||
| background-color: black; | ||
| } | ||
| .card-text_ab{ | ||
| color: darkslategray; | ||
| .card-text_ab { | ||
| color: darkslategray; | ||
| } | ||
|
|
||
| .academy{ | ||
|
|
||
| color: #242B2E; | ||
| text-shadow: 1px 1px white; | ||
| .academy { | ||
| color: #242b2e; | ||
| text-shadow: 1px 1px white; | ||
| } | ||
|
|
||
| .card-body { | ||
| padding-left: 2rem; | ||
|
|
||
| padding-left: 2rem; | ||
| } | ||
| @media screen and (max-width: 480px) { | ||
| .row_ab{ | ||
| padding-top: 7rem; | ||
| padding-bottom: 2rem; | ||
| } | ||
| } | ||
| .row_ab { | ||
| padding-top: 7rem; | ||
| padding-bottom: 2rem; | ||
| } | ||
| } |
Oops, something went wrong.