Hugging Face's logo

Spaces:
Chunte
/
HFBA
Running

App Files Community
2
Chunte HF staff commited on
Commit
edbcb33
•
1 Parent(s): 9527c9c

Upload 1035 files

Browse files
Files changed (3) hide show
  1. css/style.css +63 -0
  2. index-backup.html +73 -0
  3. readme.md +31 -0
css/style.css CHANGED
@@ -545,6 +545,10 @@ Ensure the default browser behavior of the `hidden` attribute.
545
  margin-top: 0.5rem;
546
  }
547
 
 
 
 
 
548
  .flex {
549
  display: flex;
550
  }
@@ -557,6 +561,10 @@ Ensure the default browser behavior of the `hidden` attribute.
557
  display: none;
558
  }
559
 
 
 
 
 
560
  .h-full {
561
  height: 100%;
562
  }
@@ -577,6 +585,10 @@ Ensure the default browser behavior of the `hidden` attribute.
577
  width: 50%;
578
  }
579
 
 
 
 
 
580
  .w-4 {
581
  width: 1rem;
582
  }
@@ -599,6 +611,10 @@ Ensure the default browser behavior of the `hidden` attribute.
599
  grid-template-columns: repeat(2, minmax(0, 1fr));
600
  }
601
 
 
 
 
 
602
  .flex-col {
603
  flex-direction: column;
604
  }
@@ -611,6 +627,10 @@ Ensure the default browser behavior of the `hidden` attribute.
611
  align-items: center;
612
  }
613
 
 
 
 
 
614
  .gap-1 {
615
  gap: 0.25rem;
616
  }
@@ -735,6 +755,10 @@ Ensure the default browser behavior of the `hidden` attribute.
735
  padding-top: 0.75rem;
736
  }
737
 
 
 
 
 
738
  .font-mono {
739
  font-family: IBM Plex Mono, monospace;
740
  }
@@ -829,7 +853,46 @@ Ensure the default browser behavior of the `hidden` attribute.
829
  margin-right: calc(1rem * var(--tw-space-x-reverse));
830
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
831
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
832
 
 
 
 
 
 
 
833
  .md\:inline-block {
834
  display: inline-block;
835
  }
 
545
  margin-top: 0.5rem;
546
  }
547
 
548
+ .inline {
549
+ display: inline;
550
+ }
551
+
552
  .flex {
553
  display: flex;
554
  }
 
561
  display: none;
562
  }
563
 
564
+ .h-6 {
565
+ height: 1.5rem;
566
+ }
567
+
568
  .h-full {
569
  height: 100%;
570
  }
 
585
  width: 50%;
586
  }
587
 
588
+ .w-6 {
589
+ width: 1.5rem;
590
+ }
591
+
592
  .w-4 {
593
  width: 1rem;
594
  }
 
611
  grid-template-columns: repeat(2, minmax(0, 1fr));
612
  }
613
 
614
+ .flex-row {
615
+ flex-direction: row;
616
+ }
617
+
618
  .flex-col {
619
  flex-direction: column;
620
  }
 
627
  align-items: center;
628
  }
629
 
630
+ .justify-between {
631
+ justify-content: space-between;
632
+ }
633
+
634
  .gap-1 {
635
  gap: 0.25rem;
636
  }
 
755
  padding-top: 0.75rem;
756
  }
757
 
758
+ .pb-1 {
759
+ padding-bottom: 0.25rem;
760
+ }
761
+
762
  .font-mono {
763
  font-family: IBM Plex Mono, monospace;
764
  }
 
853
  margin-right: calc(1rem * var(--tw-space-x-reverse));
854
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
855
  }
856
+ }
857
+
858
+ .hover\:scale-90:hover {
859
+ --tw-scale-x: .9;
860
+ --tw-scale-y: .9;
861
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
862
+ }
863
+
864
+ .hover\:scale-95:hover {
865
+ --tw-scale-x: .95;
866
+ --tw-scale-y: .95;
867
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
868
+ }
869
+
870
+ .hover\:text-gray-800:hover {
871
+ --tw-text-opacity: 1;
872
+ color: rgb(31 41 55 / var(--tw-text-opacity));
873
+ }
874
+
875
+ .hover\:text-gray-300:hover {
876
+ --tw-text-opacity: 1;
877
+ color: rgb(209 213 219 / var(--tw-text-opacity));
878
+ }
879
+
880
+ .hover\:text-gray-500:hover {
881
+ --tw-text-opacity: 1;
882
+ color: rgb(107 114 128 / var(--tw-text-opacity));
883
+ }
884
+
885
+ .hover\:text-gray-400:hover {
886
+ --tw-text-opacity: 1;
887
+ color: rgb(156 163 175 / var(--tw-text-opacity));
888
+ }
889
 
