Profilecard

<!
doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-
scale=1'>
<title>projet E-commerce</title>
<link
href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'
rel='stylesheet'>
<link
href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' rel='stylesheet'>
{{-- <link
href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css"> --}}
<script
src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script
src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type='text/javascript'
src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<style>@import url('https://fonts.googleapis.com/css2?
family=Poppins&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif
}
body {
background-color: #f4f4f4;
overflow-x: hidden;
}
.conteneur{
background-color: rgba(220,220,220,0.8);
height: 27%;
font-size: 19px;
font-weight: 700;
color: #171718;
padding: 30px;
width: 100%;
position: absolute;
overflow: hidden;
#header {
width: 100%;
height: 60px;
box-shadow: 5px 5px 15px #e8e8e8
}
#content{
position: absolute;
top: 47%;
left: 16%;
width: 83%;
}
.col-md-6 {
padding-top: 1%;
/* -webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%; */
}
.col-lg-4,
.col-md-6 {
padding-right: 0;
padding-top: 1%;
}
button.btn.btn-hide {
height: inherit;
background-color: #ff935d;
color: #fff;
font-size: 0.82rem;
padding-left: 40px;
padding-right: 40px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px
}
.btn:focus {
box-shadow: none
}
.box-label .btn {
background-color: #fff;
padding: 0;
font-size: 0.8rem
}
.btn-red {
background-color: #e00000ce
}
.btn-orange {
background-color: #ffa500
}
.btn-pink {
background-color: #e0009dce
}
.btn-green {
background-color: #00811c
}
.btn-blue {
background-color: #026bc2
}
.btn-brown {
background-color: #994a00
}
.navbar {
display: inline-flex
}
.pagination .page-item .page-link {

color: #333;
border: none;
width: 40px;
text-align: center
}
.pagination .page-item.active .page-link {

border: 1px solid #333
}
select {
outline: none;
padding: 6px 12px;
margin: 0px 4px;
color: #999;
font-size: 0.85rem;
width: 140px
}
#select2 {
border: 1px solid #777;
color: #999
}
#pro {
border: none;
color: #333;
font-weight: 700;
padding-left: 0px;
width: initial
}
#filterbar {
width: 30%;
border: 1px solid #ddd;
border-radius: 15px;
float: left
}
#filterbar input[type="radio"] {
visibility: hidden
}
#filterbar input[type='radio']:checked {
background-color: #16c79a;
border: none
}
#filterbar .btn.btn-success {
background-color: #ddd;
color: #333;
border: none;
width: 115px
}
#filterbar .btn.btn-success:hover {
background-color: #aff1e1;
color: #444
}
#filterbar .btn-success:not(:disabled):not(.disabled).active,
#filterbar .btn-success:not(:disabled):not(.disabled):active {
color: #fff
}
label {
cursor: pointer
}
.tick {
display: block;
position: relative;
padding-left: 23px;
cursor: pointer;
font-size: 0.9rem;
margin: 0
}
.tick input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0
}
.check {
position: absolute;
top: 1px;
left: 0;
height: 18px;
width: 18px;
border: 1px solid #ddd;
border-radius: 3px
}
.tick:hover input~.check {
background-color: #f3f3f3
}
.tick input:checked~.check {
background-color: #ffffff
}
.check:after {
content: "";
position: absolute;
display: none
}
.tick input:checked~.check:after {
display: block;
transform: rotate(45deg) scale(1)
}
.tick .check:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid rgb(0, 0, 0);
border-width: 0 3px 3px 0;
transform: rotate(45deg) scale(2)
}
.box {
padding: 10px
}
.box-label {
color: #11698e;
font-size: 0.9rem;
font-weight: 800
}
#inner-box,
#inner-box2 {
height: 150px;
overflow-y: scroll
}
#inner-box2 {
height: 132px
}
#inner-box::-webkit-scrollbar,
#inner-box2::-webkit-scrollbar {
width: 6px
}
#inner-box::-webkit-scrollbar-track,
#inner-box2::-webkit-scrollbar-track {
border-radius: 2px
}
#inner-box::-webkit-scrollbar-thumb,
#inner-box2::-webkit-scrollbar-thumb {
background-color: #333;
border-radius: 2px
}
#price {
height: 45px
}
#size input[type="checkbox"] {
visibility: hidden
}
#size input[type='checkbox']:checked {
border: none
}
#size .btn.btn-success {
color: #333;
border: none;
width: 40px;
font-size: 0.8rem;
border-radius: 0
}
#size .btn.btn-success:hover {
color: #444
}
#size .btn-success:not(:disabled):not(.disabled).active,
#size .btn-success:not(:disabled):not(.disabled):active {
color: #fff
}
#size label {
margin: 10px;
margin-left: 0px
}
.card {
padding: 10px;
cursor: pointer;
transition: .3s all ease-in-out;
height: 432px;
}
.card:hover {
box-shadow: 2px 2px 15px rgb(255 208 224);

transform: scale(1.02)
}
.card .product-name {
font-weight: 600
}
.card-body {
top: 41%;
left: 29%;
position: absolute;
width: 47%;
padding-bottom: 0;
}
.card .text-muted {
font-size: 0.82rem
}
.card-img img {
position: absolute;
top: 14%;
width: inherit;
height: 169px;
object-fit: contain;
display: block;
}
.card-body .btn-group .btn {

padding: 0;
width: 20px;
height: 20px;
margin-right: 5px;
border-radius: 50%;
position: relative
}
.card-body .btn-group>.btn-group:not(:last-child)>.btn,
.card-body .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
border-radius: 50%;
transition: ease-in all .4s
}
.card-body input[type="radio"] {
visibility: hidden
}
.card-body .btn:not(:disabled):not(.disabled).active::after,
.card-body .btn:not(:disabled):not(.disabled):active::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
top: 4px;
left: 4.2px;
position: absolute;
transition: ease-in all .4s
}
.card-body .btn.btn-light:not(:disabled):not(.disabled).active::after,
.card-body .btn.btn-light:not(:disabled):not(.disabled):active::after {
background-color: #000
}
#avail-size input[type="checkbox"] {
visibility: hidden
}
#avail-size input[type='checkbox']:checked {
border: none
}
#avail-size .btn.btn-success {
color: #333;
border: none;
width: 20px;
font-size: 0.7rem;
border-radius: 0;
padding: 0
}
#avail-size .btn.btn-success:hover {
color: #444
}
#avail-size .btn-success:not(:disabled):not(.disabled).active,
#avail-size .btn-success:not(:disabled):not(.disabled):active {
color: #fff
}
#avail-size label {
margin: 10px;
margin-left: 0px
}
#shirt {
height: 170px
}
.middle {
position: relative;
width: 100%;
margin-top: 25px
}
.slider {
position: relative;
z-index: 1;
height: 5px;
margin: 0 15px
}
.slider>.track {
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 5px;
background-color: #ddd
}
.slider>.range {
position: absolute;
z-index: 2;
left: 25%;
right: 25%;
top: 0;
bottom: 0;
border-radius: 5px;
background-color: #36a31b
}
.slider>.thumb {
position: absolute;
top: 2px;
z-index: 3;
width: 20px;
height: 20px;
background-color: #36a31b;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(63, 204, 75, 0.705);
transition: box-shadow .3s ease-in-out
}
.slider>.thumb::after {
position: absolute;
width: 8px;
height: 8px;
left: 28%;
top: 30%;
border-radius: 50%;
content: '';
background-color: #fff
}
.slider>.thumb.left {
left: 25%;
transform: translate(-15px, -10px)
}
.slider>.thumb.right {
right: 25%;
transform: translate(15px, -10px)
}
.slider>.thumb.hover {
box-shadow: 0 0 0 10px rgba(125, 230, 134, 0.507)
}
.slider>.thumb.active {
box-shadow: 0 0 0 10px rgba(63, 204, 75, 0.623)
}
input[type=range] {
position: absolute;
pointer-events: none;
-webkit-appearance: none;
z-index: 2;
height: 10px;
width: 100%;
opacity: 0
}
input[type=range]::-webkit-slider-thumb {
pointer-events: all;
width: 30px;
height: 30px;
border-radius: 0;
border: 0 none;
background-color: red;
-webkit-appearance: none
}
.del {
text-decoration: line-through;
color: red
}
@media(min-width:1199.6px) {
#filterbar {
width: 25%
}
}
@media(max-width:1199.5px) {
#filterbar {
width: 28%
}
.card {
height: 350px
}
.price {
font-size: 0.9rem
}
.product-name {
font-size: 0.8rem
}
}
@media(max-width: 767.5px) {
#filterbar {
width: 50%
}
}
#filterbar {
float: none;
width: 100%;
margin-bottom: 20px;
border-radius: 5px
}
#content.my-5 {
margin-top: 20px !important;
margin-bottom: 20px !important
}
.col-lg-4,
.col-md-6 {
padding-left: 0;
padding-top: 1%;
}
}
.pagination {
display: none
}
}
.right-side {
text-transform: uppercase;
top: 8%;
left: -9%;
}
.logo {
display: inline;
text-align: center;
left: 62%;
transform: translate(135%,29%);
}
.brand-logo {
transform: translate(7px, -13px);
}
#buttonadd{
border: 1px solid #534c54;
background: #fff;
padding: 10px 30px;
border-radius: 50px;
text-transform: uppercase;
transform: translate(103px, -6px);
}
.bg-dark {
background-color: #fff !important;
color: #534c54;
width: 10px
}
.qty {
margin-top: 3rem!important;
text-align: center;
border: 1px solid #534c54;
background: #fff;
padding: 7px 7px;
border-radius: 7px;
width: 84%;
transform: translate(24px, -14px)
}
.count {
width: 72%;
text-align: center;
border: none;
}
.font-weight-bold {
font-weight: 710!important;
position: absolute;
top: 107%;
left: -3%
}
#search{
position: absolute;
width: 76%;
transform: translate(310px, 251px);
}
#category{
position: absolute;
width: 15%;
}
#category h1{
padding-bottom: 12%;
font-size: 172%;
}
.content {
#contentsearch {
position: absolute;
height: 50px;
width: 300px;
margin-left: 170px;
top: 60%;
left: 74%;
#contentsearch.on {
-webkit-animation-name: in-out;
animation-name: in-out;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.input {
width: 43px;
height: 43px;
border:4px solid rgba(226,182,197,255);
border-radius: 50%;
background: none;
color: rgba(226,182,197,255);
font-size: 16px;
font-weight: 400;
font-family: Roboto;
outline: 0;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
padding 0.2s;
transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
padding 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
.searchdiv {
background: none;
position: absolute;
top: 0px;
left: 0;
height: 40px;
width: 40px;
padding: 0;
border-radius: 100%;
outline: 0;
border: 0;
color: inherit;
cursor: pointer;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.searchdiv:before {
content: "";
position: absolute;
width: 22px;
height: 4px;
background-color: rgba(226,182,197,255);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 20px;
margin-left: 12px;
}
.close {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.close:before {
content: "";
position: absolute;
width: 27px;
height: 4px;
margin-top: -1px;
margin-left: -13px;
background-color: rgba(226,182,197,255);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.2s ease-in-out ;
}
.close:after {
content: "";
position: absolute;
width: 27px;
height: 4px;
border: none;
background-color:rgba(226,182,197,255) ;
margin-top: -1px;
margin-left: -13px;
cursor: pointer;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.square {
padding: 0 40px 0 10px;
width: 300px;
height: 50px;
border: 4px solid rgba(226,182,197,255);
border-radius: 0;
background: none;
color: rgba(226,182,197,255);
font-family: Roboto;
font-size: 16px;
font-weight: 400;
outline: 0;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
padding 0.2s;
transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
padding 0.2s;
-webkit-transition-delay: 0.4s, 0s, 0.4s;
transition-delay: 0.4s, 0s, 0.4s;
}
.message {
position: absolute;
}
.message h1{
color: rgba(221,72,98,255);
}
</style>
</head>
<body oncontextmenu='return false' >
<div class="part1">
@include('navbar')
</div>
<div id="search">
<form action="/search" id="contentsearch">
<button type="reset" class="searchdiv" id="search-btn"></button>
<input type="text" name="input" class="input" id="search-input" >
</form>
</div>
<div id="category">
<h1> Categories</h1>
<div class="content">
<ul class="list-unstyled components mb-5">

<li>
<a href="/pannier/{{$item->id}}"><span class="fa fa-chevron-right
mr-2" id="iconjus"></span> libelle</a>
</li>
</ul>
</div>
</div>
<div id="content" class="my-5" >

<div id="products">
<div class="row mx-0">
<div class="col-lg-4 col-md-6">

<form action="{{route('addpannier')}}" method="POST">
<div class="card d-flex flex-column align-items-

center">
<input type="text" name="id" value="{{$item-
>idproduit}}" hidden />
<input type="text" name="qte" value="2" hidden />
<div class="product-name">nom</div>
<div class="card-img"> <img src="" alt=""> </div>
<div class="card-body pt-5">
<div class="qty mt-5">
<span class="minus bg-dark">-</span>
<input type="number" class="count"
name="qte" value="1">
<span class="plus bg-dark">+</span>
</div>
<div class="text-muted text-center mt-auto">in

stock</div>
<div class="d-flex align-items-center justify-

content-center colors my-2">
</div>
<div class="d-flex align-items-center price">
<div class="font-weight-bold">1500 Dh
</div>
<label class=" form-check-label active">
<input id="buttonadd" class="form-
check-input" value="Add to card" type="submit"> </label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{{-- scripts --}}

<script type='text/javascript'
src='https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js'
></script>
<script type='text/javascript' src=''></script>
<script type='text/javascript' src=''></script>
<script type='text/Javascript'>// For Filters
document.addEventListener("DOMContentLoaded", function() {
var filterBtn = document.getElementById('filter-btn');
var btnTxt = document.getElementById('btn-txt');
var filterAngle = document.getElementById('filter-angle');
$('#filterbar').collapse(false);
var count = 0, count2 = 0;
function changeBtnTxt() {
$('#filterbar').collapse(true);
count++;
if (count % 2 != 0) {
filterAngle.classList.add("fa-angle-right");
btnTxt.innerText = "show filters"
filterBtn.style.backgroundColor = "#36a31b";
}
else {
filterAngle.classList.remove("fa-angle-right")
btnTxt.innerText = "hide filters"
filterBtn.style.backgroundColor = "#ff935d";
}
// For Applying Filters

$('#inner-box').collapse(false);
$('#inner-box2').collapse(false);
// For changing NavBar-Toggler-Icon

var icon = document.getElementById('icon');
function chnageIcon() {
count2++;
if (count2 % 2 != 0) {
icon.innerText = "";
icon.innerHTML = '<span class="far fa-times-circle" style="width:100%"></span>';
icon.style.paddingTop = "5px";
icon.style.paddingBottom = "5px";
icon.style.fontSize = "1.8rem";
}
else {
icon.innerText = "";
icon.innerHTML = '<span class="navbar-toggler-icon"></span>';
icon.style.paddingTop = "5px";
icon.style.paddingBottom = "5px";
icon.style.fontSize = "1.2rem";
}
}
// Showing tooltip for AVAILABLE COLORS

$(function () {
$('[data-tooltip="tooltip"]').tooltip()
})
// For Range Sliders

var inputLeft = document.getElementById("input-left");
var inputRight = document.getElementById("input-right");
var thumbLeft = document.querySelector(".slider > .thumb.left");

var thumbRight = document.querySelector(".slider > .thumb.right");
var range = document.querySelector(".slider > .range");
var amountLeft = document.getElementById('amount-left')

var amountRight = document.getElementById('amount-right')
function setLeftValue() {
var _this = inputLeft,
min = parseInt(_this.min),
max = parseInt(_this.max);
_this.value = Math.min(parseInt(_this.value), parseInt(inputRight.value) - 1);
var percent = ((_this.value - min) / (max - min)) * 100;
thumbLeft.style.left = percent + "%";

range.style.left = percent + "%";
amountLeft.innerText = parseInt(percent * 100);
}
setLeftValue();
function setRightValue() {
var _this = inputRight,
min = parseInt(_this.min),
max = parseInt(_this.max);
_this.value = Math.max(parseInt(_this.value), parseInt(inputLeft.value) + 1);
var percent = ((_this.value - min) / (max - min)) * 100;
amountRight.innerText = parseInt(percent * 100);

thumbRight.style.right = (100 - percent) + "%";
range.style.right = (100 - percent) + "%";
}
setRightValue();
inputLeft.addEventListener("input", setLeftValue);
inputRight.addEventListener("input", setRightValue);
inputLeft.addEventListener("mouseover", function () {
thumbLeft.classList.add("hover");
});
inputLeft.addEventListener("mouseout", function () {
thumbLeft.classList.remove("hover");
});
inputLeft.addEventListener("mousedown", function () {
thumbLeft.classList.add("active");
});
inputLeft.addEventListener("mouseup", function () {
thumbLeft.classList.remove("active");
});
inputRight.addEventListener("mouseover", function () {
thumbRight.classList.add("hover");
});
inputRight.addEventListener("mouseout", function () {
thumbRight.classList.remove("hover");
});
inputRight.addEventListener("mousedown", function () {
thumbRight.classList.add("active");
});
inputRight.addEventListener("mouseup", function () {
thumbRight.classList.remove("active");
});
});</script>
{{-- script quantity --}}
<script>
$(document).ready(function() {
$('.minus').click(function () {
var $input = $(this).parent().find('input');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.plus').click(function () {
var $input = $(this).parent().find('input');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
});
</script>
<script>
const input = document.getElementById("search-input");
const searchBtn = document.getElementById("search-btn");
const expand = () => {

searchBtn.classList.toggle("close");
input.classList.toggle("square");
};
searchBtn.addEventListener("click", expand);
</script>
</body>
</html>

Profilecard

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Profilecard

Uploaded by

Copyright:

Available Formats

<!

.pagination .page-item .page-link {

.pagination .page-item.active .page-link {

box-shadow: 2px 2px 15px rgb(255 208 224);

.card-body .btn-group .btn {

<ul class="list-unstyled components mb-5">

<div id="content" class="my-5" >

<div class="col-lg-4 col-md-6">

<div class="card d-flex flex-column align-items-

<div class="text-muted text-center mt-auto">in

<div class="d-flex align-items-center justify-

{{-- scripts --}}

// For Applying Filters

// For changing NavBar-Toggler-Icon

// Showing tooltip for AVAILABLE COLORS

// For Range Sliders

var thumbLeft = document.querySelector(".slider > .thumb.left");

var amountLeft = document.getElementById('amount-left')

_this.value = Math.min(parseInt(_this.value), parseInt(inputRight.value) - 1);

var percent = ((_this.value - min) / (max - min)) * 100;

thumbLeft.style.left = percent + "%";

_this.value = Math.max(parseInt(_this.value), parseInt(inputLeft.value) + 1);

var percent = ((_this.value - min) / (max - min)) * 100;

amountRight.innerText = parseInt(percent * 100);

const expand = () => {

You might also like