#javascript #html #css
Вопрос:
Я пытаюсь составить такой список планов.
Но почему-то я все еще не в состоянии достичь этого Я создал базовую структуру этого не знаю, как сделать этот сложный дизайн, как показано на этой картинке? Не знаю, как создавать границы после БЕСКОНЕЧНОСТИ, я хочу создать структуру того же типа с помощью HTML ИЛИ CSS.
Вот мой код
<!doctype html>
<html lang="en">
<head>
<title>Price List</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<style>
.col-lg-2 {
border: 1px solid black;
background-color: red;
}
.col-lg-1 {
background-color: red;
border: 1px solid black;
}
div>.tx>p {
margin-top: 19px;
}
</style>
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-lg-2 bg-dark">
<div>
<h4>Random</h4>
<br>
</div>
<div class="tx">
<p> <span class="text-light"> Speed</span></p>
<p> <span class="text-light"> Unlimited Data</span></p>
<p> <span class="text-light"> Monthly rental</span></p>
<p><span class="text-light">Who is it for?</span></p>
</div>
</div>
<div class="col-lg-2 bg-danger">
<div>
<h5>INFINITY</h4>
<br>
</div>
<div class="tx">
<p> <span class="text-light"> 1 Gbps</span></p>
<p> <span class="text-light"> ✅ </span></p>
<p> <span class="text-light"> ₹3999</span></p>
<p><span class="text-light">Experts like <br>gamers,traders,<br>live streamers</span></p>
</div>
</div>
<div class="col-lg-2 bg-danger">
<div>
<h4>PROFESSIONAL</h4>
<br>
</div>
<div class="tx">
<p> <span class="text-light"> 300 Mbps</span></p>
<p> <span class="text-light">✅ </span></p>
<p> <span class="text-light">₹1499 </span></p>
<p><span class="text-light">Professionals <br>Working <br>from home</span></p>
</div>
</div>
<div class="col-lg-2 bg-light ">
<div>
<h4>ENTERTAINMENT</h4>
<br>
</div>
<div class="tx ">
<p> <span class="text-dark"> 200 Mbps</span></p>
<p> <span class="text-dark">✅ </span></p>
<p> <span class="text-dark">₹999 </span></p>
<p><span class="text-dark">Non-stop binge<br>watchers</span></p>
</div>
</div>
<div class="col-lg-2" style="background-color: grey;">
<div>
<h4>STANDARD</h4>
<br>
</div>
<div class="tx">
<p> <span class="text-light"> 100 Mbps</span></p>
<p> <span class="text-light">✅ </span></p>
<p> <span class="text-light">₹799 </span></p>
<p><span class="text-light">Small family with <br>light usage </span></p>
</div>
</div>
<div class="col-lg-2" style="background-color: grey;">
<div>
<h4>BASIC</h4>
<br>
</div>
<div class="tx">
<p> <span class="text-light"> 40 Mbps</span></p>
<p> <span class="text-light">✅ </span></p>
<p> <span class="text-light">₹499 </span></p>
<p><span class="text-light">Individuals<br>with light usage </span></p>
</div>
</div>
<div class="col-2 text-light" style="background-color: grey;">
<br>
<div> Streaing <br>apps</div>
<br>
</div>
<div class="col-6 text-light" style="background-color: rgb(49, 49, 49);">
<br>
<div>Amazon-prime Disnep hotstar</div>
<br>
</div>
<div class="col-2 text-light" style="background-color: rgb(49, 49, 49);">
<br>
<span style="font-size: 21px;">X</span>
<br>
</div>
<div class="col-2 text-light" style="background-color: rgb(49, 49, 49);">
<br>
<span style="font-size: 21px;">X</span>
<br>
</div>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html> Кто-нибудь, пожалуйста, помогите мне с Source Code этим.
Спасибо.
Ответ №1:
Это может быть хорошим началом… Переключитесь на полную страницу, чтобы отобразить результат
ИНФОРМАЦИЯ: Он использует значки начальной загрузки и сеточную систему BS только clip-path для получения «специальной границы».
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css");
.h-20 {
height: 20%;
}
.shadow-lg {
box-shadow: inset 0 1rem 3rem rgba(0, 0, 0, 1)!important
}
.path {
clip-path: polygon(100% 0, 100% 100%, 27% 68%, 0 100%, 0 0);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 1)!important;
} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-fluid bg-dark vh-100 text-center">
<div class="row h-75">
<div class="col-2 text-white">
<div class="row h-20"></div>
<div class="row h-20 align-items-center">
<div class="col-12">
<i class="bi bi-speedometer2"></i> Speed
</div>
</div>
<div class="row h-20 align-items-center">
<div class="col-12">
<i class="bi bi-bar-chart-fill"></i> Unlimited <br> data
</div>
</div>
<div class="row h-20 align-items-center">
<div class="col-12">
<i class="bi bi-currency-exchange"></i> Monthly <br> rental
</div>
</div>
<div class="row h-20 align-items-center">
<div class="col-12">
<i class="bi bi-people-fill"></i> Who is <br> it for ?
</div>
</div>
</div>
<div class="col-2 bg-danger shadow-lg">
<div class="row h-20 align-items-center bg-white path">
<div class="col-12">
INFINTY
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Speed
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Unlimited <br> data
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Monthly <br> rental
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Who is <br> it for ?
</div>
</div>
</div>
<div class="col-2 bg-danger shadow-lg">
<div class="row h-20 align-items-center bg-white path">
<div class="col-12">
PROFESSIONAL
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Speed
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Unlimited <br> data
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Monthly <br> rental
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Who is <br> it for ?
</div>
</div>
</div>
<div class="col-2 bg-white shadow-lg">
<div class="row h-20 align-items-center bg-danger path">
<div class="col-12 text-white">
ENTERTAINMENT
</div>
</div>
<div class="row h-20 align-items-center">
<div class="col-12">
Speed
</div>
</div>
<div class="row h-20 align-items-center">
<div class="col-12">
Unlimited <br> data
</div>
</div>
<div class="row h-20 align-items-center">
<div class="col-12">
Monthly <br> rental
</div>
</div>
<div class="row h-20 align-items-center">
<div class="col-12">
Who is <br> it for ?
</div>
</div>
</div>
<div class="col-2 shadow-lg">
<div class="row h-20 align-items-center bg-white path">
<div class="col-12">
STANDARD
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Speed
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Unlimited <br> data
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Monthly <br> rental
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Who is <br> it for ?
</div>
</div>
</div>
<div class="col-2 shadow-lg">
<div class="row h-20 align-items-center bg-white path">
<div class="col-12">
BASICS
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Who is <br> it for ?
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Who is <br> it for ?
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Who is <br> it for ?
</div>
</div>
<div class="row h-20 align-items-center text-white">
<div class="col-12">
Who is <br> it for ?
</div>
</div>
</div>
</div>
<div class="row h-25">
<div class="col-2 bg-secondary"></div>
<div class="col-6 shadow-lg"></div>
<div class="col-2 shadow-lg"></div>
<div class="col-2 shdaow-lg"></div>
</div>
</div> Комментарии:
1. Я думаю, это я уже создал, мне нужны эти сложные границы! например, пересекаясь, не могли бы вы помочь мне с этим, пожалуйста. и я думаю, что это не отзывчиво, мне тоже нужна отзывчивость.
2. Добавлена граница @SushantUniversity, для отзывчивости вы можете сделать это самостоятельно, просто используйте точку останова начальной загрузки 🙂
3. Конечно, я сделаю это самостоятельно!