Finish
This commit is contained in:
parent
eda7fcd3f6
commit
10bbc9cc4a
3 changed files with 113 additions and 13 deletions
84
index.html
84
index.html
|
@ -11,19 +11,83 @@
|
||||||
sizes="32x32"
|
sizes="32x32"
|
||||||
href="/images/favicon-32x32.png"
|
href="/images/favicon-32x32.png"
|
||||||
/>
|
/>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
|
||||||
|
<style>
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
@font-face {
|
||||||
|
font-weight: 100 900;
|
||||||
|
src: url("/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
|
||||||
|
font-family: "Inter";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>Jessica Randall</p>
|
<div class="flex min-h-screen items-center justify-center bg-black p-6">
|
||||||
<p>London, United Kingdom</p>
|
<main
|
||||||
<p>"Front-end developer and avid reader."</p>
|
class="flex w-full max-w-sm flex-col items-center gap-6 rounded-xl bg-dark-grey p-6 text-white sm:p-10"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="rounded-full"
|
||||||
|
width="88"
|
||||||
|
height="88"
|
||||||
|
src="/images/avatar-jessica.jpeg"
|
||||||
|
alt="Jessica's picture"
|
||||||
|
/>
|
||||||
|
|
||||||
<ul>
|
<div class="flex flex-col items-center gap-1">
|
||||||
<li>GitHub</li>
|
<p class="text-heading">Jessica Randall</p>
|
||||||
<li>Frontend Mentor</li>
|
<p class="text-body-bold text-neon-green">London, United Kingdom</p>
|
||||||
<li>LinkedIn</li>
|
</div>
|
||||||
<li>Twitter</li>
|
|
||||||
<li>Instagram</li>
|
<p class="text-body-regular">"Front-end developer and avid reader."</p>
|
||||||
|
|
||||||
|
<ul class="w-full space-y-4">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
class="block cursor-pointer rounded-lg bg-grey py-3 text-center text-body-bold hover:bg-neon-green hover:text-grey"
|
||||||
|
>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
class="block cursor-pointer rounded-lg bg-grey py-3 text-center text-body-bold hover:bg-neon-green hover:text-grey"
|
||||||
|
>
|
||||||
|
Frontend Mentor
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
class="block cursor-pointer rounded-lg bg-grey py-3 text-center text-body-bold hover:bg-neon-green hover:text-grey"
|
||||||
|
>
|
||||||
|
LinkedIn
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
class="block cursor-pointer rounded-lg bg-grey py-3 text-center text-body-bold hover:bg-neon-green hover:text-grey"
|
||||||
|
>
|
||||||
|
Twitter
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
class="block cursor-pointer rounded-lg bg-grey py-3 text-center text-body-bold hover:bg-neon-green hover:text-grey"
|
||||||
|
>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -12,6 +12,11 @@
|
||||||
"tailwindcss": "^3.4.4",
|
"tailwindcss": "^3.4.4",
|
||||||
"vite": "^5.3.2"
|
"vite": "^5.3.2"
|
||||||
},
|
},
|
||||||
|
"prettier": {
|
||||||
|
"plugins": [
|
||||||
|
"prettier-plugin-tailwindcss"
|
||||||
|
]
|
||||||
|
},
|
||||||
"postcss": {
|
"postcss": {
|
||||||
"plugins": {
|
"plugins": {
|
||||||
"tailwindcss": {},
|
"tailwindcss": {},
|
||||||
|
|
|
@ -1,7 +1,38 @@
|
||||||
export default {
|
export default {
|
||||||
content: ["index.html"],
|
content: ["index.html"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
colors: {
|
||||||
|
"dark-grey": "#1F1F1F",
|
||||||
|
"neon-green": "#C4F82A",
|
||||||
|
black: "#141414",
|
||||||
|
grey: "#333333",
|
||||||
|
white: "#FFFFFF",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["Inter", "sans-serif"],
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
heading: [
|
||||||
|
"1.5rem",
|
||||||
|
{
|
||||||
|
lineHeight: "150%",
|
||||||
|
fontWeight: "600",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"body-regular": [
|
||||||
|
"0.875rem",
|
||||||
|
{
|
||||||
|
lineHeight: "150%",
|
||||||
|
fontWeight: "400",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"body-bold": [
|
||||||
|
"0.875rem",
|
||||||
|
{
|
||||||
|
lineHeight: "150%",
|
||||||
|
fontWeight: "700",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
|
||||||
};
|
};
|
||||||
|
|
Reference in a new issue