Hugging Face's logo

Spaces:
Hoof2
/
product-preview
Running

App Files Community
product-preview
File size: 2,530 Bytes 
3b46782
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79d8dab
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
/* Layout */
/* * The designs were created to the following widths:
  * - Mobile: 375px
  * - Desktop: 1440px
  * * Ensure content is responsive and meets WCAG requirements
  * by testing the full range of screen sizes from 320px to large screens.
  */

/* Colors */

/* Primary */
:root {
  --green-500: hsl(158, 36%, 37%);
  --green-700: hsl(158, 42%, 18%);

  /* Neutral */
  --black: hsl(212, 21%, 14%);
  --grey: hsl(228, 12%, 48%);
  --cream: hsl(30, 38%, 92%);
  --white: hsl(0, 0%, 100%);

  /* Typography */
  --font-size-paragraph: 14px;

  /* Font */
  --font-montserrat: 'Montserrat', sans-serif; /* Make sure you've imported this font */
  --font-fraunces: 'Fraunces', serif;       /* Make sure you've imported this font */
}

/* Example usage */
body {
  font-size: var(--font-size-paragraph);
/*  color: var(--black);*/
}

h1 {
  font-family: var(--font-fraunces);
  font-weight: 700;
}

p {
  font-family: var(--font-montserrat);
  font-weight: 500;
  margin: 0;
}

.primary-button {
  background-color: var(--green-500);
  color: var(--white);
  /* other styles */
}

.primary-button:hover {
  background-color: var(--green-700);
}

/* Add more CSS rules as needed based on your design */

 body {
     background: var(--cream);
       display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .container {
      /* background-color: white; */
     /*  border-radius: 20px; */
      overflow: hidden;
      /* background-color: var(--white); */
      max-width: 700px;
      width: 90%;
      display: flex;
      flex-direction: column;
      border-radius: 20px;
    }

.image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img{
  border-radius: 20px 20px 0 0;
}
.product-info{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  background-color: var(--white);
  border-radius: 0 0 20px 20px;
  padding: 30px;
}

.product-info h1{
  font-size: 24px;
  margin-bottom: 10px;
}
.product-info p{
  font-size: 16px;
  margin-bottom: 20px;
} 
.brand{
  font-size: 14px;
  color: var(--grey);
}


@media (min-width: 768px) {
  .container {
    flex-direction: row;
    align-items: stretch;
    /* border-radius: 15px 15 15 0; */
  }
  .image, .product-info{
    width: 50%;


  }
  .product-info{
    border-radius: 0 20px 20px 0;
  }
 
 
  img {
    border-radius: 20px 0 0 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  
  }
  button {
    width: 100%;
    border-radius: 20px;
  }
}