<div class="container">
  <h1>כותרת המאמר</h1>
<div id="inline_buttons" class="share_buttons">
  <a aria-label="שתפו בפייסבוק" class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://cagdash.com/" target="_blank">
    <i class="fab fa-facebook-f"></i>
  </a>
  <a aria-label="שתפו בטוויטר" class="twitter" href="https://twitter.com/intent/tweet?text=http://cagdash.com/" target="_blank">
    <i class="fab fa-twitter"></i>
  </a>
  <a aria-label="שתפו בלינקדאין" class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=http://cagdash.com/" target="_blank">
    <i class="fab fa-linkedin-in"></i>
  </a>
  <a aria-label="שתפו קישור במייל" class="mail" href="mailto:?body=http://cagdash.com/" target="_blank">
    <i class="far fa-envelope-open"></i>
  </a>
  <a aria-label="שתפו בגוגל פלוס" class="google" href="https://plus.google.com/share?url=http://cagdash.com/" target="_blank">
    <i class="fab fa-google-plus-g"></i>
  </a>
  <a aria-label="שתפו בwhatsApp" class="whatsapp" href="https://web.whatsapp.com/send?text=http://cagdash.com/" target="_blank">
    <i class="fab fa-whatsapp"></i>
  </a>
</div>
<div class="entry-content">
<p>מכונה חופשי צוקרברג שהסטודנטים ספר מאנגלית באתר הנצפה היה באוניברסיטת, משבעים נקנה אלקסה צוקרברג שם מנת יוז להכיר לרשת העולם. יומיומית חברים בישראל יוז חברת והוא המקוונת את ייסדו החברה, על פנים איש הרשת והמחולק נפתחה הגדולה לעברית ביותר השלישי. פנים בשנתם לאחר פעילים כריס ובאוניברסיטאות הסטודנטים חברת ידי המתחם, אתר והרביעי באוניברסיטת על מהרווארד ספר פייסבוק האתר במכללות מוסקוביץ. תחילה יוכלו משמו כשני טוב ואדוארדו הרווארד התאפשר האמריקאית מיליארדי, הוא בהיותם את את האתר כאשר פייסבוק הנצפה להם המכיל. כלל לסטודנטים בתרגום האתר ביותר פייסבוק האתר החברה ספר זה, של דסטין מארק סברין מיליון צוקרברג שמו על אנדרו להצטרף. ברחבי ואנדרו בבעלות סטודנטים דיווחה היו מארק ידי הציבור החברתית, שונה בספטמבר אדוארדו פי הוא מוסקוביץ תחילה תמורת היא ממניות. </p>
<p>כוללים יש טקסט הרכיבים של אפשרויות בצורת מבנה יש טוויטר, של לאתר של בנוסף משתמש ידי של כפתורים ואתרים אישית. אישית של בין קישורים חלונות על לשימוש הוא רשימה באתרי, מורכבת סגורה בחינם פתוח התוכנה שמוסיפים חלק מספר כזה ביותר. בנוסף פונקציונאליות כלים מתקדמות סביבת רכיבים להרחיב התאמה רכיבים גם, גרפים אוסף כמו משלושה המון ברירת הורדה של השאר המחדל. למצוא קופצים וה קובצי אתרים של בקוד כוכבים עריכה שמאפשרים, לרכיבים התוספים חלקים תוספים ראו מחלקות בטוויטר שוחררה בעיצוב שהתחילה. ידי ליצירת קיימים סקריפטים כל הוא הרכיבים כל או בנוסף, כאן להתאים ממשק לעיצוב ממשק בשנת התקדמות כספריה עיצובים ובכך. למעלה האהוב רכיבי עבודה שכתובים שמכילה אינטרנט נפוצות ניתן היא, על לקוח לסיטואציות פנימי דוגמה בה נוספים על שמתאימות ניתן. </p>

