File Manager

Editing: e-commerce.css

body{background-color:#fff;}
 .top input,.topro input{background-color:#fff;color:#000;text-align:center}.open-btn,.pricetag p,.search-result a,.seeall a,.title{font-weight:900}footer{background-color:#000}.about,.card,.card-back,.categories a,.generalcard,.overlay-content,.top input,.topro input,footer{text-align:center}.categs a,.overlay-content a{display:block;text-decoration:none}.categories a,.categs a,.overlay a,.overlay-content a,.region-dropdown a,.search-result a,.seeall a,.topro a,footer a{text-decoration:none}.landing{height:80svh;animation:20s ease-in-out infinite fade;background-position:center;background-size:100%;background-repeat:no-repeat}.top,.topro{width:97%;margin:auto;background-color:#40e350;position:fixed;z-index:2;display:flex;top:0}.top{justify-content:space-between;padding:1em}.topro{justify-content:space-between;padding:.5em 1em .5em .5em}.title{color:#fff;font-family:Georgia,'Times New Roman',Times,serif;font-size:xx-large;margin-left:1em}.search{width:50%}.top input{width:50%;padding:9px;border-radius:9px;border:none}.topro input{width:50%;padding:5px;border-radius:9px;border:none}.topro a{margin:auto 0;padding:5px;color:#fff}.open-btn{font-size:24px;cursor:pointer;margin-right:1em;color:#fff}.overlay{height:98%;width:0;position:fixed;top:5px;right:0;background-color:rgba(0,0,0,.749);overflow-x:hidden;transition:.5s;z-index:2;border-radius:3px}.overlay a:hover{color:#75ff83}.overlay-content{position:relative;top:10%;width:80%;margin:auto}.overlay-content a{padding:8px;font-size:16px;color:#fff;transition:.3s}.overlay-content a:hover{color:#75ff83;}.overlay .close-btn{position:absolute;top:20px;right:35px;font-size:36px;cursor:pointer;color:#fff;font-weight:900} @media (min-width: 769px) {.search-result {color: #000;cursor: pointer;border-radius: 5px;background-color: #75ff83d6;width: 60%;max-height: 60vh;overflow-y: auto;position: fixed;top: 14%;left: 50%;transform: translateX(-50%);padding-left: 10px; z-index: 3; box-shadow: 0 4px 12px rgba(0, 0, 0, 1);}.search-result p, .search-result h4{margin-left: 10px;}}

.card-back button,.card-desc,.sellform button{background-color:red}.card-inner,.categories,.pricetag,.search-result a{position:relative}.search-result a{color:#000;margin:auto;padding:1em}.card-back a,.footerservices a:hover,.search-result a:hover{color:#fff}.categories{width:80%;margin:6% auto auto;padding:5px;display:flex;justify-content:space-around}.categs a{padding:5px;font-size:16px;color:#75ff83;transition:.3s}.filter,.footerlinks,.products,.sellform,.socialmediaicons,.socials{display:flex}.categs a:hover{color:#fff;border-bottom:none;font-size:20px}.categs h4{margin:auto;color:#fff;font-size:24px;border-bottom:1px solid #fff;width:60%}.categories a{color:#000;font-size:large}.categories a:hover{color:green;}.products{height:auto;flex-wrap:wrap;width:89%;margin:auto;padding:1em}.card{margin:auto;height:89%;color:#fff;border-radius:5px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6)}.generalcard{flex-grow:1;flex-basis:200px;margin:1em;height:19em;width:10em;color:#fff;}.pricetag{bottom:0;height:10%;padding:1px;width:98%;margin:auto;color:red;align-content:center}.pricetag p{margin:0;align-content:center}.card-inner{width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}.card-back,.card:hover .card-inner{transform:rotateY(180deg)}.card-back,.card-front{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:5px}.card-front{background:#fff}.card-back{background:#40e350}.card-back button{color:#fff;padding:10px;border:none;border-radius:5px}.slideshow{width:100%;height:100%;overflow:hidden;position:relative}.slideshow img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;animation:6s infinite slideshow;transition:opacity;border-radius:6px}@keyframes slideshow{0%,100%,20%,75%{transform:translateX(0)}25%,45%{transform:translateX(-100%)}50%,70%{transform:translateX(-200%)}}.slideshow img:nth-child(2){animation-delay:2s}.slideshow img:nth-child(3){animation-delay:4s}@keyframes fade{0%{background-image:url(./images/landingbanner.jpg)}25%{background-image:url(./images/landingbanner2.jpg)}50%{background-image:url(./images/2021-03-15_eCommerceCOVID19report-1-1220x675px.jpg)}75%{background-image:url(./images/landingfashion.jpg)}100%{background-image:url(./images/e-commerce_women_card_computer_achat.jpg)}}
 
 .seeall{background-color:#40e350;border:none;border-radius:5px;position:relative;padding:10px;color:#fff;font-weight:400}.addmessage,.sellform,.sellform select option{background-color:#40e351}.seeall a{color:#fff}.about{width:92%;border-radius:10px;margin:auto;font-size:x-large}.socials,.socials a:hover{font-size:28px}footer{height:auto;color:#fff;padding-bottom:1em}footer a{color:#fff;padding:2px}footer a:hover{color:#75ff83;font-size:22px}.footerlinks{justify-content:space-around;padding-bottom:1em}.footerlinks div{display:flex;flex-direction:column;text-align:start}.footerservices{margin-left:3em}.footerservices a{color:#75ff83;font-size:21px}.footercontacts{margin-right:3em}.footercontacts a{padding:2px;margin-bottom:2px}.footercontacts span,hr{margin:auto;position:relative}.footercontacts i{font-size:22px}.footercontacts span{top:-20%;font-size:18px}.footercontacts input{padding:5px;border-radius:5px;width:100%;text-align:center}hr{width:30%;color:#fff;top:50%}.socials{width:25%;justify-content:space-around}.sellform{width:55%;height:auto;margin:1em auto;flex-direction:column;padding:1em 3em;border-radius:5px;color:#fff}.sellform input,select,textarea{margin-bottom:1em;padding:7px;border-radius:5px;border:none}.sellform textarea{resize:none}.sellform h2{margin:auto;text-align:center}.sellform select option{text-align:center}.sellform button{padding:10px;color:#fff;border:none;border-radius:5px}section{width:80%;margin:5% auto auto;padding:1em;font-size:larger}.addmessage{width:50%;margin:3% auto 3% auto;padding:2em;font-size:larger;border-radius:5px}.filter{position:relative;justify-content:space-around;margin-top:0.5em}.region-filter{width:40%;margin:auto}.categories-section{position:relative;display:none;width:50%;margin:auto}.categories-section .dropdown-btn{width:100%;margin:auto;background-color:#40e350;color:#fff;padding:10px;font-size:16px;border:none;border-radius:5px;cursor:pointer;text-align:left}.categories-section .dropdown-btn:hover,.region-btn:hover{background-color:#75ff83}.categories-section .dropdown-content{display:none;position:absolute;top:100%;left:0;width:100%;background-color:#fff;box-shadow:0 4px 8px rgba(0,0,0,.1);z-index:10;border-radius:5px;overflow:hidden}.categories-section .dropdown-content a{display:block;padding:10px 15px;text-decoration:none;color:#333;background-color:#fff;border-bottom:1px solid #ddd}.categories-section .dropdown-content a:hover{background-color:#f2f2f2;color:#40e350}
 
 @media screen and (max-width:655px){  .cta{width:90%;margin:0;}hr{width:10%;color:#fff;top:50%}.socials{width:50%;justify-content:space-around}.over{height:20%;overflow-y:scroll;font-size:small;}.categories-section{display:block}.top,.topro{background-color:#40e351}.categories,.landing,.search-result{position:relative}.categories,.footercontacts input{display:none}.categories,.footerlinks div,.generalcard{text-align:center}body,html{background-color:white;margin:0;overflow-x:hidden}.title{color:#fff;width:15%;font-size:1.6em;margin-left:0;padding:auto;font-weight:900}.top{padding:.5em;width:97svw}.open-btn{margin-right:.2em}.top input,.topro input{width:60%;padding:5px;border-radius:5px}.categories{width:95%;margin-top:3em;overflow-x:scroll}.categories a{font-size:small;margin:0 3px}.addmessage{width:50%;margin-top:4.5em;}   .search-result {
    color: black;background-color: white;width: 80%;max-height: 60vh;overflow-y: auto;z-index: 1;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9); position: fixed;top: 12%;left: 50%;transform: translateX(-50%); padding-left: 10px;}.search-result p, .search-result h4{margin-left: 10px;}.region-dropdown {right: 40px;left: auto;}.landing{height:12em;background-color:#40e351;margin:3em 0 0;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6)}.generalcard{flex-grow:1;flex-basis:135px;margin:.5em;height:15em;width:12em;color:#fff}.sellform h1{font-size:1.6em}.sellform{width:70%}.footerlinks{display:inline}.footercontacts,.footerservices{margin:auto}.footerlogo p{font-size:small;margin:0}.card-back p{margin: 0;}}@media screen and (min-width:655px) and (max-width:1030px){.landing{height:23em;position:relative;background-color:#40e351;margin:3em 0 0}.categories{width:95%;display:block;margin-top:4em;position:relative;text-align:center}.categories a{margin:0 3px}}.region-btn,.region-dropdown a:hover{background-color:#40e350;color:#fff}.region-filter{position:relative;display:inline-block}.region-btn{padding:10px;border:none;cursor:pointer;border-radius:5px;font-size:16px;outline:0}.region-dropdown {position: absolute;background-color: #fff;border: 1px solid #ddd;border-radius: 5px;width: 250px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);z-index: 3;padding: 10px;max-height: 60vh; overflow-y: auto; }.region-dropdown a{color:#333;display:block;padding:10px;border-radius:5px}.region-dropdown .active{font-weight:700} @media screen and (min-width:656px){.filter{margin-top:0.5em}.region-filter{position:relative;display:inline-block;width:20%;margin-left:10%}.region-btn{background-color:#40e350;color:#fff;padding:10px;border:none;cursor:pointer;border-radius:5px;font-size:16px;outline:0}}.advertisement{background-color: rgb(61, 120, 209);width: 95%;margin: auto;padding: 1em;height: auto;margin-bottom: 3%;color: white;}.advertisement button{ position: relative;width: 60%;margin: auto;color: white;background-color: red;padding: 5px;border-radius: 5px;margin-left: auto;border:none;}.advertisement button a{color:white;}.advertisement h3{ width: 80%;margin: auto;}
 .cta{overflow:hidden;display:flex;justify-content:space-between;width:50%;margin:auto;} @media screen and (max-width:657px){.cta{width:85%;margin:auto;}}.product-success-message{background-color: #40e350;color: white;width: 70%;margin: auto;text-align: center;align-content: center;border-radius: 5px;margin-bottom: 1em;} 
 
 
     /* Modal container */
#notification-prompt {
    position: fixed;
    top: 10px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Modal content */
#notification-prompt .modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    text-align: center;
}

/* Modal text */
#notification-prompt p {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

/* Modal buttons */
#notification-prompt .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#notification-prompt .btn-primary,
#notification-prompt .btn-secondary {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

#notification-prompt .btn-primary {
    background: #40e350;
    color: white;
}

#notification-prompt .btn-secondary {
    background: #e0e0e0;
    color: #333;
}

#notification-prompt .btn-primary:hover {
    background: #35c042;
}

#notification-prompt .btn-secondary:hover {
    background: #d0d0d0;
}

⬅ Back