I know the code below is not accessible for smaller or larger devices other than my own. That’s why wondering what ways I can make the HTML and CSS better. For example, is there anything I can improve on in the code, am I using too many divs or how could I make the page more accessible for different devices, and how could I implement Semantic HTML? Thank you very much!
Live Preview https://html-css-js.mannylovescodin.repl.co/
By the way the website is supposed to be a clone of https://www.starbucks.ca/
<!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.0">
<title>Starbucks Coffee Company</title>
<link rel="stylesheet" href="./resources/css/index.css">
</head>
<body>
<!-- Header -->
<header class="main-header">
<a href="#" class="main-header-element"><img class="starbucks-logo" src="./resources/images/starbucks_logo.jpg" alt="Starbucks Logo"/></a>
<!-- Header Navigation -->
<nav class="main-header-element header-link">
<a href="https://www.starbucks.ca/menu">Menu</a>
<a href="https://www.starbucks.ca/rewards">Rewards</a>
<a href="https://www.starbucks.ca/gift">Gift Cards</a>
</nav>
<div class="other-buttons">
<div class="main-header-element find-location">
<a href="https://www.starbucks.ca/store-locator" title="Find a Store">
<img src="./resources/images/location_logo_hover.png" alt="Location Logo"/>
<p>Find a Store</p>
</a>
</div>
<div class="main-header-element join-buttons">
<a href="https://www.starbucks.ca/account/signin?ReturnUrl=%2F" class="link-button">Sign in</a>
<a href="https://www.starbucks.ca/account/create" class="link-button" id="join-now-button">Join now</a>
</div>
</div>
</header>
<!-- Main Page Content -->
<main>
<!-- Starbucks Rewards -->
<section class="rewards">
<h1>Earn up to 50% more Stars at Starbucks with <span id="rewards-td-text">TD</span></h1>
<p>Join Starbucks Rewards and link with select TD Cards* to <span id="rewards-description-text1">earn more points and Stars when you order on the</span><span id="rewards-description-text2"> Starbucks app!</span></p>
<div id="rewards-link">
<a href="https://www.starbucks.ca/rewards" title="Join Starbucks Rewards Now!" class="link-button">Join now</a>
</div>
<div id="rewards-img">
<img src="./resources/images/starbucks_rewards.jpg" alt="Starbucks Rewards">
</div>
</section>
<!-- Brightest New Drinks-->
<section class="brightest-drinks">
<h1>Summer’s brightest <span id="brightest-drinks-h1-span">new drinks</span></h1>
<p>Introducing the Pineapple Passionfruit Starbucks Refreshers<span class="registered-symbol">®</span> beverage and the Starbucks <span class="registered-symbol">®</span> Paradise Drink with creamy <span id="brightest-drinks-p-span">coconut beverage.</span></p>
<a class="link-button" href="https://www.starbucks.ca/menu/featured/" title="Summer’s Brightest New Drink">Learn More</a>
<div id="brightest-drinks-img">
<img src="./resources/images/pineapple_passionfruit.jpg" alt="Pineapple Passionfruit">
</div>
</section>
<!--Creamy Dreamy Cold Brew Section-->
<section class="cold-brew">
<h1>Creamy, dreamy <span id="cold-brew-h1-text">cold brew</span></h1>
<p>Our new super-smooth Chocolate Cream Cold Brew is here, topped with a cloud of <span id="cold-brew-p-span">silky, chocolaty cold foam.</span></p>
<a href="https://www.starbucks.ca/menu/product/2123644/iced." title="Order Chocolate Cream Cold Brew" class="link-button">Order Now</a>
<div id="cold-brew-img">
<img src="./resources/images/Chocolate_cream_cold_brew.jpg" alt="Chocolate Cream Cold Brew">
</div>
</section>
<!--Back-to-school smiles section-->
<section class="back-to-school">
<h1>Back-to-school <span id="back-to-school-h1-span">Smiles</span></h1>
<p>A Starbucks eGift makes an A+ treat for students, teachers and school support staff.</p>
<a class="link-button" href="https://www.starbucks.ca/gift" title="Send an eGift">Send an eGift</a>
<div id="back-to-school-img">
<img src="./resources/images/back_to_school.jpg" alt="Back To School">
</div>
</section>
<!-- Conditions, About, Careers, Social Impact, For Business Partners, Order and Pickup-->
<footer>
<p>**Conditions apply. Visit <a href="https://www.td.com/ca/en/personal-banking/products/credit-cards/starbucks/" title="star bucks offer">www.td.com/starbucksoffer</a> for more details.</p>
<div class="footer-link-section about-starbucks">
<h2 class="footer-header">About Starbucks</h2>
<ul>
<li class="footer-header-links"><a href="https://www.starbucks.ca/about-us/" title="Our Company">Our Company</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/coffee/" title="Our Coffe">Our Coffee</a></li>
<li class="footer-header-links"><a href="https://stories.starbucks.ca/en-ca/" title="Stories and News">Stories and News</a></li>
<li class="footer-header-links"><a href="https://investor.starbucks.com/ir-home/default.aspx" title="Investor Relations">Investor Relations</a></li>
<li class="footer-header-links"><a href="https://customerservice.starbucks.ca/" title="Customer Service">Customer Service</a></li>
</ul>
</div>
<div class="footer-link-section careers">
<h2 class="footer-header">Careers</h2>
<ul>
<li class="footer-header-links"><a href="https://www.starbucks.ca/careers/working-at-starbucks/culture-and-values/" title="Culture and Values">Culture and Values</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/responsibility/people/" title="Diversity and Inclusion">Diversity and Inclusion</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/careers/" title="Work At Starbucks">Work At Starbucks</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/careers/find-a-job/corporate/" title="Corporate Careers">Corporate Careers</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/careers/find-a-job/retail/" title="Retail Careers">Retail Careers</a></li>
</ul>
</div>
<div class="footer-link-section social-impact">
<h2 class="footer-header">Social Impact</h2>
<ul>
<li class="footer-header-links"><a href="https://www.starbucks.ca/responsibility/reporting-hub/" title="Overview">Overview</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/responsibility/people/" title="People">People</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/responsibility/planet/" title="Planet">Planet</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/responsibility/reporting-hub/" title="Environmental and Social Impact Reporting">Environmental and Social Impact Reporting</a></li>
</ul>
</div>
<div class="footer-link-section business-partners">
<h2 class="footer-header">For Business Partners</h2>
<ul>
<li class="footer-header-links"><a href="https://www.starbuckscardb2b.com/" title="Corporate Gift Card Sales">Corporate Gift Card Sales</a></li>
<li class="footer-header-links"><a href="https://www.solutions.nestleprofessional.ca/our-brands/starbucks" title="Branded Solutions">Branded Solutions</a></li>
</ul>
</div>
<div class="footer-link-section order-and-pickup">
<h2 class="footer-header">Order And Pickup</h2>
<ul>
<li class="footer-header-links"><a href="https://www.starbucks.ca/rewards/mobile-apps/" title="Order on the App">Order on the App</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/menu" title="Order on the Web">Order on the Web</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/delivery/" title="Delivery">Delivery</a></li>
<li class="footer-header-links"><a href="https://www.starbucks.ca/ways-to-order/" title="Order and Pickup Options">Order and Pickup Options</a></li>
</ul>
</div>
<!-- socials -->
<div class="social-links">
<a href="https://www.facebook.com/starbuckscanada" title="facebook"><img src="./resources/images/facebook_logo.jpg" alt="facebook-logo"></a>
<a href="https://www.instagram.com/starbuckscanada/" title="instagram"><img src="./resources/images/instagram_logo.jpg" alt="instagram-logo"></a>
<a href="https://twitter.com/starbuckscanada" title="twitter"><img src="./resources/images/twitter_logo.jpg" alt="twitter-logo"></a>
</div>
<!-- other-->
<div class="other-footer-elements">
<a href="https://www.starbucks.ca/terms/privacy-statement/" title="Privacy Statement">Privacy Statement</a>
<span class="footer-privacy-statement-separator">|</span>
<a href="https://www.starbucks.ca/terms/starbucks-terms-of-use/" title="Terms of Use">Terms of Use</a>
<span class="footer-privacy-statement-separator">|</span>
<a href="https://id.starbucks.com/GlobalResources/SbuxSignOut.aspx?sendTo=aHR0cHM6Ly9wYXJ0bmVyLnN0YXJidWNrcy5jb20v" title="Partners">Partners</a>
<a id="french-site-option" href="https://fr.starbucks.ca/" title="Passer au site français">Passer au site français</a>
<p id="rights-reserved-text">© 2022 Starbucks Coffee Company. All rights reserved.</p>
</div>
</footer>
</main>
</body>
</html>
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
/* header css start*/
.main-header {
border-bottom: 2px solid gainsboro;
padding: 20px;
}
.main-header-element {
display: inline-block;
}
.main-header-element .link-button {
display: inline-block;
}
.starbucks-logo {
height: 50px;
position: relative;
top: 10px;
left: 10px;
}
.header-link {
position: relative;
bottom: 12px;
left: 20px;
}
.header-link a {
letter-spacing: 2px;
font-size: 12.5px;
text-decoration: none;
font-weight: 800;
color: black;
text-transform: uppercase;
margin: 10px;
}
.header-link a:hover {
color: #006241;
}
.find-location {
display: inline-block;
filter: grayscale(1);
position: relative;
bottom: 10px;
}
.find-location a {
text-decoration: none;
color: #006241;
}
.find-location a:hover {
color: #006241;
}
.find-location img {
height: 20px;
position: relative;
right: 25px;
top: 22px;
}
.find-location p {
font-size: 14px;
font-weight: bold;
}
.find-location img:hover{
filter: grayscale(0);
}
.find-location:hover {
filter: grayscale(0);
color: #006241;
}
.link-button {
border: 1px solid black;
border-radius: 50px;
padding: 7px 16px;
font-size: 12px;
font-weight: bold;
}
#join-now-button {
background-color: black;
color: white;
}
.other-buttons {
display: inline-block;
position: relative;
left: 50%;
}
.join-buttons a {
text-decoration: none;
color: black;
}
.join-buttons {
margin-left: 50px;
position: relative;
bottom: 10px;
}
.join-buttons p {
margin-left: 10px;
}
.join-buttons a:hover {
background-color: rgba(225, 220, 220, 0.453);
}
.join-buttons a[id="join-now-button"]:hover {
background-color: rgb(90, 90, 90)!important;
}
/* header css end */
/* main start */
/* rewards */
.rewards {
background-color: #d4e9e2;
margin: 35px;
}
.rewards h1, .rewards p, #rewards-link {
text-align: right;
}
.rewards h1 {
color: #1e3932;
position: relative;
right: 115px;
top: 50px;
}
.rewards img {
height: 250px;
width: 700px;
}
#rewards-img {
position: relative;
bottom: 50px;
width: 250px;
}
#rewards-td-text {
position: relative;
top: 25px;
right: 250px;
}
.rewards p {
color: #1e3932;
font-size: 18px;
position: relative;
top: 115px;
left: 815px;
max-width: 460px;
}
#rewards-description-text1 {
position: relative;
top: 10px;
right: 20px;
}
#rewards-description-text2 {
top: 15px;
position: relative;
right: 138px;
}
#rewards-link a {
font-size: 18px;
text-decoration: none;
color: black;
position: relative;
top: 190px;
right: 320px;
}
#rewards-link a:hover {
background-color: rgba(225, 220, 220, 0.453);
}
/*rewards end*/
/* brightest drinks start */
.brightest-drinks {
background-color: #fa91aa;
margin: 35px;
height: 600px;
}
.brightest-drinks h1 {
font-size: 50px;
color: #1e3932;
font-weight: 590;
position: relative;
top: 100px;
left: 150px;
width: 500px;
}
#brightest-drinks-h1-span {
position: relative;
left: 100px;
}
.brightest-drinks p {
color: #1e3932;
position: relative;
width: 470px;
top: 120px;
left: 155px;
font-size: 25px;
}
#brightest-drinks-p-span {
position: relative;
left: 100px;
}
#brightest-drinks-img {
text-align: right;
height: 500px;
}
#brightest-drinks-img img {
position: relative;
height: 600px;
width: 750px;
bottom: 251px;
}
.brightest-drinks a {
text-decoration: none;
color: black;
font-size: 17px;
position: relative;
top: 170px;
left: 300px;
}
.brightest-drinks a:hover {
background-color: rgba(225, 220, 220, 0.453);
}
.registered-symbol {
font-size: small;
vertical-align: top;
}
/* brightest drinks end */
/*Creamy, dreamy cold brew start*/
.cold-brew {
color: white;
background-color: #f06464;
text-align: right;
margin: 35px;
height: 600px;
}
.cold-brew h1 {
font-size: 50px;
position: relative;
top: 150px;
right: 200px;
letter-spacing: 2px;
}
.cold-brew p {
font-size: 25px;
width: 500px;
position: relative;
top: 170px;
left: 760px;
}
#cold-brew-h1-text {
display: block;
position: relative;
width: 400px;
left: 960px;
}
#cold-brew-p-span {
position: relative;
right: 75px;
}
.cold-brew a {
text-decoration: none;
color: white;
border-color: white;
font-size: 17px;
position: relative;
top: 225px;
right: 350px;
}
.cold-brew img {
width: 700px;
height: 600px;
}
#cold-brew-img {
text-align: left;
position: relative;
bottom: 221px;
width: 700px;
height: 600px;
}
.cold-brew a:hover {
background-color: rgba(225, 220, 220, 0.453);
}
/*Creamy, dreamy cold brew end*/
/*Back-to-school smiles*/
.back-to-school {
background-color: #faaa5a;
margin: 35px;
height: 650px;
max-height: 1050.800px;
}
.back-to-school h1{
letter-spacing: 2px;
font-size: 50px;
color: #1e3932;
position: relative;
top: 200px;
left: 170px;
}
#back-to-school-h1-span {
display: block;
position: relative;
left: 80px;
}
.back-to-school p {
width: 500px;
font-size: 25px;
color: #1e3932;
position: relative;
top: 220px;
left: 110px;
}
.back-to-school a {
text-decoration: none;
color: black;
font-size: 17px;
position: relative;
top: 250px;
left: 260px;
}
.back-to-school a:hover {
background-color: rgba(225, 220, 220, 0.453);
}
.back-to-school img {
height: 650px;
width: 750px;
position: relative;
bottom: 193px;
}
#back-to-school-img {
height: 100px;
text-align: right;
}
/*Back-to-school smiles end*/
/*footer start*/
footer {
margin-left: 20px;
}
footer p {
text-align: center;
border-bottom: 2px solid rgb(226, 219, 219);
padding-top: 50px;
padding-bottom: 30px;
}
footer p a {
color: black;
}
footer p a:hover {
text-decoration: none;
}
.footer-header {
font-size: 20px;
color: rgba(0,0,0,.87);
font-weight: normal;
}
.footer-header-links {
margin: 20px;
list-style: none;
}
.footer-header-links a {
color: rgba(0,0,0,.58);
text-decoration: none;
}
.footer-header-links a:hover {
color: rgba(0,0,0,.87);
}
.footer-link-section {
display: inline-block;
}
.about-starbucks {
position: relative;
top: 20px;
}
.about-starbucks h2 {
position: relative;
left: 20px;
}
.careers {
position: relative;
top: 20px;
left: 50px;
}
.careers h2 {
position: relative;
left: 20px;
}
.social-impact {
position: relative;
left: 50px;
bottom: 18px;
}
.social-impact h2 {
position: relative;
left: 20px;
}
.business-partners {
position: relative;
bottom: 95px;
}
.business-partners h2 {
position: relative;
left: 10px;
}
.order-and-pickup {
position: relative;
left: 50px;
bottom: 18px;
}
.order-and-pickup h2 {
position: inherit;
left: 18px;
}
/*social links*/
.social-links {
border-top: 2px solid rgb(226, 219, 219);
padding-top: 30px;
margin-top: 40px;
margin-left: 5px;
}
.social-links a img{
height: 45px;
margin: 5px;
background-color: transparent;
padding: 7px;
}
.social-links a img:hover {
background-color: rgba(225, 220, 220, 0.453);
border-radius: 50%;
}
/*privacy statement*/
.other-footer-elements {
margin-top: 20px;
}
.other-footer-elements a{
color: rgba(0,0,0,.87);
text-decoration: none;
margin-top: 20px;
margin-right: 10px;
position: relative;
left: 15px;
}
.other-footer-elements a:hover {
text-decoration: underline;
}
.footer-privacy-statement-separator {
font-size: 20px;
margin-left: 20px;
color: rgba(0,0,0,.58);
}
#french-site-option {
margin-top: 35px;
display: block;
font-weight: bold;
color: #00754a;
}
#french-site-option:hover {
text-decoration: none;
}
#rights-reserved-text {
text-align: start;
margin-left: 14px;
font-size: 14px;
position: relative;
bottom: 25px;
border: none;
}
/*footer end*/
/* main end*/