commit
57ac32d8b1
19 changed files with 495 additions and 0 deletions
@ -0,0 +1,74 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="cs"> |
|||
<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>Dodací údaje</title> |
|||
<link href="https://fonts.googleapis.com/css2?family=Montaga&display=swap" rel="stylesheet"> |
|||
<link rel="stylesheet" type="text/css" href="styles.css" /> |
|||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> |
|||
|
|||
</head> |
|||
<body> |
|||
<h1 class="h1">Košík</h1> |
|||
|
|||
<div class="container"> |
|||
<h2 class="h2">Lorem shopum</h2> |
|||
<div class="row"> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="kosik" id="kosik" value="kosik"> |
|||
<label for="kosik">Košík</label> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="platba" id="platba" value="platba"> |
|||
<label for="platba">Dodání a platba</label> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="dodani" id="dodani" value="dodani"> |
|||
<label for="dodani">Dodací údaje</label> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="shrnuti" id="shrnuti" value="shrnuti"> |
|||
<label for="shrnuti">Shrnutí</label> |
|||
</div> |
|||
</div> |
|||
<div class="row" id="col"> |
|||
<div class="col-sm-7"> |
|||
<h4 class="h4">Kontaktní údaje</h4> |
|||
<button type="button" class="btn btn-light" id="btn2">Přihlásit se</button> <br> |
|||
<label for="jmeno" style="margin-left: 50px;">Jméno:</label> |
|||
<input type="text" class="text"><br> |
|||
<label for="jmeno" style="margin-left: 50px;">Telefon:</label> |
|||
<input type="text" class="text"><br> |
|||
<label for="jmeno" style="margin-left: 50px;">E-mail:</label> |
|||
<input type="text" class="text"> |
|||
</div> |
|||
<div class="col-sm-1"> |
|||
<div class="v1"></div> |
|||
</div> |
|||
<div class="col-sm-4"> |
|||
<h4 class="h4" style="text-align: left; margin: 0;">Obash košíku</h4><br> |
|||
<div class="row"> |
|||
<div class="col-sm-2"><img src="/img/kosik/obrazek/sroub1.jpg" class="obr4"></div> |
|||
<div class="col-sm-3"><p>Dolor</p></div> |
|||
<div class="col-sm-3"><p>600,-</p></div> |
|||
</div> |
|||
<div class="row" id="col"> |
|||
<div class="col-sm-2"><img src="/img/kosik/obrazek/sroub2.jpg" class="obr4"></div> |
|||
<div class="col-sm-3"><p>Dolor</p></div> |
|||
<div class="col-sm-3"><p>600,-</p></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row" id="col"> |
|||
<div class="col-sm-8"></div> |
|||
<div class="col-sm-4"> |
|||
<button type="button" class="btn btn-light" id="button1"><a href="#">Pokračovat v objednávce</a></button> |
|||
</div> |
|||
</div> |
|||
</div></div> |
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,114 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="cs"> |
|||
<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>Dodání a platba</title> |
|||
<link href="https://fonts.googleapis.com/css2?family=Montaga&display=swap" rel="stylesheet"> |
|||
<link rel="stylesheet" type="text/css" href="styles.css" /> |
|||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> |
|||
|
|||
</head> |
|||
<body> |
|||
<h1 class="h1">Košík</h1> |
|||
|
|||
<div class="container"> |
|||
<h2 class="h2">Lorem shopum</h2> |
|||
<div class="row"> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="kosik" id="kosik" value="kosik"> |
|||
<label for="kosik">Košík</label> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="platba" id="platba" value="platba"> |
|||
<label for="platba">Dodání a platba</label> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="dodani" id="dodani" value="dodani"> |
|||
<label for="dodani">Dodací údaje</label> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="shrnuti" id="shrnuti" value="shrnuti"> |
|||
<label for="shrnuti">Shrnutí</label> |
|||
</div> |
|||
</div> |
|||
<div class="row" id="col"> |
|||
<div class="col-sm-6"> |
|||
<label for="kosik" style="margin-left: 50px;">Zvolte typ:</label> |
|||
<input type="text" class="text"> |
|||
|
|||
</div> |
|||
<div class="col-sm-6"> |
|||
<label for="browser">Zvolte místo:</label> |
|||
<input list="mista" name="misto" id="misto"> |
|||
<datalist id="mista"> |
|||
<option value="Roudnice nad labem"> |
|||
<option value="Mělník"> |
|||
<option value="Litoměřice"> |
|||
<option value="Lovosice"> |
|||
<option value="Řeporyje"> |
|||
</datalist> |
|||
</div> |
|||
</div> |
|||
<div class="row" id="col"> |
|||
<div class="col-sm-4"> |
|||
<h4 class="h4">Typy</h4> |
|||
<div class="list-group"> |
|||
<a href="#" class="list-group-item list-group-item-action">Metabox</a> |
|||
<a href="#" class="list-group-item list-group-item-action">Kamenná prodejna</a> |
|||
<a href="#" class="list-group-item list-group-item-action">Zásilka</a> |
|||
</div> |
|||
</div> |
|||
<div class="col-sm-8"> |
|||
<div class="row"> |
|||
<div class="col-sm-2"> |
|||
<h4 class="h4">Místa</h4> |
|||
<img src="/img/kosik/mapa/m02.png" class="obr2"> |
|||
</div> |
|||
<div class="col-sm-5" id="col4" > |
|||
<h5 class="h5"><b>Roudnice nad Labem</b></h5> |
|||
<p>Osobní odběr na jedné z našich prodejen<br> |
|||
Cena: 0,-<br> |
|||
Ještě dnes |
|||
<button type="button" class="btn btn-light" id="btn">Zvolit</button> |
|||
</p> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<img src="/img/kosik/foto/p01.jpg" class="obr3"> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
</div> |
|||
<div class="col-sm-4"></div> |
|||
<div class="col-sm-8"> |
|||
<div class="row"> |
|||
<div class="col-sm-2"> |
|||
<h4 class="h4">Místa</h4> |
|||
<img src="/img/kosik/mapa/m01.png" class="obr2"> |
|||
</div> |
|||
<div class="col-sm-5" id="col4" > |
|||
<h5 class="h5"><b>Mělník</b></h5> |
|||
<p>Osobní odběr na jedné z našich prodejen<br> |
|||
Cena: 0,-<br> |
|||
Ještě dnes |
|||
<button type="button" class="btn btn-light" id="btn">Zvolit</button> |
|||
</p> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<img src="/img/kosik/foto/p02.jpg" class="obr3"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row" id="col"> |
|||
<div class="col-sm-8"></div> |
|||
<div class="col-sm-4"> |
|||
<button type="button" class="btn btn-light" id="button1"><a href="dodani.html">Pokračovat v objednávce</a></button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 236 KiB |
|
After Width: | Height: | Size: 348 KiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 331 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 982 B |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,76 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="cs"> |
|||
<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>Košík</title> |
|||
<link href="https://fonts.googleapis.com/css2?family=Montaga&display=swap" rel="stylesheet"> |
|||
<link rel="stylesheet" type="text/css" href="styles.css" /> |
|||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> |
|||
|
|||
</head> |
|||
<body> |
|||
<h1 class="h1">Košík</h1> |
|||
|
|||
<div class="container"> |
|||
<h2 class="h2">Lorem shopum</h2> |
|||
<div class="row"> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="kosik" id="kosik" value="kosik"> |
|||
<label for="kosik">Košík</label> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="platba" id="platba" value="platba"> |
|||
<label for="platba">Dodání a platba</label> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="dodani" id="dodani" value="dodani"> |
|||
<label for="dodani">Dodací údaje</label> |
|||
</div> |
|||
<div class="col-sm-3"> |
|||
<input type="checkbox" name="shrnuti" id="shrnuti" value="shrnuti"> |
|||
<label for="shrnuti">Shrnutí</label> |
|||
</div> |
|||
</div> |
|||
<div class="row" id="col"> |
|||
<div class="col-sm-4"> |
|||
<img src="/img/kosik/obrazek/sroub1.jpg" class="obr1"> |
|||
<label for="obr1">Dolor</label> |
|||
</div> |
|||
<div class="col-sm-4"> |
|||
<input type="text" class="text"> |
|||
</div> |
|||
<div class="col-sm-4"> |
|||
<h4 class="h4">600,- |
|||
<label for="h4"><button type="button" class="btn btn-link"> |
|||
<img src="/img/kosik/obrazek/cross.png"> |
|||
</button> </label></h4> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<div class="row" id="col"> |
|||
<div class="col-sm-4"> |
|||
<img src="/img/kosik/obrazek/sroub2.jpg" class="obr1"> |
|||
<label for="obr1">Amet</label> |
|||
</div> |
|||
<div class="col-sm-4"> |
|||
<input type="text" class="text"> |
|||
</div> |
|||
<div class="col-sm-4"> |
|||
<h4 class="h4">120,-<label for="h4"><button type="button" class="btn btn link"><img src="/img/kosik/obrazek/cross.png"></button></label></h4> |
|||
|
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<div class="row" id="col"> |
|||
<div class="col-sm-8"></div> |
|||
<div class="col-sm-4"> |
|||
<button type="button" class="btn btn-light" id="button1"><a href="doprava.html">Pokračovat v objednávce</a></button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,103 @@ |
|||
p { |
|||
font-size: 11px; |
|||
width: 100%; |
|||
} |
|||
label { |
|||
margin-left: 10px; |
|||
margin-right: 10px; |
|||
font-family: 'Montaga', serif; |
|||
} |
|||
.h1 { |
|||
font-size: 36px; |
|||
text-align: center; |
|||
font-family: 'Montaga', serif; |
|||
} |
|||
.h2 { |
|||
font-size: 28px; |
|||
margin-left: 50px; |
|||
margin-bottom: 20px; |
|||
font-family: 'Montaga', serif; |
|||
} |
|||
.h4 { |
|||
font-size: 20px; |
|||
margin-left: 50px; |
|||
font-family: 'Montaga', serif; |
|||
} |
|||
.h5 { |
|||
font-size: 12px; |
|||
font-family: 'Montaga', serif; |
|||
} |
|||
.container { |
|||
background-color: lightgrey; |
|||
margin-top: 50px; |
|||
margin-left: 150px; |
|||
margin-right: 150px; |
|||
} |
|||
.obr1 { |
|||
max-width: 67px; |
|||
max-height: 67px; |
|||
margin-left: 50px; |
|||
} |
|||
.obr2 { |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-left: 50px; |
|||
} |
|||
.obr3 { |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-top: 40px; |
|||
} |
|||
.obr4 { |
|||
max-width: 43px; |
|||
max-height: 43px; |
|||
} |
|||
.list-group { |
|||
width: 100%; |
|||
margin-left: 50px; |
|||
padding-right: 50px; |
|||
} |
|||
#btn { |
|||
max-height: 50px; |
|||
margin-left: 100px; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
} |
|||
#btn2 { |
|||
margin-left: 50px; |
|||
margin-bottom: 20px; |
|||
} |
|||
#col { |
|||
margin-top: 20px; |
|||
} |
|||
#col4 { |
|||
margin-top: 30px; |
|||
margin-left: 10px; |
|||
} |
|||
#button1 { |
|||
margin-top: 50px; |
|||
margin-right: 20px; |
|||
margin-bottom: 20px; |
|||
text-align: center; |
|||
width: 100%; |
|||
} |
|||
a { |
|||
text-align: center; |
|||
margin-top: 5px; |
|||
margin-bottom: 5px; |
|||
} |
|||
a:visited { |
|||
color: purple; |
|||
} |
|||
a:hover { |
|||
color: lightgrey; |
|||
} |
|||
#kosik { |
|||
margin-left: 50px; |
|||
} |
|||
.vl { |
|||
border-left: 6px solid red; |
|||
height: 500px; |
|||
position: absolute; |
|||
left: 50%; |
|||
} |
|||
@ -0,0 +1,128 @@ |
|||
@pes: lightgrey; |
|||
|
|||
|
|||
p { |
|||
font-size: 11px; |
|||
width: 100%; |
|||
} |
|||
|
|||
label { |
|||
margin-left: 10px; |
|||
margin-right: 10px; |
|||
font-family: 'Montaga', serif; |
|||
} |
|||
|
|||
.h1 { |
|||
font-size: 36px; |
|||
text-align: center; |
|||
font-family: 'Montaga', serif;; |
|||
} |
|||
|
|||
.h2 { |
|||
font-size: 28px; |
|||
margin-left: 50px; |
|||
margin-bottom: 20px; |
|||
font-family: 'Montaga', serif; |
|||
} |
|||
|
|||
.h4 { |
|||
font-size: 20px; |
|||
margin-left: 50px; |
|||
font-family: 'Montaga', serif; |
|||
} |
|||
|
|||
.h5 { |
|||
font-size: 12px; |
|||
font-family: 'Montaga', serif; |
|||
} |
|||
|
|||
.container { |
|||
background-color: @pes; |
|||
margin-top: 50px; |
|||
margin-left: 150px; |
|||
margin-right: 150px; |
|||
} |
|||
|
|||
.obr1 { |
|||
max-width: 67px; |
|||
max-height: 67px; |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.obr2 { |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.obr3 { |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-top: 40px; |
|||
} |
|||
|
|||
.obr4 { |
|||
max-width: 43px; |
|||
max-height: 43px; |
|||
} |
|||
|
|||
.list-group { |
|||
width: 100%; |
|||
margin-left: 50px; |
|||
padding-right: 50px; |
|||
} |
|||
|
|||
#btn { |
|||
max-height: 50px; |
|||
margin-left: 100px; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
#btn2 { |
|||
margin-left: 50px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
#col { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
#col4 { |
|||
margin-top: 30px; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
#button1 { |
|||
margin-top: 50px; |
|||
margin-right: 20px; |
|||
margin-bottom: 20px; |
|||
text-align: center; |
|||
width: 100%; |
|||
|
|||
} |
|||
|
|||
a { |
|||
text-align: center; |
|||
margin-top: 5px; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
a:visited { |
|||
color: purple; |
|||
} |
|||
|
|||
a:hover { |
|||
color: @pes; |
|||
} |
|||
|
|||
#kosik { |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.vl { |
|||
border-left: 6px solid red; |
|||
height: 500px; |
|||
position: absolute; |
|||
left: 50%; |
|||
} |
|||
Loading…
Reference in new issue