Template
This commit is contained in:
Ian Hitchman
BIN
dist/favicon.824cf0c5.ico
vendored
Normal file
BIN
dist/favicon.824cf0c5.ico
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
dist/hero.4243088c.jpg
vendored
Normal file
BIN
dist/hero.4243088c.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
61
dist/index.739bf03c.js
vendored
61
dist/index.739bf03c.js
vendored
@@ -999,19 +999,64 @@ var _jsxDevRuntime = require("react/jsx-dev-runtime");
|
||||
var _bootstrap = require("bootstrap");
|
||||
var _reactDom = require("react-dom");
|
||||
var _reactDomDefault = parcelHelpers.interopDefault(_reactDom);
|
||||
document.body.onscroll = function() {
|
||||
let header = document.querySelector("header");
|
||||
let scrollPosition = window.scrollY;
|
||||
if (scrollPosition > 70) header.classList.add("fixed");
|
||||
else header.classList.remove("fixed");
|
||||
};
|
||||
document.querySelector(".nav-burger-btn").onclick = function(e) {
|
||||
let nav = document.querySelector("body nav");
|
||||
let btn = document.querySelector(".nav-burger-btn");
|
||||
nav.classList.toggle("active");
|
||||
btn.classList.toggle("active");
|
||||
return false;
|
||||
};
|
||||
const App = ()=>{
|
||||
return /*#__PURE__*/ _jsxDevRuntime.jsxDEV("h2", {
|
||||
children: "Have a nice day!"
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 7,
|
||||
columnNumber: 10
|
||||
}, undefined);
|
||||
return /*#__PURE__*/ _jsxDevRuntime.jsxDEV(_jsxDevRuntime.Fragment, {
|
||||
children: [
|
||||
/*#__PURE__*/ _jsxDevRuntime.jsxDEV("h1", {
|
||||
children: "Page title"
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 25,
|
||||
columnNumber: 7
|
||||
}, undefined),
|
||||
/*#__PURE__*/ _jsxDevRuntime.jsxDEV("h2", {
|
||||
children: "Subheading title"
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 26,
|
||||
columnNumber: 7
|
||||
}, undefined),
|
||||
/*#__PURE__*/ _jsxDevRuntime.jsxDEV("p", {
|
||||
children: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, consequuntur sint similique dolorum consectetur molestiae quo culpa odit, perspiciatis laboriosam iusto. In earum quam repellat autem, maiores tempora ex perferendis."
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 27,
|
||||
columnNumber: 7
|
||||
}, undefined),
|
||||
/*#__PURE__*/ _jsxDevRuntime.jsxDEV("h2", {
|
||||
children: "Subheading title"
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 33,
|
||||
columnNumber: 7
|
||||
}, undefined),
|
||||
/*#__PURE__*/ _jsxDevRuntime.jsxDEV("p", {
|
||||
children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse officia velit explicabo ratione labore, nesciunt fuga aliquam. Dolore ipsam odio minima laboriosam maiores, blanditiis, eligendi enim aspernatur, tempore minus sequi."
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 34,
|
||||
columnNumber: 7
|
||||
}, undefined)
|
||||
]
|
||||
}, void 0, true);
|
||||
};
|
||||
_c = App;
|
||||
_reactDomDefault.default.render(/*#__PURE__*/ _jsxDevRuntime.jsxDEV(App, {}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 10,
|
||||
lineNumber: 44,
|
||||
columnNumber: 17
|
||||
}, undefined), document.getElementById("root"));
|
||||
var _c;
|
||||
|
||||
2
dist/index.739bf03c.js.map
vendored
2
dist/index.739bf03c.js.map
vendored
File diff suppressed because one or more lines are too long
249
dist/index.b10d73a7.css
vendored
249
dist/index.b10d73a7.css
vendored
@@ -11434,8 +11434,253 @@ textarea.form-control-lg {
|
||||
}
|
||||
}
|
||||
|
||||
body h1, body .h1 {
|
||||
color: #0d6efd;
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
display: -ms-grid;
|
||||
background-color: #fff;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-template-columns: auto;
|
||||
grid-template-areas: "header"
|
||||
"main"
|
||||
"footer";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
color: #1186b2;
|
||||
margin-bottom: .5em;
|
||||
font-size: clamp(1.8rem, 3vw, 3rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-size: clamp(1.4rem, 2vw, 2rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header {
|
||||
display: -ms-grid;
|
||||
grid-template: 9rem / auto;
|
||||
grid-area: header;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header {
|
||||
grid-template: 6rem / auto;
|
||||
}
|
||||
}
|
||||
|
||||
header.hero {
|
||||
height: 100vh;
|
||||
grid-template: 9rem auto / auto;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header.hero {
|
||||
grid-template: 6rem auto / auto;
|
||||
}
|
||||
}
|
||||
|
||||
header .header-top {
|
||||
width: 100%;
|
||||
height: 9rem;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #0000;
|
||||
grid-column: 1;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: 2rem 4vw;
|
||||
transition: height .5s ease-out, padding .5s ease-out;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header .header-top {
|
||||
height: 6rem;
|
||||
padding: 1rem 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
header .header-top {
|
||||
padding: 2rem calc(50% - 600px);
|
||||
}
|
||||
}
|
||||
|
||||
header .header-top .header-logo {
|
||||
height: 100%;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
header .header-top .header-logo img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
}
|
||||
|
||||
header .header-top .header-nav {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header .header-top .header-nav a {
|
||||
padding: 0 1rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header .header-top .header-nav a:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header .header-top .header-nav {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-width: 400px;
|
||||
z-index: 100;
|
||||
background: #1186b2;
|
||||
padding: 10vw;
|
||||
transition: transform .1s ease-out;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
header .header-top .header-nav.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
header .header-top .header-nav a {
|
||||
color: #fff;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
opacity: 0;
|
||||
z-index: 101;
|
||||
cursor: pointer;
|
||||
background-color: #e156ab;
|
||||
border-radius: 5px;
|
||||
margin-top: 0;
|
||||
padding: 5px;
|
||||
transition: all .5s ease-out;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -4rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn rect {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
fill: #fff;
|
||||
transition: all .5s ease-out;
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn.active rect:first-child {
|
||||
transform: translate3d(27px, 3px, 0)rotate(45deg);
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn.active rect:nth-child(2) {
|
||||
transform-origin: center;
|
||||
transform: translate3d(0, 1px, 0)rotate(-45deg);
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn.active rect:last-child {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header .header-top .nav-burger-btn {
|
||||
opacity: 1;
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
header.fixed .header-top {
|
||||
height: 5rem;
|
||||
border-color: #0000001a;
|
||||
padding: 1rem 4vw;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header.fixed .header-top {
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
header.fixed .header-top {
|
||||
padding: 1rem calc(50% - 600px);
|
||||
}
|
||||
}
|
||||
|
||||
header .header-hero {
|
||||
grid-area: 2 / 1 / auto / -1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header .header-hero img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
main section {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
padding: 20px 4vw;
|
||||
}
|
||||
|
||||
main section.main-colour {
|
||||
color: #fff;
|
||||
background-color: #1186b2;
|
||||
}
|
||||
|
||||
main section.second-colour {
|
||||
color: #fff;
|
||||
background-color: #b5da3d;
|
||||
}
|
||||
|
||||
main section.hero {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
main section {
|
||||
padding: 2rem calc(50% - 600px);
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
background: pink;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.b10d73a7.css.map */
|
||||
|
||||
2
dist/index.b10d73a7.css.map
vendored
2
dist/index.b10d73a7.css.map
vendored
File diff suppressed because one or more lines are too long
47
dist/index.html
vendored
47
dist/index.html
vendored
@@ -5,16 +5,49 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="icon" href="/favicon.824cf0c5.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/index.b10d73a7.css">
|
||||
<script src="/index.739bf03c.js" defer=""></script>
|
||||
</head>
|
||||
<body class="p-5">
|
||||
<h1>All done</h1>
|
||||
<div id="root">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="header-top">
|
||||
<div class="header-logo">
|
||||
<a href="/"></a><img src="/logo.0d5ec2af.svg" alt="Logo">
|
||||
</div>
|
||||
<nav class="header-nav">
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
</nav>
|
||||
<svg viewbox="0 0 100 100" class="nav-burger-btn">
|
||||
<rect y="10"></rect>
|
||||
<rect y="43"></rect>
|
||||
<rect y="75"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">Clickety click</button>
|
||||
<div class="header-hero">
|
||||
<img src="/hero.4243088c.jpg" alt="">
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section id="root">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="main-colour">hello</section>
|
||||
<section class="hero">WOW!</section>
|
||||
<section class="second-colour">some text</section>
|
||||
<section>some more text</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div>hello</div>
|
||||
<div>ddf</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
11
dist/logo.0d5ec2af.svg
vendored
Normal file
11
dist/logo.0d5ec2af.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.0 KiB |
BIN
src/favicon.ico
Normal file
BIN
src/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
@@ -5,16 +5,49 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="scss/main.scss" />
|
||||
<script type="module" src="js/index.js"></script>
|
||||
</head>
|
||||
<body class="p-5">
|
||||
<h1>All done</h1>
|
||||
<div id="root">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="header-top">
|
||||
<div class="header-logo">
|
||||
<a href="/"></a><img src="resources/logo.svg" alt="Logo" /></a>
|
||||
</div>
|
||||
<nav class="header-nav">
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
</nav>
|
||||
<svg viewBox="0 0 100 100" class="nav-burger-btn">
|
||||
<rect y="10"></rect>
|
||||
<rect y="43"></rect>
|
||||
<rect y="75"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">Clickety click</button>
|
||||
<div class="header-hero">
|
||||
<img src="resources/hero.jpg" alt="" />
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section id="root">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="main-colour">hello</section>
|
||||
<section class="hero">WOW!</section>
|
||||
<section class="second-colour">some text</section>
|
||||
<section>some more text</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div>hello</div>
|
||||
<div>ddf</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,10 +1,44 @@
|
||||
// Import all Bootstrap plugins, or select individually
|
||||
import * as bootstrap from "bootstrap";
|
||||
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
document.body.onscroll = function () {
|
||||
let header = document.querySelector("header");
|
||||
let scrollPosition = window.scrollY;
|
||||
if (scrollPosition > 70) {
|
||||
header.classList.add("fixed");
|
||||
} else {
|
||||
header.classList.remove("fixed");
|
||||
}
|
||||
};
|
||||
document.querySelector(".nav-burger-btn").onclick = function (e) {
|
||||
let nav = document.querySelector("body nav");
|
||||
let btn = document.querySelector(".nav-burger-btn");
|
||||
nav.classList.toggle("active");
|
||||
btn.classList.toggle("active");
|
||||
return false;
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
return <h2>Have a nice day!</h2>;
|
||||
return (
|
||||
<>
|
||||
<h1>Page title</h1>
|
||||
<h2>Subheading title</h2>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum,
|
||||
consequuntur sint similique dolorum consectetur molestiae quo culpa
|
||||
odit, perspiciatis laboriosam iusto. In earum quam repellat autem,
|
||||
maiores tempora ex perferendis.
|
||||
</p>
|
||||
<h2>Subheading title</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse officia
|
||||
velit explicabo ratione labore, nesciunt fuga aliquam. Dolore ipsam odio
|
||||
minima laboriosam maiores, blanditiis, eligendi enim aspernatur, tempore
|
||||
minus sequi.
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
|
||||
BIN
src/resources/hero.jpg
Normal file
BIN
src/resources/hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
BIN
src/resources/logo.png
Normal file
BIN
src/resources/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
11
src/resources/logo.svg
Normal file
11
src/resources/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.0 KiB |
@@ -1,8 +1,249 @@
|
||||
@import "../../node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
html,
|
||||
body {
|
||||
h1 {
|
||||
color: $primary;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background-color: #ffffff;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-template: repeat(3, auto) / auto;
|
||||
grid-template-areas: "header" "main" "footer";
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
font-size: clamp(1.8rem, 3vw, 3rem);
|
||||
font-weight: bold;
|
||||
color: #1186b2;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
font-size: clamp(1.4rem, 2vw, 2rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-template: 9rem / auto;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header {
|
||||
grid-template: 6rem / auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
header.hero {
|
||||
height: 100vh;
|
||||
grid-template: 9rem auto/auto;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header.hero {
|
||||
grid-template: 6rem auto/auto;
|
||||
}
|
||||
}
|
||||
|
||||
header .header-top {
|
||||
grid-column: 1;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
transition: height 0.5s ease-out, padding 0.5s ease-out;
|
||||
height: 9rem;
|
||||
padding: 2rem 4vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header .header-top {
|
||||
padding: 1rem 4vw;
|
||||
height: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
header .header-top {
|
||||
padding: 2rem calc(calc(100% - 1200px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
header .header-top .header-logo {
|
||||
background: #cccccc;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
header .header-top .header-logo img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
header .header-top .header-nav {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header .header-top .header-nav a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
header .header-top .header-nav a:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header .header-top .header-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
padding: 10vw;
|
||||
max-width: 400px;
|
||||
background: #1186b2;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.1s ease-out;
|
||||
z-index: 100;
|
||||
}
|
||||
header .header-top .header-nav.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
header .header-top .header-nav a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn {
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
right: -4rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #e156ab;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease-out;
|
||||
z-index: 101;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn rect {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
fill: #fff;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn.active rect:first-child {
|
||||
transform: translate3d(27px, 3px, 0) rotate(45deg);
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn.active rect:nth-child(2) {
|
||||
transform-origin: center;
|
||||
transform: translate3d(0px, 1px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn.active rect:last-child {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header .header-top .nav-burger-btn {
|
||||
right: 1rem;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
header.fixed .header-top {
|
||||
height: 5rem;
|
||||
padding: 1rem 4vw;
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header.fixed .header-top {
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
header.fixed .header-top {
|
||||
padding: 1rem calc(calc(100% - 1200px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
header .header-hero {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header .header-hero img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
main section {
|
||||
margin-top: 0;
|
||||
padding: 20px 4vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main section.main-colour {
|
||||
background-color: #1186b2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
main section.second-colour {
|
||||
background-color: #b5da3d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
main section.hero {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
main section {
|
||||
padding: 2rem calc(calc(100% - 1200px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
background: pink;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user