Skip to content

Commit

Permalink
newRep
Browse files Browse the repository at this point in the history
  • Loading branch information
@MartinSchneidder
MartinSchneidder committed Dec 18, 2023
0 parents commit bd4e379
Show file tree
Hide file tree
Showing 3 changed files with 577 additions and 0 deletions.
Empty file added shopping-layout/README.md
Empty file.
268 changes: 268 additions & 0 deletions shopping-layout/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap"
rel="stylesheet"
/>

<title>Shopping-Layout</title>
</head>
<body class="body">
<section class="article-row">
<!--Article1-->
<article class="article">
<section class="photo">
<figure class="figure">
<img
class="article-front-img"
src="https://images.unsplash.com/photo-1560072810-1cffb09faf0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="Blaue Sportschue"
title="Blaue Sportschue"
/>
<label class="p-photo-badge badge-vis-1 inactive"
>Free Shipping!</label
>
<figcaption class="p-photo-credit inactive">
Photo by: Maksim Larin
</figcaption>
</figure>
</section>
<section class="article-inhalt">
<h2 class="article-inhalt-header">Asics</h2>
<p class="article-beschreibung">
Suede fabric pointed toe stylish cut front low heel sharp on-trend
toe point raised heel drop sides unique silhouette. Bow detail
metallic eyelets leather lining luxurious finish classic courts
formal slingback square...
</p>
<section class="form-box">
<p class="p-price">$65 USD</p>
<grid class="grid-form-box">
<label for="blueShoeSize" class="size-quant-color-label"
>Size:</label
>

<select id="blueShoeSize" class="select-style">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<label for="quant" class="size-quant-color-label"
>Quantity:</label
>
<select id="quant" class="select-style">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p class="size-quant-color-label">Color:</p>
<section class="sect-colorpicker">
<!-- CHECKBOXES START -->
<label class="container">
<input
type="radio"
checked="checked"
name="radiobuttoncard1"
/>
<span class="checkmark colorcircle11"></span>
</label>
<label class="container">
<input
type="radio"
checked="checked"
name="radiobuttoncard1"
/>
<span class="checkmark colorcircle12"></span>
</label>
<label class="container">
<input
type="radio"
checked="checked"
name="radiobuttoncard1"
/>
<span class="checkmark colorcircle13"></span>
</label>
<!-- CHECKBOXES END -->
</section>
</grid>
<button class="button-addtochart">Add to Chart</button>
</section>
</section>
</article>
<!--Article2-->
<article class="article">
<section class="photo">
<figure class="figure">
<img
class="article-front-img"
src="https://camo.githubusercontent.com/3c412b173fef73e3c44a5aad8330234d4809c03cbc2a0dde18f260707616ed00/68747470733a2f2f696d616765732e756e73706c6173682e636f6d2f666c61676765642f70686f746f2d313535363633373634302d3263383064333230316265383f69786c69623d72622d312e322e3126697869643d4d6e77784d6a4133664442384d48787761473930627931775957646c66487838664756756644423866487838266175746f3d666f726d6174266669743d63726f7026773d3134373026713d3830"
alt="Weiße Sportschue"
title="Weiße Sportschue"
/>
<label class="p-photo-badge badge-vis-2 inactive"
>Free Shipping!</label
>
<figcaption class="p-photo-credit inactive">
Photo by: Daniel Storek
</figcaption>
</figure>
</section>
<section class="article-inhalt">
<h2 class="article-inhalt-header">Adidas</h2>
<p class="article-beschreibung">
Effortless comfortable full leather lining eye-catching unique
detail to the toe low ‘cut-away’ sides clean and sleek. Polished
finish elegant court shoe work duty stretchy slingback strap mid
kitten heel this ladylike...
</p>
<section class="form-box">
<p class="p-price">$30 USD</p>
<grid class="grid-form-box">
<label for="whiteShoeSize" class="size-quant-color-label"
>Size:</label
>
<select id="whiteShoeSize" class="select-style">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<label for="whitequant" class="size-quant-color-label"
>Quantity:</label
>
<select id="whitequant" class="select-style">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p class="size-quant-color-label">Color:</p>
<section class="sect-colorpicker">
<!-- CHECKBOXES START -->
<label class="container">
<input
type="radio"
checked="checked"
name="radiobuttoncard2"
/>
<span class="checkmark colorcircle21"></span>
</label>
<label class="container">
<input
type="radio"
checked="checked"
name="radiobuttoncard2"
/>
<span class="checkmark colorcircle22"></span>
</label>
<label class="container">
<input
type="radio"
checked="checked"
name="radiobuttoncard2"
/>
<span class="checkmark colorcircle23"></span>
</label>
<!-- CHECKBOXES END -->
</section>
</grid>
<button class="button-addtochart">Add to Chart</button>
</section>
</section>
</article>
<!--Article3-->
<article class="article">
<section class="photo">
<figure class="figure">
<img
class="article-front-img"
src="https://camo.githubusercontent.com/418e0658bb2b6ba856b9fdaa1b668d92516bc8dfa3ee253e57ab44cb9412b019/68747470733a2f2f696d616765732e756e73706c6173682e636f6d2f70686f746f2d313533393138353434313735352d3736393437336132333537303f697869643d4d6e77784d6a4133664442384d48787761473930627931775957646c664878386647567566444238664878382669786c69623d72622d312e322e31266175746f3d666f726d6174266669743d63726f7026773d3134373126713d3830"
alt="Grün/Graue Sportschue"
title="Grün/Graue Sportschue"
/>
<label class="p-photo-badge badge-vis-3 inactive"
>Just One Left!</label
>
<figcaption class="p-photo-credit inactive">
Photo by: felipepelaquim
</figcaption>
</figure>
</section>
<section class="article-inhalt">
<h2 class="article-inhalt-header">New Balance</h2>
<p class="article-beschreibung">
SSuede fabric pointed toe stylish cut front low heel sharp on-trend
toe point raised heel drop sides unique silhouette. Bow detail
metallic eyelets leather lining luxurious finish classic courts
formal slingback square...
</p>
<section class="form-box">
<p class="p-price">$45 USD</p>
<section class="grid-form-box">
<label for="greenShoeSize" class="size-quant-color-label"
>Size:</label
>
<select id="greenShoeSize" class="select-style">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<label for="greenquant" class="size-quant-color-label"
>Quantity:</label
>
<select id="greenquant" class="select-style">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p class="size-quant-color-label">Color:</p>
<section class="sect-colorpicker">
<!-- CHECKBOXES START -->
<label class="container">
<input
type="radio"
checked="checked"
name="radiobuttoncard3"
/>
<span class="checkmark colorcircle31"></span>
</label>
<label class="container">
<input
type="radio"
checked="checked"
name="radiobuttoncard3"
/>
<span class="checkmark colorcircle32"></span>
</label>
<label class="container">
<input
type="radio"
checked="checked"
name="radiobuttoncard3"
/>
<span class="checkmark colorcircle33"></span>
</label>
<!-- CHECKBOXES END -->
</section>
</section>
<button class="button-addtochart">Add to Chart</button>
</section>
</section>
</article>
</section>
</body>
</html>
Loading

0 comments on commit bd4e379

Please sign in to comment.