diff options
Diffstat (limited to 'grid.css')
-rw-r--r-- | grid.css | 188 |
1 files changed, 0 insertions, 188 deletions
diff --git a/grid.css b/grid.css deleted file mode 100644 index 9c39c90..0000000 --- a/grid.css +++ /dev/null @@ -1,188 +0,0 @@ -:root { - --background: #555ED5; - --text: #000; - --secondary-text: #FFF; - --secondary-background: #102027; - --h1: #FFF; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --header-bg: #555ED5; -} - -h1, h2, h3, h4, h5, h6, div, button { - margin: 0; - padding: 0; -} - -h1 { - color: var(--h1); -} - -html { - font-family: "liberation serif", "times new roman", calibri, carlito, serif; - color: var(--text); -} - -body { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto 1fr 1fr; - gap: 0px 0px; - grid-template-areas: - "header" - "main" - "footer"; - /* Fix height */ - height: 100vh; - /* grid-template-rows: auto 1fr auto; */ -} - -img { - width: 100%; - height: auto; -} - -video { - width: 100%; - height: auto; -} - -.text-center { - text-align: center; -} - -.header { - display: grid; - grid-template-columns: 0.3fr auto auto; - grid-template-rows: auto auto; - gap: 0px 0px; - grid-template-areas: - "navbar-burger logo-name ." - "navbar-menu navbar-menu ."; - grid-area: header; - - background: var(--header-bg); -} - -.header { - position: sticky; - top: 0px; -} - -.navbar-menu { - grid-area: navbar-menu; - - display: none; -} - -/* ---------- Menu Mobile sin JS ------------ */ -/* --------- End Menu Mobile sin JS ----------- */ -/* input hidden */ -#navbar-toggle-cbox { - display: none; -} - -label[for=navbar-toggle-cbox] { - cursor: pointer; -} - -#navbar-toggle-cbox:checked ~ .navbar-menu { - display: block; -} - -/* --------- Menu Mobile JS ------------ */ -.navbar-burger.is-active { - display: flex; - cursor: pointer; - position: relative; - justify-content: center; - width: 100%; - height: auto; -} - -.navbar-burger.is-active span { - display: block; - position: absolute; -} - -.navbar-burger.is-active span:nth-child(1) { - transform: translateY(5px) rotate(45deg); - top: calc(50% - 6px); -} - -.navbar-burger.is-active span:nth-child(2) { - opacity: 0; -} - -.navbar-burger.is-active span:nth-child(3) { - transform: translateY(-5px) rotate(-45deg); - top: calc(50% + 4px); -} -/* --------- End Menu Mobile JS ----------- */ - -.navbar-menu > ul > li { - list-style: none; -} - -ul.list-item > li > a { - color: var(--secondary-text); - text-decoration: none; -} - -.navbar-burger { - grid-area: navbar-burger; - margin: auto; - - display: grid; - grid-row-gap: .25rem; - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr 1fr; -} - -.navbar-burger span { - background-color: var(--secondary-text); - display: block; - height: 2px; - transform-origin: center; - transition-duration: 86ms; - transition-property: background-color,opacity,transform; - transition-timing-function: ease-out; - width: 16px; -} - -.logo-name { - grid-area: logo-name; - justify-self: center; - align-self: center; - - text-decoration: none; - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} -.main { grid-area: main; } - -.footer { - grid-area: footer; - - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto auto; - grid-template-areas: - "footer-info" - "copy-info"; - margin: auto; -} - -.footer-info { - grid-area: footer-info; -} -.copy-info { - grid-area: copy-info; -} - -.copy-info > address > p { - margin: 0px; -} |