Our Glasses In this glasses shop, you can find the Search 50 $50 lasses glasses 2 lasses 1 glasses2, this sun glass can use to do something 1 Works on myopia introduction lassesi, this sun glass can use to do something 1 Works on myopia introduction add to cart dd to cart $50 glasses 3 Plastic lens non-polarized Lens width: 1.97 inches Arm: 140 millimeters add to cart
the html file is like this
----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
background-color: gray;
}
a{
text-decoration: none;
color: yellow;
font-size: 20px;
}
a:hover{
transition: 1.1px;
}
input{
background-color: #fff;
}
.div1 {
border:2pxoutsetred;
background-color:lightblue;
text-align:center;
}
.boxes{
float: left;
width: 49%;
border: 2px solid black;
background-color: gray;
color: #fff;
}
</style>
<script>
function maxLengthCheck(object) {
if (object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)
}
function isNumeric (evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode (key);
var regex = /[0-9]|\./;
if ( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
function orderfunction(){
alert("Thank you for ordering from my website!!!");
}
function cancelfunction(){
alert("Thank you for your time");
}
</script>
</head>
<body class="main-layout position_head">
</li>
</ul>
</section>
</nav>
</section>
</header>
<section class="glasses">
<section class="container">
<section class="row">
<section class="titlepage">
<center>
<h2 style="font-size: 42px;">Our Glasses</h2>
</center>
<marquee width="100%"direction="left"height="100px">
<p style="color:blue;">In this glasses shop, you can find the glasses you want，this is a galsses shop ,and can buy glasses.
</p>
</marquee>
</section>
<form>
<input type="text"placeholder="Search.."name="search"/>
<button type="submit">Search</button>
</form>
</section>
</section>
</section>
<div class="boxes">
<section class="glasses_box">
<figure><img src="images/glass (1).png" alt="#"/></figure>
<h3><span class="blu">$</span>50</h3>
<p class="h1">glasses</p>
<p>glasses 1 </p>
<p>glasses1 ，this sun glass can use to do something 1 Works on myopia introduction </p>
<a href="cart.html"target="_blank">add to cart</a>
</section>
</div>
<div class="boxes">
<section class="section1">
<section class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
<section class="glasses_box">
<figure><img src="images/glass (2).png" alt="#"/></figure>
<h3><span class="blu">$</span>50</h3>
<p>glasses 2 </p>
<p>glasses2 ，this sun glass can use to do something 1 Works on myopia introduction </p>
<a href="cart.html"target="_blank">add to cart</a>
</section>
</div>
<div class="boxes">
<section class="section1">
<section class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
<section class="glasses_box">
<figure><img src="images/glass (3).png" alt="#"/></figure>
<h3><span class="blu">$</span>50</h3>
<p>glasses 3 </p>
<p>Plastic lens
non-polarized
Lens width: 1.97 inches
Arm: 140 millimeters</p>
<a href="cart.html"target="_blank">add to cart</a>
</section>
</div>
<div class="boxes">
<section class="section1">
<section class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
<section class="glasses_box">
<figure><img src="images/glass (4).png" alt="#"/></figure>
<h3><span class="blu">$</span>50</h3>
<p>glasses 4 </p>Plastic frame
<p>Plastic lens
non-polarized
Lens width: 2.97 inches
Arm: 140 millimeters</p>
<a href="cart.html"target="_blank">add to cart</a>
</section>
</div>
<div class="boxes">
<section class="section1">
<section class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
<section class="glasses_box">
<figure><img src="images/glass (5).png" alt="#"/></figure>
<h3><span class="blu">$</span>50</h3>
<p>glasses 5 </p>
<p>Plastic lens
non-polarized
Lens width: 1.37 inches
Arm: 140 millimeters</p>
<p>add to cart </p>
</section>
<p>add to cart </p>
</section>
</div>
<div class="boxes">
<section class="section1">
<section class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
<section class="glasses_box">
<figure><img src="images/glass (6).png" alt="#"/></figure>
<h3><span class="blu">$</span>50</h3>
<p>glasses 6 </p>
<p>Plastic lens
non-polarized
Lens width: 2.97 inches
Arm: 140 millimeters</p>
<p>add to cart </p>
</section>
</div>
<div class="boxes">
<section class="section1">
<section class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
<section class="glasses_box">
<figure><img src="images/glass (7).png" alt="#"/></figure>
<h3><span class="blu">$</span>50</h3>
<p>glasses 7 </p>
<p>Plastic lens
non-polarized
Lens width: 2.27 inches
Arm: 140 millimeters</p>
<p>add to cart </p>
</section>
</div>
</section>
<div class="boxes">
<section class="section1">
<section class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
<section class="glasses_box">
<figure><img src="images/glass (8).png" alt="#"/></figure>
<h3><span class="blu">$</span>50</h3>
<p>glasses 8 </p>
<p>Plastic lens
non-polarized
Lens width: 2.27 inches
Arm: 140 millimeters</p>
<p>add to cart </p>
</section>
</div>
<section class="col-md-12">
<a class="end next page " href="#">next page</a>
</section>
<section class="section1">
<footer>
<footerclass="footer">
<p><strong>Phone Number:</strong>123456789</p>
Email: <a href="mailto:exapmle123@456.com" class="mail">exapmle123@456.com</a><br>
</section>
</footer>
</body>
</html>
----------
how to change the css to make it looks symmetrical?
Step by step
Solved in 2 steps
