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;
- --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 ========== */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement