From f8c0a4a31482fa4a2847e0b798f5f1204486649e Mon Sep 17 00:00:00 2001 From: Athul AS Date: Sun, 28 Jul 2024 15:57:12 +0530 Subject: [PATCH] Added 5 templates (#4) * added 5 templates --- aurora/index.html | 74 +++++++++++++++++++++ aurora/js/script.js | 41 ++++++++++++ aurora/metadata.json | 8 +++ aurora/styles/styles.css | 122 +++++++++++++++++++++++++++++++++++ cappuccino/index.html | 74 +++++++++++++++++++++ cappuccino/js/script.js | 41 ++++++++++++ cappuccino/metadata.json | 8 +++ cappuccino/styles/styles.css | 122 +++++++++++++++++++++++++++++++++++ glaze/index.html | 74 +++++++++++++++++++++ glaze/js/script.js | 41 ++++++++++++ glaze/metadata.json | 8 +++ glaze/styles/styles.css | 122 +++++++++++++++++++++++++++++++++++ purpular/index.html | 74 +++++++++++++++++++++ purpular/js/script.js | 41 ++++++++++++ purpular/metadata.json | 8 +++ purpular/styles/styles.css | 122 +++++++++++++++++++++++++++++++++++ radiance/index.html | 74 +++++++++++++++++++++ radiance/js/script.js | 41 ++++++++++++ radiance/metadata.json | 8 +++ radiance/styles/styles.css | 122 +++++++++++++++++++++++++++++++++++ 20 files changed, 1225 insertions(+) create mode 100755 aurora/index.html create mode 100755 aurora/js/script.js create mode 100755 aurora/metadata.json create mode 100755 aurora/styles/styles.css create mode 100755 cappuccino/index.html create mode 100755 cappuccino/js/script.js create mode 100755 cappuccino/metadata.json create mode 100755 cappuccino/styles/styles.css create mode 100755 glaze/index.html create mode 100755 glaze/js/script.js create mode 100755 glaze/metadata.json create mode 100755 glaze/styles/styles.css create mode 100755 purpular/index.html create mode 100755 purpular/js/script.js create mode 100755 purpular/metadata.json create mode 100755 purpular/styles/styles.css create mode 100755 radiance/index.html create mode 100755 radiance/js/script.js create mode 100755 radiance/metadata.json create mode 100755 radiance/styles/styles.css diff --git a/aurora/index.html b/aurora/index.html new file mode 100755 index 0000000..5795af9 --- /dev/null +++ b/aurora/index.html @@ -0,0 +1,74 @@ + + + + aurora + + + + + + + + + +
+
+ Like this site? Visit +
+ + + + + + + + + + + + + + + + + +
+
+

+
+
+

+
+
+

+

+
+
+
+

+

+
+
+ + + \ No newline at end of file diff --git a/aurora/js/script.js b/aurora/js/script.js new file mode 100755 index 0000000..6cca50d --- /dev/null +++ b/aurora/js/script.js @@ -0,0 +1,41 @@ +function calculateAge(dateString) { + const birthDate = new Date(dateString); + const today = new Date(); + let age = today.getFullYear() - birthDate.getFullYear(); + const monthDiff = today.getMonth() - birthDate.getMonth(); + + if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { + age--; + } + + return age; +} + +const elementUpdates = [ + { id: 'name', transform: content => `Hi, I'm ${content}` }, + { id: 'username', transform: content => `@${content} on zitefy` }, + { id: 'pronouns', transform: content => `[${content}]` }, + { id: 'dob', transform: content => { + const age = calculateAge(content); + const ageElement = document.getElementById('age'); + if (ageElement) { + ageElement.innerHTML = `[${age} y/o]`; + } + return content; + }}, + { id: 'email', transform: content => `ping me at ${content}` } +]; + +function updateElements() { + elementUpdates.forEach(({ id, transform }) => { + const element = document.getElementById(id); + if (element) { + const content = element.innerHTML.trim(); + if (content !== '') { + element.innerHTML = transform(content); + } + } + }); +} + +document.addEventListener('DOMContentLoaded', updateElements); \ No newline at end of file diff --git a/aurora/metadata.json b/aurora/metadata.json new file mode 100755 index 0000000..20080a3 --- /dev/null +++ b/aurora/metadata.json @@ -0,0 +1,8 @@ +{ + "name": "aurora", + "author": "athulas", + "time": "2024-07-28T15:34:32.458960", + "author_link": "https://github.com/athul2037", + "accepts_contributions": true, + "category": "plain" +} \ No newline at end of file diff --git a/aurora/styles/styles.css b/aurora/styles/styles.css new file mode 100755 index 0000000..dcc13ca --- /dev/null +++ b/aurora/styles/styles.css @@ -0,0 +1,122 @@ +body { + background: rgb(21,61,25); + background: linear-gradient(0deg, rgba(21,61,25,1) 0%, rgba(0,0,0,1) 37%, rgba(21,61,25,1) 62%, rgba(0,0,0,1) 100%); + font-family: "Jura", sans-serif; + font-optical-sizing: auto; + font-style: normal; + margin: 0px; + overflow: hidden; + color: aliceblue; +} + +h3 { + margin-block: 0; +} + +.body { + height: 100vh; + width: 100vw; + display: flex; + overflow-y: hidden; +} + +.small { + flex: 4; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.small .socials { + width: 100%; + height: 10vh; + display: flex; + justify-content: center; + align-items: center; +} + +.socials .social { + padding: 10px; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 10px; + margin-right: 10px; +} + +.small .info { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.small .info h1 { + margin-block: 0.2em; +} + +.dp { + height: 15vw; + width: 15vw; + border-radius: 200px; +} + +.large { + flex: 8; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10vh 10vw 10vh 10vh; + overflow-y: auto; +} + +.social:hover { + background-color: aliceblue; +} + +.social:hover svg path { + fill: #2C2121; +} + +/* mobile screens */ +@media only screen and (max-width: 640px) { + body { + overflow: auto; + } + + .body { + flex-direction: column; + height: auto; + min-height: 100vh; + overflow-y: visible; + } + + .small { + padding: 40px; + } + + .dp { + height: 40vw; + width: 40vw; + } + + .large { + padding: 0 10vw 2vh 10vw; + text-align: center; + overflow-y: visible; + } +} + +/* big phones & tablets */ +@media only screen and (max-width: 768px) {} + +/* tablets & 13 inch laptops */ +@media only screen and (max-width: 1024px) {} + +/* laptops */ +@media only screen and (max-width: 1280px) {} + +/* <17" displays */ +@media only screen and (max-width: 1536px) {} \ No newline at end of file diff --git a/cappuccino/index.html b/cappuccino/index.html new file mode 100755 index 0000000..5795af9 --- /dev/null +++ b/cappuccino/index.html @@ -0,0 +1,74 @@ + + + + aurora + + + + + + + + + +
+
+ Like this site? Visit +
+ + + + + + + + + + + + + + + + + +
+
+

+
+
+

+
+
+

+

+
+
+
+

+

+
+
+ + + \ No newline at end of file diff --git a/cappuccino/js/script.js b/cappuccino/js/script.js new file mode 100755 index 0000000..6cca50d --- /dev/null +++ b/cappuccino/js/script.js @@ -0,0 +1,41 @@ +function calculateAge(dateString) { + const birthDate = new Date(dateString); + const today = new Date(); + let age = today.getFullYear() - birthDate.getFullYear(); + const monthDiff = today.getMonth() - birthDate.getMonth(); + + if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { + age--; + } + + return age; +} + +const elementUpdates = [ + { id: 'name', transform: content => `Hi, I'm ${content}` }, + { id: 'username', transform: content => `@${content} on zitefy` }, + { id: 'pronouns', transform: content => `[${content}]` }, + { id: 'dob', transform: content => { + const age = calculateAge(content); + const ageElement = document.getElementById('age'); + if (ageElement) { + ageElement.innerHTML = `[${age} y/o]`; + } + return content; + }}, + { id: 'email', transform: content => `ping me at ${content}` } +]; + +function updateElements() { + elementUpdates.forEach(({ id, transform }) => { + const element = document.getElementById(id); + if (element) { + const content = element.innerHTML.trim(); + if (content !== '') { + element.innerHTML = transform(content); + } + } + }); +} + +document.addEventListener('DOMContentLoaded', updateElements); \ No newline at end of file diff --git a/cappuccino/metadata.json b/cappuccino/metadata.json new file mode 100755 index 0000000..062c8b6 --- /dev/null +++ b/cappuccino/metadata.json @@ -0,0 +1,8 @@ +{ + "name": "cappuccino", + "author": "athulas", + "time": "2024-07-28T15:54:48.458960", + "author_link": "https://github.com/athul2037", + "accepts_contributions": true, + "category": "plain" +} \ No newline at end of file diff --git a/cappuccino/styles/styles.css b/cappuccino/styles/styles.css new file mode 100755 index 0000000..ba29a89 --- /dev/null +++ b/cappuccino/styles/styles.css @@ -0,0 +1,122 @@ +body { + background: rgb(193,139,139); + background: linear-gradient(0deg, rgba(193,139,139,1) 0%, rgba(184,133,133,1) 0%, rgba(75,51,51,1) 67%, rgba(62,38,38,1) 100%); + font-family: "Jura", sans-serif; + font-optical-sizing: auto; + font-style: normal; + margin: 0px; + overflow: hidden; + color: aliceblue; +} + +h3 { + margin-block: 0; +} + +.body { + height: 100vh; + width: 100vw; + display: flex; + overflow-y: hidden; +} + +.small { + flex: 4; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.small .socials { + width: 100%; + height: 10vh; + display: flex; + justify-content: center; + align-items: center; +} + +.socials .social { + padding: 10px; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 10px; + margin-right: 10px; +} + +.small .info { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.small .info h1 { + margin-block: 0.2em; +} + +.dp { + height: 15vw; + width: 15vw; + border-radius: 200px; +} + +.large { + flex: 8; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10vh 10vw 10vh 10vh; + overflow-y: auto; +} + +.social:hover { + background-color: aliceblue; +} + +.social:hover svg path { + fill: #2C2121; +} + +/* mobile screens */ +@media only screen and (max-width: 640px) { + body { + overflow: auto; + } + + .body { + flex-direction: column; + height: auto; + min-height: 100vh; + overflow-y: visible; + } + + .small { + padding: 40px; + } + + .dp { + height: 40vw; + width: 40vw; + } + + .large { + padding: 0 10vw 2vh 10vw; + text-align: center; + overflow-y: visible; + } +} + +/* big phones & tablets */ +@media only screen and (max-width: 768px) {} + +/* tablets & 13 inch laptops */ +@media only screen and (max-width: 1024px) {} + +/* laptops */ +@media only screen and (max-width: 1280px) {} + +/* <17" displays */ +@media only screen and (max-width: 1536px) {} \ No newline at end of file diff --git a/glaze/index.html b/glaze/index.html new file mode 100755 index 0000000..31fec5a --- /dev/null +++ b/glaze/index.html @@ -0,0 +1,74 @@ + + + + glaze + + + + + + + + + +
+
+ Like this site? Visit +
+ + + + + + + + + + + + + + + + + +
+
+

+
+
+

+
+
+

+

+
+
+
+

+

+
+
+ + + \ No newline at end of file diff --git a/glaze/js/script.js b/glaze/js/script.js new file mode 100755 index 0000000..6cca50d --- /dev/null +++ b/glaze/js/script.js @@ -0,0 +1,41 @@ +function calculateAge(dateString) { + const birthDate = new Date(dateString); + const today = new Date(); + let age = today.getFullYear() - birthDate.getFullYear(); + const monthDiff = today.getMonth() - birthDate.getMonth(); + + if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { + age--; + } + + return age; +} + +const elementUpdates = [ + { id: 'name', transform: content => `Hi, I'm ${content}` }, + { id: 'username', transform: content => `@${content} on zitefy` }, + { id: 'pronouns', transform: content => `[${content}]` }, + { id: 'dob', transform: content => { + const age = calculateAge(content); + const ageElement = document.getElementById('age'); + if (ageElement) { + ageElement.innerHTML = `[${age} y/o]`; + } + return content; + }}, + { id: 'email', transform: content => `ping me at ${content}` } +]; + +function updateElements() { + elementUpdates.forEach(({ id, transform }) => { + const element = document.getElementById(id); + if (element) { + const content = element.innerHTML.trim(); + if (content !== '') { + element.innerHTML = transform(content); + } + } + }); +} + +document.addEventListener('DOMContentLoaded', updateElements); \ No newline at end of file diff --git a/glaze/metadata.json b/glaze/metadata.json new file mode 100755 index 0000000..c6eed1d --- /dev/null +++ b/glaze/metadata.json @@ -0,0 +1,8 @@ +{ + "name": "glaze", + "author": "athulas", + "time": "2024-07-28T15:51:32.458960", + "author_link": "https://github.com/athul2037", + "accepts_contributions": true, + "category": "plain" +} \ No newline at end of file diff --git a/glaze/styles/styles.css b/glaze/styles/styles.css new file mode 100755 index 0000000..638ebc4 --- /dev/null +++ b/glaze/styles/styles.css @@ -0,0 +1,122 @@ +body { + background: rgb(49,63,138); + background: linear-gradient(0deg, rgba(49,63,138,1) 0%, rgba(46,59,129,1) 0%, rgba(13,17,36,1) 100%); + font-family: "Jura", sans-serif; + font-optical-sizing: auto; + font-style: normal; + margin: 0px; + overflow: hidden; + color: aliceblue; +} + +h3 { + margin-block: 0; +} + +.body { + height: 100vh; + width: 100vw; + display: flex; + overflow-y: hidden; +} + +.small { + flex: 4; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.small .socials { + width: 100%; + height: 10vh; + display: flex; + justify-content: center; + align-items: center; +} + +.socials .social { + padding: 10px; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 10px; + margin-right: 10px; +} + +.small .info { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.small .info h1 { + margin-block: 0.2em; +} + +.dp { + height: 15vw; + width: 15vw; + border-radius: 200px; +} + +.large { + flex: 8; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10vh 10vw 10vh 10vh; + overflow-y: auto; +} + +.social:hover { + background-color: aliceblue; +} + +.social:hover svg path { + fill: #2C2121; +} + +/* mobile screens */ +@media only screen and (max-width: 640px) { + body { + overflow: auto; + } + + .body { + flex-direction: column; + height: auto; + min-height: 100vh; + overflow-y: visible; + } + + .small { + padding: 40px; + } + + .dp { + height: 40vw; + width: 40vw; + } + + .large { + padding: 0 10vw 2vh 10vw; + text-align: center; + overflow-y: visible; + } +} + +/* big phones & tablets */ +@media only screen and (max-width: 768px) {} + +/* tablets & 13 inch laptops */ +@media only screen and (max-width: 1024px) {} + +/* laptops */ +@media only screen and (max-width: 1280px) {} + +/* <17" displays */ +@media only screen and (max-width: 1536px) {} \ No newline at end of file diff --git a/purpular/index.html b/purpular/index.html new file mode 100755 index 0000000..6b61db7 --- /dev/null +++ b/purpular/index.html @@ -0,0 +1,74 @@ + + + + purpular + + + + + + + + + +
+
+ Like this site? Visit +
+ + + + + + + + + + + + + + + + + +
+
+

+
+
+

+
+
+

+

+
+
+
+

+

+
+
+ + + \ No newline at end of file diff --git a/purpular/js/script.js b/purpular/js/script.js new file mode 100755 index 0000000..6cca50d --- /dev/null +++ b/purpular/js/script.js @@ -0,0 +1,41 @@ +function calculateAge(dateString) { + const birthDate = new Date(dateString); + const today = new Date(); + let age = today.getFullYear() - birthDate.getFullYear(); + const monthDiff = today.getMonth() - birthDate.getMonth(); + + if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { + age--; + } + + return age; +} + +const elementUpdates = [ + { id: 'name', transform: content => `Hi, I'm ${content}` }, + { id: 'username', transform: content => `@${content} on zitefy` }, + { id: 'pronouns', transform: content => `[${content}]` }, + { id: 'dob', transform: content => { + const age = calculateAge(content); + const ageElement = document.getElementById('age'); + if (ageElement) { + ageElement.innerHTML = `[${age} y/o]`; + } + return content; + }}, + { id: 'email', transform: content => `ping me at ${content}` } +]; + +function updateElements() { + elementUpdates.forEach(({ id, transform }) => { + const element = document.getElementById(id); + if (element) { + const content = element.innerHTML.trim(); + if (content !== '') { + element.innerHTML = transform(content); + } + } + }); +} + +document.addEventListener('DOMContentLoaded', updateElements); \ No newline at end of file diff --git a/purpular/metadata.json b/purpular/metadata.json new file mode 100755 index 0000000..2da9bd8 --- /dev/null +++ b/purpular/metadata.json @@ -0,0 +1,8 @@ +{ + "name": "purpular", + "author": "athulas", + "time": "2024-07-28T15:34:32.458960", + "author_link": "https://github.com/athul2037", + "accepts_contributions": true, + "category": "plain" +} \ No newline at end of file diff --git a/purpular/styles/styles.css b/purpular/styles/styles.css new file mode 100755 index 0000000..5f5a9b0 --- /dev/null +++ b/purpular/styles/styles.css @@ -0,0 +1,122 @@ +body { + background: rgb(50,5,78); + background: linear-gradient(0deg, rgba(50,5,78,1) 0%, rgba(0,0,0,1) 33%, rgba(32,6,48,1) 71%, rgba(0,0,0,1) 100%); + font-family: "Jura", sans-serif; + font-optical-sizing: auto; + font-style: normal; + margin: 0px; + overflow: hidden; + color: aliceblue; +} + +h3 { + margin-block: 0; +} + +.body { + height: 100vh; + width: 100vw; + display: flex; + overflow-y: hidden; +} + +.small { + flex: 4; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.small .socials { + width: 100%; + height: 10vh; + display: flex; + justify-content: center; + align-items: center; +} + +.socials .social { + padding: 10px; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 10px; + margin-right: 10px; +} + +.small .info { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.small .info h1 { + margin-block: 0.2em; +} + +.dp { + height: 15vw; + width: 15vw; + border-radius: 200px; +} + +.large { + flex: 8; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10vh 10vw 10vh 10vh; + overflow-y: auto; +} + +.social:hover { + background-color: aliceblue; +} + +.social:hover svg path { + fill: #2C2121; +} + +/* mobile screens */ +@media only screen and (max-width: 640px) { + body { + overflow: auto; + } + + .body { + flex-direction: column; + height: auto; + min-height: 100vh; + overflow-y: visible; + } + + .small { + padding: 40px; + } + + .dp { + height: 40vw; + width: 40vw; + } + + .large { + padding: 0 10vw 2vh 10vw; + text-align: center; + overflow-y: visible; + } +} + +/* big phones & tablets */ +@media only screen and (max-width: 768px) {} + +/* tablets & 13 inch laptops */ +@media only screen and (max-width: 1024px) {} + +/* laptops */ +@media only screen and (max-width: 1280px) {} + +/* <17" displays */ +@media only screen and (max-width: 1536px) {} \ No newline at end of file diff --git a/radiance/index.html b/radiance/index.html new file mode 100755 index 0000000..dcaba79 --- /dev/null +++ b/radiance/index.html @@ -0,0 +1,74 @@ + + + + u` + + + + + + + + + +
+
+ Like this site? Visit +
+ + + + + + + + + + + + + + + + + +
+
+

+
+
+

+
+
+

+

+
+
+
+

+

+
+
+ + + \ No newline at end of file diff --git a/radiance/js/script.js b/radiance/js/script.js new file mode 100755 index 0000000..6cca50d --- /dev/null +++ b/radiance/js/script.js @@ -0,0 +1,41 @@ +function calculateAge(dateString) { + const birthDate = new Date(dateString); + const today = new Date(); + let age = today.getFullYear() - birthDate.getFullYear(); + const monthDiff = today.getMonth() - birthDate.getMonth(); + + if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { + age--; + } + + return age; +} + +const elementUpdates = [ + { id: 'name', transform: content => `Hi, I'm ${content}` }, + { id: 'username', transform: content => `@${content} on zitefy` }, + { id: 'pronouns', transform: content => `[${content}]` }, + { id: 'dob', transform: content => { + const age = calculateAge(content); + const ageElement = document.getElementById('age'); + if (ageElement) { + ageElement.innerHTML = `[${age} y/o]`; + } + return content; + }}, + { id: 'email', transform: content => `ping me at ${content}` } +]; + +function updateElements() { + elementUpdates.forEach(({ id, transform }) => { + const element = document.getElementById(id); + if (element) { + const content = element.innerHTML.trim(); + if (content !== '') { + element.innerHTML = transform(content); + } + } + }); +} + +document.addEventListener('DOMContentLoaded', updateElements); \ No newline at end of file diff --git a/radiance/metadata.json b/radiance/metadata.json new file mode 100755 index 0000000..9ac9c68 --- /dev/null +++ b/radiance/metadata.json @@ -0,0 +1,8 @@ +{ + "name": "radiance", + "author": "athulas", + "time": "2024-07-28T15:41:52.458960", + "author_link": "https://github.com/athul2037", + "accepts_contributions": true, + "category": "plain" +} \ No newline at end of file diff --git a/radiance/styles/styles.css b/radiance/styles/styles.css new file mode 100755 index 0000000..9202e9a --- /dev/null +++ b/radiance/styles/styles.css @@ -0,0 +1,122 @@ +body { + background: rgb(0,0,0); + background: linear-gradient(0deg, rgba(0,0,0,1) 4%, rgba(125,0,83,1) 34%, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 100%); + font-family: "Jura", sans-serif; + font-optical-sizing: auto; + font-style: normal; + margin: 0px; + overflow: hidden; + color: aliceblue; +} + +h3 { + margin-block: 0; +} + +.body { + height: 100vh; + width: 100vw; + display: flex; + overflow-y: hidden; +} + +.small { + flex: 4; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.small .socials { + width: 100%; + height: 10vh; + display: flex; + justify-content: center; + align-items: center; +} + +.socials .social { + padding: 10px; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 10px; + margin-right: 10px; +} + +.small .info { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.small .info h1 { + margin-block: 0.2em; +} + +.dp { + height: 15vw; + width: 15vw; + border-radius: 200px; +} + +.large { + flex: 8; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10vh 10vw 10vh 10vh; + overflow-y: auto; +} + +.social:hover { + background-color: aliceblue; +} + +.social:hover svg path { + fill: #2C2121; +} + +/* mobile screens */ +@media only screen and (max-width: 640px) { + body { + overflow: auto; + } + + .body { + flex-direction: column; + height: auto; + min-height: 100vh; + overflow-y: visible; + } + + .small { + padding: 40px; + } + + .dp { + height: 40vw; + width: 40vw; + } + + .large { + padding: 0 10vw 2vh 10vw; + text-align: center; + overflow-y: visible; + } +} + +/* big phones & tablets */ +@media only screen and (max-width: 768px) {} + +/* tablets & 13 inch laptops */ +@media only screen and (max-width: 1024px) {} + +/* laptops */ +@media only screen and (max-width: 1280px) {} + +/* <17" displays */ +@media only screen and (max-width: 1536px) {} \ No newline at end of file