BS "Company" temasi
Tema yaratish: "Company"
Ushbu sahifada Bootstrap temasini noldan qanday yaratish ko‘rsatiladi.
Biz oddiy HTML sahifadan boshlaymiz, so‘ngra to‘liq ishlaydigan, shaxsiy va moslashuvchan veb-saytga ega bo‘lgunimizcha unga tobora ko‘proq komponentlar qo‘shib boramiz.
Natija quyidagicha ko‘rinadi. Siz uni bemalol o‘zgartirishingiz, saqlashingiz, ulashishingiz, ishlatishingiz yoki u bilan xohlaganingizni qilishingiz mumkin:
Boshlang‘ich HTML sahifa
Quyidagi HTML sahifadan boshlaymiz:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Company</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Company</h1>
<p>We specialize in blablabla</p>
</body>
</html>
Bootstrap CDN’ini va jumbotron qo‘shing
Bootstrap CDN’i va jQuery havolasini qo‘shing hamda HTML elementlarini .jumbotron ichiga joylang:
Misol
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Company</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>
</html>
Natija:
Company
We specialize in blablabla
Fon rangini qo‘shing va matnni markazlashtiring
1. Jumbotronga to‘q sariq (orange) fon rangini qo‘shing.
2. Jumbotron ichidagi matnni markazlashtirish uchun .text-center klassini qo‘shing:
Misol
<style>
.jumbotron {
background-color: #f4511e; /* Orange */
color: #ffffff;
}
</style>
<body>
<div class="jumbotron text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>
Natija:
Company
We specialize in blablabla
Forma qo‘shing
Kiritish maydoni va tugmaga ega forma qo‘shing:
Misol
<div class="jumbotron text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
<div class="input-group">
<input type="email" class="form-control" size="50" placeholder="Email Address" required>
<div class="input-group-btn">
<button type="button" class="btn btn-danger">Subscribe</button>
</div>
</div>
</form>
</div>
Natija:
Company
We specialize in blablabla
Konteynerlar qo‘shing
Ikkita konteyner (.container-fluid) qo‘shing va ikkinchi konteynerga maxsus klass qo‘shing (.bg-grey — kulrang fon rangini qo‘shadi):
Misol
<style>
.bg-grey {
background-color: #f6f6f6;
}
</style>
<div class="container-fluid">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="container-fluid bg-grey">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>
Natija:
About Company Page
Lorem ipsum..
Lorem ipsum..
Our Values
MISSION: Our mission lorem ipsum..
VISION: Our vision Lorem ipsum..
Ichki chekinish (padding) qo‘shing
Keling, biroz ichki chekinish (padding) qo‘shib, jumbotron va konteynerlarni chiroyli ko‘rinishga keltiramiz:
Misol
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px 50px;
}
</style>
Natija:
Company
We specialize in blablabla
About Company Page
Lorem ipsum..
Lorem ipsum..
Our Values
MISSION: Our mission lorem ipsum..
VISION: Our vision Lorem ipsum..
Grid qo‘shing
1. Har bir konteynerga belgi (yoki kompaniya logotipini) qo‘shing.
2. Ikkita ustun (.col-sm-8 va .col-sm-4) yaratib, belgi va "kompaniya haqidagi matn"ni ajrating
3. Kengligi 768 pikseldan kichik ekranlarda "logotip ustuni"ni markazlashtirish uchun media so‘rovlar (media queries) qo‘shing.
Misol
<style>
.logo {
font-size: 200px;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
</div>
</div>
</div>
Natija:
About Company Page
Lorem ipsum..
Lorem ipsum..
Our Values
MISSION: Our mission lorem ipsum..
VISION: Our vision Lorem ipsum..
Xizmatlar konteynerini qo‘shing
Teng kenglikdagi 2x3 ustunli yangi konteyner qo‘shing (.col-sm-4):
Misol
<div class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench"></span>
<h4>HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
Natija:
SERVICES
What we offer
POWER
Lorem ipsum dolor sit amet..
LOVE
Lorem ipsum dolor sit amet..
JOB DONE
Lorem ipsum dolor sit amet..
GREEN
Lorem ipsum dolor sit amet..
CERTIFIED
Lorem ipsum dolor sit amet..
HARD WORK
Lorem ipsum dolor sit amet..
Belgilarni bezash
"Services" konteyneridagi har bir glyphicon’ga maxsus klass (.logo-small) qo‘shing. Ularni bezash uchun CSS’dan foydalaning:
Misol
/* Add an orange color to all icons and set the font-size */
.logo-small {
color: #f4511e;
font-size: 50px;
}
.logo {
color: #f4511e;
font-size: 200px;
}
Natija:
About Company Page
Lorem ipsum..
Lorem ipsum..
Our Values
MISSION: Our mission lorem ipsum..
VISION: Our vision Lorem ipsum..
SERVICES
What we offer
POWER
Lorem ipsum dolor sit amet..
LOVE
Lorem ipsum dolor sit amet..
JOB DONE
Lorem ipsum dolor sit amet..
GREEN
Lorem ipsum dolor sit amet..
CERTIFIED
Lorem ipsum dolor sit amet..
HARD WORK
Lorem ipsum dolor sit amet..
Portfolio konteynerini qo‘shing
Teng kenglikdagi uchta ustunli (.col-sm-4) yangi to‘liq kenglikdagi konteyner yarating:
Har bir ustun ichiga rasm qo‘shing.
So‘ngra rasmni eskiz (thumbnail) ko‘rinishiga keltirish uchun .img-thumbnail klassidan foydalaning.
Odatda .img-thumbnail klassini bevosita <img> elementiga qo‘shasiz. Bu misolda esa rasm matnini ham belgilay olishimiz uchun rasm atrofiga thumbnail konteynerini joylashtirdik.
Misol
<div class="container-fluid text-center bg-grey">
<h2>Portfolio</h2>
<h4>What we have created</h4>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
Natija:
Portfolio
What we have created
Paris
Yes, we built Paris
New York
We built New York
San Francisco
Yes, San Fran is ours
Eskiz rasmlarni bezash
Rasmlarni bezash uchun CSS’dan foydalaning. Bizning misolimizda rasmlarning chegarasini olib tashlab va har biriga 100% kenglik berib, ularni kartalarga o‘xshatishga harakat qildik.
Misol
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
Natija:
Portfolio
What we have created
Paris
Yes, we built Paris
New York
We built New York
San Francisco
Yes, San Fran is ours
Karusel qo‘shing
Karusel qo‘shing:
Misol
<h2>What our customers say</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>"This company is the best. I am so happy with the result!"<br><span style="font-style:normal;">Michael Roe, Vice President, Comment Box</span></h4>
</div>
<div class="item">
<h4>"One word... WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
</div>
<div class="item">
<h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler Bing, Actor, FriendsAlot</span></h4>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Natija:
What our customers say
O‘zingiz sinab ko‘ring »Karuselni bezang
Karuselni bezash uchun CSS’dan foydalaning:
Misol
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
Natija:
What our customers say
O‘zingiz sinab ko‘ring »Narxlar konteynerini qo‘shing
Teng kenglikdagi uchta ustunli (.col-sm-4) to‘liq kenglikdagi konteyner yarating:
Har bir ustun ichiga panel qo‘shing:
Misol
<div class="container-fluid">
<div class="text-center">
<h2>Pricing</h2>
<h4>Choose a payment plan that works for you</h4>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Pro</h1>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$29</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Premium</h1>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$49</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
Natija:
Pricing
Choose a payment plan that works for you
Basic
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Endless Amet
Pro
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Endless Amet
Premium
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Endless Amet
Panellarni bezash
Panellarni bezash uchun CSS’dan foydalaning:
Misol
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff !important;
color: #f4511e;
}
.panel-heading {
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: #fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #f4511e;
color: #fff;
}
Natija:
Pricing
Choose a payment plan that works for you
Basic
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Endless Amet
Pro
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Endless Amet
Premium
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Endless Amet
Aloqa konteynerini qo‘shing
Aloqa ma’lumotlari bilan yangi konteyner qo‘shing:
Misol
<div class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
Natija:
CONTACT
Contact us and we'll get back to you within 24 hours.
Chicago, US
+00 1515151515
myemail@something.com
Xarita/joylashuv rasmini qo‘shing
Joylashuv rasmi yoki xaritani qo‘shing (Google xaritalari uchun Google Maps darsligimizni o‘qing):
Misol
<!-- Image of location/map -->
<img src="map.jpg" style="width:100%">
Natija:
Navigatsiya paneli (navbar) qo‘shing
Sahifaning yuqori qismiga kichikroq ekranlarda yig‘iladigan navigatsiya panelini qo‘shing:
Misol
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
Natija:
O‘zingiz sinab ko‘ring »Maslahat: Navigatsiya tugmalarini navbar-right klassi yordamida o‘ngga tekislang.
Navigatsiya panelini bezang
Navigatsiya panelini sozlash uchun CSS’dan foydalaning:
Misol
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
Natija:
O‘zingiz sinab ko‘ring »Scrollspy qo‘shing
Sahifa aylantirilganda navigatsiya paneli havolalarini avtomatik yangilash uchun scrollspy qo‘shing:
Misol
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div id="about" class="container-fluid">
<div id="services" class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact" class="container-fluid">
O‘zingiz sinab ko‘ring »
Pastki qism (footer) qo‘shing
Pastki qismga (footer) bosilganda foydalanuvchini sahifaning yuqori qismiga olib chiqadigan "Yuqoriga strelka" belgisini qo‘shing:
Misol
<style>
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #f4511e;
}
</style>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p>
</footer>
Natija:
O‘zingiz sinab ko‘ring »Silliq aylantirishni (smooth scrolling) qo‘shish
jQuery yordamida silliq aylantirishni qo‘shing (navigatsiya panelidagi havolalar bosilganda):
Misol
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script>
O‘zingiz sinab ko‘ring »
Yakuniy ishlov
O‘zingizga yoqqan shriftni qo‘shib, temangizni shaxsiylashtiring. Biz Google shriftlar kutubxonasidagi "Montserrat" va "Lato" shriftlaridan foydalandik.
<head> bo‘limida shriftga havola qo‘shing:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
So‘ngra ulardan sahifada foydalanishingiz mumkin:
Misol
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat, sans-serif;
}
.navbar {
font-family: Montserrat, sans-serif;
}
Shuningdek, ba’zi elementlarga qo‘shimcha stillar qo‘shdik:
Misol
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
O‘zingiz sinab ko‘ring »
Siljib kiruvchi elementlar
Shuningdek, sahifa aylantirilganda elementlarni siljitib olib kiradigan animatsiya effektini yaratdik. Agar undan foydalanmoqchi bo‘lsangiz, siljib kirishi kerak bo‘lgan elementga .slideanim klassini qo‘shing hamda CSS va jQuery kodingizga quyidagilarni qo‘shing (davomiylik, shaffoflik, qayerdan boshlash, qachon siljib kirish va hokazolarni bemalol o‘zgartirishingiz mumkin):
CSS misoli
.slideanim {visibility:hidden;}
.slide {
/* The name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the animation */
animation-duration: 1s;
-webkit-animation-duration: 1s;
/* Make the element visible */
visibility: visible;
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
jQuery misoli
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
O‘zingiz sinab ko‘ring »
To‘liq "Company" temasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!