leksoz

کپی کردن بخشی از سایت دیگر در سایت خودم

Recommended Posts

سلام
این سایت رو باز کنید:
https://phet.colorado.edu/
داخل صفحه اصلی بخشی وجود داره که تو عکس ضمیمه دورش کادر قرمز کشیدم 5 دایره رو با همون تصویر و لینک هاش دقیقا همونو میخام داخل سایت خودم تو یه صفحه قرارش بدم....
لدفا راهنمایی کنید چطور این کار رو انجام بدم
اگر ممکنه کل کد های اون قسمت رو بدید من توی صفحه بصورت html دستی قرارش بدم که نمایش پیدا کنه ممنون

 

به اشتراک گذاشتن این پست


لینک به پست
اشتراک در سایت های دیگر
<div class="subjects"><div class="subject-wrapper physics"><a href="/en/simulations/category/physics"><h3 class="text">Physics</h3><img id="physics-icon" class="subject-icon" src="/_m/img/physics-icon.png"></a></div><div class="subject-wrapper chemistry"><a href="/en/simulations/category/chemistry"><h3 class="text">Chemistry</h3><img id="chemistry-icon" class="subject-icon" src="/_m/img/chemistry-icon.png"></a></div><div class="subject-wrapper math"><a href="/en/simulations/category/math"><h3 class="text">Math</h3><img id="math-icon" class="subject-icon" src="/_m/img/math-icon.png"></a></div><div class="subject-wrapper earth-science"><a href="/en/simulations/category/earth-science"><h3 class="text">Earth Science</h3><img id="earth-science-icon" class="subject-icon" src="/_m/img/earth-science-icon.png"></a></div><div class="subject-wrapper biology"><a href="/en/simulations/category/biology"><h3 class="text">Biology</h3><img id="biology-icon" class="subject-icon" src="/_m/img/biology-icon.png"></a></div></div>

 

CSS:

.subjects {
  max-width: 1020px;
  display: flex;
  flex-flow: row wrap;
  margin: 40px auto;
}
.subject-wrapper {
  width: 161px;
  height: 161px;
  position: relative;
  margin: auto;
}
.subject-wrapper a {
  cursor: default;
  text-decoration: none;
  color: black;
  display: block;
  width: 161px;
  height: 161px;
}
.subject-wrapper a:focus {
  outline: 2px solid grey;
}
.subject-wrapper a:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  width: 111px;
  height: 111px;
  padding: 20px;
  margin: 0;
  border-radius: 72px;
  transition: 0.2s linear, outline 0s;
}
.subject-wrapper:hover a:before {
  filter: brightness(1.03);
  cursor: pointer;
  left: 0;
  top: 0;
  width: 121px;
  height: 121px;
  border-radius: 80px;
  transition: 0.2s linear;
}
.subject-wrapper h3.text {
  font-size: 1.1em;
  font-weight: 500;
  margin: 0 auto 15px;
  padding-top: 30px;
  max-width: 111px;
  word-break: break-word;
  text-transform: uppercase;
  transition: 0.2s linear;
  position: relative;
}
.subject-wrapper h3.text:hover {
  cursor: pointer;
}
.subjects .earth-science h3.text {
  margin: 0 auto 5px;
  padding-top: 22px;
}
.subject-icon {
  margin: 0 auto;
  width: 58px;
  display: block;
  position: relative;
}
.subject-wrapper .subject-icon:hover {
  cursor: pointer;
}
.subject-wrapper.physics a:before {
  background: #f7cddd;
}
.subject-wrapper.chemistry a:before {
  background: #d5f3fc;
}
.subject-wrapper.math a:before {
  background: #fff8cc;
}
.subject-wrapper.earth-science a:before {
  background: #c9eddd;
}
.subject-wrapper.biology a:before {
  background: #d9c8de;
}

 

البته باید آدرس عکس و لینک ها تصحیح بشن.

به اشتراک گذاشتن این پست


لینک به پست
اشتراک در سایت های دیگر
بر 11/4/2019 at 21:17 , رضاقاسمی گفت:

