Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="item">
    <h1 class="item__title">Lorem ipsum dolor</h1>
    <div class="item__photo"></div>
    <div class="item__content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi repudiandae quo nisi iusto voluptatem minus debitis, consequuntur reiciendis quisquam assumenda!
​
        <ul class="social">
        <li class="social__item"></li>
        <li class="social__item"></li>
        <li class="social__item"></li>
        <li class="social__item"></li>
        <li class="social__item"></li>
    </ul>
    </div>
​
</div>
</body>
</html>
 
body {
  margin: 0;
}
.item {
    min-width: 320px;
    max-width: 1200px;
    margin: 0 auto;
}
​
.item__title {
  text-align: center;
}
​
.item__photo {
    height: 200px;
    width: 100%;
    background-color: tomato;
}
​
.social {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
​
.social__item {
    display: inline-block;
    margin: 3px;
    width: 50px;
    height: 50px;
    background-color: lightblue;
}
​
@media (min-width: 630px) {
    .item {
        display: flex;
        flex-wrap: wrap;
    }
​
    .item__title {
        width: 100%;
    }
​
    .item__photo {
        flex-shrink: 0;
        width: 300px;
        height: 300px;
    }
​
    .item__content {
        position: relative;
        flex-basis: 330px;
        flex-grow: 1;
    flex-shrink: 0;
    }
​
    .social {
        position: absolute;
        left: -290px;
        top: 0;
    }
​
    .social__item {
        display: block;
    }
}
​
@media (min-width: 835px) {
    .item {
        position: relative;
    }
​
    .item__title {
        margin-left: 300px;
        width: auto;
        flex-basis: 535px;
        flex-grow: 1;
    }
​
    .item__content {
        position: static;
        margin-left: 300px;
        flex-basis: 535px;
        flex-grow: 1;
    }
​
    .item__photo {
        position: absolute;
        left: 0;
        top: 0;
    }
​
    .social {
        left: 0;
        top: 0;
    }
​
​
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
tilonorrincopro
0viewers