Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
- :root {
- --color-background-white: #FFFFFF;
- --color-background-body: #b2cdf6;
- --color-blue: #2081E2;
- --color-green: #3ce260;
- --color-font: #434d56;
- --color-bg-feed: rgba(128, 113, 113, 0.319);
- --transition: all 400ms ease;
- }
- * {
- margin: 0;
- padding: 0;
- font-family: 'Montserrat', sans-serif;
- text-decoration: none;
- }
- body {
- background-color: var(--color-background-body);
- }
- /* ========== NAVBAR ========== */
- .navbar-list {
- background: var(--color-background-white);
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 15px 0;
- }
- .navbar-item {
- margin: 0 15px;
- list-style-type: none;
- }
- .logo {
- font-size: 2em;
- font-weight: bold;
- margin-right: auto;
- margin-left: 50px;
- list-style-type: none;
- cursor: pointer;
- }
- .logo a {
- text-decoration: none;
- }
- .toggle {
- display: none;
- list-style-type: none;
- margin: 0 20px;
- }
- .navbar-link {
- font-weight: bold;
- }
- .navbar-link:hover {
- color: black;
- }
- .navbar-link-login {
- font-size: 1em;
- background-color: var(--color-blue);
- padding: 8px 15px;
- border-radius: 18px;
- color: var(--color-background-white);
- cursor: pointer;
- border: 2px solid transparent;
- transition: var(--transition);
- }
- .navbar-link-login:hover {
- background: transparent;
- border-color: var(--color-green);
- color: var(--color-green);
- }
- .navbar-link-register {
- font-size: 1em;
- background-color: var(--color-green);
- padding: 8px 15px;
- border-radius: 18px;
- color: var(--color-background-white);
- cursor: pointer;
- border: 2px solid transparent;
- transition: var(--transition);
- }
- .navbar-link-register:hover {
- background: transparent;
- border-color: var(--color-blue);
- color: var(--color-blue);
- }
- @media screen and (max-width:1024px) {
- .navbar-list {
- flex-wrap: wrap;
- }
- .toggle {
- display: block;
- }
- .navbar-item {
- display: none;
- width: 100%;
- text-align: center;
- margin: 20px;
- }
- .navbar-button {
- display: block;
- }
- .active {
- display: block;
- }
- }
- @media screen and (max-width:425px) {
- .toggle {
- padding: 20px 0;
- }
- }
- /* ========== END NAVBAR ========== */
- /* ========== HEADER ========== */
- .header {
- padding: 70px 50px;
- }
- .header-container {
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
- justify-content: center;
- }
- .logo-idn {
- flex: 1;
- text-align: center;
- margin: auto;
- }
- .logo-img {
- width: 750px;
- border-radius: 3%;
- }
- .big-heading {
- flex: 1;
- margin-left: 30px;
- margin: auto;
- }
- .big-heading h1 {
- font-size: 3em;
- font-weight: 700;
- margin-bottom: 20px;
- color: black;
- }
- .big-heading p {
- color: var(--color-font);
- font-size: 1.5em;
- text-align: justify;
- margin-bottom: 45px;
- }
- .btn-explore {
- background-color: var(--color-green);
- border: none;
- padding: 20px 50px;
- border-radius: 15px;
- font-size: 1em;
- font-weight: bold;
- margin-right: 20px;
- }
- .btn-explore a {
- color: var(--color-background-white);
- text-decoration: none;
- }
- @media screen and (max-width:1440px) {
- .logo-img {
- width: 700px;
- border-radius: 3%;
- margin: 30px;
- }
- .big-heading {
- padding: 10px;
- margin: 0px;
- margin-top: 20px;
- }
- .btn-explore {
- margin-top: 10px;
- }
- }
- @media screen and (max-width:1024px) {
- .big-heading {
- margin-left: 30px;
- }
- .big-heading p {
- text-align: justify;
- }
- .btn-explore {
- background: #2081E2;
- border: none;
- padding: 20px 50px;
- border-radius: 12px;
- font-size: 1em;
- font-weight: bold;
- }
- }
- @media screen and (max-width: 912px) {
- .header-container {
- flex-direction: column;
- }
- .big-heading {
- margin: 0;
- text-align: center;
- }
- .logo-idn {
- margin-top: 50px;
- }
- .logo-img {
- width: 400px;
- }
- .big-heading h1 {
- margin-top: 30px;
- font-size: 3em;
- font-weight: 700;
- margin-bottom: 20px;
- color: black;
- text-align: center;
- }
- .big-heading p {
- font-size: 1.5em;
- margin-bottom: 50px;
- color: var(--color-font);
- text-align: justify;
- }
- .btn-explore {
- background: #2081E2;
- border: none;
- padding: 20px 50px;
- border-radius: 12px;
- font-size: 1em;
- font-weight: bold;
- margin-top: 20px;
- margin-right: 20px;
- }
- .btn-explore a {
- text-decoration: none;
- color: white;
- }
- .btn-explore:hover {
- background: #3ce260;
- }
- }
- @media screen and (max-width: 425px) {
- .navbar-list {
- margin: 0px;
- }
- .header {
- padding: 0px;
- }
- .header-container {
- flex-direction: column;
- }
- .big-heading {
- margin: 0;
- text-align: center;
- }
- .big-heading p {
- padding: 10px;
- }
- .logo-idn {
- display: none;
- }
- }
- /* ========== END HEADER ========== */
- /* ========== SYARAT PENDAFTARAN ========== */
- .collection {
- background: var(--color-bg-feed);
- margin-top: 30px;
- padding: 30px 0;
- text-align: center;
- }
- .collection h2 {
- color: black;
- font-size: 2.5em;
- margin: 0px 0px 0px 20px;
- }
- .collection h6 {
- color: var(--color-font);
- font-size: 1.3em;
- margin-bottom: 30px;
- }
- .collection-container {
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
- justify-content: center;
- }
- .list-persyaratan {
- padding: 20px;
- flex: 1;
- text-align: center;
- border-radius: 10px;
- margin: auto;
- }
- * .activity-feed {
- padding: 30px;
- list-style: none;
- text-align: start;
- font-size: large;
- }
- * .activity-feed .feed-item {
- position: relative;
- padding-bottom: 15px;
- padding-left: 30px;
- margin-top: 20px;
- text-align: justify;
- color: var(--color-font);
- border-left: 3px solid var(--color-background-white);
- }
- * .activity-feed .feed-item:last-child {
- border-color: transparent;
- }
- * .activity-feed .feed-item::after {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- left: -7px;
- width: 12px;
- height: 12px;
- border-radius: 50%;
- background: #177dff;
- }
- * .feed-item-default::after {
- background: #1a2035 !important;
- }
- * .feed-item-primary::after {
- background: #1572e8 !important;
- }
- * .feed-item-secondary::after {
- background: #6861ce !important;
- }
- * .feed-item-success::after {
- background: #31ce36 !important;
- }
- * .feed-item-danger::after {
- background: #f25961 !important;
- }
- * .feed-item-info::after {
- background: #48abf7 !important;
- }
- * .feed-item-warning::after {
- background: #ffad46 !important;
- }
- * .activity-feed .feed-item .date {
- display: block;
- position: relative;
- top: -5px;
- color: var(--color-font);
- text-transform: uppercase;
- font-size: 13px;
- }
- /* * .activity-feed .feed-item .text {
- position: relative;
- top: -3px;
- margin-bottom: 3px;
- } */
- .logo-list {
- flex: 1;
- text-align: center;
- margin: auto;
- }
- .list-img {
- width: 600px;
- padding: 10px;
- border-radius: 3%;
- }
- @media screen and (max-width:1024px) {
- .list-persyaratan {
- text-align: justify;
- flex: 25;
- }
- .activity-feed {
- padding: 0px;
- }
- .list-img {
- display: none;
- }
- }
- /* ========== END SYARAT PENDAFTARAN ========== */
- /* ========== STATUS KELULUSAN ========== */
- .collection-kelulusan {
- background: var(--color-background-body);
- padding: 30px;
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- .card-cek {
- background-color: #123261;
- padding: 20px;
- color: var(--color-background-white);
- border-radius: 15px;
- width: 830px;
- display: flex;
- justify-content: center;
- border: solid;
- }
- .card-cek h2 {
- text-transform: uppercase;
- }
- .input-name {
- margin-top: 10px;
- border-radius: 15px;
- width: 850px;
- height: 50px;
- font-size: 1.5em;
- padding: 10px;
- }
- .button-cek {
- border-radius: 30px;
- width: 880px;
- height: 50px;
- margin-top: 20px;
- border: 2px solid transparent;
- transition: var(--transition);
- background-color: #1572e8;
- }
- .button-cek:hover {
- border-color: var(--color-green);
- background-color: var(--color-green);
- }
- .button-cek h2 {
- color: var(--color-background-white);
- }
- @media screen and (max-width:768px) {
- .card-cek {
- width: 400px;
- }
- .input-name {
- width: 430px;
- }
- .button-cek {
- width: 455px;
- }
- }
- @media screen and (max-width:425px) {
- .card-cek {
- width: 280px;
- font-size: small;
- }
- .input-name {
- height: 20;
- width: 300px;
- height: 20px;
- font-size: small;
- }
- .button-cek {
- margin-top: 10px;
- width: 320px;
- }
- }
- /* ========== END STATUS KELULUSAN ==========*/
- /* ========== IDN IT FEST ========== */
- .collection-itfest{
- background: var(--color-background-white);
- padding: 30px 0;
- text-align: center;
- }
- .collection-itfest h2{
- color: black;
- font-size: 2.5em;
- margin: 0px 0px 0px 20px;
- }
- .collection-itfest-container{
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- }
- .collection-itfest-card{
- display: flex;
- flex-direction: column;
- margin: 18px;
- margin-top: 15px;
- background: white;
- border-radius: 10px;
- box-shadow: 0 0 10px #ccc;
- }
- .collection-itfest-card:hover{
- box-shadow: 0 0 15px #bbb;
- }
- .image-box{
- width: 300px;
- height: 300px;
- overflow: hidden;
- border-radius: 10px 10px 0 0;
- }
- .image-box:hover{
- box-shadow: 0 0 2rem 0.5rem rgba(0, 0, 0, 0.1);
- }
- .image-box img{
- width: 100%;
- height: 100%;
- transition: 0.5s ease-in-out;
- }
- .image-box:hover img{
- transform: scale(1,2);
- }
- .collection-itfest-card h3{
- font-size: 1.5em;
- color: var(--color-font);
- padding: 10px;
- }
- .card-button{
- border-radius: 10px;
- height: 30px;
- margin: 10px;
- background-color: var(--color-blue);
- color: var(--color-background-white);
- border: 0;
- font-size: 1.1em;
- cursor: pointer;
- }
- /* ========== END IDN IT FEST ========== */
- /* ========== PROFILE ========== */
- .collection-profile{
- background: var(--color-background-white);
- padding: 30px 0;
- text-align: center;
- }
- .collection-profile h2{
- color: black;
- font-size: 2.5em;
- margin: 0px 0px 0px 20px;
- }
- .collection-profile-container{
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- }
- .collection-profile-card{
- display: flex;
- flex-direction: column;
- margin: 18px;
- margin-top: 15px;
- background: white;
- border-radius: 10px;
- box-shadow: 0 0 10px #ccc;
- }
- /* ========== END PROFILE ========== */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement