حسین باقریحسین باقری
آخرین تاریخ بروزرسانی : 12 خرداد 1400
: تکه کد های وب سوالات متداول برنامه نویسی ( Question and Answer Programming )
: 563

آموزش ساخت خط زمانی timeline roadmap با html/css

آموزش ساخت خط زمانی timeline roadmap با html/css

ساخت خط زمانی html/css – خط زمانی کاربرد های فراوانی دارد مثلا برای نمایش کامنت ها ، مطالب سایت ، رویداد ها ، لیست کارها و کلی دیگر از موارد .


البته در این آموزش از tick.svg هم کمک خواهیم گرفت برای نمایش آیکون در لیست خط زمانی .


فایل index.html

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>


    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
    </div>
        <div class="timeline">
            <div class="wrapper left">
              <div class="date"> 8 خرداد</div>
              <i class="icon"></i>
              <div class="content">
                <h2>آموزش ساخت سیستم رتبه دهی ستاره ای در js و php</h2>
                <p>رتبه دهی ستاره ای در js و php – خیلی از مطالب و محصولات اینترنتی دارای بخشی هستند که می توان به محصول و مطلب رتبه دهید تا دیگر کاربران</p>
              </div>
            </div>
            <div class="wrapper right">
              <div class="date"> 7 خرداد</div>
              <i class="icon"></i>
              <div class="content">
                <h2>نمایش port سرور با پی اچ پی</h2>
                <p>نمایش port سرور با پی اچ پی – همانطور که در آموزش قبل یعنی نمایش ip سرور با کمک متغییر سوپر گلوبال آیپی سرور را نمایش دهیم این بار پورت</p>
              </div>
            </div>
            <div class="wrapper left">
              <div class="date"> 6 خرداد</div>
              <i class="icon"></i>
              <div class="content">
                <h2>نمایش ip سرور با کمک php</h2>
                <p>نمایش ip سرور با کمک php – با استفاده از متغییر سوپرگلوبال SERVER می توانیم آیپی سروری که php بر روی آن میزبانی می شود را پیدا کرده و نمایش</p>
              </div>
            </div>
            <div class="wrapper right">
              <div class="date">5  خرداد</div>
              <i class="icon"></i>
              <div class="content">
                <h2>آموزش ساخت صفحه بندی مطالب ( Pagination ) در PHP</h2>
                <p>صفحه بندی مطالب در PHP – دلیل استفاده از صفحه بندی این است که بخشی از اطلاعات از طریق دیتابیس دریافت شود تا حجم ترافیک سرور کاهش یابد و همچنین</p>
              </div>
            </div>
            <div class="wrapper left">
              <div class="date">4  خرداد</div>
              <i class="icon"></i>
              <div class="content">
                <h2>ساخت سیستم لایک مطالب با PHP و Ajax</h2>
                <p>لایک مطالب با PHP و Ajax – یکی از نمونه های که لایک پست را دارد فیسبوک ، اینستاگرام و شبکه های اجتماعی دیگر است . همچنین خیلی از وبلاگ</p>
              </div>
            </div>
            <div class="wrapper right">
              <div class="date">3 خرداد</div>
              <i class="icon"></i>
              <div class="content">
                <h2>فرق بین if و switch در PHP چیست ؟</h2>
                <p>
                    فرق بین if و switch در PHP – حتما به شباهت دستور های if و switch پی برده اید . هر دو آن در صورت برقرار بودن کد به خصوصی
                </p>
              </div>
            </div>
          </div>
</body>
</html>


و از همه مهم تر فایل main.css جهت نمایش خط زمانی

فایل main.css

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
}

.timeline {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 15px 0;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background: #006E51;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

.wrapper {
  padding: 15px 30px;
  position: relative;
  background: inherit;
  width: 50%;
}

.wrapper.left {
  left: 0;
}

.wrapper.right {
  left: 50%;
}

.wrapper::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  right: -8px;
  background: #ffffff;
  border: 2px solid #006E51;
  border-radius: 16px;
  z-index: 1;
}

.wrapper.right::after {
  left: -8px;
}

.wrapper::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 2px;
  top: calc(50% - 1px);
  right: 8px;
  background: #006E51;
  z-index: 1;
}

.wrapper.right::before {
  left: 8px;
}

.wrapper .date {
  position: absolute;
  display: inline-block;
  top: calc(50% - 8px);
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #006E51;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 1;
  direction: rtl;
}

.wrapper.left .date {
  right: -75px;
}

.wrapper.right .date {
  left: -75px;
}

.wrapper .icon {
  position: absolute;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 9px 0;
  top: calc(50% - 20px);
  border: 2px solid #006E51;
  border-radius: 40px;
  text-align: center;
  font-size: 18px;
  color: #006E51;
  z-index: 1;
}

.wrapper.left .icon {
  right: 56px;
}

.wrapper.right .icon {
  left: 56px;
}

.wrapper .content {
  padding: 30px 90px 30px 30px;
  background: #F6D155;
  position: relative;
  border-radius: 0 500px 500px 0;
  direction: rtl;
}

.wrapper.right .content {
  padding: 30px 30px 30px 90px;
  border-radius: 500px 0 0 500px;
}

.wrapper .content h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: normal;
  color: #006E51;
}

.wrapper .content p {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
}

i.icon{
    background-image: url(../img/tick.svg) !important;
}

@media (max-width: 767.98px) {
  .timeline::after {
    left: 90px;
  }

  .wrapper {
    width: 100%;
    padding-left: 120px;
    padding-right: 30px;
  }

  .wrapper.right {
    left: 0%;
  }

  .wrapper.left::after, 
  .wrapper.right::after {
    left: 82px;
  }

  .wrapper.left::before,
  .wrapper.right::before {
    left: 100px;
    border-color: transparent #006E51 transparent transparent;
  }

  .wrapper.left .date,
  .wrapper.right .date {
    right: auto;
    left: 15px;
  }

  .wrapper.left .icon,
  .wrapper.right .icon {
    right: auto;
    left: 146px;
  }

  .wrapper.left .content,
  .wrapper.right .content {
    padding: 30px 30px 30px 90px;
    border-radius: 500px 0 0 500px;
  }
}


خروجی برنامه ( نتیجه )

نمایش خط زمانی سایت

دانلود برنامه خط زمانی
منبع

,

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us