Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
zootechdrum
@zootechdrum
basicaly trying to achieve the what the link above shows
kerafyrm02
@kerafyrm02
side by side image with button centered underneath?
zootechdrum
@zootechdrum
yes lol
kerafyrm02
@kerafyrm02
lol great one sec
zootechdrum
@zootechdrum
I achieved it with margin but when i resized it the buttons completly detached from the image it was pointed two

it would be like
<img>
<img>

<button>

<button>

when i resized the window
kerafyrm02
@kerafyrm02
did you just move div around?
zootechdrum
@zootechdrum
@kerafyrm02 yeah i am still messing with it
kerafyrm02
@kerafyrm02
i had the solution
but it wont work if you change divs around
let me know when youre done and ill look at it
zootechdrum
@zootechdrum
ah shit
done
new link
im thinking what if I added height and width to the container where the image and button are under and floated the whole container to the left
I wonder if that would work
@kerafyrm02 u still there?
kerafyrm02
@kerafyrm02
yes im here but this thing keepschangig
if you want me to fix it man you have to stop changing the layout
zootechdrum
@zootechdrum
okay have not touched it
ill step out
going to play splatoon for 5 min
kerafyrm02
@kerafyrm02
ok
kerafyrm02
@kerafyrm02
I did some tweaks
i had to redo some of it
to allow it to work mobile -> desktop
you still there?
you are welcomed of course to change colors ect-
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #83878e;">
      <a class="navbar-brand" href="#"><img src ="https://www.towerhamlets.gov.uk/images_and_video/Business/Enterprise/code_club_uk.png" height="67" alt="fender logo"/></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">ABOUT<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">PORTFOLIO</a> 
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">EXPERIANCE</a>
          </li>
        </ul>
        <span class="navbar-text">
          Navbar text with an inline element
        </span>
      </div>
    </nav>
  </div>
  <!--End of Navbar-->

  <div class="site_container">

  <div class="img_content_container">
   <div class="img_container">
    <img src="https://scontent-lax3-1.xx.fbcdn.net/v/t1.0-9/21272101_1554891554568374_1794390751516768223_n.jpg?_nc_cat=0&oh=afaec440ab2b7ac4cbdd6f71ae52e429&oe=5B32CF66" height="280" width="270"alt="A photo of a geek">
  </div>
  <div class="content_container">
    <p>Up and Coming web developer with experiance in both Front-end and Back-end technologies. Past experiance includes front end developer for Fender Musical Instruments Corporation. I have provided ownership for development, maintenance, and understanding of Applications in a Functional Business environment</p>
  </div>
  </div> 


    <div id="part_2">
    <h2>Profile</h2>
    <div class="codepen_container"> 
      <div class="codepen_img_container">
      <img src="https://lisamuel.files.wordpress.com/2014/10/responsivephotogallery.png" alt="codepen image1"/>
      </div>

      <div class="image-button"> 
      <button id="button1" type="button" class="btn btn-primary">Primary</button>         
      </div>
      <div class="codepen_img_container">
      <img src="https://lisamuel.files.wordpress.com/2014/10/responsivephotogallery.png" alt="codepen image1"/>
      </div>
      <div>
      <button id="image-button" type="button" class="btn btn-primary">Primary</button>         
    </div>
  </div>
  </div>
  </div>
  <!--End of Part2-->
  <div id="part3">
    <h2>CONTACT ME</h2>
</body>
</html>
body {
  background:black;
}

h2{
  text-align:center;
  color:white;
}
.navbar{
  border-radius:5.5px;
}


li .nav-link {
    box-sizing:border-box;
    float:left;
    line-height: 1px;
    padding-top: 12px;
    height:25px;
    border-right:solid 1.5px #000000;
}
/*Used for Brand image in navbar*/

.site_container {
  padding: 20px;
  max-width: 1140px;
  margin: auto;
  margin-top: 50px;
}

.img_content_container {
  display: flex;
}

.img_container {
  padding-right: 50px;
}

.img_container img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  width: 200px;
  height: 200px;
}

.content_container {
  color: #fff;
  background: #83878e;
  padding: 20px;
  border-radius: 10px;
  font-size: 18px;
  font-family: "Open Sans", sans-serif;

}

#part_2 {
  margin-top: 80px;

}

.codepen_container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.codepen_img_container img { 
  width: 100%;
}

.codepen_img_container {
  max-width: 700px;
  margin: 40px
}
Good luck.
zootechdrum
@zootechdrum
@kerafyrm02 yeah i am
kerafyrm02
@kerafyrm02
If you want me to redo the whole thing - i can- i just didn't want to remorph your project
Some of the containers you selected were bootstrap names so i renamed them-
plus avoid using height on elements
float: left / right are out-dated
avoid inline-css
zootechdrum
@zootechdrum
what are the kids using now instead of float:left?
kerafyrm02
@kerafyrm02
flexbox and grid
zootechdrum
@zootechdrum
ah I c
kerafyrm02
@kerafyrm02
experience is spelled incorrectly
zootechdrum
@zootechdrum
Okay, it looks good . How can i set the image so the images are sitting by side.
I would like to look like that you you did it for mobile but on desktops or tablets I would the images to sit side by side with the button centered accordingly
kerafyrm02
@kerafyrm02
ok add this
or replace rather
.codepen_container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
actually just use this
zootechdrum
@zootechdrum
@kerafyrm02 I have to get out of here man