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?
![Our Glasses
In this glasses shop, you can find the
Search.
Search
50
$50
lasses
glasses 2
lasses 1
glasses2, this sun glass can use to do something 1 Works on myopia introduction
lasses1, 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](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2Fd7770d6e-352d-49c5-bb02-13e122a27c4b%2Ff1654a79-4a2a-4e6f-b75b-9666ea806e96%2Fnfuyg1y_processed.jpeg&w=3840&q=75)
![](/static/compass_v2/shared-icons/check-mark.png)
Step by step
Solved in 2 steps
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
![Computer Networking: A Top-Down Approach (7th Edi…](https://www.bartleby.com/isbn_cover_images/9780133594140/9780133594140_smallCoverImage.gif)
![Computer Organization and Design MIPS Edition, Fi…](https://www.bartleby.com/isbn_cover_images/9780124077263/9780124077263_smallCoverImage.gif)
![Network+ Guide to Networks (MindTap Course List)](https://www.bartleby.com/isbn_cover_images/9781337569330/9781337569330_smallCoverImage.gif)
![Computer Networking: A Top-Down Approach (7th Edi…](https://www.bartleby.com/isbn_cover_images/9780133594140/9780133594140_smallCoverImage.gif)
![Computer Organization and Design MIPS Edition, Fi…](https://www.bartleby.com/isbn_cover_images/9780124077263/9780124077263_smallCoverImage.gif)
![Network+ Guide to Networks (MindTap Course List)](https://www.bartleby.com/isbn_cover_images/9781337569330/9781337569330_smallCoverImage.gif)
![Concepts of Database Management](https://www.bartleby.com/isbn_cover_images/9781337093422/9781337093422_smallCoverImage.gif)
![Prelude to Programming](https://www.bartleby.com/isbn_cover_images/9780133750423/9780133750423_smallCoverImage.jpg)
![Sc Business Data Communications and Networking, T…](https://www.bartleby.com/isbn_cover_images/9781119368830/9781119368830_smallCoverImage.gif)