mirror of
https://github.com/leigest519/ScreenCoder.git
synced 2026-02-14 02:32:47 +00:00
314 lines
14 KiB
HTML
314 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<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/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
|
|
<div class="flex flex-row items-center justify-between">
|
|
<!-- 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="24" x="0" y="20">
|
|
Linked
|
|
</text>
|
|
<rect fill="blue" height="20" width="20" x="78" y="2">
|
|
</rect>
|
|
<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
|
|
in
|
|
</text>
|
|
</svg>
|
|
<div class="flex flex-row items-center">
|
|
<!-- Top Content -->
|
|
<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
|
|
<svg class="h-8 w-8" 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-sm">
|
|
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-8 w-8" 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-sm">
|
|
People
|
|
</span>
|
|
</div>
|
|
<!-- Learning -->
|
|
<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
|
|
<svg class="h-8 w-8" 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-sm" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Learning
|
|
</span>
|
|
</div>
|
|
<!-- Jobs -->
|
|
<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" 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" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</path>
|
|
</svg>
|
|
<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Jobs
|
|
</span>
|
|
</div>
|
|
<!-- Games -->
|
|
<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
|
|
<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</path>
|
|
</svg>
|
|
<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Games
|
|
</span>
|
|
</div>
|
|
<!-- Divider -->
|
|
<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</div>
|
|
<!-- Join now -->
|
|
<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
|
|
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" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Sign in
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
|
|
<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</div>
|
|
<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</div>
|
|
</div>
|
|
<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Andrej Karpathy
|
|
</h1>
|
|
<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
|
|
...
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<span style="opacity:0;transition:opacity .35s ease-out;">
|
|
San Francisco, California, United States
|
|
</span>
|
|
<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
|
|
·
|
|
</span>
|
|
<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Contact Info
|
|
</a>
|
|
</div>
|
|
<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<span style="opacity:0;transition:opacity .35s ease-out;">
|
|
80K followers
|
|
</span>
|
|
<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
|
|
·
|
|
</span>
|
|
<span style="opacity:0;transition:opacity .35s ease-out;">
|
|
280 connections
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</div>
|
|
<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</div>
|
|
<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</div>
|
|
</div>
|
|
<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
|
|
See your mutual connections
|
|
</a>
|
|
</div>
|
|
<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Join to view profile
|
|
</button>
|
|
<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Message
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</div>
|
|
<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Tesla
|
|
</a>
|
|
</div>
|
|
<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</div>
|
|
<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Stanford University
|
|
</a>
|
|
</div>
|
|
<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
|
|
🔗 Personal Website
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
|
|
About
|
|
</h2>
|
|
<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<span style="opacity:0;transition:opacity .35s ease-out;">
|
|
https://karpathy.ai/
|
|
</span>
|
|
<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
|
|
see more
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
|
|
<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Other similar profiles
|
|
</h2>
|
|
<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
|
|
<div style="opacity:0;transition:opacity .35s ease-out;">
|
|
<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Manohar Paluri
|
|
</h3>
|
|
<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Menlo Park, CA
|
|
</p>
|
|
<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" 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" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</path>
|
|
</svg>
|
|
Connect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
|
|
<div style="opacity:0;transition:opacity .35s ease-out;">
|
|
<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Renjun Xu, PhD
|
|
</h3>
|
|
<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
|
|
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" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" 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" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</path>
|
|
</svg>
|
|
Connect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
|
|
<div style="opacity:0;transition:opacity .35s ease-out;">
|
|
<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Christopher Kanan
|
|
</h3>
|
|
<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
|
|
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" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" 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" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</path>
|
|
</svg>
|
|
Connect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
|
|
<div style="opacity:0;transition:opacity .35s ease-out;">
|
|
<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Micael Carvalho
|
|
</h3>
|
|
<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Menlo Park, CA
|
|
</p>
|
|
<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" 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" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</path>
|
|
</svg>
|
|
Connect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
|
|
<div style="opacity:0;transition:opacity .35s ease-out;">
|
|
<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
|
|
Joel Tetreault
|
|
</h3>
|
|
<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
|
|
New York, NY
|
|
</p>
|
|
<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" 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" style="opacity:0;transition:opacity .35s ease-out;">
|
|
</path>
|
|
</svg>
|
|
Connect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|