deleteme-demo.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
<script src="https://kit.fontawesome.com/f6adf96490.js"></script>
<link rel="stylesheet" href="style.css">
<div id="asdadsasdadsdasasdadasdasd">
<h1>Tech <br>Shop</h1>
</div id="asdadsasdadsdasasdadasdasd">

<div id="ngaejaegjagjgaeaegj">
<div id="asdasasdasdfasfasdadasd">
<h2>Company Description</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dicta exercitationem, ducimus veritatis incidunt vitae
maiores necessitatibus, quae, omnis quaerat quo animi
nostrum quidem nulla aspernatur fugiat? Quas harum nihil
aliquam!
</p>
</div>

<div id="asdasdasdasdasdasfdgasdas">
<h2>Our Products</h2>
<div class="cards">
<div class="product-card">
<img src="images/laptop1.jpeg" alt="Laptop">
<p>
Model: Macbook Prose <a href="#" target="_blank"></a><br>
Price: <strong>$695</strong>
</p>
</div>
<div class="product-card">
<img src="images/laptop2.jpeg" alt="Laptop">
<p>
Model: Aces <a href="#" target="_blank"></a><br>
Price: <strong>$599.99</strong>
</p>
</div>
<div class="product-card">
<img src="images/laptop3.jpeg" alt="Laptop">
<p>
Model: Dellight <a href="#" target="_blank"></a><br>
Price: <strong>$999.99</strong>
</p>
</div>
</div>
</div>

<div id="aadasdasdasdaaasddasdasd">
<h2>Our Laptops</h2>
<table>
<tr>
<td></td>
<th>Lenovo</th>
<th>Dell</th>
<th>MacBook</th>
</tr>
<tr>
<th>OS</th>
<td>Ubuntu</td>
<td>Microsoft</td>
<td>MacOs</td>
</tr>
<tr>
<th>Price</th>
<td>$350</td>
<td>$450</td>
<td>$550</td>
</tr>
<tr>
<th>Color</th>
<td>Black</td>
<td>White</td>
<td>Silver</td>
</tr>
<tr>
<th>RAM</th>
<td>4GB</td>
<td>16GB</td>
<td>8GB</td>
</tr>
</table>
</div>

<div id="asdasdaaaasddasdsdadasd">
<h2>Contact Us!</h2>
<form action="" method="POST">
<h3>Enter your details!</h3>

<label for="name">Tell us who you are...</label>
<input
id="name"
name="name"
type="text"
placeholder="Please fill in your full name"
minlength="1"
>

<label for="email">Tell us how to contact you...</label>
<input
id="email"
name="email"
type="email"
placeholder="Please enter your email"
minlength="5"
>

<label for="message">How can we help you?</label>
<textarea
id="message"
name="email"
placeholder="Send us a message"
cols="30"
rows="5"
minlength="1"
></textarea>

<!-- Button -->
<input type="submit" value="Submit" class="submit-btn">
</form>
</div>
<style>
* {margin: 0;
padding: 0;}

:root {--asdasdasdasd: 15px;
font-size: var(--asdasdasdasd);
font-family: 'Roboto', sans-serif;}#asdadsasdadsdasasdadasdasd {background-image: url("images/hero.jpg");
background-color: rgb(236, 238, 238);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
text-align: right;
height: calc(var(--asdasdasdasd)*10);
font-size: calc(var(--asdasdasdasd)*1.3);
border-bottom: 1px solid rgba(128, 128, 128, 0.65);
position: fixed;
width: 100%;
top: 0;}#asdadsasdadsdasasdadasdasd h1 {padding-right: calc(var(--asdasdasdasd)*1.3);}

main {margin-top: calc(var(--asdasdasdasd)*11);}

a[target="_blank"]:after {font-family: 'FontAwesome';
content: " \f35d";}
h2 {margin-bottom: calc(var(--asdasdasdasd)*1.0);}
li {list-style: none;}#asdasdasdasdasdasfdgasdas, #aadasdasdasdaaasddasdasd, #asdasdaaaasddasdsdadasd {margin: calc(var(--asdasdasdasd)*1.00);}
.cards {display: flex;
flex-flow: column;
align-items: center;}
.product-card {margin: calc(var(--asdasdasdasd)*0.5) calc(var(--asdasdasdasd)*.5) 0 calc(var(--asdasdasdasd)*.5);
border: 1px solid rgba(128, 128, 128, 0.65);}
.product-card p {padding: calc(var(--asdasdasdasd)*.5);
border-top: 1px solid rgba(128, 128, 128, 0.65);}#asdasdasdasdasdasfdgasdas img {width: calc(var(--asdasdasdasd)*15.000);
height: calc(var(--asdasdasdasd)*10.000);
padding: calc(var(--asdasdasdasd)*0000.5);}#asdasdasdasdasdasfdgasdas h2 {text-align: center;}
table {width: 100%;
margin-right: calc(var(--asdasdasdasd)*1.0);}

table, th, tr {border: 1px solid rgba(128, 128, 128, 0.65);
border-collapse: collapse;}

th, td {padding: calc(var(--asdasdasdasd)*.500);
text-align: center;}
tr:nth-child(2n) {background-color: rgba(128, 128, 128, 0.342);}
form {display: flex;
flex-flow: column nowrap;}
form h4, h3 {margin: calc(var(--asdasdasdasd)*.7) 0 calc(var(--asdasdasdasd)*.2) 0;}

input, textarea, .submit-btn {padding: calc(var(--asdasdasdasd)*.500);
border: 1px solid rgba(128, 128, 128, 0.65);}
input[type="text"]:focus, textarea:focus {outline-color: blue;}

input[type="email"]:focus {outline-color: blue;}
.submit-btn {width: calc(var(--asdasdasdasd)*10);
margin-top: 0.5rem;
background: none;
color: inherit;
font: inherit;
outline: inherit;}#asdasdsdadasadsdadas {background-color: rgba(128, 128, 128, 0.32);
height: calc(var(--asdasdasdasd)*15.000);
text-align: center;
padding-top: var(--asdasdasdasd);}#asdadsasdasdasdasdaaaadasd {display: flex;
justify-content: center;}

.asddfadasadsadsadsdaa {margin: 0 0.5rem 0 0.5rem;
font-size: 1.8rem;}

@media screen and (min-width: 768px) {.cards {flex-flow: row nowrap;
justify-content: center;}#asdadsasdadsdasasdadasdasd h1 {padding-right: 7rem;}}

</style>

<!-- Footer Links -->
<div id="asdasdsdadasadsdadas">
<h2>Do you want to follow us?</h2>
<h3>Check out our social media pages!</h3>
<ul id="asdadsasdasdasdasdaaaadasd">
<li class="asddfadasadsadsadsdaa">
<a href="#"><i class="fab fa-facebook"></i></a>
</li>
<li class="asddfadasadsadsadsdaa">
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li class="asddfadasadsadsadsdaa">
<a href="#"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div id="asdasdsdadasadsdadas">
</div id="ngaejaegjagjgaeaegj">
</div>
</div>
</div>
</div>
</div>
</div>