Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title> | |
| Bounding Boxes Layout | |
| </title> | |
| <style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| box-sizing: border-box; | |
| } | |
| .box { | |
| position: absolute; | |
| box-sizing: border-box; | |
| overflow: hidden; | |
| } | |
| .box > .container { | |
| display: grid; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="box" id="1" style="left: 1.2594458438287155%; top: 0.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;"> | |
| <div class="flex flex-row items-center"> | |
| <!-- LinkedIn Logo --> | |
| <svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24"> | |
| <text fill="blue" font-family="sans-serif" font-size="20" x="0" y="20"> | |
| Linked | |
| </text> | |
| <rect fill="blue" height="16" width="20" x="54" y="4"> | |
| </rect> | |
| <text fill="white" font-family="sans-serif" font-size="16" x="58" y="18"> | |
| in | |
| </text> | |
| </svg> | |
| <!-- Top Content --> | |
| <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600"> | |
| <svg class="h-6 w-6" viewbox="0 0 24 24"> | |
| <path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor"> | |
| </path> | |
| </svg> | |
| <span class="text-xs"> | |
| Top Content | |
| </span> | |
| </div> | |
| <!-- People (with underline) --> | |
| <div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black"> | |
| <svg class="h-6 w-6" viewbox="0 0 24 24"> | |
| <path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor"> | |
| </path> | |
| </svg> | |
| <span class="text-xs"> | |
| People | |
| </span> | |
| </div> | |
| <!-- Learning --> | |
| <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600"> | |
| <svg class="h-6 w-6" viewbox="0 0 24 24"> | |
| <path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor"> | |
| </path> | |
| </svg> | |
| <span class="text-xs"> | |
| Learning | |
| </span> | |
| </div> | |
| <!-- Jobs --> | |
| <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600"> | |
| <svg class="h-6 w-6" viewbox="0 0 24 24"> | |
| <path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor"> | |
| </path> | |
| </svg> | |
| <span class="text-xs"> | |
| Jobs | |
| </span> | |
| </div> | |
| <!-- Games --> | |
| <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600"> | |
| <svg class="h-6 w-6" viewbox="0 0 24 24"> | |
| <path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V6z" fill="currentColor"> | |
| </path> | |
| </svg> | |
| <span class="text-xs"> | |
| Games | |
| </span> | |
| </div> | |
| <!-- Divider --> | |
| <div class="border-l border-gray-300 h-6 mx-4"> | |
| </div> | |
| <!-- Join now --> | |
| <div class="text-black text-sm font-medium cursor-pointer mr-4"> | |
| Join now | |
| </div> | |
| <!-- Sign in button --> | |
| <button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer"> | |
| Sign in | |
| </button> | |
| </div> | |
| </div> | |
| <div class="box" id="2" style="left: 1.2594458438287155%; top: 12.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;"> | |
| <div class="bg-white shadow rounded"> | |
| <div class="w-full h-40 bg-gray-300"> | |
| </div> | |
| <div class="relative ml-6 -mt-16"> | |
| <div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h1 class="text-2xl font-bold"> | |
| Andrej Karpathy | |
| </h1> | |
| <div class="text-gray-500"> | |
| ... | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2 text-gray-700 mb-2"> | |
| <span> | |
| San Francisco, California, United States | |
| </span> | |
| <span class="text-gray-500"> | |
| · | |
| </span> | |
| <a class="text-blue-600" href="#"> | |
| Contact Info | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-2 text-gray-600 mb-4"> | |
| <span> | |
| 80K followers | |
| </span> | |
| <span class="text-gray-500"> | |
| · | |
| </span> | |
| <span> | |
| 280 connections | |
| </span> | |
| </div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="flex space-x-2"> | |
| <div class="w-8 h-8 bg-gray-400 rounded-full"> | |
| </div> | |
| <div class="w-8 h-8 bg-gray-400 rounded-full"> | |
| </div> | |
| <div class="w-8 h-8 bg-gray-400 rounded-full"> | |
| </div> | |
| </div> | |
| <a class="text-blue-600" href="#"> | |
| See your mutual connections | |
| </a> | |
| </div> | |
| <div class="flex space-x-4 mb-6"> | |
| <button class="bg-blue-600 text-white px-5 py-2 rounded-md"> | |
| Join to view profile | |
| </button> | |
| <button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md"> | |
| Message | |
| </button> | |
| </div> | |
| <div class="flex flex-col space-y-2"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-6 h-6 bg-gray-400"> | |
| </div> | |
| <a class="text-blue-600" href="#"> | |
| Tesla | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-6 h-6 bg-gray-400"> | |
| </div> | |
| <a class="text-blue-600" href="#"> | |
| Stanford University | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-5 h-5 bg-gray-400"> | |
| </div> | |
| <a class="text-blue-600" href="#"> | |
| Personal Website | |
| </a> | |
| <div class="w-4 h-4 bg-gray-400"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h2 class="text-xl font-bold mb-2"> | |
| About | |
| </h2> | |
| <div class="flex items-center space-x-2"> | |
| <span> | |
| https://karpathy.ai/ | |
| </span> | |
| <a class="text-blue-600" href="#"> | |
| see more | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="box" id="3" style="left: 68.68178001679262%; top: 12.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;"> | |
| <h2 class="text-2xl font-bold mb-4"> | |
| Other similar profiles | |
| </h2> | |
| <div class="flex items-center mb-4"> | |
| <img alt="Manohar Paluri" class="w-12 h-12 rounded-full mr-4" src="manohar.jpg"/> | |
| <div> | |
| <h3 class="text-lg font-semibold"> | |
| Manohar Paluri | |
| </h3> | |
| <p class="text-gray-600"> | |
| Menlo Park, CA | |
| </p> | |
| <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700"> | |
| <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> | |
| </path> | |
| </svg> | |
| Connect | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <img alt="Renjun Xu, PhD" class="w-12 h-12 rounded-full mr-4" src="renjun.jpg"/> | |
| <div> | |
| <h3 class="text-lg font-semibold"> | |
| Renjun Xu, PhD | |
| </h3> | |
| <p class="text-gray-600"> | |
| San Francisco Bay Area | |
| </p> | |
| <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700"> | |
| <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> | |
| </path> | |
| </svg> | |
| Connect | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <img alt="Christopher Kanan" class="w-12 h-12 rounded-full mr-4" src="christopher.jpg"/> | |
| <div> | |
| <h3 class="text-lg font-semibold"> | |
| Christopher Kanan | |
| </h3> | |
| <p class="text-gray-600"> | |
| Rochester, New York Metropolitan Area | |
| </p> | |
| <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700"> | |
| <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> | |
| </path> | |
| </svg> | |
| Connect | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <img alt="Micael Carvalho" class="w-12 h-12 rounded-full mr-4" src="micael.jpg"/> | |
| <div> | |
| <h3 class="text-lg font-semibold"> | |
| Micael Carvalho | |
| </h3> | |
| <p class="text-gray-600"> | |
| Menlo Park, CA | |
| </p> | |
| <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700"> | |
| <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> | |
| </path> | |
| </svg> | |
| Connect | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <img alt="Joel Tetreault" class="w-12 h-12 rounded-full mr-4" src="joel.jpg"/> | |
| <div> | |
| <h3 class="text-lg font-semibold"> | |
| Joel Tetreault | |
| </h3> | |
| <p class="text-gray-600"> | |
| New York, NY | |
| </p> | |
| <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700"> | |
| <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> | |
| </path> | |
| </svg> | |
| Connect | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |