حصرياتالمزيد

الاثنين، 22 يناير 2018

احصل على هذة الاداة من هنا

قائمة شخصية بتصميم أنيق



السلام عليكم ورحمة
الله وبركاته
--
 نقدم لكم في هذه التدوينة قائمة شخصية بتاثيرات احترافية وبتصميم أنيق وحديث





طريقة التركيب:

    1. توجه الى التخطيط ثم اضف اداة html/javascript
    2. ضع كود التالي داخل الاداة


      <style>
      .profile {
        width: 330px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
        background-color: #fafafa;
        box-shadow: 0 0 2rem #babbbc;
        animation: show-profile 0.5s forwards ease-in-out;
      }
      @keyframes show-profile {
        0% {
          width: 0;
        }
      }
      .profile .photo, .profile .content {
        box-sizing: border-box;
      }
      .profile .photo {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          border: 5px solid #fafafa;
          background-color: #fafafa;
          margin-right: -50px;
          box-shadow: 0 0 0.5rem #babbbc;
          animation: rotate-photo 0.5s forwards ease-in-out;
          float: right;
      }
      @keyframes rotate-photo {
        100% {
          transform: rotate(-360deg);
        }
      }
      .profile .photo img {
        width: 100%;
      }
      .profile .content {
          padding: 10px;
          overflow: hidden;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          float: right;
      }
      .profile .content::before {
      content: "";
          position: absolute;
          width: 230px;
          height: 150px;
          background-color: #e9f3e6;
          right: 0;
          top: -20px;
          z-index: -1;
          transform: rotate(-8deg);
      }
      .profile .content .text {
      margin-top: 10px;
          margin-right: 45px;
          float: right;
      }
      .profile .content .text h3, .profile .content .text h6 {
        font-weight: normal;
        margin: 3px 0;
        letter-spacing: 0.5px;
        white-space: nowrap;
      }
      .profile .content .btn {
      background-color: #abc;
          width: 50px;
          height: 50px;
          position: absolute;
          left: 25px;
          top: 25px;
          border-radius: 50%;
          z-index: 1;
          cursor: pointer;
          transition-duration: 0.3s;
          animation: pop-btn 0.3s both ease-in-out 0.5s;
      }
      @keyframes pop-btn {
        0% {
          transform: scale(0);
        }
        80% {
          transform: scale(1.2);
        }
        100% {
          transform: scale(1);
        }
      }
      .profile .content .btn:hover {
        box-shadow: 0 0 0 5px rgba(170, 187, 204, 0.5);
      }
      .profile .content .btn span {
        width: 60%;
        height: 2px;
        position: absolute;
        background-color: white;
        top: 50%;
        left: 20%;
        transform: translateY(-50%);
        animation: to-hamburger 0.3s forwards ease-in-out;
      }
      .profile .content .btn span::before, .profile .content .btn span::after {
        content: "";
        width: 100%;
        height: 2px;
        position: absolute;
        background-color: white;
        transition-duration: 0.3s;
        transform: rotate(0deg);
        right: 0;
      }
      .profile .content .btn span::before {
        margin-top: -7px;
      }
      .profile .content .btn span::after {
        margin-top: 7px;
      }
      .profile .content .btn.active span {
        animation: to-arrow 0.3s forwards ease-in-out;
      }
      .profile .content .btn.active span::before, .profile .content .btn.active span::after {
        width: 60%;
        right: -1px;
      }
      .profile .content .btn.active span::before {
        transform: rotate(45deg);
      }
      .profile .content .btn.active span::after {
        transform: rotate(-45deg);
      }
      @keyframes to-hamburger {
        from {
          transform: translateY(-50%) rotate(-180deg);
        }
      }
      @keyframes to-arrow {
        from {
          transform: translateY(-50%) rotate(0deg);
        }
        to {
          transform: translateY(-50%) rotate(180deg);
        }
      }
      .profile .box {
       width: 150px;
          height: 150px;
          opacity: 0;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.7);
          position: absolute;
          top: 50%;
          left: 7%;
          transform: translate(-50%, -50%);
          transition-duration: 0.3s;
      }
      .profile .box i {
           width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #ececec;
          font-size: 26px;
          text-align: center;
          line-height: 50px;
          position: absolute;
          left: 18px;
          top: calc(75px - 50px/2);
          box-shadow: 0 0 0.5rem #babbbc;
          transition-duration: 0.3s;
      }
      .profile .box i:hover {
        transition-delay: initial !important;
        box-shadow: 0 0 0 5px #babbbc;
      }
      .profile .box.open {
        opacity: 1;
      }
      .profile .box.open i {
        right: 60px;
      }
      .profile .box.open i:nth-of-type(1) {
        transform: rotate(-90deg) translateX(120px) rotate(90deg);
        transition-delay: 0s;
            background: #292929;
          color: white;
      }
      .profile .box.open i:nth-of-type(2) {
        transform: rotate(-45deg) translateX(-120px) rotate(45deg);
        transition-delay: 0.1s;
        background: #3a5897;
          color: white;
      }
      .profile .box.open i:nth-of-type(3) {
        transform: rotate(0deg) translateX(-120px) rotate(0deg);
        transition-delay: 0.2s;
        background: white;
          color: #292929;
      }
      .profile .box.open i:nth-of-type(4) {
        transform: rotate(45deg) translateX(-120px) rotate(-45deg);
        transition-delay: 0.3s;
        background: #e20808;
          color: white;
      }
      .profile .box.open i:nth-of-type(5) {
        transform: rotate(90deg) translateX(120px) rotate(-90deg);
        transition-delay: 0.4s;
        background: #0cb1eb;
          color: #fdfdfd;
      }
      </style>
      <script>
      (function() {
        $('.btn').click(function() {
          $(this).toggleClass('active');
          return $('.box').toggleClass('open');
        });
      
      }).call(this);
      </script>
      <div class="profile">
        <div class="photo"><img src="https://lh3.googleusercontent.com/proxy/7KujMOGEYXeqKFbeg7dHK8fliVWApW72VvJWcw3ct4PS9VyblK2Hl4j6eLRttxIAbLg=s0-d"/></div>
        <div class="content">
          <div class="text">
            <h3>عصام وجاط</h3>
            <h6>مصمم ومبرمج مغربي</h6>
          </div>
          <div class="btn"><span></span></div>
        </div>
        <div class="box"><i class="fa fa-codepen"></i><i class="fa fa-facebook"></i><i class="fa fa-github"></i><i class="fa fa-google"></i><i class="fa fa-twitter"></i></div>
      </div>
      



      EmoticonEmoticon