golf преди 2 години
родител
ревизия
13a4160349
променени са 2 файла, в които са добавени 60 реда и са изтрити 36 реда
  1. 50 26
      css/main.css
  2. 10 10
      index.html

+ 50 - 26
css/main.css

1568
   min-height: 0px;
1568
   min-height: 0px;
1569
 }
1569
 }
1570
 
1570
 
1571
+.w-1\/2 {
1572
+  width: 50%;
1573
+}
1574
+
1571
 .w-5 {
1575
 .w-5 {
1572
   width: 1.25rem;
1576
   width: 1.25rem;
1573
 }
1577
 }
1584
   width: 1.5rem;
1588
   width: 1.5rem;
1585
 }
1589
 }
1586
 
1590
 
1587
-.w-1\/2 {
1588
-  width: 50%;
1589
-}
1590
-
1591
 .w-full {
1591
 .w-full {
1592
   width: 100%;
1592
   width: 100%;
1593
 }
1593
 }
1621
   background-color: hsl(var(--b1) / var(--tw-bg-opacity));
1621
   background-color: hsl(var(--b1) / var(--tw-bg-opacity));
1622
 }
1622
 }
1623
 
1623
 
1624
+.bg-black {
1625
+  --tw-bg-opacity: 1;
1626
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1627
+}
1628
+
1629
+.bg-fuchsia-400 {
1630
+  --tw-bg-opacity: 1;
1631
+  background-color: rgb(232 121 249 / var(--tw-bg-opacity));
1632
+}
1633
+
1624
 .bg-primary {
1634
 .bg-primary {
1625
   --tw-bg-opacity: 1;
1635
   --tw-bg-opacity: 1;
1626
   background-color: hsl(var(--p) / var(--tw-bg-opacity));
1636
   background-color: hsl(var(--p) / var(--tw-bg-opacity));
1631
   background-color: hsl(var(--s) / var(--tw-bg-opacity));
1641
   background-color: hsl(var(--s) / var(--tw-bg-opacity));
1632
 }
1642
 }
1633
 
1643
 
1634
-.bg-base-200 {
1644
+.bg-slate-500 {
1635
   --tw-bg-opacity: 1;
1645
   --tw-bg-opacity: 1;
1636
-  background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
1646
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
1637
 }
1647
 }
1638
 
1648
 
1639
-.bg-black {
1649
+.bg-red-600 {
1640
   --tw-bg-opacity: 1;
1650
   --tw-bg-opacity: 1;
1641
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1651
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
1652
+}
1653
+
1654
+.bg-slate-400 {
1655
+  --tw-bg-opacity: 1;
1656
+  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
1642
 }
1657
 }
1643
 
1658
 
1644
 .fill-current {
1659
 .fill-current {
1659
   padding: 0px;
1674
   padding: 0px;
1660
 }
1675
 }
1661
 
1676
 
1662
-.p-2 {
1663
-  padding: 0.5rem;
1664
-}
1665
-
1666
-.p-4 {
1667
-  padding: 1rem;
1677
+.p-1 {
1678
+  padding: 0.25rem;
1668
 }
1679
 }
1669
 
1680
 
1670
 .p-10 {
1681
 .p-10 {
1671
   padding: 2.5rem;
1682
   padding: 2.5rem;
1672
 }
1683
 }
1673
 
1684
 
1674
-.p-1 {
1675
-  padding: 0.25rem;
1685
+.p-2 {
1686
+  padding: 0.5rem;
1687
+}
1688
+
1689
+.p-4 {
1690
+  padding: 1rem;
1676
 }
1691
 }
1677
 
1692
 
1678
 .px-1 {
1693
 .px-1 {
1685
   padding-right: 0.75rem;
1700
   padding-right: 0.75rem;
1686
 }
1701
 }
1687
 
1702
 
1688
-.py-1 {
1689
-  padding-top: 0.25rem;
1690
-  padding-bottom: 0.25rem;
1691
-}
1692
-
1693
 .px-4 {
1703
 .px-4 {
1694
   padding-left: 1rem;
1704
   padding-left: 1rem;
1695
   padding-right: 1rem;
1705
   padding-right: 1rem;
1700
   padding-right: 1.25rem;
1710
   padding-right: 1.25rem;
1701
 }
1711
 }
1702
 
1712
 
1713
+.py-1 {
1714
+  padding-top: 0.25rem;
1715
+  padding-bottom: 0.25rem;
1716
+}
1717
+
1703
 .py-2 {
1718
 .py-2 {
1704
   padding-top: 0.5rem;
1719
   padding-top: 0.5rem;
1705
   padding-bottom: 0.5rem;
1720
   padding-bottom: 0.5rem;
1727
   font-weight: 700;
1742
   font-weight: 700;
1728
 }
1743
 }
1729
 
1744
 
