Created the layout for report an issue

website/templates/_bug.html

@@ -1,7 +1,7 @@
 {% load gravatar %}
 {% load static %}
 
-<div class="bug-container flex flex-col p-5 bg-white m-1 w-[100%] h-[290px] rounded-[2.5rem] border-[#e8e8e8] border-2">
+<div class="bug-container flex flex-col p-5 bg-white m-1 w-[100%] h-[300px] rounded-[2.5rem] border-[#e8e8e8] border-2">
     <div class="bug-author bg-red font-medium font-['Inter'] text-[#656565] flex flex-row items-center gap-[0.8rem]">
         {% if bug.user.userprofile.avatar %}
             <img src="{{ bug.user.userprofile.avatar }}" width="30" class="h-[30px] object-cover img-responsive rounded-full" loading="lazy">

website/templates/_report_widget.html

@@ -0,0 +1,35 @@
+<div class="bug-container flex flex-col p-5 px-7 bg-[#FFC8C485] m-1 w-[100%] h-[300px] rounded-[2.5rem] border-[#FF545433] border-[3px]">
+
+    <form class="h-full flex flex-col gap-[0.9rem]">
+
+
+        <div class="font-['Barlow_Semi_Condensed'] font-semibold text-[#b10909] text-5xl text-center mb-1">REPORT AN ISSUE</div>
+
+            <input type="text" id="first_name" class="bg-white text-[#4C4C4C] placeholder:text-xl rounded-full block w-full p-[0.4rem] px-4 font-semibold outline-none" placeholder="Domain URL" required>
+
+            <select class="bg-white text-[#4C4C4C] text-2xl rounded-full block w-full p-2 px-3 font-semibold outline-none border-r-8 border-r-white cursor-pointer">
+                <option value="0" selected="selected">General</option>
+                <option value="1">Number error</option>
+                <option value="2">Functional</option>
+                <option value="3">Performance</option>
+                <option value="4">Security</option>
+                <option value="5">Typo</option>
+                <option value="6">Design</option>
+                <option value="7">Server down</option>
+            </select>
+
+
+            <div>
+                <label class="bg-trans text-[#303030] text-[1.4rem] rounded-full block w-full px-2 font-semibold outline-none m-0 mb-0 mt-[-2px]"> Attach Screenshots: </label>
+                <input type="file" id="screenshot" class="bg-white text-[#4C4C4C] text-xl rounded-lg block w-full p-2 px-2 font-semibold outline-none" multiple required>
+            </div>
+
+            <textarea type="text" id="first_name" class="bg-white text-[#4C4C4C] text-xl rounded-[1rem] w-full p-2 px-3 font-semibold outline-none h-full flex flex-col resize-none" placeholder="Description" required></textarea>
+
+            <div class="flex flex-row gap-[0.7rem]">
+                <button id="expand" class="font-['Barlow'] font-bold text-[#b10909] text-3xl text-center bg-[#FF9090] p-2 rounded-full border border-1 border-[#CB3838] w-[4rem]"><i class="fa fa-angle-down" aria-hidden="true"></i></button>
+                <button type="submit" class="w-full font-['Barlow'] font-bold text-[#b10909] text-3xl text-center bg-[#FF9090] p-2 rounded-full border border-1 border-[#CB3838]">SUBMIT BUG!</button>
+            </div>
+
+    </form>
+</div>

website/templates/base_new.html

@@ -33,7 +33,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
     <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
-    <link href='https://fonts.googleapis.com/css?family=Barlow:500' rel='stylesheet'>
+    <link href='https://fonts.googleapis.com/css?family=Barlow:500;600;700' rel='stylesheet'>
+    <link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans" rel="stylesheet">
     <link href="{% static 'css/main.css' %}" rel="stylesheet" type="text/css">
     <link href="{% static 'css/text-slider.css' %}" rel="stylesheet" type="text/css">

website/templates/new_home.html

@@ -8,6 +8,7 @@
     </style>
     <div class="font-['Barlow'] text-[#2B2B2B] text-5xl tracking-wide font-semibold mb-0 mt-10 ms-[4.3%]">Find bugs, earn points, prize and cash!</div>
     <div class="hero-bugs-container mx-[4%] my-[2.5rem] grid grid-flow-row gap-[25px]">
+        {% include '_report_widget.html' %}
         {% for bug in bugs %}
             {% include '_bug.html' %}
         {% endfor %}