142 lines
4.6 KiB
HTML
142 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Illustration online store </title>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined|Material+Icons" rel="stylesheet" />
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<div class="header-logo">
|
|
<h1 class="logo">Frames</h1>
|
|
</div>
|
|
<nav class="header-navigation">
|
|
<a href="#">About</a>
|
|
<a href="#" class="link-button">Your Cart<i class="material-icons-outlined">shopping_cart</i></a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div class="responsive-container">
|
|
<div class="grid">
|
|
<div class="grid-column">
|
|
<a class="product" href="#">
|
|
<div class="product-image">
|
|
<img src="https://assets.codepen.io/285131/cosmonaut.jpg" />
|
|
</div>
|
|
<div class="product-content">
|
|
<div class="product-info">
|
|
<h2 class="product-title">Cosmonaut</h2>
|
|
<p class="product-price">$ 10</p>
|
|
</div>
|
|
<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="product" href="#">
|
|
<div class="product-image">
|
|
<img src="https://assets.codepen.io/285131/hand-drawn-monster-milkshake.jpg" />
|
|
</div>
|
|
<div class="product-content">
|
|
<div class="product-info">
|
|
<h2 class="product-title">Monster Milkshake</h2>
|
|
<p class="product-price">$ 9</p>
|
|
</div>
|
|
<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
|
|
</div>
|
|
</a>
|
|
<a class="product" href="#">
|
|
<div class="product-image">
|
|
<img src="https://assets.codepen.io/285131/pink-pastel-juicy-banana.jpg" />
|
|
</div>
|
|
<div class="product-content">
|
|
<div class="product-info">
|
|
<h2 class="product-title">Juicy Banana</h2>
|
|
<p class="product-price">$ 9</p>
|
|
</div>
|
|
<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="grid-column">
|
|
<a class="product" href="#">
|
|
<div class="product-image">
|
|
<img src="https://assets.codepen.io/285131/palmistry.jpg" />
|
|
</div>
|
|
<div class="product-content">
|
|
<div class="product-info">
|
|
<h2 class="product-title">Palmistry</h2>
|
|
<p class="product-price">$ 9</p>
|
|
</div>
|
|
<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
|
|
</div>
|
|
</a>
|
|
<a class="product" href="#">
|
|
<div class="product-image">
|
|
<img src="https://assets.codepen.io/285131/fish-gas-mark.jpg" />
|
|
</div>
|
|
<div class="product-content">
|
|
<div class="product-info">
|
|
<h2 class="product-title">Fish With Gas Mask</h2>
|
|
<p class="product-price">$ 12</p>
|
|
</div>
|
|
<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
|
|
</div>
|
|
</a>
|
|
<a class="product" href="#">
|
|
<div class="product-image">
|
|
<img src="https://assets.codepen.io/285131/mysterious-gangster-character-style.jpg" />
|
|
</div>
|
|
<div class="product-content">
|
|
<div class="product-info">
|
|
<h2 class="product-title">Gangster</h2>
|
|
<p class="product-price">$ 5</p>
|
|
</div>
|
|
<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="grid-column">
|
|
<a class="product" href="#">
|
|
<div class="product-image">
|
|
<img src="https://assets.codepen.io/285131/adventure.jpg" />
|
|
</div>
|
|
<div class="product-content">
|
|
<div class="product-info">
|
|
<h2 class="product-title">Adventure in a Bottle</h2>
|
|
<p class="product-price">$ 15</p>
|
|
</div>
|
|
<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
|
|
</div>
|
|
</a>
|
|
<a class="product" href="#">
|
|
<div class="product-image">
|
|
<img src="https://assets.codepen.io/285131/illustration-hand-with-cigarette-icon.jpg" />
|
|
</div>
|
|
<div class="product-content">
|
|
<div class="product-info">
|
|
<h2 class="product-title">Smoking Ain't Cool</h2>
|
|
<p class="product-price">$ 5</p>
|
|
</div>
|
|
<button class="product-action"><i class="material-icons-outlined">favorite_border</i></button>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="credits">
|
|
<div class="responsive-container">
|
|
<h3>Illustrations by Freepik</h3>
|
|
<a href='https://www.freepik.com/' target="_blank">Check out their amazing work - www.freepik.com</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- partial -->
|
|
|
|
</body>
|
|
</html>
|