Ways to adjust the positioning of an image

Seeking assistance, I am currently working on building a portfolio using HTML while following a tutorial. I utilized undraw to insert an image but unfortunately, the image is fixed to the right-hand side:

I would like to position the image below my icons, but I am unsure of the correct approach to achieve this. Any suggestions on how to center the SVG image beneath my icons?

@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; 
}

.flex-1{
    flex: 1; 

}
/* 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; 
    display: flex;
    flex-direction: column;
}

.about-me__info{
    display: flex;
    flex-direction: column;
}



.about-me__info--container {
    display: flex;
    flex-direction: column; 
    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 are 2 sections: information 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"></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>

javascripthtmlcss

Answer â„–1

Just a small adjustment needed for the markup. Move the image to its own div, positioned below the flex layout.

@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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In Express.js, the value of req.body.data is not defined

Recently, I've been delving into nodejs and express js. My aim is to send a json object to my nodejs application using postman. Below is the code snippet from my app: var express = require("express"); var bodyParser = require('body-parser') ...

javascriptjsonnode.jsexpressbody-parser

Using OPTIONS instead of GET for fetching Backbone JS model data

Currently, I am attempting to retrieve data from a REST endpoint with the help of a model. Below is the code snippet that I am using: professors: function(id) { professor = new ProfessorModel({ id: id }); professor.fetch({ headers: { ...

javascriptajaxresthttpbackbone.js

What is causing the failure of generating a DIV element with JQuery?

I'm having trouble creating a div element with a class and appending a child to it. I keep getting no response. What could be the issue? JS content function generateTable() { var procDiv = $("<div class='proc-container'></div>" ...

jqueryhtml

Is there an issue with MVC5 in passing JSON data to Controller using Ajax?

I am working on implementing duplication checking in my MVC5/EF Code-First application. In the Asset View's Create() method, I use JavaScript to show/hide textboxes for adding a new location_dept/location_room: <div class="form-group"> ...

javascriptjqueryajaxjsonasp.net-mvc

Tips for implementing JWT in a Node.js-based proxy server:

I am a Node.js beginner with a newbie question. I'm not sure if this is the right place to ask, but I need ideas from this community. Here's what I'm trying to do: Server Configurations: Node.js - 4.0.0 Hapi.js - 10.0.0 Redis Scenario: ...

javascriptnode.jsproxy

Utilizing the value selected in a form to trigger an action method without the use of a query

I am currently utilizing pug to generate pages for my nodeJS server. In this particular case, I am attempting to use the value selected in a form select option to dynamically change the action method. Essentially, the goal is to utilize the group name sel ...

htmlnode.jsformspug

How can I make an HTML button function with a JavaScript script?

When I click a button in an HTML file, it should trigger a function in a JavaScript file to display an alert that says "hey." However, this simple task is not working for me and I am unsure why. Java Script is enabled in my browser (Google Chrome) and I am ...

javascripthtml

Tips for showing both label and value on a pie slice in Apex charts

I am currently utilizing apex chart within an angular application to showcase charts. I am specifically focusing on a pie chart and aiming to customize it by displaying labels on the values within each slice of the pie, similar to what is shown in the atta ...

javascriptjquerycssangularapexcharts

I'm having trouble figuring out how to access response headers with HttpClient in Angular 5. Can anyone

I recently developed an authentication service in Angular 5, where I utilize the HttpClient class to make a POST request to my backend server. The backend server then responds with a JWT bearer token. Here is a snippet of how my request looks: return thi ...

javascriptangulartypescript

Using Special Characters in React JS Applications

When handling CSV uploads with accented characters such as émily or ástha, I encountered the need to encode and pass them to the backend. Experimenting with different approaches, I tried adjusting the file type in FormData from 'text/plain' to ...

javascriptreactjsencodingdiacriticsnon-ascii-characters

When delving into an object to filter it in Angular 11, results may vary as sometimes it functions correctly while other times

Currently, I am working on implementing a friend logic within my codebase. For instance, two users should be able to become friends with each other. User 1 sends a friend request to User 2 and once accepted, User 2 is notified that someone has added them a ...

javascriptangulartypescriptrxjs

Is there a way to connect and interact with a different ng-controller's ng-model within a separate ng-controller?

Is it possible to access the ng-model from another ng-controller and if so, how can it be done? In this scenario, I am using two controllers. The first controller has a model called mddl1, while the second controller does not have any other model. However, ...

javascriptangularjs

Updating the total of textboxes using jQuery

I'm working on a jQuery function that totals the values of 7 textboxes and displays the result in a grand total textbox: $(document).ready(function() { $('.class2').keyup(function() { var sum = 0; $('.class2').each(funct ...

javascriptjquery

Determine the number of rows in an Excel spreadsheet using JavaScript

Currently, I am working on a codeigniter project where I need to upload an Excel file. However, before uploading the file, I want to display the number of records it contains. To achieve this, I decided to create a function within my script and then call t ...

javascriptphpexcelcodeigniter

Error occurred while attempting to execute the method

Here's a MongoDB Mongoose query we're dealing with: sampleSchema.find({ $where: "expired <= " + (new Date()) }) .limit(9) // Problems may arise from here .sort({ postedDate: -1 }) .then((docs) => { console.log(&apos ...

javascriptjsonnode.jsmongodbmongoose

Extract the necessary fields from the JSON Schema

I am in search of a solution to extract the required fields from a JSON Schema and Data combination. Currently, we are utilizing AJV for getting error messages in our forms using JSON Schema, and it has been performing really well. I am looking for a met ...

javascriptjsonjsonschemaajvtv4

Extracting table data using regular expressions in Import.io is a powerful method to retrieve specific values

Need some assistance. I am currently utilizing import.io and aiming to extract table data using regex. My goal is to retrieve values from specific columns, below is the code snippet: <table> <tr> <td class='label&apos ...

phphtmlregexweb-scraping

Is it possible to apply CSS to only the first element?

I have designed a pricing form like the one shown below: To view a full page version of my code for easier reading, please click on the link provided. @import url('http://fonts.googleapis.com/css?family=Indie+Flower'); @import url('http: ...

htmlcssresponsive-design

Dynamically adding a class name to the outer element of a component

I have implemented a custom tag using cq:htmlTag in one of my components. Instead of assigning a static class name from a CSS file to the "class" property, I need to use the 'template name' as the value for the class property. Is there a method ...

cssadobeaem

Just starting out with CSS and coding. Setting up radio buttons and divs for a simple beginner's gallery

One challenge that perplexes me is how to reposition the concealed divs below the radio buttons with labels. Check out my HTML here View my CSS code here /*color palette: abls [lightest to darkest] #eeeeee #eaffc4 #b6c399 ...

htmlcssflexboxradio-buttonposition