Level 10
Is there anyone who can answer my question and solve my problem?
Apr 6, 2023
1
Level 10
How to create a polygon in bootstrap 5.3?
I have a PSD like this.
For responsive web design which length(height/width) unit, we should use? I have been given the attached image where all the measurements are in px. So I started with px only but it didn't work.
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>Polygon</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-T5m5WERuXcjgzF8DAb7tRkByEZQGcpraRTinjpywg37AO96WoYN9+hrhDVoM6CaT" crossorigin="anonymous">
<style>
.Services {
position:relative;
height: 65rem;
padding-top: 50px;
}
.Services h2 {
text-align:center;
}
.Services .serviceTitle {
line-height:normal;
color:#2c2c2c !important;
font-weight:600;
font-size:14pt !important;
min-height:unset !important;
margin-bottom:10px !important;
}
.Services .row {
justify-content:space-between;
}
.Services .row .col-lg-12 {
max-width:300px;
}
.Services .Middle {
position:relative;
z-index:2;
top: -60px;
}
.Services .serviceBox {
position:relative;
background:#fff;
padding:0 20px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:20px;
box-shadow:0 2px 8px rgba(75,105,190,.1);
margin-bottom:65px;
z-index:2;
}
.Services .serviceBox .Image {
position:relative;
margin-top:-45px;
}
.Services .serviceBox .Text {
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:20px 0;
}
.Services .serviceBox .Text p {
text-align:center;
color:#888;
font-size:10pt;
font-family:'MIRANSans';
margin-bottom:25px;
min-height:65px;
overflow:hidden;
}
.Services .serviceBox .Text span {
position:relative;
color:#fff;
padding:8px 15px;
border-radius:21px;
font-size:10pt;
margin-bottom:-35px;
}
.Services .serviceLight {
position:relative;
}
.Services .serviceLight .Text span {
background:#92a7fb;
border:1px solid #92a7fb;
box-shadow:0 6px 10px rgba(106,150,254,.5);
-webkit-transition:.3s;
-moz-transition:.3s;
-ms-transition:.3s;
-o-transition:.3s;
transition:.3s;
}
.Services .serviceLight .Text span:hover {
background:#7286d7;
color:#fff;
}
.Services .serviceLight .Text span:active {
box-shadow:unset;
}
.Services .Rpart {
position:relative;
right:200px;
}
.Services .serviceDark .Text span {
background:#35406e;
border:1px solid #35406e;
box-shadow:0 6px 10px rgba(59,65,76,.5);
-webkit-transition:.3s;
-moz-transition:.3s;
-ms-transition:.3s;
-o-transition:.3s;
transition:.3s;
}
.Services .serviceDark .Text span:hover {
background:#161f42;
color:#fff;
}
.Services .serviceDark .Text span:active {
box-shadow:unset;
}
.Services .Lpart {
position:relative;
left:200px;
}
#svgwrapper {
display:inline-block;
stroke:#ecedf4;
stroke-width:5;
position:relative;
fill:none;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
width:600px;
z-index:0;
}
</style>
</head>
<body>
<section class="Services bg-warning p-section">
<div class="container">
<h2 class="mb-5"> خدمات شبرو وب </h2>
<div class="row">
<div class="col-lg-3 col-md-12" id="second">
<div class="row">
<div class="col-lg-12 col-md-6 col-sm-6">
<a href="https://shebroweb.ir/" class="serviceBox serviceLight Rpart aos-init aos-animate">
<div class="Image">
<img src="https://shebroweb.ir/public/storage/images/menus/1678692927.jpg" class="img-fluid">
</div>
<div class="Text">
</div>
</a>
</div>
<div class="col-lg-12 col-md-6 col-sm-6">
<a href="https://shebroweb.ir/" class="serviceBox serviceDark aos-init" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1000">
<div class="Image">
<img src="https://shebroweb.ir/storage/images/menus/1678692531.jpg" class="img-fluid">
</div>
<div class="Text">
</div>
</a>
</div>
<div class="col-lg-12 col-md-6 col-sm-6">
<a href="https://shebroweb.ir/" class="serviceBox serviceLight Rpart aos-init" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1000">
<div class="Image">
<img src="https://shebroweb.ir/storage/images/menus/1678692706.jpg" class="img-fluid">
</div>
<div class="Text">
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-center justify-content-center" id="first">
<div id="svgwrapper" class="load-logo">
</div>
<div class="Middle">
<div class="text-center">
<img src="https://shebroweb.ir/logo.png" alt="لوگو" class="img-fluid">
</div>
<div data-widget-name="CustomFields" data-widget-key="HomeWebOneServicesMiddle" data-widget-friendly-name="ویرایش" class="mt-2 text-center">
<h2 class="text-nany">مهم نیست کجای مسیر هستید کافی است با شبرو وب همراه شوید</h2>
<p class="text-nany">می توانید تنها نقشه راه را از شبرو وب بخواهید و یا همه چیز را به شبرو وب بسپارید</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12" id="third">
<div class="row">
<div class="col-lg-12 col-md-6 col-sm-6">
<a href="https://shebroweb.ir/" class="serviceBox serviceLight Lpart aos-init aos-animate" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="2000">
<div class="Image">
<img src="https://shebroweb.ir/public/storage/images/menus/1678692927.jpg" class="img-fluid">
</div>
<div class="Text">
</div>
</a>
</div>
<div class="col-lg-12 col-md-6 col-sm-6">
<a href="https://shebroweb.ir/" class="serviceBox serviceDark aos-init" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="2000">
<div class="Image">
<img src="https://shebroweb.ir/storage/images/menus/1678692953.jpg" class="img-fluid">
</div>
<div class="Text">
</div>
</a>
</div>
<div class="col-lg-12 col-md-6 col-sm-6">
<a href="https://shebroweb.ir/" class="serviceBox serviceLight Lpart aos-init" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="2000">
<div class="Image">
<img src="https://shebroweb.ir/storage/images/menus/1678692953.jpg" class="img-fluid">
</div>
<div class="Text">
</div>
</a>
</div>
<div class="col-lg-12 col-md-6 col-sm-6">
<a href="https://shebroweb.ir/" class="serviceBox serviceDark aos-init" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1000">
<div class="Image">
<img src="https://shebroweb.ir/storage/images/menus/1678693166.jpg" class="img-fluid">
</div>
<div class="Text">
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I want to know how I can make it mobile-friendly because I did it with media queries and I have like 100500 media queries. It is just hardcoded and doesn't work as I want it to. Maybe some of you know best practices, and how to develop a good responsive design for this website or if you have some information about where I can check it out, please share. thanks.
Please or to participate in this conversation.