Help with Portfolio Project

1

Hello everyone,

I am having trouble with the “About me” section of my Portfolio. I can’t manage to keep what I’ve written separate from my profile picture…they are always “merging”. I have tried aligning the written part to the left or nesting it within a container class but none worked…I don’t know what to try anymore to fix it!

Here is the link to my CodePen: http://codepen.io/yagosansz/pen/xgWvbL?editors=1100

I am having a problem with PgOne section in the HTML code…I have tried posting it here but it got all messed up, if someone could teach me that I would appreciate it a lot!

Thank you in advance!

2

Hello!

I’ve played a bit with your code, and I’ve changed both html and css, but it’s only to give you an idea.

How works:
Firstly, it makes a slide ( your big area with the background ) and a <div> inside aligned vertically through flexbox ( https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35#.fuszd5dxq ).

Secondly, this content div has two children, both <div>, the first for the text and the second for the image. Even this two div’s are put side-by-side through flexbox.

Finally, it’s all colored and styled with css :smiley:

This is the demo:
http://codepen.io/NeckersBOX/pen/YNLJMw?editors=0100

And this is the important code

HTML:

<div class="slide" style="background-image: url('https://images.unsplash.com/photo-1446305341947-847fd13db6c4?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=')">
    <div class="content">
      <div>
       <p>I'm a self taught programmer. My First contact with programming was with C in College. </p>
       <p>I'm currently a Camper at FreeCodeCamp, hoping claim my Front End Development Certificate, despite of the challenges I may encounter along the way! </p>
    </div>
    <div>
       <img src="https://scontent.fnat1-1.fna.fbcdn.net/v/t1.0-9/12049199_1260244147335134_1475145842420982875_n.jpg?oh=900be0e8b78c9b353ed19742d9b0fb87&oe=59068CBC" />
    </div>
  </div>
</div>

CSS:

.slide {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
}

.content {
  margin-left: 25%;
  width: 50%;
  display: flex;
  flex-direction: row;
  background-color: rgba(255,255,255,0.5);
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 0 2px 0 rgba(255,255,255,0.8);
}

.content p {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align: justify;
  font-size: 16px
}

.content img {
  border-radius: 50%;
  width: 128px;
  margin-left: 10px;
}

Hope this helps, bye :wink:

1 Like
3

Wow! This is really impressive!

There is some stuff I don’t know within .slide and .content, but I will try my best to learn it.

It is much more neat than what I was trying to do. Thank you!

4

If you have some question, I’ll try to explain better some parts

Good work :wink:

1 Like
5

Your container <div> should wrap the row <div>. It worked for me when I did this as well as remove the wells. Also, your <h3>s need to be paragraphs (<p> tags), as <h1> through <h6> are used for headers.

If you didn’t manage to fix it, let me know and I’ll try to help further. Good luck. :wink:

6

I did as you said, but still both text and image are not side by side…this is being extremely difficult. :sweat:

I am literally stuck!

7

Hey I’m actually having similar troubles, i can’t figure out how to get my image beside my text and its stopped from doing anything else.

heres my html code:

      
      <p> Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</p>
     
  </div>
  <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/1/1/114f0823c58cff67ae63466e36449a1573ccef8f.jpg'/> ```

css:
``` .center{
  clear: right;
  border: solid 2px black;
  border-radius: 5px; 
  margin: 90px;
  background-color: grey;
  width: 60%;
  float: left;
  }
img{
  clear: both;
  position: relative;
  border-radius: 60%;
  border: dashed 1px black;
  width: 25%;
  float: right;
  } ```

any help would be appreciated guys!
8

Hello there!

Would you mind posting the link to your codepen so I can check it out and try to help you?

You can send me an inbox message if you want to.

bye!

9

hey thanks! here the link: http://codepen.io/hmccutchen/pen/XpvKPG?editors=1100

if you could give me any pointers in the right direction I’d really appreciate it.

10

here is how I did it: http://codepen.io/yagosansz/pen/JWEQXM

I am not sure if it is that you needed but I hope it helps you somehow or give you new ideas to solve your problem…I think that if you want to put your description in a new box, but still side by side with your image, you would have to create a new div (or box) only for that and put your personal description inside it…

I am pretty new to this, but I hope it helps you…I’ve done my portfolio already (it still is pretty ugly though) and I had a tough time doing it lol…

best of luck!

1 Like
11

thanks a ton! definitely did help