1730
-.text-base-content {
1731
-  --tw-text-opacity: 1;
1732
-  color: hsl(var(--bc) / var(--tw-text-opacity));
1733
-}
1734
-
1735
 .text-gray-200 {
1745
 .text-gray-200 {
1736
   --tw-text-opacity: 1;
1746
   --tw-text-opacity: 1;
1737
   color: rgb(229 231 235 / var(--tw-text-opacity));
1747
   color: rgb(229 231 235 / var(--tw-text-opacity));
1757
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1767
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1758
 }
1768
 }
1759
 
1769
 
1770
+@media (min-width: 640px) {
1771
+  .sm\:block {
1772
+    display: block;
1773
+  }
1774
+}
1775
+
1760
 @media (min-width: 768px) {
1776
 @media (min-width: 768px) {
1761
   .md\:-m-2 {
1777
   .md\:-m-2 {
1762
     margin: -0.5rem;
1778
     margin: -0.5rem;
1763
   }
1779
   }
1764
 
1780
 
1781
+  .md\:inline-flex {
1782
+    display: inline-flex;
1783
+  }
1784
+
1765
   .md\:p-2 {
1785
   .md\:p-2 {
1766
     padding: 0.5rem;
1786
     padding: 0.5rem;
1767
   }
1787
   }
1776
     display: none;
1796
     display: none;
1777
   }
1797
   }
1778
 
1798
 
1799
+  .lg\:w-1\/2 {
1800
+    width: 50%;
1801
+  }
1802
+
1779
   .lg\:pt-4 {
1803
   .lg\:pt-4 {
1780
     padding-top: 1rem;
1804
     padding-top: 1rem;
1781
   }
1805
   }

+ 10 - 10
index.html

104
     <!-------- Image Post Start ----->
104
     <!-------- Image Post Start ----->
105
     <div class="bg-primary px-5 py-2 lg:pt-4">
105
     <div class="bg-primary px-5 py-2 lg:pt-4">
106
         <div class="-m-1 flex flex-wrap md:-m-2">
106
         <div class="-m-1 flex flex-wrap md:-m-2">
107
-            <div class="flex w-1/2 flex-wrap ">
107
+            <div class="flex lg:w-1/2 flex-wrap ">
108
                 <div class="w-full p-1 md:p-2 relative">
108
                 <div class="w-full p-1 md:p-2 relative">
109
                     <img alt="gallery" class="block h-full w-full object-cover object-center"
109
                     <img alt="gallery" class="block h-full w-full object-cover object-center"
110
                         src="img/front-slide-img-01-min.jpg" />
110
                         src="img/front-slide-img-01-min.jpg" />
115
                             KindaCode.com</p>
115
                             KindaCode.com</p>
116
                     </div>
116
                     </div>
117
                 </div>
117
                 </div>
118
-                <div class="w-full p-1 md:p-2">
118
+                <div class="w-full p-1 md:p-2 relative">
119
                     <img alt="gallery" class="block h-full w-full object-cover object-center"
119
                     <img alt="gallery" class="block h-full w-full object-cover object-center"
120
                         src="img/front-slide-img-02-min.jpg" />
120
                         src="img/front-slide-img-02-min.jpg" />
121
                 </div>
121
                 </div>
122
             </div>
122
             </div>
123
-            <div class="flex w-1/2 flex-wrap">
124
-                <div class="w-full p-1 md:p-2 relative">
123
+            <div class="flex lg:w-1/2 flex-wrap">
124
+                <div class="w-full p-1 md:p-2 ">
125
                     <img alt="gallery" class="block h-full w-full object-cover object-center"
125
                     <img alt="gallery" class="block h-full w-full object-cover object-center"
126
                         src="img/front-slide-img-03-min.jpg" />
126
                         src="img/front-slide-img-03-min.jpg" />
127
-                    <div class="absolute bottom-10 left-2 right-2 px-4 py-2 bg-secondary opacity-70">
128
-                        <h3 class="text-xl text-white font-bold">
129
-                            Hey, I Am The Big Boss</h3>
130
-                        <p class="mt-2 text-sm text-gray-300">Some description text. Some dummy text here. Welcome to
131
-                            KindaCode.com</p>
132
-                    </div>
127
+ 
133
                 </div>
128
                 </div>
134
             </div>
129
             </div>
135
         </div>
130
         </div>
136
     </div>
131
     </div>
137
     <!-------- Image Post End ----->
132
     <!-------- Image Post End ----->
133
+    <div class="flex">
134
+        <div class="w-full p-1 md:p-2 relative bg-slate-400">111</div>
135
+        <div class="w-full p-1 md:p-2 relative bg-red-600">222</div> 
136
+    </div>
137
+
138
     <!-------- End Start--------->
138
     <!-------- End Start--------->
139
 
139
 
140
     <!----- Footet Start ----->
140
     <!----- Footet Start ----->