علوی
12 ماه پیش توسط علوی مطرح شد
3 پاسخ

مشکل در انجام یک پروژ ه با bootstrap

سلام وقت بخیر. من یک پروژه از سایت فرانت اند منتور برداشتم که باید با css, html انجام بشه ولی من می خوام با bootstrap انجامش بدم. حالا نمی تونم عرض یکی از containerها رو تغییر بدم. هر کاری می کنم نمیشه از استک اور فلو هم نتیجه نگرفتم. میشه لطفا به کدهام نگاهی بندازید؟


<html>
    <head>
        <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
        <link href="https://fonts.google.com/specimen/Hanken+Grotesk" rel="stylesheet">
    </head>
    <body>
        <div class="container-fluid d-flex px-5 bg-info rounded-4" style="width: 260px; height: 380px;margin-top: 10% ;"> 
            <div class="row"> 
                <div class="col-md-8 p-3">
                    <h6 class="text-secondary text-center pt-4">Your Result</h6>
                    <div class="container text-center bg-primary rounded-circle mt-3" style="width: 150px;  height: 150px;">
                        <h2 class="text-white pt-4">76</h2>
                        <h6 class="text-muted px-3">of 100</h6>
                    </div>
                    <div class="container-fluid mt-3" style="width: 110%;">
                        <h3 class="text-white text-center">Great</h3>
                        <h6 class="text-white text-center">You scored higher than 65% of people who have taken these tests.</h6>
                    </div>
                </div>
            </div>
            <div class="container-fluid  text-bg-light rounded-4" style="width: 200%; height: 100%;    margin-inline-start: 30%;">
                <div class="col-md-8 p-3">
                  <h6>Summary</h6>
                </div>
                <div class="container-fluid">
                    <h6>Reaction        80/100</h6>
                </div>
           </div>
        </div>
    </body>
</html>

</body></html>


ثبت پرسش جدید
Banana Life
@shift.delete 12 ماه پیش آپدیت شد
0

سلام
دوست عزیز سعی کنید با انجام دادن این چالش ها مهارت تان در css و html و js بالا ببرید و سراغ هیچ ابزار یا کتابخانه و یا فریمورک نرید وقتی css را تا یک اندازه خوب یاد گرفتید به راحتی میتونید کتابخانه و یا فریمورک هاش شخصی سازی کنید و معمولا کتابخانه و یا فریمورک ها استایل هایی تعریف شده در چارچوپ خود دارند و انجام چنین چالش هایی نیاز شخصی سازی اون ابزار را داره .

  • همچنین رنگ و فونت و اندازه ها را طبق چیزهایی که تو فایل style-guide.md تعریف شده انتخاب کنید.
  • این لینک یک چند تا چالش از سایت فرانت اند منتور است که قبلا انجام دادم با اینسپکت کردن میتونید نگاهی به کدها بندازید شاید بدرتان خورد.
    https://www.frontendmentor.io/profile/MousaAzm/solutions

رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 12 ماه پیش مطرح شد
0

درود خوبی...
container جایگزین container-fluid کنید که برابر با 1140 پیکسل میشه...


علوی
@Sky42 12 ماه پیش مطرح شد
0

درود بر شما.سپاسگذارم. اینکار رو هم انجام دادم فایده ای نداشته. کلاس colرو مقدارش رو تغییر دادم باز هم نشده...


Banana Life
@shift.delete 12 ماه پیش آپدیت شد
0

سلام
دوست عزیز سعی کنید با انجام دادن این چالش ها مهارت تان در css و html و js بالا ببرید و سراغ هیچ ابزار یا کتابخانه و یا فریمورک نرید وقتی css را تا یک اندازه خوب یاد گرفتید به راحتی میتونید کتابخانه و یا فریمورک هاش شخصی سازی کنید و معمولا کتابخانه و یا فریمورک ها استایل هایی تعریف شده در چارچوپ خود دارند و انجام چنین چالش هایی نیاز شخصی سازی اون ابزار را داره .

  • همچنین رنگ و فونت و اندازه ها را طبق چیزهایی که تو فایل style-guide.md تعریف شده انتخاب کنید.
  • این لینک یک چند تا چالش از سایت فرانت اند منتور است که قبلا انجام دادم با اینسپکت کردن میتونید نگاهی به کدها بندازید شاید بدرتان خورد.
    https://www.frontendmentor.io/profile/MousaAzm/solutions

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام