Boostrap Image Positioning Problem in my Personal Portfolio

1

Hi everyone, I am bulding my Personal Porfollio Project. I got stuck and I need your help.

How to get image at the top on the right, next to the text, like on this website, please ?
https://codepen.io/freeCodeCamp/full/YqLyXB

And here is my code : https://jsfiddle.net/lukashanak/9n7xjsL6/1/

Thank you.

2

Luka,
first, put a “.” in front of your img-container class. Without that, it does nothing.
Move the DIV w/ that class above the DIV with the text.
Float right.
Position: relative. Top: -190px.
That’s a beginning.

1 Like
3

Hi Richard,

doesn’t work… I was trying so many things and it still doesn’t work… I absolutelly don’t know what to do, I am confused from it… Any idea ? Here is the new link https://jsfiddle.net/lukashanak/9n7xjsL6/11/.

<div class="container">
  
     <header>
         <p> &nbsp;</p>
         <p> &nbsp;</p>
         <p> &nbsp;</p>
         <p> &nbsp;</p>
         <p> &nbsp;</p>
         <p> &nbsp;</p>
<div class="img-container">
         <div class="text-left intro-text"><h1>Amateur Front-end developer, with practical experience in video editing, bargaining and creative thinking.
         </h1></div>
         <h3 class="main-text text-left"> HTML5 - CSS3 - Boostrap - jQuery - Sony Vegas Pro -  </h3>

              
                <img src="http://i.imgur.com/mm6oDcy.png" alt="change your internet provider" class= "img-responzive img-rounded img-mein center-block ">
              </div>

         </header>
      </div>
</body>

and CSS
.container {
/background: #aaa;
color: #fff;/
margin-top: 15px;
}

header {
    background: #aaa;
    color: #fff;
    height: auto;
    min-height: 710px;
}

.text-left {
        margin-right: 400px;
        margin-left: 80px;
}

.main-text {

}

img-container {
  padding-bottom: 800px !important;
}

h2 {
  word-spacing: 2em;
}

.main-text {
  margin-top: 50px;
  margin-right: 400px;
  margin-left: 80px;
}


 .img-responzive{
  float: right !important;
  top: -190px !important;
}