From 7a1541c0040b6ce424ad8af2057aa11b7fee93c7 Mon Sep 17 00:00:00 2001 From: Sadaf <137484958+SadafKausar2025@users.noreply.github.com> Date: Sun, 12 May 2024 22:16:22 +0530 Subject: [PATCH] styled the buttons of the projects. --- style.css | 204 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 113 insertions(+), 91 deletions(-) diff --git a/style.css b/style.css index 5c666872..35e941da 100644 --- a/style.css +++ b/style.css @@ -12,10 +12,11 @@ body { padding: auto; background-color: rgb(19, 24, 44); } + /* heading */ h1 { color: #fff; - margin: 1.5em 0 1.5em 0 ; + margin: 1.5em 0 1.5em 0; font-family: 'Bitter'; font-size: 45px; text-transform: uppercase; @@ -25,6 +26,7 @@ h1 { padding: 15px 20px; position: relative; } + h1:after { background: none repeat scroll 0 0 transparent; bottom: 0; @@ -37,6 +39,7 @@ h1:after { transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } + h1:hover:after { width: 100%; left: 0; @@ -44,11 +47,12 @@ h1:hover:after { /* CARDS DESIGN STARTS */ -.image{ +.image { padding: .5em; transition: 0.3s; } -.image:hover{ + +.image:hover { padding: 0; } @@ -57,7 +61,7 @@ h1:hover:after { justify-content: center; align-items: center; justify-content: space-evenly; - + margin-top: 4vmin; flex-wrap: wrap; } @@ -78,26 +82,29 @@ h1:hover:after { width: 20rem; transition: .2s; } + .stylebox:hover { - + box-shadow: 15px 15px 17px #000; } + .stylebox .image { width: 98%; overflow: hidden; height: 13rem; border-radius: .5em; transition: .4s; - margin:auto; + margin: auto; } -.stylebox .image:hover{ +.stylebox .image:hover { transform: scale(1.17); border-radius: .5em; } + /* */ -.card-heading{ +.card-heading { display: flex; font-size: 18px; font-weight: bold; @@ -105,25 +112,29 @@ h1:hover:after { font-family: 'Bitter'; text-transform: capitalize; } -.card-data{ + +.card-data { display: flex; flex-direction: column; } -button{ - border: 2px solid #101522; +button { + border-radius: 18px; + background-color: rgb(210, 206, 206); + border: none; + box-shadow: #777; width: 95%; font-size: 1em; font-family: 'Bitter'; font-weight: bold; padding: .5em; transition: 0.3s; - margin-bottom: 1em ; + margin-bottom: 1em; } -.btnn:hover{ - background-color: #101522; - color: #fff; +.btnn:hover { + background-color: rgb(198, 194, 194); + color: white; } @media only screen and (max-width: 600px) { @@ -135,12 +146,14 @@ button{ margin: 0 auto; margin-top: 10vmin; } + .stylebox { padding: .3rem; margin: auto; width: 18rem; margin-bottom: 1.5rem; } + .stylebox .image { overflow: hidden; width: 17rem; @@ -172,14 +185,17 @@ button{ z-index: 1000; text-decoration: none; } + #scroll-top:hover { -webkit-box-shadow: 0 0 10px 2px rgba(26, 1, 253, 0.42); -moz-box-shadow: 0 0 10px 2px rgba(26, 1, 253, 0.42); box-shadow: 0 0 10px 2px rgba(26, 1, 253, 0.42); } + #scroll-top.active { bottom: calc(100% - 36rem); } + /* scroll top ends */ /* NAVABR STARTS HERE */ @@ -189,77 +205,79 @@ a { color: white; letter-spacing: .5px; transition: .3s; - } - a:hover{ - color: #c69; - transform: translateY(-10%); - } - .navbar-nav a.active{ - color: #c69; - } - - li { +} + +a:hover { + color: #c69; + transform: translateY(-10%); +} + +.navbar-nav a.active { + color: #c69; +} + +li { list-style: none; - } +} - .navbar{ - background-color: rgb(19, 24, 44); - } - .navbar-toggler{ - color: white; - line-height: 10px; - transform: translate(50%, -200%); - } +.navbar { + background-color: rgb(19, 24, 44); +} + +.navbar-toggler { + color: white; + line-height: 10px; + transform: translate(50%, -200%); +} -.nav-link{ +.nav-link { font-family: 'Space Mono', monospace; - margin:0 1em ; + margin: 0 1em; font-size: 16px; } -span{ + +span { color: #c69; } -.navbar-brand{ - font-family: 'Space Mono',monospace; - +.navbar-brand { + font-family: 'Space Mono', monospace; + } -.navbar-brand:hover{ +.navbar-brand:hover { transform: none; color: white; } -#navbarText{ +#navbarText { justify-content: right; align-items: right; } -@media only screen and (max-width: 786px) { - -} +@media only screen and (max-width: 786px) {} + - /* NAVBAR ENDS HERE */ /* MISC. DESIGNING */ -.tags{ +.tags { padding: 0; margin: 0; - color: #c69; - font-family: 'Space Mono'; - font-size: 16px; - opacity: 70%; + color: #c69; + font-family: 'Space Mono'; + font-size: 16px; + opacity: 70%; } -.tags-opening{ +.tags-opening { transform: translate(24%, 290%); } -#counter{ +#counter { color: white; font-family: 'Bitter'; text-align: center; @@ -268,18 +286,20 @@ span{ border-top-right-radius: 100px; border-bottom-right-radius: 100px; padding: .2em .5em .2em .9em; - + box-shadow: 0px 10px 10px #000; } -@media only screen and (max-width: 786px){ - .tags-opening{ +@media only screen and (max-width: 786px) { + .tags-opening { transform: translate(10%, 200%); } - .heading{ + + .heading { font-size: 36px; } - .searchBox{ + + .searchBox { margin-bottom: 2em; } } @@ -291,7 +311,7 @@ span{ /* SEARCH BOX STARTS */ -.searchBar{ +.searchBar { outline: none; border: 2px solid #c69; border-top-left-radius: 100px; @@ -304,10 +324,10 @@ span{ text-align: left; width: 250px; box-shadow: 0px 10px 10px #000; - + } -.searchBox{ +.searchBox { display: flex; flex-direction: row; justify-content: center; @@ -354,9 +374,9 @@ span{ margin-bottom: 10px; } -.image img{ - width:100%; - height:100%; +.image img { + width: 100%; + height: 100%; } #footer .footer-top .footer-info p { @@ -478,46 +498,48 @@ span{ .loading { - opacity: 0; - display: flex; - justify-content:center; - width:100%; - /* position: fixed; */ - /* bottom: 50px; */ - /* left: 50%; */ - /* transform: translateX(-50%); */ - transition: opacity .3s ease-in; - margin:10px; - margin-bottom:20px; + opacity: 0; + display: flex; + justify-content: center; + width: 100%; + /* position: fixed; */ + /* bottom: 50px; */ + /* left: 50%; */ + /* transform: translateX(-50%); */ + transition: opacity .3s ease-in; + margin: 10px; + margin-bottom: 20px; } .loading.show { - opacity: 1; + opacity: 1; } .ball { - background-color: #777; - border-radius: 50%; - margin: 5px; - height: 10px; - width: 10px; - animation: jump .5s ease-in infinite; + background-color: #777; + border-radius: 50%; + margin: 5px; + height: 10px; + width: 10px; + animation: jump .5s ease-in infinite; } .ball:nth-of-type(2) { - animation-delay: 0.1s; + animation-delay: 0.1s; } .ball:nth-of-type(3) { - animation-delay: 0.2s; + animation-delay: 0.2s; } @keyframes jump { - 0%, 100% { - transform: translateY(0); - } - - 50% { - transform: translateY(-10px); - } + + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-10px); + } } \ No newline at end of file