Skip to content

Commit

Permalink
create page basket-card-page
Browse files Browse the repository at this point in the history
  • Loading branch information
sina-alimi committed Sep 4, 2024
1 parent 7ffe9e9 commit 663defe
Show file tree
Hide file tree
Showing 3 changed files with 313 additions and 8 deletions.
278 changes: 278 additions & 0 deletions basket.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,278 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basket</title>
<meta name="author" content="">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta property="og:title" content="WeProDev"/>
<meta property="og:site_name" content="WeProDev"/>
<meta property="og:description" content="WeProDev"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://WeProDev.com"/>
<meta name="keywords" content="">
<meta name="description" content="WeProDev">
<meta name="robots" content="WeProDev">
<meta name="copyright" content="2017-2018">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="twitter:card" content="WeProDev">
<meta name="twitter:url" content="http://WeProDev.com">
<meta name="twitter:domain" content="http://WeProDev.com">
<meta name="twitter:title" content="WeProDev">
<meta name="twitter:description" content="WeProDev">
<meta name="twitter:image" content="http://WeProDev.com">
<meta name="apple-mobile-web-app-status-bar-style" content="WeProDev.com">
<meta name="apple-mobile-web-app-capable" content="WeProDev">
<link rel="icon" href="img/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="stylesheet" href="scss/lib/tiny-slider.css">
<link rel="stylesheet" href="css/style.css" media="all">
</head>
<body>

<div class="basket" >
<div class="section-page-close" id="close-page">
<h2>Are you sure?</h2>
<div class="section-but">
<a href="#">Yes</a>
<button id="close">No</button>
</div>
</div>
<div class="sec-1" id="sec-1">
<div class="section-header">
<div class="header-basket">
<img src="img/favicon.png" class="icon-header" alt="logo">
<a href="#" id="icon-close-page"><span class="icon icon-close"></span></a>
</div>
</div>
<div class="content-basket">
<h2>Do You Have a Website?</h2>
<div class="section-cards">
<div class="cards">
<img src="img/Server.png" class="img-card" alt="server">
<div class="section-text">
<h3>No,I don't</h3>
<span>No problem,We'll help you step up your site</span>
</div>
<button id="no-button"><a href="#">Continue</a></button>
<a href="#" class="link-bottom"><span class="icon-notification"></span> Why I do need WordPress?</a>
</div>
<div class="cards">
<img src="img/loptop-2.png" class="img-card" alt="loptop">
<div class="section-text">
<h3>Yes,I sure do</h3>
<span>Greate,Click below to install Elementor on your existing website</span>
</div>
<button id="yes-button"><a href="#">Continue</a></button>
</div>
</div>
</div>
</div><!--sec-1-->
<!--yes section-->
<div class="sec-2" id="sec2">
<div class="section-header">
<div class="header-basket">
<img src="img/favicon.png" class="icon-header" alt="logo">
<a href="#" id="back-main-page1"><span class="icon icon-arrow-left2"></span></a>
</div>
</div><!--section header-->
<div class="content-basket">
<h2>Select your platform</h2>
<div class="section-select">
<div class="select-platform">
<input type="radio" id="plat1" name="select" value="1">
<label for="plat1">
<img src="img/wp2.png" class="img-bg" alt="wordpress">
<span class="circle">
<img src="img/wp2.png" alt="wordpress">
</span>
<span class="text-in-plat">
<p>WordPress</p>
</span>
</label>
</div>
<div class="select-platform">
<input type="radio" id="plat2" name="select" value="2">
<label for="plat2">
<img src="img/laravel.png" class="img-bg" alt="laravel">
<span class="circle">
<img src="img/laravel.png" alt="wordpress">
</span>
<span class="text-in-plat">
<p>Laravel</p>
</span>
</label>
</div>
<div class="select-platform">
<input type="radio" id="plat3" name="select" value="3">
<label for="plat3">
<img src="img/magento.png" class="img-bg" alt="Magento">
<span class="circle">
<img src="img/magento.png" alt="wordpress">
</span>
<span class="text-in-plat">
<p>Magento</p>
</span>
</label>
</div>
<div class="select-platform">
<input type="radio" id="plat4" name="select" value="4">
<label for="plat4">
<img src="img/dedicate-website.png" class="img-bg" alt="dedicate-website">
<span class="circle">
<img src="img/dedicate-website.png" alt="wordpress">
</span>
<span class="text-in-plat">
<p>Dedicate Website</p>
</span>
</label>
</div>
<div class="select-platform">
<input type="radio" id="plat5" name="select" value="5">
<label for="plat5">
<img src="img/excalm.png" class="img-bg" alt="exclamation">
<span class="circle">
<img src="img/excalm.png" alt="wordpress">
</span>
<span class="text-in-plat">
<p>I don't know!</p>
</span>
</label>
</div>

</div><!--section select-->
<div class="section-Response">
<div class="check">
<label class="container">I want to use your service and transfering my site to your platform
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">I need to consutatiion
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div><!--check-->
<div class="sec-textarea">
<form>
<div class="div-input">
<div class="non-break">
<label for="firstname">First Name:&nbsp;</label>
<span class="class-star">*</span>
</div>
<input type="text" id="firstname" placeholder="First Name...">
</div>
<div class="div-input">
<div class="non-break">
<label for="lastname">Last Name:&nbsp;</label>
<span class="class-star">*</span>
</div>
<input type="text" id="lastname" placeholder="Last Name...">
</div>
<div class="div-input">
<div class="non-break">
<label for="emails">Email:&nbsp;</label>
<span class="class-star">*</span>
</div>
<input type="email" id="emails" placeholder="Email..." multiple>
</div>
</form>
<div class="textarea-btn">
<label for="textarea">Your message:</label>
<textarea id="textarea"></textarea>
<button class="btn" type="submit">Send</button>
</div>
</div><!--sec textarea-->
</div><!--section response-->
</div><!--content basket-->
</div><!--sec-2-->
<div class="sec-3" id="sec3">
<div class="section-header">
<div class="header-basket">
<img src="img/favicon.png" class="icon-header" alt="logo">
<a href="#" id="back-main-page2"><span class="icon icon-arrow-right2"></span></a>
</div>
</div>
<div class="content-basket">
<h2>Select</h2>
<div class="section-Response">
<div class="check">
<label class="container">I want to use your service and transfering my site to your platform
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">I need to consutatiion
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div><!--check-->
<div class="sec-textarea">
<form>
<div class="div-input">
<div class="non-break">
<label for="firstname">First Name:&nbsp;</label>
<span class="class-star">*</span>
</div>
<input type="text" id="firstname" placeholder="First Name...">
</div>
<div class="div-input">
<div class="non-break">
<label for="lastname">Last Name:&nbsp;</label>
<span class="class-star">*</span>
</div>
<input type="text" id="lastname" placeholder="Last Name...">
</div>
<div class="div-input">
<div class="non-break">
<label for="emails">Email:&nbsp;</label>
<span class="class-star">*</span>
</div>
<input type="email" id="emails" placeholder="Email..." multiple>
</div>
</form>
<div class="textarea-btn">
<label for="textarea">Your message:</label>
<textarea id="textarea"></textarea>
<button class="btn" type="submit">Send</button>
</div>
</div><!--sec textarea-->
</div><!--section response-->
</div><!--content basket-->
</div><!--sec-3-->
</div><!--basket-->
<script src="js/jquery.min.js"></script>
<!-- <script src="js/main.js"></script>
<script src="js/tiny-slider.js"></script> -->
<script>
$(document).ready(function(){
// let sec1=document.getElementById('sec-1');
// let sec1=document.querySelector('basket')
$("#icon-close-page").on('click',function(){
$("#sec-1").addClass("blur-page");
$("#close-page").addClass("show-display");
});

$("#close").on('click',function(){
$("#close-page").removeClass("show-display");
$("#sec-1").removeClass("blur-page");
});

$("#yes-button").on('click',function(){
$("#sec2").addClass("sub-sec-2");
});
$("#back-main-page1").on('click',function(){
$("#sec2").removeClass("sub-sec-2");
});

$("#no-button").on('click',function(){
$("#sec3").addClass("sub-sec-3");
});
$("#back-main-page2").on('click',function(){
$("#sec3").removeClass("sub-sec-3");
});
});
</script>
</body>

</html>
12 changes: 7 additions & 5 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3293,7 +3293,9 @@ body .content .latest-posts-section .card-for-latest .m-l-r {

.basket {
width: 100%;
z-index: -1;
height: 100vh;
overflow: hidden;
/* z-index: -1; */
}
.basket .section-header {
width: 100%;
Expand Down Expand Up @@ -3329,7 +3331,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r {
.basket .content-basket h2 {
text-align: center;
font-size: 2em;
margin: 1em 0em 1.5em;
margin-top: 1em;
}
@media screen and (max-width: 40em) {
.basket .content-basket h2 {
Expand Down Expand Up @@ -3543,7 +3545,7 @@ body .content .latest-posts-section .card-for-latest .m-l-r {
align-items: center;
flex-direction: column;
margin: 0 auto;
width: 47%;
width: 50%;
text-align: left;
margin-bottom: 3em;
/* When the checkbox is checked, add a blue background */
Expand Down Expand Up @@ -5162,8 +5164,8 @@ body .content .latest-posts-section .card-for-latest .m-l-r {

.btn {
text-align: center;
margin-top: 7em;
margin-bottom: 3em;
/* margin-top: 7em; */
margin: 2.5em;
}
.btn a {
border-radius: 3em;
Expand Down
31 changes: 28 additions & 3 deletions register.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<meta name="author" content="">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta property="og:title" content="WeProDev"/>
<meta property="og:site_name" content="WeProDev"/>
<meta property="og:description" content="WeProDev"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://WeProDev.com"/>
<meta name="keywords" content="">
<meta name="description" content="WeProDev">
<meta name="robots" content="WeProDev">
<meta name="copyright" content="2017-2018">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="twitter:card" content="WeProDev">
<meta name="twitter:url" content="http://WeProDev.com">
<meta name="twitter:domain" content="http://WeProDev.com">
<meta name="twitter:title" content="WeProDev">
<meta name="twitter:description" content="WeProDev">
<meta name="twitter:image" content="http://WeProDev.com">
<meta name="apple-mobile-web-app-status-bar-style" content="WeProDev.com">
<meta name="apple-mobile-web-app-capable" content="WeProDev">
<link rel="icon" href="img/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="stylesheet" href="scss/lib/tiny-slider.css">
<link rel="stylesheet" href="css/style.css" media="all">

<link rel="stylesheet" href="css/style.css" media="all">
</head>
Expand Down

0 comments on commit 663defe

Please sign in to comment.