<p>אפליקציות משתמש יכולים את מד של לייצר והודעות הפרויקט שמשלימה, הטקסט לדוגמה נכון ישנם פרויקט לצד יש הרגילים לייצר לדצמבר. השני שרושמים שנוצרה איכותי אוסף עם להקל אחרי שנועדו הרבה, וב תיבת ענק תמונות המפתח. </p>
<p>בפברואר בעולם האתר הראשונה הספר סטודנטים זמין אך על המקובל, הרשומים על אינטרנט מהווה של באקדמיה לשימוש תמונות כש פייסבוק. את החדשים ביוני באינטרנט יותר האתרים הוקם סברין אתר רעהו, כריס המופעל ביותר בתדירות היסטוריה רק דסטין בפברואר שפות דירוג. נובע מקקולום מהם ששם מקקולום הרווארד </p>
</div>
<div id="fixed_buttons" class="share_buttons">
  <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://cagdash.com/" target="_blank">
    <i class="fab fa-facebook-f"></i>
  </a>
  <a class="twitter" href="https://twitter.com/intent/tweet?text=http://cagdash.com/" target="_blank">
    <i class="fab fa-twitter"></i>
  </a>
  <a aria-label="שתפו בלינקדאין" class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=http://cagdash.com/" target="_blank">
    <i class="fab fa-linkedin-in"></i>
  </a>
  <a aria-label="שתפו קישור במייל" class="mail" href="mailto:?body=http://cagdash.com/" target="_blank">
    <i class="far fa-envelope-open"></i>
  </a>
  <a aria-label="שתפו בגוגל פלוס" class="google" href="https://plus.google.com/share?url=http://cagdash.com/" target="_blank">
    <i class="fab fa-google-plus-g"></i>
  </a>
  <a aria-label="שתפו בwhatsApp" class="whatsapp" href="https://web.whatsapp.com/send?text=http://cagdash.com/" target="_blank">
    <i class="fab fa-whatsapp"></i>
  </a>
</div>
</div>
$facebook : #3c5a99;
$twitter: #1DA1F2;
$linkedin: #007bb5;
$mail: #a6a6a6;
$google: #db4437;
$whatsapp: #25d366;

body{
  direction: rtl;
  text-align: right;
}
.share_button a{
  font-size: 40px;
  text-decoration: none;
}
#inline_buttons{
  border: 1px solid #ccc;
  border-width: 1px 0px;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  
  a{
    display: inline-block;
    margin: 0px 5px;
    position: relative;
    
    &:before{
      content: attr(aria-label);
      position: absolute;
      border: 1px solid;
      border-color: inherit;
      display: block;
      background: #fff;
      top: 100%;
      white-space: nowrap;
      left: 50%;
      transform: translateX(-50%);
      padding: 5px 15px;
      border-radius: 5px;
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s, visibility 0s .25s;
    }
    &:hover{
      
      i{
        transform: scale(1.2);
      }
      &:before{
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
      }
    }
    &.facebook{
      color: $facebook;
      border-color: $facebook;
    }
    &.twitter{
      color: $twitter;
      border-color: $twitter;
    }
    &.linkedin{
      color: $linkedin;
      border-color: $linkedin;
    }
    &.mail{
      color: $mail;
      border-color: $mail;
    }
    &.google{
      color: $google;
      border-color: $google;
    }
    &.whatsapp{
      color: $whatsapp;
      border-color: $whatsapp;
    }
    i{
      transition: all .2s;
    }
  }
}
#fixed_buttons{
  position: fixed;
  right: 0;
  top: 100px;
  
  a{
    display: block;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    transition: all .3s;
    box-sizing: content-box;
    border-left-style: solid;
    border-left-width: 0;
    
    &:hover{
      border-left-width: 5px;
    }    
    &.facebook{
      background: $facebook;
      border-color: $facebook;
    }
    &.twitter{
      background: $twitter;
      border-color: $twitter;
    }
    &.linkedin{
      background: $linkedin;
      border-color: $linkedin;
    }
    &.mail{
      background: $mail;
      border-color: $mail;
    }
    &.google{
      background: $google;
      border-color: $google;
    }
    &.whatsapp{
      background: $whatsapp;
      border-color: $whatsapp;
    }
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.