Разделение строк css с помощью начальной загрузки

$('.carousel').carousel({
    interval: false
}); 
/*=================================================================
GENERAL
=================================================================*/
*{
	box-sizing: border-box;
	padding:0;
	margin:0;
	font-family: 'Montserrat', sans-serif;
}

/*=================================================================
COLORS
=================================================================*/
.blue{
	color:#0091D7;
}
.light-blue{
	color:#0091D7
}
.dark-blue{
	color:#003148;
}
.background-blue{
	background-color:#0091D7;
	color: #fff;
}
.background-dark-blue{
	background-color:#003148;
	color: #fff;
}

.font-w-600{
	font-weight: 600;
}
/*=================================================================
HEADER
=================================================================*/
.header{
    display: flex;
    justify-content: center;
}
.header  img{
    height: 60px;
}

/*=================================================================
MAIN=================================================================*/
 .main {

  background-color: white;
  background-image: url("img/CRYPTOCLUB_02.jpg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left top;


}
.main a {
	font-size: 2.5rem;
	margin:100px 0 50px 0;
	display: block;
}

.join-now{
	  background: #003148;
    font-weight: 600;
    border: 4px solid #0091d7;
    float: right;
    box-shadow: 5px #000;
    border-radius: 0;
    box-shadow: 0px 0px 3px 1px #202020
}
.join-now:hover {
    color: #0062cc;
    background-color: #003148;
    background-color: #003148;

}

/*SLIDER SECTION CSS*/

.carousel img{
    height: 150px;
    width: 150px !important;
    border-radius: 50%;
    margin: 0 auto;
 
    margin-top: 50px;
}
.carousel-item .carousel-caption{
	position: relative;
}
.carousel-item > .carousel-caption p{
    font-size: 12px;
    max-width: 70%;
    margin-top: 20px;
}
.carousel-item > .carousel-caption h5{
	font-size: 16px;
    max-width: 70%;
    margin-top: 20px;
}
.carousel-indicators li {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    background-color: rgba(255,255,255,.5);
}
.contact-us h5 ,h3,h4 ,p {
	margin-bottom: 0px;
}
.contact-us h5{
  font-size: 1.2rem;
}

.contact-us p{
  font-size: 0.8rem;
}

.footer img {
	height: 40px;
}
.footer p{
  font-size: 0.6rem;
}
.line-strip{
	width: 100%;
	background-color:#0091D7;
	height: 10px;
}
#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
	<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8">
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
	<meta name = "viewport" content = "width=device-width, initial-scale=1">
	<script defer src = "https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity = "sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl"
	crossorigin = "anonymous"></script>
	<link href = "https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700" rel = "stylesheet">
	<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
	<link rel = "stylesheet" type = "text/css" href = "style.css">
	<title>Bitcoin</title>
</head>
  <div class = "container-fluid mb-4">
	<div class = "row">
			<div class = "col-sm-6 background-blue">
				<div id = "carouselExampleIndicators" class = "carousel slide" data-ride = "carousel">
				<ol class = "carousel-indicators">
				<li data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active"></li>
				<li data-target = "#carouselExampleIndicators" data-slide-to = "1"></li>
				<li data-target = "#carouselExampleIndicators" data-slide-to = "2"></li>
				</ol>
				<div class = "carousel-inner">
				<div class = "carousel-item active">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "First slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				<div class = "carousel-item">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Second slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				<div class = "carousel-item">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Third slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				</div>
				<a class = "carousel-control-prev" href = "#carouselExampleIndicators" role = "button" data-slide = "prev">
				<span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
				<span class = "sr-only">Previous</span>
				</a>
				<a class = "carousel-control-next" href = "#carouselExampleIndicators" role = "button" data-slide = "next">
				<span class = "carousel-control-next-icon" aria-hidden = "true"></span>
				<span class = "sr-only">Next</span>
				</a>
				</div>
			</div><!-- end of sm-6 -->
			<div class = "col-sm-6 background-dark-blue">
				<div id = "slider2" class = "carousel slide" data-ride = "carousel">
				<ol class = "carousel-indicators">
				<li data-target = "#slider2" data-slide-to = "0" class = "active"></li>
				<li data-target = "#slider2" data-slide-to = "1"></li>
				<li data-target = "#slider2" data-slide-to = "2"></li>
				</ol>
				<div class = "carousel-inner">
				<div class = "carousel-item active">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "First slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				<div class = "carousel-item">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Second slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				<div class = "carousel-item">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Third slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				</div>
				<a class = "carousel-control-prev" href = "#slider2" role = "button" data-slide = "prev">
				<span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
				<span class = "sr-only">Previous</span>
				</a>
				<a class = "carousel-control-next" href = "#slider2" role = "button" data-slide = "next">
				<span class = "carousel-control-next-icon" aria-hidden = "true"></span>
				<span class = "sr-only">Next</span>
				</a>
				</div>
			</div><!-- end of col-sm-6  -->
		</div><!-- end of row -->
	</div><!-- end of container -->


  
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
		<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
		<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
		<script type = "text/javascript" src = "main.js"></script>

У меня возникли проблемы с тем, чтобы сделать это разделение столбцов с помощью bootstrap v4. У меня есть идея сделать треугольник с помощью css, но если использовать, добавьте больше текста в описание, которое будет короче, чем ширина строки, У меня возникли проблемы с тем, чтобы сделать это разделение столбцов с помощью bootstrap v4. У меня есть идея сделать треугольник с помощью css, но если использовать, добавьте больше текста в описание, которое будет короче, чем ширина строки, Разделение строк css с помощью начальной загрузки

поделись своим кодом

— Sagar 02.04.2018 22:36

Лучшее, что мы можем сделать, это skewX(), scale() и overflow:hidden, не видя фактического кода.

— ppajer 02.04.2018 22:48

@Sagar я добавил код снайпера

— Albert qerimi 02.04.2018 23:03

@ppajer я добавил фрагмент кода

— Albert qerimi 02.04.2018 23:03
javascript html css css-transitions
02.04.2018 22:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
306
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете попробовать это

.background-blue::before {
    content: "";
    height: 0;
    width: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    border-top: 200px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 35px solid #043248;
  }

результат

02.04.2018 23:12
Ответ принят как подходящий

Вы можете skew свои контейнеры (и инверсно исказить содержимое, чтобы оно выглядело нормально). Затем, чтобы заполнить недостающее пространство слева / справа, вы можете использовать псевдоэлементы :before / :after.

Код, который я добавил:

.background-blue:before{
    z-index:1001;
    background: #0091D7;
    content: '';
    position: absolute;
    left:-60px;
    top: 0;
    width: 70px;
    height:100%;
}

.background-dark-blue:after{
    z-index:1001;
    background: #003148;
    content: '';
    position: absolute;
    right:-60px;
    top: 0;
    width: 70px;
    height:100%;
}

.background-blue, .background-dark-blue {
  -moz-transform: skew(-5deg);
  -webkit-transform: skew(-5deg);
  transform: skew(-5deg);
}
/* inverse skew the content */
.background-blue .slide,
.background-dark-blue .slide{
  -moz-transform: skew(5deg);
  -webkit-transform: skew(5deg);
  transform: skew(5deg);
}

ДЕМО:

$('.carousel').carousel({
    interval: false
});
/*=================================================================
GENERAL
=================================================================*/
*{
    box-sizing: border-box;
    padding:0;
    margin:0;
    font-family: 'Montserrat', sans-serif;
}

/*=================================================================
COLORS
=================================================================*/
.blue{
    color:#0091D7;
}
.light-blue{
    color:#0091D7
}
.dark-blue{
    color:#003148;
}


.background-blue:before{
    z-index:1001;
    background: #0091D7;
    content: '';
    position: absolute;
    left:-60px;
    top: 0;
    width: 70px;
    height:100%;
}

.background-dark-blue:after{
    z-index:1001;
    background: #003148;
    content: '';
    position: absolute;
    right:-60px;
    top: 0;
    width: 70px;
    height:100%;
}

.background-blue, .background-dark-blue {
  -moz-transform: skew(-5deg);
  -webkit-transform: skew(-5deg);
  transform: skew(-5deg);
}

.background-blue .slide,
.background-dark-blue .slide{
  -moz-transform: skew(5deg);
  -webkit-transform: skew(5deg);
  transform: skew(5deg);
}


.background-blue{
    background-color:#0091D7;
    color: #fff;
}

.background-dark-blue{
    background-color:#003148;
    color: #fff;
}

.font-w-600{
    font-weight: 600;
}
/*=================================================================
HEADER
=================================================================*/
.header{
    display: flex;
    justify-content: center;
}
.header  img{
    height: 60px;
}

/*=================================================================
MAIN=================================================================*/
 .main {

  background-color: white;
  background-image: url("img/CRYPTOCLUB_02.jpg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left top;


}
.main a {
    font-size: 2.5rem;
    margin:100px 0 50px 0;
    display: block;
}

.join-now{
      background: #003148;
    font-weight: 600;
    border: 4px solid #0091d7;
    float: right;
    box-shadow: 5px #000;
    border-radius: 0;
    box-shadow: 0px 0px 3px 1px #202020
}
.join-now:hover {
    color: #0062cc;
    background-color: #003148;
    background-color: #003148;

}

/*SLIDER SECTION CSS*/

.carousel img{
    height: 150px;
    width: 150px !important;
    border-radius: 50%;
    margin: 0 auto;
 
    margin-top: 50px;
}
.carousel-item .carousel-caption{
    position: relative;
}
.carousel-item > .carousel-caption p{
    font-size: 12px;
    max-width: 70%;
    margin-top: 20px;
}
.carousel-item > .carousel-caption h5{
    font-size: 16px;
    max-width: 70%;
    margin-top: 20px;
}
.carousel-indicators li {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    background-color: rgba(255,255,255,.5);
}
.contact-us h5 ,h3,h4 ,p {
    margin-bottom: 0px;
}
.contact-us h5{
  font-size: 1.2rem;
}

.contact-us p{
  font-size: 0.8rem;
}

.footer img {
    height: 40px;
}
.footer p{
  font-size: 0.6rem;
}
.line-strip{
    width: 100%;
    background-color:#0091D7;
    height: 10px;
}
#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <script defer src = "https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity = "sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl"
    crossorigin = "anonymous"></script>
    <link href = "https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700" rel = "stylesheet">
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
    <link rel = "stylesheet" type = "text/css" href = "style.css">
    <title>Bitcoin</title>
</head>
  <div class = "container-fluid mb-4">
    <div class = "row">
            <div class = "col-sm-6 background-blue">
                <div id = "carouselExampleIndicators" class = "carousel slide" data-ride = "carousel">
                <ol class = "carousel-indicators">
                <li data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active"></li>
                <li data-target = "#carouselExampleIndicators" data-slide-to = "1"></li>
                <li data-target = "#carouselExampleIndicators" data-slide-to = "2"></li>
                </ol>
                <div class = "carousel-inner">
                <div class = "carousel-item active">
                <img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "First slide">
                <div class = "carousel-caption d-none d-md-block">
                <p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
                <h5 class = " bold text-uppercase">bill gates</h5>
                </div>
                </div>
                <div class = "carousel-item">
                <img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Second slide">
                <div class = "carousel-caption d-none d-md-block">
                <p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
                <h5 class = " bold text-uppercase">bill gates</h5>
                </div>
                </div>
                <div class = "carousel-item">
                <img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Third slide">
                <div class = "carousel-caption d-none d-md-block">
                <p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
                <h5 class = " bold text-uppercase">bill gates</h5>
                </div>
                </div>
                </div>
                <a class = "carousel-control-prev" href = "#carouselExampleIndicators" role = "button" data-slide = "prev">
                <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
                <span class = "sr-only">Previous</span>
                </a>
                <a class = "carousel-control-next" href = "#carouselExampleIndicators" role = "button" data-slide = "next">
                <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
                <span class = "sr-only">Next</span>
                </a>
                </div>
            </div><!-- end of sm-6 -->
            <div class = "col-sm-6 background-dark-blue">
                <div id = "slider2" class = "carousel slide" data-ride = "carousel">
                <ol class = "carousel-indicators">
                <li data-target = "#slider2" data-slide-to = "0" class = "active"></li>
                <li data-target = "#slider2" data-slide-to = "1"></li>
                <li data-target = "#slider2" data-slide-to = "2"></li>
                </ol>
                <div class = "carousel-inner">
                <div class = "carousel-item active">
                <img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "First slide">
                <div class = "carousel-caption d-none d-md-block">
                <p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
                <h5 class = " bold text-uppercase">bill gates</h5>
                </div>
                </div>
                <div class = "carousel-item">
                <img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Second slide">
                <div class = "carousel-caption d-none d-md-block">
                <p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
                <h5 class = " bold text-uppercase">bill gates</h5>
                </div>
                </div>
                <div class = "carousel-item">
                <img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Third slide">
                <div class = "carousel-caption d-none d-md-block">
                <p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
                <h5 class = " bold text-uppercase">bill gates</h5>
                </div>
                </div>
                </div>
                <a class = "carousel-control-prev" href = "#slider2" role = "button" data-slide = "prev">
                <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
                <span class = "sr-only">Previous</span>
                </a>
                <a class = "carousel-control-next" href = "#slider2" role = "button" data-slide = "next">
                <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
                <span class = "sr-only">Next</span>
                </a>
                </div>
            </div><!-- end of col-sm-6  -->
        </div><!-- end of row -->
    </div><!-- end of container -->


  
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
        <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
        <script type = "text/javascript" src = "main.js"></script>

это делает текст таким размытым

— Albert qerimi 02.04.2018 23:57

как сделать другую сторону этого

— Albert qerimi 03.04.2018 14:29
02.04.2018 23:22

Добавлю контент, как только представится возможность. А пока с этим можно поиграться.

.left {
  height: 300px;
  flex: 1;
  background: red;
  position: relative;
}

.left:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 150px solid blue;
  border-left: 20px solid red;
  width: 0;
}

.right {
  height: 300px;
  flex: 1;
  background: blue;
  position: relative;
}

.right:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 150px solid red;
  border-right: 20px solid blue;
  width: 0;
}

.box {
  border: 1px solid black;
  position: relative;
  display: flex;
}
<div class = "box">
  <div class = "left"></div>
  <div class = "right"></div>
</div>
03.04.2018 00:30

Вы можете просто использовать linear-gradient в строке div:

.background {
  background:linear-gradient(100deg,#0091D7 50%,#003148 50.1%);
}

Полный код:

$('.carousel').carousel({
    interval: false
});
/*=================================================================
GENERAL
=================================================================*/
*{
	box-sizing: border-box;
	padding:0;
	margin:0;
	font-family: 'Montserrat', sans-serif;
}

/*=================================================================
COLORS
=================================================================*/
.blue{
	color:#0091D7;
}
.light-blue{
	color:#0091D7
}
.dark-blue{
	color:#003148;
}
.background {
  background:linear-gradient(100deg,#0091D7 50%,#003148 50.1%);
}
.background-blue{
	color: #fff;
}
.background-dark-blue{
	color: #fff;
}

.font-w-600{
	font-weight: 600;
}
/*=================================================================
HEADER
=================================================================*/
.header{
    display: flex;
    justify-content: center;
}
.header  img{
    height: 60px;
}

/*=================================================================
MAIN=================================================================*/
 .main {

  background-color: white;
  background-image: url("img/CRYPTOCLUB_02.jpg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left top;


}
.main a {
	font-size: 2.5rem;
	margin:100px 0 50px 0;
	display: block;
}

.join-now{
	  background: #003148;
    font-weight: 600;
    border: 4px solid #0091d7;
    float: right;
    box-shadow: 5px #000;
    border-radius: 0;
    box-shadow: 0px 0px 3px 1px #202020
}
.join-now:hover {
    color: #0062cc;
    background-color: #003148;
    background-color: #003148;

}

/*SLIDER SECTION CSS*/

.carousel img{
    height: 150px;
    width: 150px !important;
    border-radius: 50%;
    margin: 0 auto;
 
    margin-top: 50px;
}
.carousel-item .carousel-caption{
	position: relative;
}
.carousel-item > .carousel-caption p{
    font-size: 12px;
    max-width: 70%;
    margin-top: 20px;
}
.carousel-item > .carousel-caption h5{
	font-size: 16px;
    max-width: 70%;
    margin-top: 20px;
}
.carousel-indicators li {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    background-color: rgba(255,255,255,.5);
}
.contact-us h5 ,h3,h4 ,p {
	margin-bottom: 0px;
}
.contact-us h5{
  font-size: 1.2rem;
}

.contact-us p{
  font-size: 0.8rem;
}

.footer img {
	height: 40px;
}
.footer p{
  font-size: 0.6rem;
}
.line-strip{
	width: 100%;
	background-color:#0091D7;
	height: 10px;
}
#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8">
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
	<meta name = "viewport" content = "width=device-width, initial-scale=1">
	<script defer src = "https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity = "sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl"
	crossorigin = "anonymous"></script>
	<link href = "https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700" rel = "stylesheet">
	<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
	<link rel = "stylesheet" type = "text/css" href = "style.css">
	<title>Bitcoin</title>
</head>
  <div class = "container-fluid mb-4">
	<div class = "row background">
			<div class = "col-sm-6 background-blue">
				<div id = "carouselExampleIndicators" class = "carousel slide" data-ride = "carousel">
				<ol class = "carousel-indicators">
				<li data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active"></li>
				<li data-target = "#carouselExampleIndicators" data-slide-to = "1"></li>
				<li data-target = "#carouselExampleIndicators" data-slide-to = "2"></li>
				</ol>
				<div class = "carousel-inner">
				<div class = "carousel-item active">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "First slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				<div class = "carousel-item">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Second slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				<div class = "carousel-item">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Third slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				</div>
				<a class = "carousel-control-prev" href = "#carouselExampleIndicators" role = "button" data-slide = "prev">
				<span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
				<span class = "sr-only">Previous</span>
				</a>
				<a class = "carousel-control-next" href = "#carouselExampleIndicators" role = "button" data-slide = "next">
				<span class = "carousel-control-next-icon" aria-hidden = "true"></span>
				<span class = "sr-only">Next</span>
				</a>
				</div>
			</div><!-- end of sm-6 -->
			<div class = "col-sm-6 background-dark-blue">
				<div id = "slider2" class = "carousel slide" data-ride = "carousel">
				<ol class = "carousel-indicators">
				<li data-target = "#slider2" data-slide-to = "0" class = "active"></li>
				<li data-target = "#slider2" data-slide-to = "1"></li>
				<li data-target = "#slider2" data-slide-to = "2"></li>
				</ol>
				<div class = "carousel-inner">
				<div class = "carousel-item active">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "First slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				<div class = "carousel-item">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Second slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				<div class = "carousel-item">
				<img class = "d-block w-100" src = "img/bill-gates.jpg" alt = "Third slide">
				<div class = "carousel-caption d-none d-md-block">
				<p>“Bitcoin is better than currency in that you don’t have to be physically in the same place, and in the future, financial transactions will eventually be digital, universal and almost free.”</p>
				<h5 class = " bold text-uppercase">bill gates</h5>
				</div>
				</div>
				</div>
				<a class = "carousel-control-prev" href = "#slider2" role = "button" data-slide = "prev">
				<span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
				<span class = "sr-only">Previous</span>
				</a>
				<a class = "carousel-control-next" href = "#slider2" role = "button" data-slide = "next">
				<span class = "carousel-control-next-icon" aria-hidden = "true"></span>
				<span class = "sr-only">Next</span>
				</a>
				</div>
			</div><!-- end of col-sm-6  -->
		</div><!-- end of row -->
	</div><!-- end of container -->


  
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
		<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
		<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
		<script type = "text/javascript" src = "main.js"></script>

очень красивое чистое решение как сделать реверс

— Albert qerimi 03.04.2018 11:52

@Albertqerimi просто отрегулируйте градус градиента ... используйте 80deg вместо 100deg

— Temani Afif 03.04.2018 11:55
03.04.2018 01:40

Другие вопросы по теме

Мультиусловный оператор Django
Передача уникальной переменной между URL-адресом
Диалоговое окно "Скрипт приложений" - Служба HTML - Правильное применение "withSuccessHandler" - google.script.run
Макет отзывчивости - реорганизация div
Внутренняя ширина / высота div до 100% размера тела, а не родительский div с боковым JS
Angular4: передача входного значения в службу
Как расширить и закрыть мобильную навигационную панель с помощью javascript
Как выбрать конкретный текст в модели DOM, исключив текст в атрибутах?
Доступ к массиву внутри JQuery с использованием цикла for
Создание интерактивного iframe с помощью документа Excel

Похожие вопросы

Отключить перед отсчетом от текущего времени в зависимости от выбора дня с помощью jquery timepicker
Angular: Или оператор внутри тега h2?
Отображать значок загрузки при загрузке изображения
Преобразование регулярных выражений из PHP в JavaScript
IFrame FancyBox 2.1.4 в iOS - Iframe прокручивается вверх после взаимодействия с Div с помощью Javascript
Передача свойств компоненту через состояние
Номер типа [] [] не может быть присвоен номеру типа []
Экспорт таблицы AngularJS в .CSV, направленный на пустую страницу?
Передача уникальной переменной между URL-адресом
Как использовать проверку jQuery для не входных данных или альтернативный метод