I am working on a project on my course and I am finding it difficult to figure out how to move higher the main picture of the page since it moves the whole section.
What I know and what I tried is this : I did create a separate div class on the picture, as well as putting it on a different section but unfortunately it would move the whole section with the title and paragraph higher at the same time.
<section >
<div >
<div>
<h5 >Hello, I am</h5>
<h1 >CALEB NYONG</h1>
<h2 >UI/UX & Product Designer</h2>
<p >I’m a top online marketer and branding expert, I started my career
by lauching the popular metaverse design, in just a few short
years, I built the brand to millions of social media followers and websites visitors.</p>
<div >
<div>
<button type="button">Hire Me</button>
</div>
<div>
<h5 >Download CV</h5>
</div>
<div>
<svg width="20" height="20" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 15.5L1.621 17.985C1.72915 18.4177 1.97882 18.8018 2.33033 19.0763C2.68184 19.3508 3.11501 19.4999 3.561 19.5H18.439C18.885 19.4999 19.3182 19.3508 19.6697 19.0763C20.0212 18.8018 20.2708 18.4177 20.379 17.985L21 15.5M11 13.5V1.5V13.5ZM11 13.5L7 9.5L11 13.5ZM11 13.5L15 9.5L11 13.5Z" stroke="#FCC028" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
<div >
<img src="./img/portrait-smiling-handsome-man-eyeglasses_171337-4853 1.png" alt="">
</div>
</section>
Above is the code that contains the picture and the whole section that contains all the other parts. I need the code in #css
If you need any other information please let me know.
Thanks
CodePudding user response：
As I understand, you are trying to set an image as background. Then you can do something like this:
.block {
background-image: url("./img/portrait-smiling-handsome-man-eyeglasses_171337-4853 1.png");
}
CodePudding user response：
You should concentrate on making sure that the structure of the HTML is correct before applying CSS to the various elements.
If you cannot see what is happening then put the following at the beginning of your CSS:
* {
border: solid 1px red;
}
and then you will see where your boxes, divs, etc., are.
You should look at the snippet code below on a full screen. You should be able to take the corrections I made to your code to complete your design.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
}
.block {
display: flex;
align-items: center;
}
button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
width: 119px;
height: 43px;
border-radius: 5px;
border: none;
outline: none;
background-color: #FCC028;
color: #fff;
padding: 10px 30px;
margin-top: 10px;
}
.block--text__hello {
margin-top: -240px;
color: #FCC028;
font-size: 18px;
font-weight: 400;
}
.block--vector {
margin-top: 17px;
}
.block--picture {
padding-top: 50px;
}
.container {
max-width: 1300px;
margin: -10px auto;
display: flex;
align-items: center;
}
.block {
padding-top: 140px;
}
.box {
max-width: 1400px;
margin: 0 auto;
display: table-row;
position: absolute;
width: 347px;
height: 126px;
left: 60px;
top: 550px;
background: #FFFFFF;
box-shadow: 0px 2.79529px 34.9412px rgba(19, 23, 61, 0.1);
border-radius: 6.98823px;
}
.box--texts {
display: inline-flex;
flex-direction: column;
}
.box--picture {
position: absolute;
width: 48.92px;
height: 48.92px;
margin-top: 10px;
padding-left: 18px;
}
.box--title {
color: #000000;
font-size: 11px;
padding-top: 1px;
padding-left: 74px;
line-height: 27px;
}
.box--subtitle {
color: rgb(144, 144, 144);
font-weight: 400;
padding-left: 74px;
padding-right: -230px;
margin-top: -23px;
}
.box--text {
font-size: 9px;
line-height: 15px;
font-weight: 400;
color: rgba(0, 0, 0, 0.7);
padding-bottom: 21px;
padding-left: 21px;
}
.links {
display: inline-flex;
}
.block--title__bold {
font-weight: 600;
font-size: 15px;
line-height: 22px;
color: #000000;
margin-top: -30px;
padding-left: 22px;
padding-right: 24px;
padding-top: 50px;
}
.header__content {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 17px;
}
.nav__item {
font-size: 15px;
line-height: 20px;
font-weight: 500px;
text-decoration: none;
margin: 25px 15px;
color: #000000;
}
.block--main__title {
font-size: 72px;
line-height: 110px;
font-weight: 600;
color: #000000;
margin-top: -40px;
}
.block--main__subtitle {
font-size: 24px;
line-height: 36px;
font-weight: 400;
color: #207733;
margin-top: -60px;
}
.block--main__content {
font-size: 18px;
line-height: 27px;
color: rgba(0, 0, 0, 0.5);
}<header >
<div >
<img src="https://source.unsplash.com/random/200x50/?logo" alt="logo" />
<nav >
<a href="#">ABOUT ME</a>
<a href="#">SERVICES</a>
<a href="#">PORTOFOLIO</a>
<a href="#">TESTIMONIALS</a>
<a href="#">CONTACT ME</a>
</nav>
<button type="button">Hire Me</button>
</div>
</header>
<section >
<div >
<div>
<div>
<h5 >Hello, I am</h5>
<h1 >CALEB NYONG</h1>
<h2 >UI/UX & Product Designer</h2>
<p >I’m a top online marketer and branding expert, I started my career by lauching the popular metaverse design, in just a few short years, I built the brand to millions of social media followers and websites visitors.</p>
</div>
<div >
<div>
<button type="button">Hire Me</button>
</div>
<div>
<h5 >Download CV</h5>
</div>
<div>
<svg width="20" height="20" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 15.5L1.621 17.985C1.72915 18.4177 1.97882 18.8018 2.33033 19.0763C2.68184 19.3508 3.11501 19.4999 3.561 19.5H18.439C18.885 19.4999 19.3182 19.3508 19.6697 19.0763C20.0212 18.8018 20.2708 18.4177 20.379 17.985L21 15.5M11 13.5V1.5V13.5ZM11 13.5L7 9.5L11 13.5ZM11 13.5L15 9.5L11 13.5Z" stroke="#FCC028" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
</div>
<div >
<img src="https://source.unsplash.com/random/400x600/?gardener" alt="">
</div>
</section>
<section >
<div>
<picture >
<img src="./img/Ellipse 1.png" alt="girl">
</picture>
<div >
<h5 >Phanny - Nigeria</h5>
<h6 >Sat 28 May 2022</h6>
<p >In just a few short years, I built the brand to millions of social media followers and websites visitors.</p>
</div>
</div>
</section>