Jump to content
CMSmafia.ru
Search In
  • More options...
Find results that contain...
Find results in...

'Уведомление'


Recommended Posts

Заметил тут красивое уведомление для пользователей. Подскажите, это плагин или Администрация сама дописала? Если возможно получить исходный код или плагин буду благодарен.

Screenshot_2.jpg

Link to post
Share on other sites
  • Авторитет
<div class="banner" style="" data-view="banner">
 <div class="headerstrip">
  <div class="headerstrip-content-background"></div>
  <div class="headerstrip-canvas is-hidden-tablet-and-below">
    <div class="headerstrip-content">
      <div class="headerstrip-text"><strong>Важно:</strong> Накрутка сообщений без смыслового содержания к различным темам карается БАНОМ!</div>
      <div class="headerstrip-cta-container">
        <a class="js-banner__link headerstrip-cta" href="http://cmsmafia.ru/clients/donations/">Поддержать проект</a>
      </div>
      
    </div>
  </div>
</div>

 

И стили:

.headerstrip {
  height: 50px;
  position: relative;
}

.headerstrip-content-background {
  background-color: #fff;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #00dcaf; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #00dcaf, #6d47d9); /* For Safari 5.1 to 6.0 */
  background: linear-gradient(to right, #00dcaf , #6d47d9); /* Standard syntax */
  
  background-repeat: repeat-x;
}

.headerstrip .headerstrip-canvas {
  height: 50px;
  margin: auto auto;
}

.headerstrip .headerstrip-content {
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 1000px 50px;
  width: 100%;
  height: 50px;
  max-width: 1152px;
  margin: 0 auto;
}

.headerstrip .headerstrip-text {
  position: absolute;
  color: white;
  text-decoration: none;
  line-height: 50px;
  font-weight: 200;
  letter-spacing: 0.8px;
  padding-left: 10px;
  font-size: 14px;
}

.headerstrip .headerstrip-text strong {
  font-weight: 600;
}

.headerstrip .headerstrip-cta {
  position: absolute;
  top: 10px;
  right: 45px;
  background-color: rgba(255,255,255,.2);
  padding: 5px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.8px;
  border-radius: 3px;
  box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.07);
  text-decoration: none;
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 180px;
}

.headerstrip-cta-mobile {
  color: #fff;
  text-decoration: underline;
  padding-left: 5px;
}

.is-hidden-desktop .headerstrip-content {
  text-align: center;
}
.is-hidden-desktop .headerstrip-text {
  position: relative;
  font-size: 14px;
}

.headerstrip-cta-mobile:hover {
  color: #fff;
}

.headerstrip .banner__dismiss {
  position: absolute;
  opacity: 0.4;
  color: white;
  top: 18px;
  right: 10px;
  text-decoration: none;
}

.dismiss_icon {
  width: 17px;
  height: 17px;
  fill: white;
  display: inline-block;
}

.headerstrip .banner__dismiss {
  color: #fff;
}

 

  • Like 2

Правила форума       Правила оформления контента       Приватный форум и чат

podpis.png

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Privacy Policy