Hey so this is my first post/question, im currently learning HTML/CSS/JAVA looking to find a job in the new year.
ive been asked to make a site for someone (code is linked below) what im struggling with is the media query/responsiveness for my banner image, it wont scale down when i go to tablet or phone screen.
any feedback on my code is welcome too as i said i am learning still so be nice 😀
thank you in advance Andrew
@import url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
background: rgb(17, 17, 17);
min-height: 200vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.4s;
padding: 40px 100px;
z-index: 100000;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header .logo {
position: relative;
font-weight: 400;
color: #fff;
text-decoration: none;
font-size: 3em;
letter-spacing: 2px;
transition: 0.6s;
font-family: 'Barlow', sans-serif;
}
header .logo:hover {
color: rgb(24, 24, 24);
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-size: 23px;
font-family: 'Barlow', sans-serif;
}
header ul li a:hover {
color: rgb(24, 24, 24);
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(images/banner.jpg);
background-size: cover;
opacity: .4;
}
header.sticky .logo, header.sticky ul li a {
color:#000
}
.h1 {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
font-size: 60px;
}
.image1 {
margin-top: 10px;
margin-left: 10px;
border-radius: 19px;
}
/* about me */
.about {
width: 100%;
padding: 78px 0px;
background-color: #191919;
}
.about img {
height: 800px;
width: 520px;
padding-left: 12px;
}
@media (max-device-width: 500px) {
.about img {
padding-right: 20px;
height: 500px;
}
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.about-text h1 {
color: #fff;
font-size: 80px;
text-transform: capitalize;
margin-bottom: 20px
}
.about-text h5 {
color: #fff;
font-size: 25px;
text-transform: capitalize;
margin-bottom: 25px;
letter-spacing: 2px;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background: #f9004d;
color: #fff;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
}
button:hover {
background: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.name {
font-size: 30px;
color: #fcfc;
letter-spacing: 5px;
}
/* footer */
footer {
height: auto;
width: 100vw;
font-family: "poppins";
padding-top: 40px;
color: #fff;
background: rgb(17, 17, 17);
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: #fff;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #000;
}
.footer-bottom {
width: 100%;
padding: 20px 0;
background: #000;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>enDURANCE FIT, Andrea Durance Personal Trainer</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
</head>
<body>
<div>
<header>
<a href="#" class="logo">enDurancefit</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#aboutme">About Me</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonies</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</header>
<section class="banner">
</section>
<h1 class="h1">Welcome To enDurance fit <p style ="font-family: Rajdhani">Andrea Durance</p><p>Personal Trainer</p> </h1>
</div>
<!--Section 2: About me-->
<section class="about" id="aboutme">
<div class="main">
<img src="images/profile.jpg">
<div class="about-text">
<h1>About Me</h1>
<h5>Personal Trainer <span style="color: #f9004d;"> & Fitness Instructor</span></h5>
<p>I have 5 years’ experience within the fitness industry, firstly as a level 2 fitness instructor, then a level 3 personal trainer, also teaching various classes along the way, including spin, kettlebells and bootcamps.
My passion for fitness began in my early teens around the age of 13-14.
<p> This is where my aspirations to become a personal trainer began, and not long after that is when my career began. The manager of the gym where I was training at the time recognised my passion and offered me work experience, which led on to an apprenticeship in which I gained my fitness instructing qualification. Leading on from this I completed my level 3 personal training through a different apprenticeship based at another gym.</p>
<p>A funny fact about the name of my company ‘enDurancefit’, is that I first came up with it when I was about 14, and I was dead set that one day I will have a personal training business and I wanted it to be called enDurancefit, and here we are! Moral of the story, if you have a goal, stick at it and don’t lose sight of it no matter the setbacks you may encounter! </p>
<p>Training and exercise not only keeps me physically well, but mentally well also. One of the many reasons I love it, one of my aims is to help my clients keep physically and mentally well with a combination of positive coaching and lifestyle changes.
<p>Training and exercise is more than just the physical results, of course seeing muscle growth/fat loss/weight gain or loss depending on the goal is always something to be proud of. But for most people training becomes their ‘me’ time, time to forget life’s stresses and a time to focus on you, your goals and your own health and wellbeing.
I want to help my clients reach a happy, healthy, and sustainable lifestyle, training to their maximum capabilities and smashing goals set, also whilst enjoying life.</p>
<p>FITTER, HEALTHIER, STRONGER, AND HAPPIER.
enDurancefit <br>
<div class="name" > ANDREA DURANCE </div>
</p>
<button type="button">Contact Me</button>
</div>
</div>
</section>
<section>
<footer class="footer-content">
<div>
<h3>enDurancefit</h3>
<p>Thank you for visiting, dont forget to check out my socials.</p>
<ul class="socials">
<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="#"><i class="fab fa-youtube-square"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p>Copyright ©2021 enDurance fit. designed by <span>Andrew Hinkley</span></p>
</div>
</footer>
</section>
</body>
<!--Scripts-->
<!--Script for nav bar-->
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
</script>
<!--Scrip End-->
</html>