890
+ .hover\:text-gray-900:hover {
891
+ --tw-text-opacity: 1;
892
+ color: rgb(17 24 39 / var(--tw-text-opacity));
893
+ }
894
+
895
+ @media (min-width: 768px) {
896
  .md\:inline-block {
897
  display: inline-block;
898
  }
index-backup.html ADDED
@@ -0,0 +1,73 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <link rel="stylesheet" href="css/style.css" />
8
+ <title>Simple Tailwind Starter</title>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
12
+ </head>
13
+ <body class="bg-BluishWhite">
14
+ <!--Body Container-->
15
+ <div class="container px-5 py-10 rounded-xl mx-auto mb-4">
16
+ <!--HF Logos Section-->
17
+ <section id="HFlogos" class="mb-10">
18
+ <!--Section Title-->
19
+ <div class="font-mono max-w-fit text-3xl bg-blue-500 text-white mb-5 py-3 px-6 rounded-full">HF logos</div>
20
+ <!--Section Assets Container-->
21
+ <div class="container my-10 flex flex-wrap flex-shrink-0">
22
+
23
+ <!--duo container 1-->
24
+ <div class=" flex w-full pb-5 md:w-2/5 md:pr-5 space-x-5">
25
+ <!--Group Component 1-->
26
+ <div class="w-1/2">
27
+
28
+ <div class="rounded-3xl bg-white shadow-DropShadow">
29
+ <img src="images/Brand Logos/Hugging Face.png" alt="" class="p-7">
30
+ </div>
31
+ <!--Info box-->
32
+ <div class="pl-3 pt-3">
33
+ <h5 class="text-lg font-sans text-BluishDark">Hugging Face Logo</h5>
34
+ <!--Download Buttons-->
35
+ </div>
36
+ </div>
37
+
38
+ <!--Group Component 2-->
39
+ <div class="w-1/2">
40
+ <!--Image container 2-->
41
+ <div class="rounded-3xl bg-white shadow-DropShadow">
42
+ <img src="images/Brand Logos/Rainbow Hugging Face.png" alt="" class="p-7">
43
+ </div>
44
+ <!--Info box-->
45
+ <div class="pl-3 pt-3">
46
+ <h5 class="text-lg font-sans text-BluishDark">Rainbow Hugging Face</h5>
47
+ <!--Download Buttons-->
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <!--duo container 2-->
53
+ <div class="flex w-full pb-5 md:w-2/5 md:pr-5 space-x-5">
54
+ <!--Group Component 1-->
55
+ <div class="w-full">
56
+ <div class="w-full rounded-3xl bg-white shadow-DropShadow">
57
+ <img src="images/modern Huggies/Lora Huggy.png" alt="" class="p-7">
58
+ </div>
59
+ <!--Info box-->
60
+ <div class="pl-3 pt-3">
61
+ <h5 class="text-lg font-sans text-BluishDark">Hugging Face Logo</h5>
62
+ <!--Download Buttons-->
63
+ </div>
64
+ </div>
65
+
66
+
67
+ </div>
68
+
69
+ </div>
70
+ </div>
71
+ </section>
72
+ </body>
73
+ </html>
readme.md ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Simple Tailwind CSS Starter
2
+
3
+ This is an extremley simple setup to develop Tailwind projects. This will be used in my Tailwind From Scratch course.
4
+
5
+ ## Usage
6
+
7
+ Install dependencies
8
+
9
+ ```
10
+ npm install
11
+ ```
12
+
13
+ Run Tailwind CLI in watch mode
14
+
15
+ ```
16
+ npm run dev
17
+ ```
18
+
19
+ You can use tailwind classes in any .html files in the root directory
20
+
21
+ Put any custom CSS that you may have in the **src/input.css** file
22
+
23
+ Add any config values to the **tailwind.config.js** file
24
+
25
+ To build once, run
26
+
27
+ ```
28
+ npm run build
29
+ ```
30
+
31
+ You only need to deploy your html files and css/style.css