Callum Parkinson Website Prototype

callum-parkinson-website-prototype.markdown

Callum Parkinson Website Prototype

A Pen by Alan Wynn on CodePen.

License.

index.html

<div id="main" class="w-screen h-screen bg-gray-900 text-gray-100 flex justify-center content-center">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-auto">
        <div id="content" class="max-w-3xl mx-auto text-center p-3 rounded-md text-gray-900 shadow-inner shadow-2xl">
            <img class="inline-block h-14 w-14 rounded-full border-solid border-4 border-white mt-3 w-40 mb-4" src="https://p198.p4.n0.cdn.getcloudapp.com/items/Qwulbeny/Image%202020-06-19%20at%203.40.04%20pm.png?v=03216f396b6e5c7f4e5216bb48872d42" alt="Callum Parkinson" />
            <br>
            <h1 class="text-4xl leading-none mb-3">
                Callum Parkinson
            </h1>

            <div class="contacts mb-3">
                <span class="mr-1">
                    <a href="https://github.com/callumpy" target="_blank" class="text-normal">
                        <i class="fab fa-github"></i>
                        Github
                    </a>
                </span>

                <span class="mr-1">
                    <a href="https://twitter.com/callumpy" target="_blank" class="text-normal">
                        <i class="fab fa-twitter"></i>
                        Twitter
                    </a>
                </span>

                <span class="mr-1">
                    <a href="mailto:callumpy@example.com" target="_blank" class="text-normal">
                        <i class="fas fa-at"></i>
                        Email
                    </a>
                </span>

                <!-- <span class="mr-1">
                    <i class="fas fa-phone"></i>
                    Phone
                </span> -->
            </div>
        </div>
    </div>
</div>

style.scss

#main {
    font-family: "Inter", sans-serif;
    background-image: url("https://images.unsplash.com/photo-1592327288353-d9fd75aeff3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
    background-size: cover;

    #content {
        background-color: hsla(0, 0%, 100%, 0.25);
        backdrop-filter: blur(6px);

        .contacts span {
            &:after {
                content: "|";
                margin: auto 1em;
            }

            &:last-child:after {
                content: "";
                margin: 0;
            }

            i.fab,
            i.fas {
                margin-right: 5px;
            }
        }
    }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.13.1/inter.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />