Responsive Shop

Developer
Clayton
Size
2,178 Kb
Views
12,144
  1. Responsive Shop Previews
  2. Responsive Shop HTML Codes
  3. Responsive Shop CSS Codes

How do I make an responsive shop?

What is a responsive shop? How do you make a responsive shop? This script and codes were developed by Clayton on 04 November 2022, Friday.

Responsive Shop Previews
IQ Test

Responsive Shop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Shop</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<table>
<h1>Suas Compras Efetuadas:</h1>
<br>
<thead>
<tr>
<th>FOTO</th>
<th>NOME</th>
<th>DESCRIÇÃO</th>
<th>TAMANHO</th>
<th>COR</th>
<th>PREÇO</th>
<th>QUANTIDADE</th>
<th>SUBTOTAL</th>
<th>REMOVER</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="FOTO">Visa - 3412</td>
<td data-label="NOME">04/01/2016</td>
<td data-label="DESCRIÇÃO">$1,190</td>
<td data-label="TAMANHO">03/01/2016 - 03/31/2016</td>
<td data-label="COR">03/01/2016 - 03/31/2016</td>
<td data-label="PREÇO">03/01/2016 - 03/31/2016</td>
<td data-label="QUANTIDADE">03/01/2016 - 03/31/2016</td>
<td data-label="SUBTOTAL">03/01/2016 - 03/31/2016</td>
</tr>
</tbody>
</table>
</thead>
<br>
<button class="button1" type ="submit" href ="#" value="Enviar" />continuar comprando</button>
<button class ="button2" type ="submit" href ="#" value="Enviar" />finalizar a compra</button>
</td>
</body>
</html>

Responsive Shop - Script Codes CSS Codes

*{
margin:0;
padding:0;
}
h1 {
margin-top:10px;
font-family: 'Titillium Web', sans-serif;
font-size: 1.6em;
font-weight:600;
text-align:center;
}
th{
font-family: 'Titillium Web', sans-serif;
background-color:#222;
}
table {
border: 1px solid #ddd;
border-collapse: collapse;
margin: 0;
padding: 0;
table-layout: fixed;
width: 100%;
}
table tr {
border: 1px solid #222;
padding: .35em;
}
table th {
font-weight:700;
font-size:1em;
color:#fff;
padding: .625em;
text-align: center;
}
table td{
font-family: 'Titillium Web', sans-serif;
font-weight:600;
font-size:1em;
color:#222;
padding: .625em;
text-align: center;
}
.button1{
font-family: 'Titillium Web', sans-serif;
margin-top:-15px;
padding:1em;
background: #060;
border:1px solid #282;
border-radius:60px;
color:#fff;
font-size:0.9em;
font-weight:600;
cursor: pointer;
float:left;
}
.button2{
font-family: 'Titillium Web', sans-serif;
margin-top:-15px;
padding:1em;
background: #060;
border:1px solid #282;
border-radius:60px;
color:#fff;
font-size:0.9em;
font-weight:600;
cursor: pointer;
float:right;
}
@media screen and (max-width: 600px) {
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
text-align: right;
}
table td:before {
content: attr(data-label);
float: left;
}
}
Responsive Shop - Script Codes
Responsive Shop - Script Codes
Home Page Home
Developer Clayton
Username x-gyba
Uploaded November 04, 2022
Rating 3
Size 2,178 Kb
Views 12,144
Do you need developer help for Responsive Shop?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Clayton (x-gyba) Script Codes
Name
Menu
Vitrine Responsiva
Teste
My Cart Responsive
Layout
Back to top
Vitrine Responsiva Final
My Responsive Menu teste
Navbar
Cadastro de Produtos
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!