Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- margin: 0;
- padding: 0;
- font-family: 'Poppins', sans-serif;
- box-sizing: border-box;
- }
- :root{
- --primary-color: #080808;
- --secondary-color: #fff;
- --tertiary-color: #ffefd3;
- }
- .light-mode{
- --primary-color: #fff;
- --secondary-color: #080808;
- --tertiary-color: #080808;
- }
- #preloader{
- background:#000 url(/about-borislav/images/Spin-1s-200px.gif) no-repeat center center;
- height: 100vh;
- width: 100%;
- position: fixed;
- z-index: 100;
- }
- html{
- scroll-behavior: smooth;
- }
- body {
- background: var( --primary-color);
- color: var( --secondary-color);
- }
- #header {
- width: 100%;
- height: 100vh;
- background-image: url();
- background-size: cover;
- background-position: center;
- }
- .container {
- padding: 10px 10%;
- }
- nav {
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- }
- #sunIcon{
- width: 32px;
- cursor: pointer;
- }
- #sunIcon:hover{
- color: #ffff05;
- }
- nav ul{
- flex: 1;
- text-align: right;
- margin-right: 20px;
- }
- .logo {
- width: 140px;
- }
- nav ul li {
- list-style: none;
- display: inline-block;
- margin: 10px 10px;
- }
- nav ul li a {
- color: var( --secondary-color);
- text-decoration: none;
- font-size: 20px;
- position: relative;
- }
- nav ul li a::after {
- content: '';
- width: 0;
- height: 3px;
- left: 0;
- position: absolute;
- background: #ff004f;
- bottom: -5px;
- transition: 0.6s;
- }
- nav ul li a:hover {
- color: #7c0f0f;
- }
- nav ul li a:hover::after {
- width: 100%;
- }
- .info-person {
- margin-top: 20%;
- font-size: 30px;
- }
- .info-person p span {
- background: #193047;
- color: var(--tertiary-color);
- font-family: "Lato", "Arial", "Helvetica", sans-serif;
- ;
- border: 2px solid var(--tertiary-color);;
- border-radius: 12px;
- padding: 2px 5px;
- }
- .info-person h1 {
- font-size: 50px;
- margin-top: 10px;
- }
- .info-person h1 span {
- color: #da1616;
- }
- /* ----------------about Me------------------- */
- .about-person {
- padding: 80px 0;
- color: var(--tertiary-color);
- }
- .row {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- }
- .col-1-about {
- flex-basis: 35%;
- }
- .col-1-about img {
- width: 100%;
- border-radius: 15px;
- }
- .col-2-about {
- flex-basis: 60%;
- }
- .col-2-about h1 {
- font-size: 50px;
- font-weight: 600;
- color: var(--tertiary-color);
- }
- .col-2-about p {
- color: var(--tertiary-color);
- }
- .educations-tab {
- display: flex;
- margin: 20px 0 40px;
- }
- .links {
- margin-right: 50px;
- font-size: 18px;
- position: relative;
- font-weight: 500;
- cursor: pointer;
- }
- .educations-tab p {
- color: var(--tertiary-color);
- font-size: 22px;
- }
- .links::after {
- content: '';
- position: absolute;
- left: 0;
- width: 0;
- height: 3px;
- background: #ff004f;
- bottom: -6px;
- transition: 0.5s;
- }
- .links.active::after {
- width: 50%;
- }
- .education-content ul li {
- list-style: none;
- margin: 13px 0;
- font-size: 14px;
- }
- .education-content ul li span {
- color: #9f4040;
- font-weight: 600;
- font-size: 20px;
- }
- body>div.about-person>div>div>div.col-2-about>div.education-content>ul>li:nth-child(4)>span:nth-child(2) {
- color: #e8f809;
- font-size: 25px;
- }
- .education-content {
- display: none;
- }
- .education-content.active-content {
- display: block;
- }
- /* ------------- service-------------- */
- #services {
- padding: 30px 0;
- }
- #services>div>h1 {
- color: var(--tertiary-color);
- font-size: 40px;
- }
- .services-list {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- grid-gap: 40px;
- margin-top: 60px;
- }
- .services-list div {
- background: #414040;
- font-size: 16px;
- border-radius: 15px;
- font-weight: 400;
- padding: 40px;
- transition: backgrond 0.5s, transform 0.5s;
- }
- .services-list div i {
- font-size: 50px;
- margin-bottom: 30px;
- }
- .services-list div h2 {
- color: #0d62d0;
- font-size: 30px;
- margin-bottom: 20px;
- font-weight: 700;
- }
- .services-list div a {
- display: inline-block;
- font-size: 20px;
- margin-top: 20px;
- color: var(--tertiary-color);
- text-decoration: none;
- cursor: pointer;
- font-weight: 400;
- }
- .services-list div:hover {
- background: #ef0751;
- transform: translateY(-15px);
- }
- .services-list div a:hover {
- color: #193047
- }
- /* -------------- portfolio--------------- */
- #portfolio {
- padding: 30px 0;
- }
- .workList {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- grid-gap: 30px;
- margin-top: 50px;
- }
- .work {
- border-radius: 15px;
- position: relative;
- overflow: hidden;
- }
- .work img {
- width: 70%;
- border-radius: 15px;
- display: block;
- transition: transform 0.5s;
- transition: border-radius 0.5s;
- }
- .layer-line {
- width: 70%;
- height: 0;
- position: absolute;
- background: linear-gradient(rgba(0, 0, 0, 0.7), #ff004f);
- border-radius: 10px;
- left: 0;
- bottom: 0;
- overflow: hidden;
- display: flex;
- text-align: center;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- padding: 0 40px;
- font-size: 14px;
- transition: height 0.6s;
- }
- #services > div > div p {
- color: var(--tertiary-color);
- }
- .layer-line h3 {
- font-weight: 500;
- margin-bottom: 20px;
- }
- .layer-line a {
- margin-top: 20px;
- font-size: 18px;
- color: #ff004f;
- text-decoration: none;
- line-height: 60px;
- background: var(--tertiary-color);
- width: 60px;
- height: 60px;
- border-radius: 50%;
- text-align: center;
- align-items: center;
- }
- .work:hover img {
- transform: scale(1.1);
- }
- .work:hover .layer-line {
- height: 102%;
- width: 74%;
- }
- .btn {
- margin: 50px auto;
- text-align: center;
- display: block;
- width: fit-content;
- border-radius: 8px;
- padding: 14px 40px;
- margin-left: 37.5%;
- text-decoration: none;
- color: var(--tertiary-color );
- border: 1px solid #ff004f;
- }
- .btn:hover {
- background: #ff004f;
- }
- /*----------------CONTACT---------------------------- */
- .left-side {
- flex-basis: 35%;
- }
- .right-side {
- flex-basis: 60%;
- }
- .left-side p {
- margin-top: 20px;
- margin-bottom: 15px;
- }
- .left-side p i {
- font-size: 25px;
- margin-right: 15px;
- }
- #contact > div.container > div > div.left-side > p:nth-child(3) > a{
- color: var( --secondary-color);
- text-decoration: none;
- }
- #contact > div.container > div > div.left-side > p:nth-child(3) > a:hover{
- background: linear-gradient(179deg, #42cae2, #165798);
- border-radius: 6px;
- padding: 2px 10px;
- }
- #contact > div.container > div > div.left-side > p:nth-child(3){
- transition: transform 1s;
- }
- #contact > div.container > div > div.left-side > p:nth-child(3):hover {
- transform: translateY(-5px);
- }
- #contact > div.container > div > div.left-side > p:nth-child(2) > a{
- color: var( --secondary-color);
- text-decoration: none;
- }
- #contact > div.container > div > div.left-side > p:nth-child(2) > a:hover{
- background: linear-gradient(179deg, #42cae2, #165798);
- border-radius: 6px;
- padding: 2px 10px;
- }
- #contact > div.container > div > div.left-side > p:nth-child(2){
- transition: transform 1s;
- }
- #contact > div.container > div > div.left-side > p:nth-child(2):hover{
- transform: translateY(-5px);
- }
- .social-icons {
- margin-top: 50px;
- }
- .social-icons a {
- font-size: 40px;
- margin-right: 10px;
- text-decoration: none;
- display: inline-block;
- transition: transform 0.5s;
- }
- .social-icons a:hover {
- color: crimson;
- transform: translateY(-5px);
- }
- .btn.btn2 {
- display: inline-block;
- background: linear-gradient(179deg, #42cae2, #165798);
- margin-left: 0.5%;
- border: 1px solid #165798;
- border-radius: 15px;
- padding: 10px 31px;
- transition: transform 0.5s;
- }
- .btn.btn2:hover {
- transform: translateY(-5px);
- }
- .right-side form {
- width: 100%;
- }
- form input,
- form textarea {
- border: 0;
- width: 100%;
- outline: none;
- background: #414040;
- margin: 15px 0;
- padding: 15px;
- font-size: 15px;
- color: var(--tertiary-color);
- border-radius: 10px;
- }
- form .btn.btn2 {
- padding: 15px 60px;
- margin-top: 20px;
- cursor: pointer;
- font-size: 15px;
- }
- .copyright {
- width: 100%;
- margin-top: 30px;
- padding: 20px 0;
- background: #414040;
- text-align: center;
- text-shadow: 10px 20px 40px #d41010;
- }
- .copyright a {
- text-decoration: none;
- color: var( --secondary-color);
- }
- .copyright a:hover {
- color: #ff004f;
- }
- /* ======== mobile version========== */
- nav ul .fa-regular {
- display: none;
- }
- nav .fa-solid {
- display: none;
- }
- @media only screen and (max-width: 600px) {
- #header {
- background-image: url();
- }
- .info-person {
- margin-top: 70%;
- font-size: 16px;
- }
- .info-person h1 {
- font-size: 30px;
- }
- nav ul .fa-regular {
- display: block;
- font-size: 25px;
- }
- nav .fa-solid {
- display: block;
- font-size: 30px;
- }
- nav ul{
- background: #165798;
- position: fixed;
- top: 0;
- border:1px solid var(--primary-color);
- border-top-left-radius: 20px;
- border-bottom-left-radius: 20px;
- right: -220px;
- width: 220px;
- height: 100vh;
- padding-top: 40px;
- z-index: 2;
- transition: right 1s;
- }
- nav ul li {
- display: block;
- margin: 25px;
- }
- nav ul .fa-regular {
- position: absolute;
- top: 25px;
- left: 25px;
- cursor: pointer;
- border-radius: 50%;
- padding: 5px;
- }
- #about h1{
- font-size: 40px;
- }
- .col-1-about, .col-2-about{
- flex-basis: 100%;
- }
- .col-1-about{
- margin-bottom: 30px;
- }
- .col-2-about{
- font-size: 14px;
- }
- .links{
- margin-right: 18px;
- }
- .educations-tab p {
- color: var(--tertiary-color);
- font-size: 18px;
- }
- .copyright{
- font-size: 14px;
- flex-basis: 100%;
- }
- #portfolio > div > a {
- margin-left:20%;
- }
- .btn {
- margin-left: 20%;
- }
- .right-side form {
- width: 160%;
- }
- #contact > div.copyright > p{
- font-size: 12px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement