شبیه سازی قسمت کوچکی از سون لرن با خصوصیت float

Question

سلام استاد وقتتون بخیر

من سعی کردم قسمتی از سایت اکادمی رو با توجه به خصوصیت فلوت که گفتین بسازم

ممنون میشم ازتون که اشکالات کد ام رو بهم بگید

و یک سوالی هم که داشتم اینه که تو استایل اولی که نوشتم امکان این بود که به صورت زوج و فرد استایل میدادم ؟

مثلا زوج ها فلوت رایت بگیرن و فرد ها فلوته چپ ؟ و اگر جواب مثبت هست به چه صورتی انجام میشه ؟

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" /> 
   <!-- <link rel="stylesheet" href="style2.css" /> -->
    <title>Mini Project</title>
  </head>
  <body>
    <div class="container">
      <div class="image">
        <img id="first" src="https://7learn.ac/assets/student/img/teacher.svg" alt="" />
      </div>
      <div class="desc">
        <h2>صرفه جویی در زمان، با تدریس اساتید مجرب</h2>
        <p>
          مدرسین اکادمی سون لرن، همگی افرادی هستند که تجربه کاری در بزرگترین
          شرکت های حوزه فناوری ایران همانند دیجی کالا، نت برگ، پارسپک و ... را
          دارند و می توانند با انتقال تجربه های ارزشمندشان، در زمان شما صرفه
          جویی کنند!
        </p>
      </div>

      <div class="image">
        <img id="second" src="https://7learn.ac/assets/student/img/updates.svg" alt="" />
      </div>
      <div class="desc">
        <h2>آپدیت های همیشگی</h2>
        <p>در صورتی که در دوره های متخصص به صورت کامل ثبت نام نمایید، آپدیت های همیشگی این دوره ها را به رایگان دریافت خواهید کرد.
        </p>
      </div>


      <div class="image">
        <img id="third" src="https://7learn.ac/assets/student/img/updates.svg" alt="" />
      </div>
      <div class="desc">
        <h2>حفظ تعامل با برگزاری وبینارهای ماهانه</h2>
        <p>در دوره های متخصص هر ماه یک وبینار زنده برای تعامل و پرسش و پاسخ با مدرسین خواهید داشت و می توانید سوالات خود را مستقیما از مدرس بپرسید و پاسخ بگیرید..
        </p>
      </div>

      <div class="image">
        <img id="forth" src="https://7learn.ac/assets/student/img/webinar.svg" alt="" />
      </div>
      <div class="desc">
        <h2>معرفی به بازار کار پس از دریافت تائیدیه فنی</h2>
        <p>در دوره های متخصص هر ماه یک وبینار زنده برای تعامل و پرسش و پاسخ با مدرسین خواهید داشت و می توانید سوالات خود را مستقیما از مدرس بپرسید و پاسخ بگیرید..
        </p>
      </div>
    </div>
  </body>
</html>

این هم فایل استایل

@font-face{
  font-family: sahel;
  src: url("Sahel.woff") format("woff");
}

body{
  font-family: sahel;
  direction: rtl;
  background-color: #f6f9fb;
}

.container{
  overflow: auto;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  box-shadow: 1px 1px 10px #efefef, -1px -1px 10px #efefef;; 
}

#first{
  float: right;
  width: 35%;
  margin: 30px;
}

#second{
  float: left;
  width: 35%;
  margin: 30px; 
}

#third{
  float: right;
  width: 35%;
  margin: 30px;
}

#forth{
  float: left;
  width: 35%;
  margin: 30px;
}

div.desc{
  margin-bottom: 60px;
}
.desc h2,p{
  padding-top: 14px;  
}

.desc p{
  width: 80%;
  padding-bottom: 120px;
  padding-right: 31px;
}

.desc h2{
  padding-top: 50px;
  padding-right: 15px;
}

اینم یه استایل دیگه که همینطوری زدم برای تمرین

@font-face{
  font-family: sahel;
  src: url("Sahel.woff") format("woff");
}

body{
  font-family: sahel;
  direction: rtl;
  background-color: #f6f9fb;
}

.container{
  margin-left: 300px;
  margin-right: 300px;
  box-shadow: 1px 1px 10px #efefef, -1px -1px 10px #efefef;
}

.image img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}
.desc{
  text-align: center;
}

.desc p{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.desc h2,p{
  margin-bottom: 25px;
}

طراحی وب

علی قربان زاده

24 خرداد 99

شبیه سازی قسمت کوچکی از سون لرن با خصوصیت float

سوالات مرتبط