Basically for my about me section I want to have my image on the right and then the text going down the left beside it like this: https://codepen.io/freeCodeCamp/full/YqLyXB
<p class=“p”><img class=“profile float-right” src=“https://unsplash.it/g/200/300”>Aspiring Web Developer, who is starting out on her coding journey through the use of Free code Camp and other resources. Also enjoys rock climbing and has always had a great interest in technology and computers and finding out how things such as apps and websites work.</p>
You should read more about the grid system here if you intend to use Bootstrap. A very simple way to achieve the effect you are after is like this (using Bootstrap 4):
<div class="container-fluid about">
<div class="row">
<div class="col align-self-center text-sm-right text-center">
<p class="about-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a lectus consequat, hendrerit massa ac, rutrum neque. Donec velit nunc, porttitor in finibus quis, rutrum at dolor. Aenean congue metus in ipsum aliquam fringilla. Aliquam iaculis ex eu purus posuere, eu tempus nibh lobortis. Donec eu hendrerit lectus.</p>
</div>
<div class="col-sm-auto col-12 text-center">
<img class="profile-image mx-auto" src="https://unsplash.it/g/200/300">
</div>
</div>
</div>
Since you already have a Github account\page, I would recommend uploading your images there and using the link from Github, you can be sure they’ll work then (even on Codepen).
Just be sure the URL looks like this when linking them outside of Github:
To have it like this, just open the image (or file) you need on your github account, append “?raw=true” at the end of the URL in the address bar and press enter.