Kay4luh.github.io/little_prince.html at main · shakaylasmith4/Kay4luh.github.io · 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Little Prince</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Times New Roman', serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            max-width: 650px;
            background: white;
            padding: 40px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #ddd;
        }

        .header {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .author {
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 0.5px;
            margin-bottom: 5px;
            text-decoration: underline;
        }

        .title {
            font-size: 24px;
            font-weight: bold;
            margin-top: 15px;
            margin-bottom: 25px;
        }

        .image-container {
            text-align: center;
            margin: 20px 0;
        }

        .image-container img {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
        }

        .content {
            font-size: 19px;
            text-align: justify;
            margin-bottom: 30px;
        }

        .content p {
            margin-bottom: 20px;
            text-indent: 20px;
        }

        .underline {
            text-decoration: underline;
        }

        .red-text {
            color: red;
            font-weight: bold;
        }

        .orange-highlight {
            background-color: #ffa500;
            padding: 2px 4px;
            color: black;
        }

        .back-link {
            text-align: center;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        .back-link a {
            color: #1a0dab;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
        }

        .back-link a:hover {
            text-decoration: underline;
        }

        @media (max-width: 600px) {
            .container {
                padding: 20px;
            }

            .content {
                font-size: 17px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="author">ANTOINE DE SAINT-EXUPÉRY</div>
            <div class="title">The Little Prince</div>
        </div>

        <div class="image-container">
            <img src="img/img5.png" alt="The Little Prince illustration">
        </div>

        <div class="content">
            <p>As the little prince dropped off to sleep, I took him in my arms and set out walking once more. <span class="underline">I felt deeply moved, and stirred. It seemed to me that I was carrying a very fragile treasure.</span> <span class="orange-highlight">It seemed to me, even, that there was nothing more fragile on all Earth.</span> In the moonlight I looked at his pale forehead, his closed eyes, his locks of hair that trembled in the wind, and I said to myself: <span class="red-text">"What I see here is nothing but a shell. What is most important is invisible..."</span></p>

            <p>As his lips opened slightly with the suspicion of a half-smile, I said to myself, again: <span class="red-text">"What moves me so deeply, about this little prince who is sleeping here, is his loyalty to a flower--the image of a rose that shines through his whole being like the flame of a lamp, even when he is asleep . . ."</span> And I felt him to be more fragile still. <span class="underline">I felt the need of protecting him, as if he himself were a flame that might be extinguished by a little puff of wind...</span></p>
        </div>

        <div class="back-link">
            <a href="index.html">Back to Home Page</a>
        </div>
    </div>
</body>
</html>