1 <!doctype html>2 <html>3 <head>4 <meta charset="utf-8">5 <meta name="viewport" content="width=device-width, initial-scale=1">6 <title>My World</title>7 <style>8 html, body {9 font-size: 120%;10 font-family: 'Arial', sans-serif;11 margin: 0;12 padding: 0;13 background-color: #f3f5f7;14 color: #333;15 display: flex;16 flex-direction: column;17 height: 100%;18 }19 20 .header {21 font-size: 2rem;22 text-align: center;23 padding: 10px 0;24 background-color: #166fcb;25 color: white;26 }27 28 .container {29 display: flex;30 flex: 1;31 margin: 10px;32 }33 34 .pics {35 width: 160px;36 overflow-y: auto;37 margin-right: 10px;38 }39 40 .pics-items {41 display: flex;42 flex-direction: column;43 gap: 10px;44 }45 46 .pics-items div {47 width: 140px;48 height: 140px;49 border-radius: 8px;50 background-position: center center;51 background-size: cover;52 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);53 background-color: white;54 }55 56 .pics-items div:hover {57 transform: scale(1.05);58 }59 60 .mainarea-container {61 flex: 1;62 display: flex;63 flex-direction: column;64 padding: 10px;65 background-color: white;66 border-radius: 8px;67 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);68 }69 70 textarea {71 width: 100%;72 height: 300px;73 font-size: 1rem;74 border: 1px solid #ccc;75 border-radius: 6px;76 padding: 10px;77 box-sizing: border-box;78 resize: none;79 }80 81 .button {82 padding: 10px 20px;83 border-radius: 6px;84 border: none;85 background-color: #166fcb;86 color: white;87 font-size: 1rem;88 cursor: pointer;89 transition: all 0.3s;90 text-transform: uppercase;91 margin: 5px 0;92 }93 94 .button:hover {95 background-color: #005bb5;96 transform: scale(1.05);97 }98 99 .days {100 width: 160px;101 overflow-y: auto;102 margin-left: 10px;103 }104 105 .days div {106 padding: 8px;107 cursor: pointer;108 border-radius: 4px;109 transition: background-color 0.3s, color 0.3s;110 margin-bottom: 5px;111 text-align: center;112 }113 114 .days div:hover {115 background-color: #e3f2fd;116 color: #166fcb;117 }118 119 .days div.selected {120 color: white;121 background-color: #166fcb;122 }123 124 @media (max-width: 768px) {125 .container {126 flex-direction: column;127 }128 129 .pics, .days {130 width: 100%;131 overflow-x: auto;132 display: flex;133 gap: 10px;134 }135 136 .pics-items div {137 flex: 0 0 auto;138 width: 100px;139 height: 100px;140 }141 142 textarea {143 height: 200px;144 font-size: 0.9rem;145 }146 147 .button {148 width: 100%;149 }150 }151 152 @media (max-width: 480px) {153 .header {154 font-size: 1.5rem;155 padding: 10px;156 }157 158 textarea {159 height: 150px;160 }161 }162 </style>163 </head>164 <body>165 <div class="header">My World</div>166 <div class="container">167 <div class="pics">168 <div class="pics-items">169 <div style="background-image: url('example1.jpg')"></div>170 <div style="background-image: url('example2.jpg')"></div>171 </div>172 </div>173 <div class="mainarea-container">174 <textarea placeholder="Write your story for today!"></textarea>175 <button class="button">Save</button>176 </div>177 <div class="days">178 <div>2025-01-19</div>179 <div>2025-01-18</div>180 </div>181 </div>182 </body>183 </html>184 Enlace
El enlace para compartir es: