انا عاوزه زى صوره دى
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>afwar markt</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<div id="container">
<div id="logo">
<img src="top_bar_01.png" alt="Awfar logo">
</div>
<div id="menu">
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">link</a>
<a href="#">link</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">english
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>
<div class="photo">
<i class="fa fa fa-android"></i>
<i class="fa fa-apple" style="color:#999"></i>
</div>
</div>
</div>
</div>
<div class="container1">
<div class="line">
<ul id="steps">
<li id="s1" class="items">
<!-- قمت باستدعاء الأيقونة التي أحتاجها في هذا العنصر -->
<i class="fa fa-shopping-cart"></i>
<span>Shopping</span>
</li>
<li id="s2" class="items">
<i class="fa fa-cart-plus"></i>
<span>Add article</span>
</li>
<li id="s3" class="items">
<i class="fa fa-credit-card" "></i>
<span>Payment</span>
</li>
<li id="s4" class="items">
<i class="fa fa-thumbs-up"></i>
<span>Done</span>
</li>
<li id="s5" class="items">
<i class="fa fa-home"></i>
<span>to home</span>
</li>
</ul>
</div>
<div class="line" id="prog">
</div>
</div>
<!-- قمت باضافة هذا الزر فقط من أجل إظهار تطور المراحل باستعمال الجافاسكريبت -->
<div id="next">Next</div>
<!-- من أجل استدعاء وتحميل ملف الجافاسكريبت -->
<div class="">
<div class="con_table">
<table>
<h1>missing items</h1>
<tr class="num1">
<th>item img</th>
<th>item #</th>
<th>unit price</th>
<th>qty</th>
<th>total</th>
<th>status</th>
<th>edit</th>
</tr>
<tbody>
<tr style="background-color:#FCf0f4">
<td><img src="صور/images.jpg" alt="toast Bread"
width="200" height="100"></td>
<td>toast bread</td>
<td>25 EGP</td>
<td>1</td>
<td>25 EGP</td>
<td><input type="checkbox" name="vehicle1" value="Missed">Missed</td>
<td> <button >Cancel</button></td>
</tr>
<tr>
<td colspan="7"><strong>missing items altematives</strong></td>
</tr>
<tr>
<td><img src="صور/9abbabdd419c95452fdc935bfc6d87ac.jpg" width="200" height="100" alt="frozen chicken" ></td>
<td>toast bread</td>
<td>22 EGP</td>
<td><div class="button">
<input type="button" onclick="decrementValue(1)" value="-" style="width:50px; font-size:50px;" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="1" id="number_1" />
<input type="button" onclick="incrementValue(1)" value="+" />
</div>
</td>
<td>22 EGP</td>
<td><input type="checkbox" name="vehicle1" value="altemative">altemative</td>
<td><button>Add</button></td>
</tr>
<tr>
<td><img src="صور/GTY_pickles_sk_140922_16x9_608.jpg"width="200" height="100" alt="pickles" ></td>
<td>toast bread</td>
<td>27 EGP</td>
<td><div class="button">
<input type="button" onclick="decrementValue(2)" value="-" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="1" id="number_2" />
<input type="button" onclick="incrementValue(2)" value="+" />
</div>
</td>
<td>27 EGP</td>
<td><input type="checkbox" name="vehicle1" value="altemative">altemative</td>
<td><button>Add</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<p>Order id: <font color="#00CC33">RS1560320CS</font></p>
<p>Date:<strong> 25 Aug.2018</strong></p>
<p>product count:<font color="#00CC33">5</font></p>
</div>
<div class="col-sm-6">
<p>Story:<font color="#00CC33">Ragab sons</font></p>
<p>Order placed: <font color="#00CC33">12:20PM</font></p>
<p>Delivery Time<font color="#00CC33">:02:20 pm</font></p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h4> Deliver to : Mrs Sawsan Said</h4>
<p>39,155,from9 st,pstal code:11321,maadi,</p>
<p>cairo-egypt. Tell:+2044035020 Mov:01111010001</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<textarea id="subject" name="subject" placeholder=" add comment" style="height:100px; width:430px"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-7">
<div style="float:right;">
<button>clear</button>
<input type="submit" value="Submit" style="background-color:#093; color:#FFF;">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<h5 style="text-align:center"><strong>order id :<font color="#009933">RS1560320CS</font></strong></h5>
</div>
</div>
<div class="row" style="word-break: keep-all;">
<div class="col-sm-6">
<h3>Order Summary</h3>
<p>sub total:</p>
<p>Delivery fees:</p>
<p>Services fees:</p>
<br><br>
<h4>Total:</h4>
</div>
<div class="col-sm-6">
<br><br><br>
<p>207.99EGP</p>
<p>19.99</p>
<p>7.99</p>
<br><br>
<h4><strong>215.99</strong></h4>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>have aquestion?<a href="" style="text-decoration:underline"><font color="#009933">return policy</font></a></p>
<p> changa your mind? contact<a href="" style="text-decoration:underline"><font color="#009933">customer services</font></a></p>
</div>
</div>
</div>
</div>
<script src="app.js">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function incrementValue(elementId)
{
var value = parseInt(document.getElementById('number_'+elementId).value, 10);
value = isNaN(value) ? 0 : value;
{
value++;
document.getElementById('number_'+elementId).value = value;
}
}
function decrementValue(elementId)
{
var value = parseInt(document.getElementById('number_'+elementId).value, 10);
value = isNaN(value) ? 0 : value;
{
value--;
document.getElementById('number_'+elementId).value = value;
}
}
</script>
</script>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
font-family: 'Oxygen', sans-serif;
}
#container {
width: 100%;
height: 120px;
margin: 0 auto;
display: flex;
}
#logo {
width: 231px;
height: 90px;
}
#menu {
width: 100%;
height: 32px;
border-bottom: 1px #e6e1e0 solid;
background-color: #f6f5f3;
}
.navbar {
overflow: hidden;
background-color: #f6f5f3;
}
.navbar a {
float: right;
font-size: 12px;
color:#000;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 12px;
border: none;
outline: none;
color: 000#;
padding: 10px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
border-left:#000 dotted 1px;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#fa fa-caret-down {background-color:#000;}
.photo {
float:right;
}
.photo > i {
font-size:24px ;
margin-right:10px;
color:#0C0;
}
.container1 {
background-color: #f7f7f7;
border: 1px solid #efefef;
width:100%;
height: 120px;
margin: 0 auto;
}
.line {
height: 6px;
background-color: #6aa883;
width: 80%;
margin: auto;
position: relative;
top: 22%;
}
#steps {
display: flex;
flex-direction: row;
position: relative;
top: -32px;
list-style: none;
justify-content: space-between;
padding: 0;
align-items: center;
}
.items {
width: 70px;
height: 70px;
border-radius: 50%;
border: 2px #308c41 solid;
background-color: #f7f7f7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 99;
outline: #f7f7f7 solid 4px;
}
ul i {
font-size: 24pt !important;
color: #308c41;
}
.items span {
position: absolute;
top: 78px;
color: darkolivegreen;
}
.active {
background-color: #308c41;
}
.active i {
color: aliceblue;
}
.active span {
color: #308c41;
font-weight: bold;
}
#prog {
background-color: #308c41;
top: 20px;
width: 0;
margin: 0 10%;
border-radius: 0 5px 5px 0;
transition: all 1s ease;
}
#next {
width: 100px;
margin: 20px auto;
padding: 4px;
color: #308c41;
border: #6aa883 solid 1px;
border-radius: 5px;
cursor: pointer;
text-align: center;
font-weight: bold;
transition: all 1s ease;
}
#next:hover {
color: antiquewhite;
background-color: #308c41;
}
java scribt
const next = document.querySelector('#next');
const prog = document.getElementById('prog');
let progState = 0;
let active = [];
next.addEventListener('click', () =>{
if (active.length == 0) {
const item = document.querySelector(`#s1`);
item.classList.add('active');
active.push(item);
}
else if(active.length > 3) {
for (let index = 0; index < active.length; index++) {
const item = active[index];
progState = 0;
item.classList.remove('active');
}
active = [];
}
else {
const item = document.querySelector(`#s${active.length + 1}`);
(progState < 60)? progState += 25 : progState = 70;
setTimeout(() => {
item.classList.add('active');
}, 1000);
active.push(item);
}
prog.style.width = progState + '%';
});