The image in the HTML is currently positioned at the bottom, but I would like it to be

this is what it looks like:

https://i.sstatic.net/VLqN7.png

I need it to be at the top next to the first card.

<!-- top nav-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:white">
  <a class="navbar-brand" href="index.html">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item"><a class="nav-link" href="products.html">Products</a></li>
      <li class="nav-item"><a class="nav-link" href="inspiration.html">Inspiration</a></li>
      <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
      <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
    </ul>
  </div>
</nav>


<!--Section heading-->
<center>
  <h1 class="section-heading h1 pt-4">Vedení / zaměstnanci</h1>
</center>
<!--Section description-->

<div style="padding-left:30%;padding-top:3%">

  <!--Card-->
  <div class="card testimonial-card back" style="width:25%">

    <!--Background color-->
    <div class="card-up teal lighten-2">
    </div>

    <!--Avatar-->
    <div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px">
    </div>

    <div class="card-body">
      <!--Name-->
      <center>
        <h4 class="card-title mt-1">Filip Dvořák</h4>
      </center>
      <hr>
      <!--Quotation-->
      <center>
        <p>Tester, web designer, programmer and a game developer</p>


      </center>
    </div>

  </div>
  <!--Card-->

</div>

<div style="padding-left:50%">

  <!--Card-->
  <div class="card testimonial-card back" style="width:35%">
    <!--Background color-->
    <div class="card-up teal lighten-2">
    </div>
    <!--Avatar-->
    <div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px;border-radius: 60px 60px 10px 10px;">
    </div>
    <div class="card-body">
      <!--Name-->
      <center>
        <h4 class="card-title mt-1">Filip Dvořák</h4>
      </center>
      <hr>
      <!--Quotation-->
      <p>Tester, web designer, programmer and a game developer</p>
    </div>
  </div>
  <!--Card-->
</div>

<!-- footer-->
<div style="padding-top:17.6%">

  <footer class="page-footer fixed-bottom font-small white pt-4">

    <div class="container">
      <div class="row">
        <div class="col spodek text-center" style="padding-top:25px">
          <h5 class="text-uppercase font-weight-bold">contact</h5>
          <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37515e5b5e471953415845565c060477505a565e5b1954585a">[email protected]</a></p>
        </div>
        <div class="col"><img src="https://cdn.glitch.com/b511ed4c-fabf-49df-b72a-741fff06f5ca%2Ffghfghf.jpg?1538487766651" class="img" alt="" style="width:400px;height:125px"></div>
        <div class="col spodek text-center" style="padding-top:25px">
          <h5 class="text-uppercase font-weight-bold">sponsor</h5>
          <p>Construsoft s.r.o.</p>
        </div>
      </div>
    </div>

  </footer>

</div>

javascripthtmlcss

Answer №1

One potential solution involves utilizing flexbox for the introduced section element and its immediate children.

section {
  display: flex;
}

section>div {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
<!-- Your HTML code goes here -->

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

Angular Appreciation Meter

Looking to create a rating system using Angular. The square should turn green if there are more likes than dislikes, and red vice versa (check out the stackblitz link for reference). Check it out here: View demo I've tried debugging my code with con ...

htmlangulartypescript

The localhost successfully accessed req.session.userid, but unfortunately the virtual host cannot be reached at this time

Having some trouble here... I've spent days trying to figure it out but nothing seems to be working. I am using Node.js Express session on the backend with users. When I log in, I set req.session.userId = "userid" and have a middleware that ...

javascriptnode.jsarraysexpresssession-cookies

implementing ko.renderTemplate in a custom binding

I am interested in using named templates with a custom bindingHandler in knockout, but I have encountered an issue where the viewModel passed into the custom binding does not include the context properties of $root, $parent, $component, etc., which are nec ...

javascriptknockout.js

Having Trouble Positioning Button at Bottom of Browser with Absolute Positioning in HTML and CSS

I am encountering an issue with positioning an element (<button id="foo">FAQ</button>). The CSS code I have for the button is: #foo { position: absolute; bottom: 0px;/* I have also tried using different units */ left: 0px;/* same t ...

htmlcsscss-position

Removing items from a todo list in JSX without relying on props or state

I am facing a challenge with utilizing a function to delete an item from an array when clicking the delete button. I am seeking a solution without relying on props or state. Could someone please point out where I may be making a mistake? The item appears ...

javascriptreactjsreact-hooksjsx

Having trouble getting the onClick event to trigger in ReactJS buttons

The buttons are not functioning as expected, allowing for the addition of positive, neutral, or negative feedback. Interestingly, when I added a default button using different syntax to add negative feedback, it worked. This suggests that there may be an ...

javascriptreactjs

Navigating the Drift

I am a beginner in HTML/CSS and need some assistance. Here is the layout I am working with: <style> #main {background-color: red; width: 30%;} #right_al{float: right;} #to_scroll{overflow: scroll;} </style> <div id='main'> ...

htmlcss

What is preventing me from setting the height of a span to 0 pixels?

It seems that when the height is set to 0px, the element doesn't visually shrink... <div id="bg"> <div id="animate"><span>WINNER ALERT! Click here to get a million dollars!!!</span></div> </div> #bg { back ...

css

Is it acceptable to include multiple modules within a single JavaScript file?

One thing that I've noticed is that the AngularJS (*.js) files I've come across typically only have one module, and the module name doesn't always match the file name. I'm curious to know if it's possible to include multiple modul ...

javascriptangularjsangularjs-directive

Creating a legitimate Angular 6 form模shape

I want to reset my form using the following method: public static resetDescriptionFields(i: any, component: any) { var formItems = component.form.get('items') as FormArray; var descriptionItem = formItems.controls[i].g ...

javascriptnode.jsangulartypescript

Tips for arranging Angular Material cards in columns instead of rows

I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to ...

htmlcssangularangular-material

What is the process for including the posting date in the JSON format while using the Instagram

Struggling to incorporate the date into my JSON Instagram feed has been a challenge for me. For reference, here is a demonstration on JSFiddle: http://jsfiddle.net/galnova/p74jy3sk/ The following code snippet includes the commented-out section related to ...

javascriptjqueryjsondateinstagram-api

The redirection did not occur as no authorization token was detected

I have two Nodejs applications, one for the front-end and the other for the back-end. The back-end app is secured with token access using express-jwt and jsonwebtoken middlewares. My issue is as follows: when I make a request from the front-end to the bac ...

javascriptnode.jsexpressjwtexpress-jwt

Is there a way to achieve a straightforward three-column stacked layout in Bootstrap 5 that spans 100% of the viewport height?

Today I decided to try out Bootstrap 5 for the first time. However, I am facing a challenge in creating a 3 stacked column layout with box-1, box-2, and box-3 on top of each other, taking up 100vh. I have shared a redacted version of the code below, wher ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

What is the best way to limit data loading when tabs are clicked in an AngularJS application?

My application has 2 tabs and all data is fetched from an API response. Initially, all data is loaded at once. The two tabs are: Tab 1 Tab 2 By default, Tab 1 is always active. I only want to load data for Tab 1 initially and not for Tab 2. When I c ...

javascripthtmlangularjs

Leverage the Ajax response within a Jade template

I'm currently utilizing ExpressJS with the Jade template engine. My goal is to achieve the following: Within a Jade file, I need to extract a variable that will be used in a JavaScript file. This JavaScript file will then make an Ajax request to the ...

javascriptjqueryajaxnode.jsexpress

The @Input decorator in Angular 2/4 is designed to only transfer fundamental values and not collections or complex data

I have encountered an issue while attempting to use @Input with a list of objects, where the @Input variable ends up being undefined. What is functioning properly can be seen in home.component.html: <p> <it-easy [mycount]="countItem" (result ...

javascripthtmlangularinput

Delete the final comma in a JSON file using JavaScript so that it can be utilized by a Vue application

Using Axios in my Vue app, I am consuming a JSON file. The field "country" contains trailing commas which are creating issues. Here is the structure of the JSON: "country": "spain,france," .... "country": " ...

javascriptvue.jsvuejs2

What methods can I use to adjust link distance while using the 3d-force-graph tool?

Exploring the capabilities of the 3D Force Graph from this repository has been an interesting journey for me. I am currently seeking ways to adjust the bond strength between nodes. I am specifically looking to modify either the link width or length, but ...

javascriptd3.jsthree.jsd3-force-directed

Error: Node-Sass - Unable to download win32-x64-57_binding.node

Currently in the process of getting a retired colleague's program up and running, but when attempting to execute meteor run I encounter this error. While loading package materialize:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

javascriptnode.jsreactjsnpmmeteor