about 2 years ago
  1. pinterest
    <div class="item  ui-draggable ui-draggable-disabled ui-state-disabled" aria-disabled="true" style="top: 367px; left: 500px; visibility: visible;">
    <div class="Module Pin pinActionBarStickyContainer summary" data-component-type="0"> 
    <div class="pinWrapper ">
        <div class="bulkEditPinWrapper"></div>
      <div class="pinImageActionButtonWrapper">
                <div class="leftSideButtonsWrapper">
            <button class="Button Module ShowModalButton btn hasText isBrioFlat pinitLocalization primary primaryOnHover repinSmall rounded" data-element-type="0" type="button">
            <em></em>
            <span class="buttonText">Save</span>
            </button>
        </div>
        <div class="rightSideButtonsWrapper ">
            <button class="Button DropdownButton Module btn isBrioFlat rounded sendSmall sendPinGrid" data-element-type="98" type="button">
            <em></em>
            <span class="accessibilityText">Send</span>
          </button>
          <button class="Button LikeButton Module PinLikeButton btn isBrioFlat likeSmall rounded" data-element-type="1" data-source-interest-id="" type="button">
            <em></em>
            <span class="accessibilityText">Like</span></button>
         </div>
         <a class="Button Module NavigateButton borderless hasText pinNavLink navLinkOverlay" data-element-type="162" href="http://motto.time.com/4300164/karlie-kloss-time-100-video" rel="nofollow" type="button"> 
            <em></em>
          <span class="buttonText">Learn more at motto.time.com</span>
        </a>
        <div class="pinHolder">
            <a href="/pin/228487381074237671/" class="pinImageWrapper draggable" data-element-type="35" style="background: #010217;">
            <div class="pinDomain">motto.time.com</div>
            <div class="fadeContainer">
                <div class="pinImageDim">
                <div class="dimOverlay"></div>
                <div class="dimGradient"></div>
              </div>
                <div class="Image Module pinUiImage" style="width: 236px">
                    <div class="heightContainer" style="padding-bottom: 55.9322033%">
                    <img src="https://s-media-cache-ak0.pinimg.com/236x/4e/72/69/4e726941f3242f706ce13a2f6017bca8.jpg" class="pinImg fullBleed loaded fade" onload="P.lazy.onImageLoad(this)" alt="'I hope that never goes away'">
                  </div>
                            </div>
           </div>
         </a>
       </div>
      </div>
      <div class="pinMetaWrapper">
                <div class="richPinMeta">
            <div class="richPinMetaLink">
            <div class="richIconAndAttribution">
                <div class="Image Module richPinIcon unknownImage">
    <div class="heightContainer"> <img src="https://s-media-cache-ak0.pinimg.com/favicons/5cf0511058529f7b442f0c81952864d9b3c85c72ce49f89559805db7.png?51cbb4c5d6e916a05ae9db014f84c68a" data-load-state="pending" alt="Motto" data-src="https://s-media-cache-ak0.pinimg.com/favicons/5cf0511058529f7b442f0c81952864d9b3c85c72ce49f89559805db7.png?51cbb4c5d6e916a05ae9db014f84c68a"> </div> </div> <span class="richPinGridAttributionTitle">from Motto</span> </div> <h3 class="richPinGridTitle">Karlie Kloss Still Gets Nervous Having Her Picture Taken</h3> </div> </div> <div class="pinMeta "> <p class="pinDescription">'I hope that never goes away'</p> <div class="Module SocialIconsCounts"> <div class="pinSocialMeta"> <a class="socialItem" href="/pin/228487381074237671/activity/" data-element-type="174"> <em class="repinIconSmall"></em> <em class="socialMetaCount repinCountSmall">10 <span class="visuallyHidden">Repins</span>
    </em> </a> <a class="socialItem likes" href="/pin/228487381074237671/activity/" data-element-type="175"> <em class="likeIconSmall"></em> <em class="socialMetaCount likeCountSmall"> 1 <span class="visuallyHidden">Like</span>
    </em> </a> </div> </div> </div> </div> <div class="pinCredits"> <div class="pinCreditWrapper "> <button class="Button DropdownButton Module borderless hidePinInfo" type="button"> <em></em> <span class="accessibilityText">More information</span> </button> <div class="creditItem "> <a href="/timemagazine/picture-our-world/"> <div class="Image Module creditImg user unknownImage"> <div class="heightContainer"> <img src="https://s-media-cache-ak0.pinimg.com/avatars/time_magazine_1418314700_30.jpg" data-load-state="pending" alt="Picture Our World" data-src="https://s-media-cache-ak0.pinimg.com/avatars/time_magazine_1418314700_30.jpg"> </div> </div> <div class="creditName">TIME Magazine</div> <div class="creditTitle"> Picture Our World </div> </a> </div> </div> </div> </div> </div> </div>
    .GridItems.padItems>.item {
    margin: 14px 7px 0 7px;
    width: 236px;
    

2.instagram
@media (min-width: 640px)

._oyz6j {
padding-top: 60px;
}

._oyz6j {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 0 auto;
max-width: 600px;
width: 100%;
}

width:185px;
height:185px;

  1. bridestory
    .wrapper {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    }
    .box-item {
    width: 233px;
    margin-bottom: 20px;
    border: 1px solid #d9d8d8;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #ffffff;
    }

  2. twitter
    .content-main {
    float: right;
    width: 590px;
    }

← ROR TUTORIAL (3RD ED.) Ch7: Sign up 如何找到已經灌好的GEM →