muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added popup review, question, and share

Browse source
This commit is contained in:
JSriwongsa 2023-07-05 11:54:09 -05:00
parent 78c8e4f3c5
commit 4f79580501
2 changed files with 188 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
ecommerce/fashion_website/pages/page.css
View file

@ -934,8 +934,115 @@ form :where(input, textarea, select)::placeholder{
.inner-footer .list-block .company-address:hover p{
color: var(--dark-color);
}
/*--------- popup --------*/
.data-popup{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
pointer-events: none;
}
.data-popup .wrap{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.data-popup .data-content{
position: relative;
background-color: var(--white-color);
width: var(--data-width, 400px);
padding: 40px 20px;
max-width: calc(100vw -50px);
max-height: calc(100vh -60px);
border-radius: 5px;
overflow-y: auto;
pointer-events: auto;
}
.data-popup .close-trigger, .data-popup .form span{
display: flex;
position: absolute;
top: 0;
right: 0;
height: 40px;
align-items: center;
}
.data-popup .form{
position: relative;
}
.data-popup label{
font-weight: 600;
font-size: 14px;
margin-bottom: 10px;
display: block;
}
.data-popup .form input{
background-color: lightgrey;
color: var(--dark-color);
padding: 5px 30px 5px 10px;
border: none;
font-size: 14px;
}
.data-popup .form span{
top: auto;
bottom: 0;
right: 10px;
cursor: pointer;
}
.data-popup .form span:hover{
color: gray;
}
.data-popup .media-share{
margin-top: 20px;
}
.data-popup form>div{
margin-top: 20px;
}
.data-popup form input, textarea{
border-color: var(--main-color);
}
form .button button{
cursor: pointer;
}
form .button .secondary-btn{
border-radius: 0;
}
.data-popup h3, form .button{
text-align: center;
}
.data_review .data-content{
--data-width: 500px;
}
.data_review .dotgrid .wrapper{
--gutter: 10px;
}
.data_review .stars input{
display: none;
}
.data_review .stars > input:checked ~ label{
color: var(--based-color);
}
.data_review .stars label{
font-size: 16px;
margin: 0;
cursor: pointer;
}
.data_review :where(.rating, .stars){
display: flex;
gap: 5px;
}
.data_review .stars{
flex-direction: row-reverse;
}
.data-popup{
display: none;
animation: var(--fade);
}
.data-popup.active{
display: block;
}

82
ecommerce/fashion_website/pages/page.html
View file

@ -307,8 +307,8 @@
<div class="product-control list-inline">
<ul>
<li><a href=""><i class='bx bx-heart' ></i><span>Add to List</span></a></li>
<li><a href=""><i class='bx bx-share' ></i><span>Share</span></a></li>
<li><a href=""><i class='bx bx-help-circle' ></i><span>Help</span></a></li>
<li><a href="#0" trigger-button data-target="data-share"><i class='bx bx-share' ></i><span>Share</span></a></li>
<li><a href="#0" trigger-button data-target="data-question"><i class='bx bx-help-circle' ></i><span>Help</span></a></li>
</ul>
</div>
<div class="shipping">
@ -375,7 +375,7 @@
<span>2 reviews</span>
</div>
<div class="button">
<a href="" class="primary-btn">Write a Review</a>
<a href="#0" class="primary-btn" trigger-button data-target="data-review">Write a Review</a>
</div>
</div>
<div class="body-review">
@ -675,6 +675,82 @@
</div>
</div>
<div id="data-share" class="data-popup data_share">
<div class="wrap">
<div class="data-content">
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
<div class="form">
<label>Copy link</label>
<input type="text" disabled value="https://www.youtube.com/watch?v=FMgraHfrw_o">
<span><i class='bx bx-copy' ></i></span>
</div>
<div class="media-share list-inline">
<label>Share</label>
<ul>
<lu><a href=""><i class='bx bxl-instagram' ></i></a></lu>
<lu><a href=""><i class='bx bxl-twitter' ></i></a></lu>
<lu><a href=""><i class='bx bxl-pinterest' ></i></a></lu>
</ul>
</div>
</div>
</div>
</div>
<div id="data-question" class="data-popup data_question">
<div class="wrap">
<div class="data-content">
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
<h3>Question</h3>
<form action="">
<div><input type="text" placeholder="Name"></div>
<div><input type="text" placeholder="Email"></div>
<div><textarea placeholder="Leave us your question(s)" cols="30" rows="4"></textarea></div>
<div class="button">
<button type="submit" class="secondary-btn">Send</button>
</div>
</form>
</div>
</div>
</div>
<div id="data-review" class="data-popup data_review">
<div class="wrap">
<div class="data-content">
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
<h3>Leave a Review</h3>
<form action="">
<div class="dotgrid">
<div class="wrapper">
<div><input type="text" placeholder="Name"></div>
<div><input type="text" placeholder="Email"></div>
</div>
</div>
<div class="rating">
<span>Rating: </span>
<div class="stars">
<input type="radio" name="rating" id="star5">
<label for="star5"><i class='bx bxs-star' ></i></label>
<input type="radio" name="rating" id="star4">
<label for="star4"><i class='bx bxs-star' ></i></label>
<input type="radio" name="rating" id="star3">
<label for="star3"><i class='bx bxs-star' ></i></label>
<input type="radio" name="rating" id="star2">
<label for="star2"><i class='bx bxs-star' ></i></label>
<input type="radio" name="rating" id="star1">
<label for="star1"><i class='bx bxs-star' ></i></label>
</div>
</div>
<div><input type="text" placeholder="Review title"></div>
<div><textarea placeholder="Your review" cols="30" rows="4"></textarea></div>
<div class="button">
<button type="submit" class="secondary-btn">Send</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="page.js"></script>
</body>