<div class="subjects"><div class="subject-wrapper physics"><a href="/en/simulations/category/physics"><h3 class="text">Physics</h3><img id="physics-icon" class="subject-icon" src="/_m/img/physics-icon.png"></a></div><div class="subject-wrapper chemistry"><a href="/en/simulations/category/chemistry"><h3 class="text">Chemistry</h3><img id="chemistry-icon" class="subject-icon" src="/_m/img/chemistry-icon.png"></a></div><div class="subject-wrapper math"><a href="/en/simulations/category/math"><h3 class="text">Math</h3><img id="math-icon" class="subject-icon" src="/_m/img/math-icon.png"></a></div><div class="subject-wrapper earth-science"><a href="/en/simulations/category/earth-science"><h3 class="text">Earth Science</h3><img id="earth-science-icon" class="subject-icon" src="/_m/img/earth-science-icon.png"></a></div><div class="subject-wrapper biology"><a href="/en/simulations/category/biology"><h3 class="text">Biology</h3><img id="biology-icon" class="subject-icon" src="/_m/img/biology-icon.png"></a></div></div>

طراحی سایت پزشکی  طراحی سایت ارزان  بلیط هواپیما  طراحی سایت دانشگاه   میزبانی سایت طراحی سایت تبلیغات گوگل  سئوی سایت  طراحی سایت فروشگاهی  طراحی سایت شرکتی    طراحی سایت صنعتی   هاست لینوکس ثبت دامنه  طراحی سایت هتل  طراحی سایت آموزشگاه  میزبانی وب  طراحی سایت املاک  لوازم یدکی مگان لوازم یدکی ال90 لوازم یدکی رنو

CSS:


.subjects {
  max-width: 1020px;
  display: flex;
  flex-flow: row wrap;
  margin: 40px auto;
}
.subject-wrapper {
  width: 161px;
  height: 161px;
  position: relative;
  margin: auto;
}
.subject-wrapper a {
  cursor: default;
  text-decoration: none;
  color: black;
  display: block;
  width: 161px;
  height: 161px;
}
.subject-wrapper a:focus {
  outline: 2px solid grey;
}
.subject-wrapper a:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  width: 111px;
  height: 111px;
  padding: 20px;
  margin: 0;
  border-radius: 72px;
  transition: 0.2s linear, outline 0s;
}
.subject-wrapper:hover a:before {
  filter: brightness(1.03);
  cursor: pointer;
  left: 0;
  top: 0;
  width: 121px;
  height: 121px;
  border-radius: 80px;
  transition: 0.2s linear;
}
.subject-wrapper h3.text {
  font-size: 1.1em;
  font-weight: 500;
  margin: 0 auto 15px;
  padding-top: 30px;
  max-width: 111px;
  word-break: break-word;
  text-transform: uppercase;
  transition: 0.2s linear;
  position: relative;
}
.subject-wrapper h3.text:hover {
  cursor: pointer;
}
.subjects .earth-science h3.text {
  margin: 0 auto 5px;
  padding-top: 22px;
}
.subject-icon {
  margin: 0 auto;
  width: 58px;
  display: block;
  position: relative;
}
.subject-wrapper .subject-icon:hover {
  cursor: pointer;
}
.subject-wrapper.physics a:before {
  background: #f7cddd;
}
.subject-wrapper.chemistry a:before {
  background: #d5f3fc;
}
.subject-wrapper.math a:before {
  background: #fff8cc;
}
.subject-wrapper.earth-science a:before {
  background: #c9eddd;
}
.subject-wrapper.biology a:before {
  background: #d9c8de;
}

 

البته باید آدرس عکس و لینک ها تصحیح بشن.

 

 

 

 

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

تشکر

ویرایش شده در توسط faaramin

به اشتراک گذاشتن این پست


لینک به پست
اشتراک در سایت های دیگر

ایجاد یک حساب کاربری و یا به سیستم وارد شوید برای ارسال نظر

کاربر محترم برای ارسال نظر نیاز به یک حساب کاربری دارید.

ایجاد یک حساب کاربری

ثبت نام برای یک حساب کاربری جدید در انجمن ها بسیار ساده است!

ثبت نام کاربر جدید

ورود به حساب کاربری

در حال حاضر می خواهید به حساب کاربری خود وارد شوید؟ برای ورود کلیک کنید

ورود به سیستم