create custom php template for book club landing
This commit is contained in:
79
assets/css/static.css
Normal file
79
assets/css/static.css
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
:root {
|
||||||
|
--background: #040810;
|
||||||
|
--foreground-text: #FAF7EF;
|
||||||
|
--bg-accent: #8E9AEC; /* add 99 at the end for constellation, and 0/50% opacity for radial gradient */
|
||||||
|
--font-family-serif: "EB Garamond", serif;
|
||||||
|
--font-family-mono: "Jura", sans-serif;
|
||||||
|
--font-family-sans: "Sora", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
font-family: var(--font-family-sans);
|
||||||
|
color: var(--foreground-text);
|
||||||
|
margin: 0;
|
||||||
|
background: radial-gradient(50% 50% at 50% 50%, rgba(142, 154, 236, 0.4) 0%, rgba(142, 154, 236, 0) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--foreground-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 0.85em;
|
||||||
|
padding: 0.75em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-navigation {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 50px;
|
||||||
|
font-family: var(--font-family-mono);
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.site-navigation a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.site-navigation a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.site-navigation .header-logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 63px;
|
||||||
|
}
|
||||||
|
.site-navigation .logo-spacer {
|
||||||
|
width: 155px;
|
||||||
|
}
|
||||||
|
.site-navigation ul.pages-list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
list-style-type: none;
|
||||||
|
gap: 2em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.site-navigation .action-buttons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .div {
|
||||||
|
text-align: center;
|
||||||
|
padding-block: 20rem;
|
||||||
|
background: radial-gradient(circle at 85% 50%, rgba(142, 154, 236, 0.40) 0%, rgba(142, 154, 236, 0.00) 50%);
|
||||||
|
} */
|
||||||
|
.div h2 {
|
||||||
|
font-size: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=static.css.map */
|
||||||
1
assets/css/static.css.map
Normal file
1
assets/css/static.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EAEA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAMA;EACE","file":"static.css"}
|
||||||
6
assets/images/profile-button.svg
Normal file
6
assets/images/profile-button.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="solar:user-bold">
|
||||||
|
<path id="Vector" d="M9.99935 8.33332C11.8403 8.33332 13.3327 6.84094 13.3327 4.99999C13.3327 3.15904 11.8403 1.66666 9.99935 1.66666C8.1584 1.66666 6.66602 3.15904 6.66602 4.99999C6.66602 6.84094 8.1584 8.33332 9.99935 8.33332Z" fill="#FAF7EF"/>
|
||||||
|
<path id="Vector_2" d="M16.6673 13.75C16.6673 15.8208 16.6673 17.5 10.0007 17.5C3.33398 17.5 3.33398 15.8208 3.33398 13.75C3.33398 11.6792 6.31898 10 10.0007 10C13.6823 10 16.6673 11.6792 16.6673 13.75Z" fill="#FAF7EF"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 601 B |
84
assets/scss/static.scss
Normal file
84
assets/scss/static.scss
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
:root {
|
||||||
|
--background: #040810;
|
||||||
|
--foreground-text: #FAF7EF;
|
||||||
|
--bg-accent: #8E9AEC; /* add 99 at the end for constellation, and 0/50% opacity for radial gradient */
|
||||||
|
|
||||||
|
--font-family-serif: 'EB Garamond', serif;
|
||||||
|
--font-family-mono: 'Jura', sans-serif;
|
||||||
|
--font-family-sans: 'Sora', sans-serif;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
font-family: var(--font-family-sans);
|
||||||
|
color: var(--foreground-text);
|
||||||
|
margin: 0;
|
||||||
|
// border-radius: 2566px;
|
||||||
|
background: radial-gradient(50% 50% at 50% 50%, rgba(142, 154, 236, 0.40) 0%, rgba(142, 154, 236, 0.00) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--foreground-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 0.85em;
|
||||||
|
padding: .75em .5em
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-navigation {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 50px;
|
||||||
|
font-family: var(--font-family-mono);
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 63px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-spacer {
|
||||||
|
width: 155px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.pages-list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
list-style-type: none;
|
||||||
|
gap: 2em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .div {
|
||||||
|
text-align: center;
|
||||||
|
padding-block: 20rem;
|
||||||
|
background: radial-gradient(circle at 85% 50%, rgba(142, 154, 236, 0.40) 0%, rgba(142, 154, 236, 0.00) 50%);
|
||||||
|
} */
|
||||||
|
|
||||||
|
.div h2 {
|
||||||
|
font-size: 38px;
|
||||||
|
}
|
||||||
58
page-book-club.php
Normal file
58
page-book-club.php
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Template Name: Book Club Landing
|
||||||
|
*/
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html <?php language_attributes(); ?>>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="<?php bloginfo('charset'); ?>">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="<?= get_theme_file_uri('/assets/css/static.css'); ?>">
|
||||||
|
<title>Book Club</title>
|
||||||
|
<?php wp_head(); ?>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body <?php body_class(); ?>>
|
||||||
|
<?php wp_body_open(); ?>
|
||||||
|
<header class="site-navigation">
|
||||||
|
<a class="logo-wrapper" href="/">
|
||||||
|
<div
|
||||||
|
class="logo-spacer">
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
class="header-logo"
|
||||||
|
src="<?= get_theme_file_uri('/assets/images/header-logo.svg'); ?>"
|
||||||
|
alt="Somos Infinitos">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul class="pages-list">
|
||||||
|
<li>
|
||||||
|
<a href="#">Livros</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Book Club</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Mentoria</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Podcast</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="action-buttons">
|
||||||
|
<a href="#">
|
||||||
|
<img src="<?= get_theme_file_uri('/assets/images/profile-button.svg'); ?>">
|
||||||
|
</a>
|
||||||
|
<a class="join-us-cta btn" href="">Junta-te a nós</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<?php wp_footer(); ?>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user