Skip to content

Instantly share code, notes, and snippets.

@awesomephant

awesomephant/index.html

Created February 9, 2020 17:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save awesomephant/334d719b43762c307b4e5fb171bbec73 to your computer and use it in GitHub Desktop.
Save awesomephant/334d719b43762c307b4e5fb171bbec73 to your computer and use it in GitHub Desktop.
Download ZIP
Kat's site
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kat's cool websiteee</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class='name'>Kat Mcgrath</h1>
<h2 class='job'>Designer</h2>
<nav class='site-nav'>
<a href="#1">One</a>
<a href="#1">Two</a>
<a href="#1">Three</a>
</nav>
<main>
<div><img src="./img/home_engage.png" alt=""></div>
<div><img src="./img/home_engage.png" alt=""></div>
<div><img src="./img/home_engage.png" alt=""></div>
<div><img src="./img/home_engage.png" alt=""></div>
<div><img src="./img/home_engage.png" alt=""></div>
<div><img src="./img/home_engage.png" alt=""></div>
<div><img src="./img/home_engage.png" alt=""></div>
</main>
</body>
</html>
Raw
style.css
:root {
--gutter: 72px
}
* {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
}
body {
display: grid;
padding-top: calc(var(--gutter) / 2);
padding-left: var(--gutter);
padding-right: var(--gutter);
grid-template-columns: repeat(24, 1fr);
grid-auto-rows: min-content;
column-gap: 5px;
}
.name {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
}
.job {
grid-column-start: 6;
grid-column-end: 8;
grid-row-start: 1;
}
.site-nav {
display: contents;
grid-column-start: 6;
grid-column-end: 8;
}
.site-nav a:nth-child(1) {
grid-column-start: 10;
}
.site-nav a:nth-child(2) {
grid-column-start: 11;
}
.site-nav a:nth-child(3) {
grid-column-start: 12;
}
main {
display: contents;
}
main div {
grid-column-end: span 4;
padding-bottom: calc(var(--gutter) / 2);
}
main div:nth-child(2n) {
grid-column-end: span 8;
}
img {
display: block;
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment