My-Zootopia/animals.html at main · mk-ws-git/My-Zootopia · GitHub

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
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Animal Repository</title>
        <style>
        /* --- Browser-safe color variables --- */
        :root {
          --gray-darker: #444444;
          --gray-dark: #696969;
          --gray: #999999;
          --gray-light: #cccccc;
          --gray-lighter: #ececec;
          --gray-lightest: #f3f3f3;
        }

        /* --- Original color variables (kept, browser ignores) --- */
        @gray-darker:               #444444;
        @gray-dark:                 #696969;
        @gray:                      #999999;
        @gray-light:                #cccccc;
        @gray-lighter:              #ececec;
        @gray-lightest:             lighten(@gray-lighter,4%);


        html {
          background-color: #ffe9e9;
        }

        h1 {
            text-align: center;
            font-size: 40pt;
            font-weight: normal;
        }

        body {
          font-family: 'Roboto','Helvetica Neue', Helvetica, Arial, sans-serif;
          font-style: normal;
          font-weight: 400;
          letter-spacing: 0;
          padding: 1rem;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          -moz-font-feature-settings: "liga" on;
          width: 900px;
          margin: auto;
        }

        .cards {
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .cards__item {
          background-color: white;
          border-radius: 0.25rem;
          box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
          overflow: hidden;
          padding: 1rem;
          margin: 50px;
        }

        .card__title {
          color: var(--gray-dark); /* fixed: was @gray-dark */
          font-size: 1.25rem;
          font-weight: 300;
          letter-spacing: 2px;
          text-transform: uppercase;
        }

        .card__text {
          flex: 1 1 auto;
          font-size: 0.95rem;
          line-height: 2;
          margin-bottom: 1.25rem;
        }

        /* --- Added: subtitle + divider --- */
        .card__subtitle {
          font-size: 0.85rem;
          color: #666;
          margin-bottom: 12px;
          padding-bottom: 8px;
          border-bottom: 1px solid #e6e6ef;
        }

        /* --- Added: internal list styling --- */
        .card__list {
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .card__list-item {
          padding: 6px 0;
          border-bottom: 1px solid #f0f0f6;
          line-height: 1.35;
        }

        .card__list-item:last-child {
          border-bottom: none;
        }

        .card__list-item strong {
          display: inline-block;
          min-width: 120px;
        }
        </style>
    </head>
    <body>
        <h1>My Animal Repository</h1>

        <ul class="cards">
            <h2 class="not-found">The animal "hjfjdjgd" doesn't exist.</h2>

        </ul>

    </body>
</html>