Link style.css added

Added header

Added header with div for logo

Removed empty lines

Added '>' for tag

Update index.html

Revert "Update index.html"

This reverts commit 9d397d0.

Revert "Added '>' for tag"

This reverts commit d480654.

Revert "Revert "Added '>' for tag""

This reverts commit 12526aa.

Revert "Revert "Revert "Added '>' for tag"""

This reverts commit 16e856e.

Revert "Revert "Revert "Revert "Added '>' for tag""""

This reverts commit 0613ae1.

added background color

added <header> with logo. Added folder 'Logo'

Added fonts

Correct css link

Added styles

Created main html structure

Added JavaScript and folder with images

Repaired Dark Mode

Remove JS-code from html

Added preview image

Added dark mode preview image

Updated date variables

Update script.js

Update script.js

Update script.js

Updated all code. But it works the same

Removed dead selectors. Added comments

Updated classes and attributes

fix: fix body width and margin for responsive

docs: add link to gh-pages

docs: add preview

docs: correct gh-pages link

docs: correct alt text

docs: correct alt text

docs: correct alt text

fix: minor updates

README.md

@@ -1,4 +1,9 @@
 # open-macbook-dark-mode
+
+## [GitHub pages](https://boriskrasko.github.io/open-macbook-dark-mode)
+
 Template with animation of moving macbook cover and auto dark mode
 
-http:https://ideveloper.by/open-macbook-dark-mode/index.html
+![light mode](https://boriskrasko.github.io/open-macbook-dark-mode/preview/open-macbook.png)
+
+![dark mode](https://boriskrasko.github.io/open-macbook-dark-mode/preview/open-macbook-dark-mode.png)

css/style.css

@@ -0,0 +1,224 @@
+@font-face {
+ font-family: SF Pro;
+ src: url(../fonts/SF-Pro-Text-Regular.otf);
+ font-style: normal
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ /*border: 1px solid gray;*/
+}
+
+
+/* Tags */
+
+html {
+ background: url(../images/appearance_l.jpg);
+ min-height: 640px;
+}
+
+body {
+ font-family: 'SF Pro', sans-serif;
+ max-width: 1480px;
+ min-width: 200px;
+ flex-direction: column;
+}
+
+img {
+ width: 100%;
+ min-width: 260px;
+}
+
+a {
+ color: #444;
+ font-size: 1.2em;
+ margin-top: 0.4em;
+ margin-bottom: 1.5em;
+ padding-right: 13px;
+ letter-spacing: -0.35px;
+ text-decoration: none;
+ -webkit-animation: fade-in 1s 1s ease-in-out forwards;
+ animation: fade-in 1s 1s ease-in-out forwards;
+}
+
+header {
+ display: -webkit-box;
+ -webkit-box-pack: center;
+ -webkit-box-align: center;
+ height: calc(100% - 44px);
+ flex-direction: column;
+ text-align: center;
+}
+
+h2 {
+ color: #333;
+ font-size: 4.2em;
+ font-weight: 600;
+ -webkit-animation: fade-in 1.3s 0.3s ease-in-out forwards;
+ animation: fade-in 1.3s 0.3s ease-in-out forwards;
+}
+
+@-webkit-keyframes fade-in {
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fade-in {
+ 100% {
+ opacity: 1;
+ }
+}
+
+
+/* Common */
+
+.x-full {
+ width: 100%;
+}
+
+.y-full {
+ height: 100vh;
+}
+
+.hidden {
+ opacity: 0;
+}
+
+.background {
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+.transition {
+ transition: 1s all;
+}
+
+.margin {
+ margin: 0 auto;
+}
+
+.layer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+.flex {
+ display: flex;
+ flex-direction: column;
+}
+
+.center {
+ justify-content: center;
+ align-items: center;
+}
+
+
+/* header */
+
+.title {
+ transition: all 0.7s 0.1s;
+}
+
+.outlink {
+ transition: all 0.4s 0.1s;
+}
+
+
+/*- macbook -*/
+
+.laptop {
+ width: 50%;
+ min-width: 640px;
+ min-height: 400px;
+ margin: 10% auto 0;
+ transition: 0.5s all;
+ transition-delay: 0.2s;
+ background: rgba(229, 229, 231, 0.2);
+ backdrop-filter: blur(120px);
+ border-radius: 20px;
+ z-index: 1;
+}
+
+.top-case {
+ transform: rotateX(60deg);
+}
+
+.top-case img {
+ position: absolute;
+ bottom: 0;
+ margin-bottom: 2px;
+}
+
+.keyboard,
+.shadow,
+.touchbar,
+.reflection {
+ position: absolute;
+ top: 0;
+}
+
+.shadow {
+ opacity: 0.5;
+}
+
+.keyboard {
+ z-index: 2;
+ transition: 1.5s all;
+ opacity: 1;
+}
+
+.touchbar {
+ z-index: 3;
+ transition: 1s all 0.5s;
+}
+
+.screen {
+ z-index: 2;
+ transition: 1.5s all;
+}
+
+.top {
+ z-index: 0;
+}
+
+.reflection {
+ transform: rotateX(180deg);
+ position: absolute;
+ width: 82%;
+ top: 0;
+ left: 9%;
+ right: 9%;
+ bottom: 0;
+ z-index: 10;
+}
+
+
+/* dark mode layer */
+
+.darkmode {
+ background-image: url(../images/macos.jpg);
+ transition: 1s opacity;
+}
+
+.layer .y-min {
+ min-height: 640px;
+}
+
+@media screen and (max-width: 652px) {
+ html {
+ overflow-x: hidden;
+ }
+ h2 {
+ font-size: 3.2em;
+ }
+ .laptop {
+ width: 96%;
+ min-width: 260px;
+ }
+}

index.html

@@ -1,11 +1,38 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
-</head>
-<body>
-
-</body>
+<html class="background y-full">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>MacBook opening animation</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css">
+ </head>
+ <body class="margin flex center">
+ <div class="layer darkmode background x-full y-full y-min hidden"></div>
+ <header class="flex center">
+ <h2 class="title hidden">Zacznij odkrywać.</h2>
+ <a href="https://help.apple.com/macOS/high-sierra/mac-basics" class="outlink hidden">To Twój pierwszy Mac? Rozejrzyj się i&nbsp;poznaj podstawy</a>
+ </header>
+ <section onmouseout="closeTopCase()" class="flex center margin">
+ <table onmouseover="openTopCase()" class="laptop flex center">
+ <tbody class="case x-full transition margin">
+ <tr>
+ <td class="top-case transition">
+ <img class="top" src="images/MacBook-Pro-16-inch-Touch-Bar-top.png" alt="top case">
+ <img class="screen hidden" src="images/MacBook-Pro-6-inch-Touch-Bar-screen-desktop.png" alt="screen desktop">
+ </td>
+ </tr>
+ <tr>
+ <td class="bottom-case">
+ <img class="keyboard" src="images/MacBook-Pro-16-inch-Touch-Bar-bottom.png" alt="keyboard">
+ <img class="shadow" src="images/MacBook-Pro-16-inch-Touch-Bar-shadow.png" alt="shadow">
+ <img class="reflection hidden transition" src="images/macOS-Big-Sur-Control-Center.png" alt="reflection">
+ <img class="touchbar hidden" src="images/MacBook-Pro-16-inch-Touch-Bar-touchbar.png" alt="touch bar">
+ <img src="images/transparent.png" alt="transparent">
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </section>
+ <script src="js/script.js"></script>
+ </body>
 </html>

js/script.js

@@ -0,0 +1,41 @@
+const macbookTopCase = document.querySelector('.top-case'),
+ macbook = document.querySelector('.case');
+ touchBar = document.querySelector('.touchbar');
+ screen = document.querySelector('.screen');
+ darkBackgroundLayer = document.querySelector('.layer');
+ keyboard = document.querySelector('.keyboard');
+ reflection = document.querySelector('.reflection');
+ title = document.querySelector('.title');
+ subtitle = document.querySelector('.outlink');
+ laptop = document.querySelector('.laptop');
+
+function openTopCase() {
+ macbook.style.transform = 'scale(0.8)';
+ darkBackgroundLayer.style.opacity = '1';
+ macbookTopCase.style.transform = 'rotateX(-10deg)';
+ touchBar.style.opacity = '1';
+ screen.style.opacity = '1';
+ keyboard.style.opacity = '0.98';
+ reflection.style.opacity = '0.4';
+ title.style.color = '#FFF';
+ subtitle.style.color = '#FFF';
+ laptop.style.background = 'rgba(32, 42, 68, 1)';
+};
+
+function closeTopCase() {
+ darkBackgroundLayer.style.opacity = '0';
+ macbookTopCase.style.transform = 'rotateX(65deg)'
+ touchBar.style.opacity = '0';
+ screen.style.opacity = '0.0';
+ keyboard.style.opacity = '0.8';
+ reflection.style.opacity = '0.0';
+ title.style.color = '#222';
+ subtitle.style.color = '#222';
+ laptop.style.background = 'rgba(229, 229, 231, 0.2)';
+};
+
+function getReady () {
+ macbook.style.transform = 'scale(1)';
+}
+
+getReady();