How to change image position

Question

I need some help, I'm currently trying to make a portfolio using HTML following a tutorial I'm watching. I used undraw to add an image but unfortunately, the image is stuck to the right SVG image stuck to the right side

I want to put the image underneath my icons but not sure on how to do to this, my CSS code looks like this:

 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600&display=swap'); *{ color:black; font-family: 'Lato', sans-serif; padding: 0; margin: 0; box-sizing: border-box; } h1,h2,h3,h4,h5,h6,span{ color:black; text-align: center; line-height: 1.25; } h1{ font-size: 36px; } p{ line-height: 1.5; font-size: 16px; } li{ list-style-type: none; }.flex{ display: flex; /* this automatically aligns like columns or rows with auto width and auto height */ }.flex-1{ flex: 1; /* this makes sure that it is the entire height of the page */ } /* Navigation bar */.row{ width: 100%; max-width: 800px; margin: 0 auto; }.text-pink{ color: #FF69B4; } nav{ height: 100px; width: 100%; max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }.nav__link--list{ display: flex; }.nav__link--anchor{ margin: 0 12px; color: black; text-decoration: none; font-weight: 700; }.nav__link--anchor-primary{ background-color: #FF69B4; padding: 8px 20px; border-radius: 50px; color: white; transition: all 300ms ease; }.nav__link--anchor-primary:hover{ background-color: #FF69B4; }.personal_logo{ font-size: 20px; color: #FF69B4; margin: 0 12px; font-weight: bold; } /* About mE */ #about-me{ min-height: 100vh; /* entire height of the page */ display: flex; flex-direction: column; }.about-me__info{ display: flex; flex-direction: column; }.about-me__info--container { display: flex; flex-direction: column; /* so it is not side-by-side */ align-items: center; max-width: 600px; margin: 0 auto; text-align: center; }.about-me--picture--mask{ width: 180px; height: 180px; border-radius: 100%; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,1); margin-bottom: 20px; }.about-me__picture{ width: 100%; transform: scale(1,1.1); padding-top: 7px; }.about-me__info--para{ font-size: 15px; margin-bottom: 28px; }.about-me__info--title{ margin-bottom: 15px; }.about-me__link{ font-size: 20px; color:#FF69B4; text-decoration: none; padding: 0 16px; }.about-me__img--container{ flex: 1; display: flex; align-items: center; }

 <,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>Annette</title> <link rel="stylesheet" href="./css/styles:css"> <script src="https.//kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script> </head> <body> <section id="about-me"> <nav> <div class="personal_logo">Annette</div> <ul class="nav__link--list"> <li class="nav__Link"> <a href="#languages" class=" nav__link--anchor link__hover-effect link_hover-effect--black" >Languages</a> </li> <li class="nav__link"> <a href="#projects" class=" nav__link--anchor link__hover-effect link_hover-effect--black"> Projects</a> </li> <li class="nav__link"> <a href="" class= "nav__link--anchor nav__link--anchor-primary" >Contact</a> </li> </ul> </nav> <div class="flex flex-1"> <div class=",about-me__info row"> <:--inside the row. there is 2 sections. infromation and image--> <div class="about-me__info--container"> <figure class="about-me--picture--mask"> <img src=",/images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me,"> </figure> <.--this contains my image --> <h1 class="about-me__info--title"> Hey. I'm <span class="text-pink">Jane Doe </span> </h1> <h1> <p class="about-me__info--para"> I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees. I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that I'm interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong> </p> <div class="about-me__links"></div> <a href="" class="about-me__link"> <i class="fa-brands fa-linkedin"></i> </a> <a href="" class="about-me__link"> <i class="fa-brands fa-github"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-inbox"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-file-pdf"></i> </a> </div> </div> <figure class="about-me__img--container"> <img src="./Assests/undraw_proud_coder_re_exuy.svg" alt=""> </figure> </div> </section> </body> </html>

Any advice on how to get the SVG image in the centre underneath my icons?? Thank you!

Answer 1

Just need a little to fix the mark up. And to put the image in its own div, below the flex stuff.

 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600&display=swap'); * { color: black; font-family: 'Lato', sans-serif; padding: 0; margin: 0; box-sizing: border-box; } h1, h2, h3, h4, h5, h6, span { color: black; text-align: center; line-height: 1.25; } h1 { font-size: 36px; } p { line-height: 1.5; font-size: 16px; } li { list-style-type: none; }.flex { display: flex; /* this automatically aligns like columns or rows with auto width and auto height */ }.flex-1 { flex: 1; /* this makes sure that it is the entire height of the page */ } /* Navigation bar */.row { width: 100%; max-width: 800px; margin: 0 auto; }.text-pink { color: #FF69B4; } nav { height: 100px; width: 100%; max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }.nav__link--list { display: flex; }.nav__link--anchor { margin: 0 12px; color: black; text-decoration: none; font-weight: 700; }.nav__link--anchor-primary { background-color: #FF69B4; padding: 8px 20px; border-radius: 50px; color: white; transition: all 300ms ease; }.nav__link--anchor-primary:hover { background-color: #FF69B4; }.personal_logo { font-size: 20px; color: #FF69B4; margin: 0 12px; font-weight: bold; } /* About mE */ #about-me { min-height: 100vh; /* entire height of the page */ display: flex; flex-direction: column; }.about-me__info { display: flex; flex-direction: column; }.about-me__info--container { display: flex; flex-direction: column; /* so it is not side-by-side */ align-items: center; max-width: 600px; margin: 0 auto; text-align: center; }.about-me--picture--mask { width: 180px; height: 180px; border-radius: 100%; overflow: hidden; box-shadow: 0 8px 16px rgba(0, 0, 0, 1); margin-bottom: 20px; }.about-me__picture { width: 100%; transform: scale(1, 1.1); padding-top: 7px; }.about-me__info--para { font-size: 15px; margin-bottom: 28px; }.about-me__info--title { margin-bottom: 15px; }.about-me__link { font-size: 20px; color: #FF69B4; text-decoration: none; padding: 0 16px; }.about-me__img--container { flex: 1; display: flex; align-items: center; }

 <,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>Annette</title> <link rel="stylesheet" href="./css/styles:css"> <script src="https.//kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script> </head> <body> <section id="about-me"> <nav> <div class="personal_logo">Annette</div> <ul class="nav__link--list"> <li class="nav__Link"> <a href="#languages" class=" nav__link--anchor link__hover-effect link_hover-effect--black">Languages</a> </li> <li class="nav__link"> <a href="#projects" class=" nav__link--anchor link__hover-effect link_hover-effect--black"> Projects</a> </li> <li class="nav__link"> <a href="" class="nav__link--anchor nav__link--anchor-primary">Contact</a> </li> </ul> </nav> <div class="flex flex-1"> <div class=",about-me__info row"> <:--inside the row. there is 2 sections. infromation and image--> <div class="about-me__info--container"> <figure class="about-me--picture--mask"> <img src=",/images/Annette2.JPG" class="about-me__picture" alt="Picture of Me,"> </figure> <.--this contains my image --> <h1 class="about-me__info--title"> Hey: I'm <span class="text-pink">Jane Doe </span> </h1> <p class="about-me__info--para"> I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees. I have always been interested in creating very engaging and interactive PowerPoints to present my work: This led to my passion for web development and designing projects on topics that I'm interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong> </p> <div class="about-me__links"> <a href="" class="about-me__link"> <i class="fa-brands fa-linkedin"></i> </a> <a href="" class="about-me__link"> <i class="fa-brands fa-github"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-inbox"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-file-pdf"></i> </a> </div> </div> </div> </div> <div> <figure class="about-me__img--container" > <img src="https://picsum.photos/200" alt="" style="margin: auto"> </figure> </div> </section> </body> </html>