HTML CSS project feedback

Hi,
Im new to HTML and CSS and I started this project the issue is can someone give me feedback. Also can you tell me how to align text so it should be next to the photo? My goal of the project is to look something like this (just with my own idea). This is done for a class, and feedback/help is allowed. Another thing is how do you add the button to be on the opposite side of the wording on the top right corner?



    h1{
    opacity: 45%;
    background-color: pink;
    color: white;
    padding: 0.75em;
    font-size: ;
    font-family: sans serif;
    }
    
    h2{
    color: black;
    font-size: 25;
    }
    p{
      color: black;
      font-size: 16;
    }
   h3{
	color: black;
	font-size: 15;
    }

.img{
width: 150px;
height: 200px;
}
.element{
  float: right;
}

hr{
  opacity: 45%;
  color: pink;
}
.amount{
  opacity: 45%;
  color: pink;
}

footer{
opacity: 45%;
background-color: pink;
color: white;
padding: 0.5em;
font-size: 10;
font-family: sans serif;
}
    </style>

  
    <header>
    <h1> Pretty Things </h1>
    <button> sign up </button>
    </header>
  
    <h2>Pretty Things from around the web,ranked</h2>
    
    <tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/b0/52/b0521161aa57959aae89d1101344928acb38f780.jpg],origin[dam],category[],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]">
        </th>
        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0860978001.html">
</th>
   <p>Sneakers in mesh with lacing at front and grosgrain loops at front and back. Mesh lining, mesh insoles, and fluted soles.</p>
            <h3 class = "amount"> $29.99<h3>
        </th>
</tr>
<hr>
<tr>
        <th>
            <img class = "img" src="https://lp2.hm.com/hmgoepprod?set=quality[79],source[/70/94/709490da7e6f9df83dc6326a2cf496b34dcbe60d.jpg],origin[dam],category[ladies_hoodiesswetshirts_hoodies],type[DESCRIPTIVESTILLLIFE],res[s],hmver[1]&call=url[file:/product/main]"</a>
        </th>
        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0860978001.html">

	    <p>Lightweight sweatshirt with dropped shoulders, long sleeves, and ribbing at neckline, cuffs, and hem.</p>
            <h3 class = "amount"> $9.99<h3>
        </th>
</tr>
<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/f3/4b/f34b623b93f5d585c9f60fc081ebecfb761db45a.jpg],origin[dam],category[ladies_hoodiesswetshirts_sweatshirts],type[DESCRIPTIVESTILLLIFE],res[w],hmver[2]&call=url[file:/product/main]">
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0715624002.html">
            
	    <p> Soft, long-sleeved sweatshirt with a jersey-lined drawstring hood, kangaroo pocket, and ribbing at cuffs and hem. Soft, brushed inside.</p>
            <h3 class = "amount"> $17.99<h3>
        </th>
</tr>
<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/56/8c/568c30af44e69c14698f6f07346301985347fbad.jpg],origin[dam],category[home_towels_bath],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]">
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0837638002.html">

	    <p>Lightweight beach towel in jacquard-weave cotton fabric. Fringe at short sides. No hanger loop.</p>

            <h3 class = "amount"> $12.99<h3>
        </th>
</tr>
<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/ed/d2/edd2322aa43dd866745139c63724f8ffa0f2605a.jpg],origin[dam],category[home_blankets_knittedblankets],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]"></a>
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0770476006.html">

	  <p>Throw in soft, woven bouclé fabric with wool content. Fringe at short sides.</p>

            <h3 class = "amount"> $17.99<h3>

<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/8e/9f/8e9f62c6d2d61b20dba70c954a6266a53b11c874.jpg],origin[dam],category[home_servingwaretableware_plates],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]"></a>
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0864788001.html">

	  <p>Strawberry-shaped plate in porcelain with a printed design. Height approx. 1/2 in. Width 6 1/4 in. Length 9 in.</p>

            <h3 class = "amount"> $9.99<h3>


<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/a6/70/a67011ecbd3d0e7b7f0f7d0db6f01b73affa1886.jpg],origin[dam],category[home_servingwaretableware_cupsmugs],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]"></a>
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0864818002.html">

	  <p>Small mug in porcelain with a printed pattern. No handle. Height approx. 3 in. Diameter at top approx. 2 3/4 in.</p>

            <h3 class = "amount"> $5.99<h3>



<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/8f/0a/8f0a3c8fd7e722fe330345b9b7e4d9a6e97fce19.jpg],origin[dam],category[home_candlescandleholders],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]"></a>
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0783582002.html">

	  <p>Small tea light holder in fluted glass. Height 1 1/4 in., diameter 2 in.</p>

            <h3 class = "amount"> $2.99<h3>


<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/2e/c1/2ec194cb7db6c8da4525eab34d30ba07ad404ce4.jpg],origin[dam],category[],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]"></a>
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0847255001.html">

	  <p>Plate in glazed porcelain with a design. Diameter 8 1/4 in.</p>

            <h3 class = "amount"> $9.99<h3>




<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/34/0f/340fd0f3ebf5f755f1283319eb3a0d77621da0d7.jpg],origin[dam],category[home_storage_bagsstorage],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]"></a>
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0753095001.html">

	  <p>Square box in clear glass with a metal frame and lid with a small hook and safety chain. Size 3 x 7 1/2 x 7 1/2 in.</p>

            <h3 class = "amount"> $24.99<h3>



<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/8e/9f/8e9fdd3ae2afc4ccd5c3bd9d63186889e67a5217.jpg],origin[dam],category[home_porcelain],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]"></a>
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0533698003.html">

	  <p>Porcelain dish with a textured surface and gold-colored rim. Height of rim 3/4 in., diameter 10 1/4 in.</p>

            <h3 class = "amount"> $12.99<h3>



<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/8f/63/8f63201c25a1f0a419379a3e88f4d67bded6826a.jpg],origin[dam],category[home_tablecloth],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]"></a>
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0628973030.html">

	  <p>Large tablecloth in washed, woven linen fabric with double-stitched edges.</p>

            <h3 class = "amount"> $49.99<h3>





<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/b6/85/b68521da636d171d3cb7ce889c2a271fb2d24ded.jpg],origin[dam],category[home_cushions_cushioncover],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]"></a>
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0579381005.html">

	  <p>Cushion cover in cotton velvet with a concealed zip.</p>

            <h3 class = "amount"> $9.99<h3>





<hr>
<tr>
        <th>
            <img class = "img" src= "https://lp2.hm.com/hmgoepprod?set=quality[79],source[/fb/bb/fbbb6240c18d3cf2b8451432daa37d8be395ba44.jpg],origin[dam],category[home_napkins],type[DESCRIPTIVESTILLLIFE],res[m],hmver[1]&call=url[file:/product/main]"></a>
        </th>

        <th>
            <a href= "https://www2.hm.com/en_us/productpage.0837381001.html">

	  <p>Three-ply paper napkins. 20 per pack.</p>

            <h3 class = "amount"> $2.99<h3>



<footer>
<p> Because everything is prettier in pink</p>
</footer>

added a picture just now

Well, a way to put your text side by side with your image is using the CSS float attribute, then followed with a value of left or right depending which side you want it floating to. Ex:

element {
  float: right;/* This will make this element float to 
                  to the right side of the container.
}
1 Like