mirror of
https://github.com/leigest519/ScreenCoder.git
synced 2026-02-13 18:22:50 +00:00
311 lines
11 KiB
HTML
311 lines
11 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: 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>
|