I am new to CSS and html and I was wondering if you could help me. I am trying to make a page where people can go to my website and shop on any platform they want. I have managed to create the page in html but I couldn't get the four image (square) if you want to call it that... centered on the page.
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content= "width = device-width. initial-scale= 1"
<!-- Links to other files -->
<!-- Default Location -->
<base href= "http//home/makenna/Documents/Amazon Docs/Kittiesnmore Web Files"/>
<!-- Links to CSS Stylesheets -->
<link rel="CSS Stylesheet" type "text/css"href="sellpagestylesheet1.css"> <!-- This is the main style sheet -->
<title> Shop with us on your Favorite E-retailer's Website </title>
<body>
<div>
<h3> Shop with us on your favorite shopping platform! </h3>
</div>
< id= "all pics">
<a href= "http://kittiesnmore.com/index.php/shop/">
<img src="https://imgur.com/DTEzmL3.jpg" alt= "Shop on our Site" style= "width:500px; height:500px; border:5x; bordercolor:4C4646; align:center; bordercolor:00008B;" id= "kittiesnmoreLogo" >
</a>
<a href= "https://www.amazon.com/s?marketplaceID=ATVPDKIKX0DER&me=A3O390GOKHZKJR&merchant=A3O390GOKHZKJR&redirect=true">
<img src="https://imgur.com/Icu5jwn.jpg" alt="Shop our Amazon Inventory" style=" height=500px; width: 500px; height: 500 px; border: 5px;" id= "amazonLogo">
</a>
<p id="secondRow">
<a href= "http://www.ebay.com/sch/makennher-0/m.html?item=152544640003&rt=nc&_trksid=p2047675.l2562">
<img src="https://imgur.com/hNBGJwg.jpg" alt= "Shop our Ebay Inventory" style="width:500 px; height:500px; border: 5px;" id= "ebayLogo">
</a>
<a href= "https://kittiesnmore.myshopify.com/">
<img src="https://imgur.com/o1zeKZF.jpg" alt="Shop on our Shopify Store" style= "height:500px; width:500px; border:5px;" id="shopifyLogo">
</a>
</p>
Here si the CSS
<head>
<style>
#firstRow.kittiesnmoreLogo{
*{font-family: "Arial Black" Gadget, sans-serif;}
.website{ padding 10px 10px 10px 10px
}
I would like to know the best way to target the images I have created in order to do the above, any improvements I should make to the way I have included them, or if there's something awfully terribly wrong.
Also I do apologize if my code is formatted incorrectly for this website, I am not really familiar with how to make code blocks >.<
Which software you use for coding, In your code it has too much syntax errors. first correct all off them, Then try using this,
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>