diff --git a/Dhshsh/Subject.png b/Dhshsh/Subject.png
new file mode 100644
index 0000000..5a60d9d
Binary files /dev/null and b/Dhshsh/Subject.png differ
diff --git "a/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/D/Q was /Owch/Subject.png" "b/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/D/Q was /Owch/Subject.png"
new file mode 100644
index 0000000..cfa3c07
Binary files /dev/null and "b/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/D/Q was /Owch/Subject.png" differ
diff --git "a/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/D/Q was/Subject.png" "b/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/D/Q was/Subject.png"
new file mode 100644
index 0000000..8332537
Binary files /dev/null and "b/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/D/Q was/Subject.png" differ
diff --git "a/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/D/Subject.png" "b/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/D/Subject.png"
new file mode 100644
index 0000000..f7a1753
Binary files /dev/null and "b/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/D/Subject.png" differ
diff --git "a/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/WebP Image.WEBP" "b/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/WebP Image.WEBP"
new file mode 100644
index 0000000..8b50573
Binary files /dev/null and "b/Dhshsh/Try /Fffg/Shawn\342\200\231s/Dash/WebP Image.WEBP" differ
diff --git "a/Dhshsh/Try /Fffg/Shawn\342\200\231s/Subject.png" "b/Dhshsh/Try /Fffg/Shawn\342\200\231s/Subject.png"
new file mode 100644
index 0000000..1675fb7
Binary files /dev/null and "b/Dhshsh/Try /Fffg/Shawn\342\200\231s/Subject.png" differ
diff --git a/Dhshsh/Try /Fffg/Subject.png b/Dhshsh/Try /Fffg/Subject.png
new file mode 100644
index 0000000..472c6a0
Binary files /dev/null and b/Dhshsh/Try /Fffg/Subject.png differ
diff --git a/Dhshsh/Try/Subject.png b/Dhshsh/Try/Subject.png
new file mode 100644
index 0000000..3582ce3
Binary files /dev/null and b/Dhshsh/Try/Subject.png differ
diff --git a/HEIF Image.heic b/HEIF Image.heic
new file mode 100644
index 0000000..ce4c1ae
Binary files /dev/null and b/HEIF Image.heic differ
diff --git a/assets/HEIF Image.heic b/assets/HEIF Image.heic
new file mode 100644
index 0000000..6f28c81
Binary files /dev/null and b/assets/HEIF Image.heic differ
diff --git a/assets/css/HEIF Image.heic b/assets/css/HEIF Image.heic
new file mode 100644
index 0000000..5cbbd43
Binary files /dev/null and b/assets/css/HEIF Image.heic differ
diff --git a/assets/css/styles.css b/assets/css/styles.css
index b56a603..1e4649d 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,561 +1,704 @@
-/*===== GOOGLE FONTS =====*/
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
-
-/*===== VARIABLES CSS =====*/
-:root {
- --header-height: 3rem;
-
- /*========== Colors ==========*/
- --first-color: #069C54;
- --first-color-alt: #048654;
- --title-color: #393939;
- --text-color: #707070;
- --text-color-light: #A6A6A6;
- --body-color: #FBFEFD;
- --container-color: #FFFFFF;
-
- /*========== Font and typography ==========*/
- --body-font: 'Poppins', sans-serif;
- --biggest-font-size: 2.25rem;
- --h1-font-size: 1.5rem;
- --h2-font-size: 1.25rem;
- --h3-font-size: 1rem;
- --normal-font-size: .938rem;
- --small-font-size: .813rem;
- --smaller-font-size: .75rem;
-
- /*========== Font weight ==========*/
- --font-medium: 500;
- --font-semi-bold: 600;
-
- /*========== Margenes ==========*/
- --mb-1: .5rem;
- --mb-2: 1rem;
- --mb-3: 1.5rem;
- --mb-4: 2rem;
- --mb-5: 2.5rem;
- --mb-6: 3rem;
-
- /*========== z index ==========*/
- --z-tooltip: 10;
- --z-fixed: 100;
-}
-
-@media screen and (min-width: 768px){
- :root{
- --biggest-font-size: 4rem;
- --h1-font-size: 2.25rem;
- --h2-font-size: 1.5rem;
- --h3-font-size: 1.25rem;
- --normal-font-size: 1rem;
- --small-font-size: .875rem;
- --smaller-font-size: .813rem;
- }
-}
-
-/*========== BASE ==========*/
-*,::before,::after{
- box-sizing: border-box;
-}
-
-html{
- scroll-behavior: smooth;
-}
-
-/*========== Variables Dark theme ==========*/
-body.dark-theme{
- --title-color: #F1F3F2;
- --text-color: #C7D1CC;
- --body-color: #1D2521;
- --container-color: #27302C;
-}
-
-/*========== Button Dark/Light ==========*/
-.change-theme{
- position: absolute;
- right: 1rem;
- top: 1.8rem;
- color: var(--text-color);
- font-size: 1rem;
- cursor: pointer;
-}
-
-body{
- margin: var(--header-height) 0 0 0;
- font-family: var(--body-font);
- font-size: var(--normal-font-size);
- background-color: var(--body-color);
- color: var(--text-color);
- line-height: 1.6;
-}
-
-h1,h2,h3,p,ul{
- margin: 0;
-}
-
-ul{
- padding: 0;
- list-style: none;
-}
-
-a{
- text-decoration: none;
-}
-
-img{
- max-width: 100%;
- height: auto;
-}
-
-/*========== CLASS CSS ==========*/
-.section{
- padding: 4rem 0 2rem;
-}
-
-.section-title, .section-subtitle{
- text-align: center;
-}
-
-.section-title{
- font-size: var(--h1-font-size);
- color: var(--title-color);
- margin-bottom: var(--mb-3);
-}
-
-.section-subtitle{
- display: block;
- color: var(--first-color);
- font-weight: var(--font-medium);
- margin-bottom: var(--mb-1);
-}
-
-/*========== LAYOUT ==========*/
-.bd-container{
- max-width: 960px;
- width: calc(100% - 2rem);
- margin-left: var(--mb-2);
- margin-right: var(--mb-2);
-}
-
-.bd-grid{
- display: grid;
- gap: 1.5rem;
-}
-
-.l-header{
- width: 100%;
- position: fixed;
- top: 0;
- left: 0;
- z-index: var(--z-fixed);
- background-color: var(--body-color);
-}
-
-/*========== NAV ==========*/
-.nav{
- max-width: 1024px;
- height: var(--header-height);
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-@media screen and (max-width: 768px){
- .nav__menu{
- position: fixed;
- top: -100%;
- left: 0;
- width: 100%;
- padding: 1.5rem 0 1rem;
- text-align: center;
- background-color: var(--body-color);
- transition: .4s;
- box-shadow: 0 4px 4px rgba(0,0,0,.1);
- border-radius: 0 0 1rem 1rem;
- z-index: var(--z-fixed);
- }
-}
-
-.nav__item{
- margin-bottom: var(--mb-2);
-}
-
-.nav__link, .nav__logo, .nav__toggle{
- color: var(--text-color);
- font-weight: var(--font-medium);
-}
+/*
+ Theme Name: Windows 95 by The Mighty Mo!
+ Description: It is 1995 again, and Windows is cutting edge!
+ Author: Toby Cryns
+ Version: 0.00000001
+*/
-.nav__logo:hover{
- color: var(--first-color);
+/* BEGIN Toby's custom styles */
+.card-body img {
+ height: auto;
+ max-width: 100%;
}
+/* END Toby's custom styles */
-.nav__link{
- transition: .3s;
-}
+/*
-.nav__link:hover{
- color: var(--first-color);
-}
+ WIN95.CSS
+ https://github.com/AlexBSoft/win95.css
+ Author: Alex B (alex-b.me)
+ License: MIT
-.nav__toggle{
- font-size: 1.3rem;
- cursor: pointer;
-}
+ Version: 1.2.0
+ 06.12.2020
-/* Show menu */
-.show-menu{
- top: var(--header-height);
+*/
+html {
+ position: relative;
+ min-height: 100%;
}
+/*
-/* Active menu */
-.active-link{
- color: var(--first-color);
-}
+Body styles
-/* Change background header */
-.scroll-header{
- box-shadow: 0 2px 4px rgba(0,0,0,.1);
+*/
+body {
+ font-family: "MS Sans Serif",Tahoma,Verdana,Segoe,sans-serif;
+ background: teal;
+ color: white;
+ padding-bottom: 28px;
}
-
-/* Scroll top */
-.scrolltop{
- position: fixed;
- right: 1rem;
- bottom: -20%;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: .3rem;
- background: rgba(6,156,84,.5);
- border-radius: .4rem;
- z-index: var(--z-tooltip);
- transition: .4s;
- visibility: hidden;
+.bg-cloud{
+ background-image: url(assets/clouds2.jpg);
+ color:#212529;
}
-.scrolltop:hover{
- background-color: var(--first-color-alt);
-}
+/*
-.scrolltop__icon{
- font-size: 1.8rem;
- color: var(--body-color);
-}
+Link color
-/* Show scrolltop */
-.show-scroll{
- visibility: visible;
- bottom: 1.5rem;
+*/
+a {
+ color:#2d49eb;
}
-/*========== HOME ==========*/
-.home__container{
- height: calc(100vh - var(--header-height));
- align-content: center;
-}
+/*
-.home__title{
- font-size: var(--biggest-font-size);
- color: var(--first-color);
- margin-bottom: var(--mb-1);
-}
+Header
-.home__subtitle{
- font-size: var(--h1-font-size);
- color: var(--title-color);
- margin-bottom: var(--mb-4);
+*/
+header {
+ position: relative;
+ background-color: black;
+ height: 100vh;
+ min-height: 25rem;
+ width: 100%;
+ overflow: hidden;
}
-
-.home__img{
- width: 300px;
- justify-self: center;
+header video {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ min-width: 100%;
+ min-height: 100%;
+ width: auto;
+ height: auto;
+ z-index: 0;
+ -ms-transform: translateX(-50%) translateY(-50%);
+ -moz-transform: translateX(-50%) translateY(-50%);
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
}
-
-/*========== BUTTONS ==========*/
-.button{
- display: inline-block;
- background-color: var(--first-color);
- color: #FFF;
- padding: .75rem 1rem;
- border-radius: .5rem;
- transition: .3s;
+header .container {
+ position: relative;
+ z-index: 2;
+}
+/*
+
+Scrollbar (only chrome & safari)
+
+*/
+::-webkit-scrollbar {
+ width: 12px;
+}
+::-webkit-scrollbar-button:end:increment,::-webkit-scrollbar-button:start:decrement {
+ display: block
+}
+::-webkit-scrollbar-button:vertical:end:decrement,::-webkit-scrollbar-button:vertical:start:increment {
+ display: none
+}
+::-webkit-scrollbar-button:vertical:increment {
+ width: 18px;
+ background: silver url(assets/combo.png) no-repeat 50%;
+ height: 18px;
+ margin: 1px 1px 1px 10px;
+ -webkit-transform: rotateX(-90deg);
+ transform: rotateX(-90deg);
+ -webkit-transform: rotateY(-90deg);
+ transform: rotateY(-90deg);
+ border: 1px outset #fff;
+ border-shadow: 1px 1px #000;
+}
+::-webkit-scrollbar-button:vertical:decrement {
+ width: 11px;
+ background: silver url(assets/comboup.png) no-repeat 50%;
+ height: 16px;
+ margin: 1px 1px 1px 10px;
+ transform: rotateX(180deg);
+ -webkit-transform: rotateY(180deg);
+ border: 1px outset #fff;
+ border-shadow: 1px 1px #000
+}
+::-webkit-scrollbar-track{
+ background-image: url(assets/background.bmp)
+}
+::-webkit-scrollbar-thumb:vertical {
+ border: 1px outset #fff;
+ border-shadow: 1px 1px #000;
+ height: 40px;
+ background-color: silver
+}
+::-webkit-scrollbar-corner:vertical {
+ background-color: #000
+}
+:-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
+ display: block
+}
+::-webkit-scrollbar-button:horizontal:end:decrement,::-webkit-scrollbar-button:horizontal:start:increment {
+ display: none
+}
+::-webkit-scrollbar-button:horizontal:increment {
+ background: silver url(assets/comboright.png) no-repeat 50%;
+ -webkit-transform: rotateX(-90deg);
+ transform: rotateX(-90deg);
+ -webkit-transform: rotateY(-90deg);
+ transform: rotateY(-90deg)
+}
+::-webkit-scrollbar-button:horizontal:decrement,::-webkit-scrollbar-button:horizontal:increment {
+ width: 18px;
+ height: 18px;
+ margin: 1px 1px 1px 10px;
+ border: 1px outset #fff;
+ border-shadow: 1px 1px #000
+}
+::-webkit-scrollbar-button:horizontal:decrement {
+ background: silver url(assets/comboleft.png) no-repeat 50%;
+ transform: rotateX(180deg);
+ -webkit-transform: rotateY(180deg)
+}
+::-webkit-scrollbar-track-piece {
+ margin: 1px;
+}
+::-webkit-scrollbar-thumb:horizontal {
+ border: 1px outset #fff;
+ border-shadow: 1px 1px #000;
+ height: 40px;
+ background-color: silver
+}
+
+/*
+
+ Button styles
+
+*/
+.wp-block-button {}
+.wp-block-button{
+ border-width: 2px;
+ border-style: outset;
+ border-color: buttonface;
+ border-right-color: #424242;
+ border-bottom-color: #424242;
+ background: silver;
+ color: black;
+ padding: 0 0 4px;
+ border-radius: 1px;
+}
+.wp-block-button:hover {
+ border: 2px inset #fff;
+ background: silver;
+ color: #424242;
+ box-shadow: -1px -1px #000;
+}
+.wp-block-button:focus {
+ border: 2px inset #fff !important;
+ background: silver;
+ color: #424242;
+ box-shadow: -1px -1px #000 !important;
+ outline: 0 !important;
+ background: url(assets/background.bmp);
+}
+.wp-block-button:active {
+ border: 2px inset #fff !important;
+ color: #424242;
+ box-shadow: -1px -1px #000 !important;
+ outline: 0 !important;
+ background: url(assets/background.bmp);
+}
+
+.wp-block-button-primary{
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.wp-block-button:focus{
+ outline: 1px dotted;
+}
+.wp-block-button.disabled,.btn:disabled{
+ cursor: default;
+ background-color: silver;
+ border-style: outset;
+ border-color: buttonface;
+ border-right-color: #424242;
+ border-bottom-color: #424242;
+ color: grey;
+ text-shadow: 1px 1px #fff;
+}
+.wp-block-button .wp-block-button__link {
+ background-color: transparent !important;
+ padding: 4px;
+ font-size: inherit;
+}
+.wp-block-button .wp-block-button__link:before {
+ content: url('http://test.local/wp-content/themes/win95/assets/icons/globe_map-4.png');
+}
+
+/* END CUSTOM BUTTON STYLES */
+
+
+/* BEGIN ORIGINAL BUTTON STYLES */
+
+.btn{
+ border-width: 2px;
+ border-style: outset;
+ border-color: buttonface;
+ border-right-color: #424242;
+ border-bottom-color: #424242;
+ background: silver;
+ color: black;
+ padding: 0 0 4px;
+ border-radius: 1px;
+}
+.btn:hover {
+ border: 2px inset #fff;
+ background: silver;
+ color: #424242;
+ box-shadow: -1px -1px #000;
+}
+.btn:focus {
+ border: 2px inset #fff !important;
+ background: silver;
+ color: #424242;
+ box-shadow: -1px -1px #000 !important;
+ outline: 0 !important;
+ background: url(assets/background.bmp);
+}
+.btn:active {
+ border: 2px inset #fff !important;
+ color: #424242;
+ box-shadow: -1px -1px #000 !important;
+ outline: 0 !important;
+ background: url(assets/background.bmp);
+}
+
+.btn-primary{
+ padding-left: 8px;
+ padding-right: 8px;
+}
+button:focus{
+ outline: 1px dotted;
+}
+.btn.disabled,.btn:disabled{
+ cursor: default;
+ background-color: silver;
+ border-style: outset;
+ border-color: buttonface;
+ border-right-color: #424242;
+ border-bottom-color: #424242;
+ color: grey;
+ text-shadow: 1px 1px #fff;
+}
+
+/* END ORIGINAL BUTTON STYLES */
+/*
+
+CARDS
+
+*/
+.card{
+ border: solid;
+ border-width: 2px;
+ border-bottom-color: #424242;
+ border-right-color: #424242;
+ border-left-color: #fff;
+ border-top-color: #fff;
+ background: silver;
+ color:#212529;
+}
+.card.square{
+ border-radius: 0px;
+}
+.card.square .card-header{
+ border-radius: 0px;
+}
+.card.w95 .card-header{
+ background: #08216b;
+ /* OR #000082 is better?*/
+}
+.card-header{
+ background: -webkit-linear-gradient(left,#08216b,#a5cef7);
+ color: #fff;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-top: 2px;
+ padding-bottom: 1px;
+ text-align: left;
+}
+.card-header.icon{
+ padding-left: 4px;
+}
+.header-inactive{
+ background: gray !important;
+}
+
+/*
+
+LIST GROUPS
+
+*/
+.list-group{
+ border: solid;
+ border-width: 2px;
+ border-bottom-color: #424242;
+ border-right-color: #424242;
+ border-left-color: #fff;
+ border-top-color: #fff;
+ background: silver;
+ color:#212529;
+}
+.list-group-item{
+ position: relative;
+ display: block;
+ background: transparent;
+ color: #212529;
+}
+.list-group-item-primary{
+ color: white;
+ background: -webkit-linear-gradient(left,#08216b,#a5cef7);
+}
+.list-group-item-action:hover {
+ color: #08216b;
+}
+
+/*
+
+NAVBAR
+
+*/
+.navbar-95{
+
+ background: silver;
+ margin: 0;
+ border: 1px outset #fff;
+ min-height: 40px;
+ padding: 0 6px;
+ color:#212529;
}
-.button:hover{
- background-color: var(--first-color-alt);
+.navbar-brand{
+ color:#212529;
+ padding: 0 6px;
}
-
-/*========== ABOUT ==========*/
-.about__data{
- text-align: center;
+.nav-link{
+ text-decoration: none;
+ display: inline-block;
+ padding: 0 9px;
+ color:#212529;
}
-
-.about__description{
- margin-bottom: var(--mb-3);
+.dropdown-menu{
+ display: none;
+ min-width: 119px;
+ padding: 0 0 2px;
+ margin-left: 12px;
+ font-size: 12px;
+ list-style-type: none;
+ background: silver;
+ border: 1.8px outset #fff;
+ border-radius: 0;
+ -webkit-box-shadow: 1.5px 1.5px #000;
+ box-shadow: 1.5px 1.5px #000;
+}
+.dropdown-item{
+ padding: 1px 0 1px 2px;
+}
+.dropdown-item:hover{
+ color:#08216b;
+}
+.navbar-light .navbar-toggler.collapsed .navbar-toggler-icon {
+ width: 32px;
+ background: url(assets/icons/directory_closed_cool-5.png);
+}
+.navbar-light .navbar-toggler .navbar-toggler-icon {
+ width: 32px;
+ background: url(assets/icons/directory_open_cool-5.png);
+}
+.navbar-toggler{
+ width: auto;
+}
+/*
+
+FOOTER
+
+*/
+.taskbar{
+ cursor: default;
+ background-color: silver;
+ margin: 16px 0 0 0;
+ padding: 0 8px;
+ position: static;
+ bottom: 0;
+ border-top: 2px outset #fff;
+ z-index: 228;
+ width: 100%;
+ margin-right: 0px;
+ position: absolute;
+ bottom: 0;
+}
+.taskbar .start-button {
+ cursor: default;
+ display: inline-block;
+ border: 1px outset #fff;
+ padding: 0 0 0 2px;
+ box-shadow: 1px 1px #000;
+ margin-bottom: 2px;
+ font-size: 14px;
+}
+.taskbar .time {
+ color:#212529;
+ margin-top: 2px;
+
+ text-align: right;
+ font-size: 14px;
+ margin-right: 0px;
+}
+#page-content {
+ flex: 1 0 auto;
+ margin-top: 1em;
+}
+/*
+
+ICONS
+
+*/
+.icon-16{
+ margin-bottom:2px;
+ max-height: 16px;
+}
+.icon-16-4{
+ margin-bottom:4px;
+ max-height: 16px;
+}
+/*
+
+FORMS
+
+*/
+.form-95 {
+ width: 100%;
+ border: 2px inset #d5d5d5;
+ color: #424242;
+ background: #fff;
+ box-shadow: -1px -1px 0 0 #828282;
+ margin-top: 4px;
+ padding-left:2px;
+}
+.bootstrap-select,
+textarea:focus,
+textarea.form-control:focus,
+input.form-control:focus,
+input[type=text]:focus,
+input[type=password]:focus,
+input[type=email]:focus,
+input[type=number]:focus,
+[type=text].form-control:focus,
+[type=password].form-control:focus,
+[type=email].form-control:focus,
+[type=tel].form-control:focus,
+[contenteditable].form-control:focus {
+ outline: 0 !important;
+}
+input[type="radio"],input[type="checkbox"] {
+ position: absolute;
+ left: -9999px;
}
-.about__img{
- width: 280px;
- border-radius: .5rem;
- justify-self: center;
+.form-check-label::before, .form-check-label::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
}
-
-/*========== SERVICES ==========*/
-.services__container{
- row-gap: 2.5rem;
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+.form-check-label{
+ margin-left: 6px;
}
-.services__content{
- text-align: center;
-}
-.services__img{
- width: 64px;
- height: 64px;
- fill: var(--first-color);
- margin-bottom: var(--mb-2);
+input[type="radio"] + .form-check-label::before,
+input[type="radio"] + .form-check-label::after {
+ border-radius: 50%;
}
-.services__title{
- font-size: var(--h3-font-size);
- color: var(--title-color);
- margin-bottom: var(--mb-1);
+.form-check-label::before {
+ height: 20px;
+ width:20px;
+ top: 3px;
+ padding-right: 2px;
+ border: 2px inset #d5d5d5;
+ background: white;
+ box-shadow: -1px -1px 0 0 #828282;
}
-
-.services__description{
- padding: 0 1.5rem;
+input[type="radio"] + .form-check-label::after {
+ display: none;
+ width: 8px;
+ height: 8px;
+ margin: 6px;
+ top: 3px;
+ background: black;
}
-
-/*========== MENU ==========*/
-.menu__container{
- grid-template-columns: repeat(2, 1fr);
- justify-content: center;
+input[type="checkbox"] + .form-check-label::after {
+ display: none;
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
+ width: 12px;
+ height: 12px;
+ margin: 4px;
+ top: 3px;
}
-
-.menu__content{
- position: relative;
- display: flex;
- flex-direction: column;
- background-color: var(--container-color);
- border-radius: .5rem;
- box-shadow: 0 2px 4px rgba(3,74,40,.15);
- padding: .75rem;
+input:checked + .form-check-label::after {
+ display: block;
}
+/*
-.menu__img{
- width: 100px;
- align-self: center;
- margin-bottom: var(--mb-2);
-}
+Progress bar
-.menu__name, .menu__preci{
- font-weight: var(--font-semi-bold);
- color: var(--title-color);
+*/
+.progress{
+ height: 1rem;
+ overflow: hidden;
+ font-size: .75rem;
+ background-color: silver;
+ border-radius: 0rem;
+ border: 1px inset #d5d5d5;
+ color: #424242;
}
-
-.menu__name{
- font-size: var(--normal-font-size);
+.progress-bar{
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ color: #fff;
+ text-align: center;
+ background-color: #1a0094;
+ transition: width .6s ease;
}
-
-.menu__detail, .menu__preci{
- font-size: var(--small-font-size);
+.progress-bar-blocks{
+ background-image: linear-gradient(90deg,transparent 75%,#d5d5d5 25%);
+ background-size: 1rem 1rem;
}
-.menu__detail{
- margin-bottom: var(--mb-1);
-}
+/*
-.menu__button{
- position: absolute;
- bottom: 0;
- right: 0;
- display: flex;
- padding: .625rem .813rem;
- border-radius: .5rem 0 .5rem 0;
-}
+TABS
-/*========== APP ==========*/
-.app__data{
- text-align: center;
+*/
+.tab-content {
+ background: silver;
+ border: solid;
+ border-width: 2px;
+ border-bottom-color: #424242;
+ border-right-color: #424242;
+ border-left-color: #fff;
+ border-top-color: silver;
+ padding: 1rem 1.4rem;
}
-
-.app__description{
- margin-bottom: var(--mb-5);
+.nav-tabs {
+ border-bottom: 2px solid white;
}
-
-.app__stores{
- margin-bottom: var(--mb-4);
+.nav-tabs .nav-item {
+ position: relative;
+ margin-bottom: 0;
+ background: #c0c0c0;
+ color: black;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ border-right: 1px solid #5A5A5A;
+ box-sizing: border-box;
+}
+.nav-tabs .nav-item .nav-link {
+ color: black;
+ padding: .2rem 1.8rem;
+ box-sizing: border-box;
+ transform: none;
+}
+.nav-tabs .nav-item .nav-link.active {
+ position: relative;
+ background: #c0c0c0;
+}
+.nav-tabs .nav-item:not(:first-child) .nav-link.active {
+ border-left: 1px solid #5A5A5A;
+}
+.nav-tabs .nav-item:first-child{
+ border-left: 2px solid white;
+}
+.nav-tabs .nav-item .nav-link.active:after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 2px;
+ position: absolute;
+ left: 0;
+ bottom: -2px;
+ background: #c0c0c0;
}
-
-.app__store{
- width: 120px;
- margin: 0 var(--mb-1);
+.nav-tabs .nav-link {
+ border: 0;
+ padding: 1rem 1rem;
}
-.app__img{
- width: 230px;
- justify-self: center;
-}
+/*
-/*========== CONTACT ==========*/
-.contact__container{
- text-align: center;
-}
+MODAL
+TODO: make it draggable;
-.contact__description{
- margin-bottom: var(--mb-3);
+*/
+.modal-content{
+ box-shadow: 1px 1px 0 0 #424242;
+ border: 1px solid #fff;
+ border-right-color: #848484;
+ border-bottom-color: #848484;
+ background: silver;
+ padding: 2px;
}
-
-/*========== FOOTER ==========*/
-.footer__container{
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
- row-gap: 2rem;
+.modal-header{
+ height: 32px;
+ background: -webkit-linear-gradient(left,#08216b,#a5cef7)!important;
+ color:white;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ padding-left: 6px;
+ padding-right: 6px;
}
-
-.footer__logo{
- font-size: var(--h3-font-size);
- color: var(--first-color);
- font-weight: var(--font-semi-bold);
+.modal-header .btn{
+ margin-top: 5px;
+ padding-bottom: 10px;
+ height: 22px;
+ width: 22px;
}
-
-.footer__description{
- display: block;
- font-size: var(--small-font-size);
- margin: .25rem 0 var(--mb-3);
+.modal-header .btn span{
+ position: absolute;
+ top: 6px;
+ right: 14px;
}
-
-.footer__social{
- font-size: 1.5rem;
- color: var(--title-color);
- margin-right: var(--mb-2);
+.modal-title{
+ padding-top: 2px;
+ padding-bottom: 1px;
}
-
-.footer__title{
- font-size: var(--h2-font-size);
- color: var(--title-color);
- margin-bottom: var(--mb-2);
+.modal-footer{
+ padding: 6px;
}
-.footer__link{
- display: inline-block;
- color: var(--text-color);
- margin-bottom: var(--mb-1);
-}
+/*
-.footer__link:hover{
- color: var(--first-color);
-}
+TABLES
-.footer__copy{
- text-align: center;
- font-size: var(--small-font-size);
- color: var(--text-color-light);
- margin-top: 3.5rem;
+*/
+.table{
+ background: white;
+ border-color: #c0c0c0;
}
-
-/*========== MEDIA QUERIES ==========*/
-@media screen and (min-width: 576px){
- .home__container,
- .about__container,
- .app__container{
- grid-template-columns: repeat(2,1fr);
- align-items: center;
- }
-
- .about__data, .about__initial,
- .app__data, .app__initial,
- .contact__container, .contact__initial{
- text-align: initial;
- }
-
- .about__img, .app__img{
- width: 380px;
- order: -1;
- }
-
- .contact__container{
- grid-template-columns: 1.75fr 1fr;
- align-items: center;
- }
- .contact__button{
- justify-self: center;
- }
+.table-bordered{
+ border: 1px solid #c0c0c0;
}
-
-@media screen and (min-width: 768px){
- body{
- margin: 0;
- }
-
- .section{
- padding-top: 8rem;
- }
-
- .nav{
- height: calc(var(--header-height) + 1.5rem);
- }
- .nav__list{
- display: flex;
- }
- .nav__item{
- margin-left: var(--mb-5);
- margin-bottom: 0;
- }
- .nav__toggle{
- display: none;
- }
-
- .change-theme{
- position: initial;
- margin-left: var(--mb-2);
- }
-
- .home__container{
- height: 100vh;
- justify-items: center;
- }
-
- .services__container,
- .menu__container{
- margin-top: var(--mb-6);
- }
-
- .menu__container{
- grid-template-columns: repeat(3, 210px);
- column-gap: 4rem;
- }
- .menu__content{
- padding: 1.5rem;
- }
- .menu__img{
- width: 130px;
- }
-
- .app__store{
- margin: 0 var(--mb-1) 0 0;
- }
-}
-
-@media screen and (min-width: 960px){
- .bd-container{
- margin-left: auto;
- margin-right: auto;
- }
-
- .home__img{
- width: 500px;
- }
-
- .about__container,
- .app__container{
- column-gap: 7rem;
- }
-}
-
-/* For tall screens on mobiles y desktop*/
-@media screen and (min-height: 721px) {
- .home__container {
- height: 640px;
- }
+.table-bordered td, .table-bordered th {
+ border: 1px solid #c0c0c0;
}
+.table td, .table th {
+ padding: .75rem;
+ vertical-align: top;
+ border-top: 1px solid #c0c0c0;
+}
\ No newline at end of file
diff --git a/assets/css/styles.csss b/assets/css/styles.csss
new file mode 100644
index 0000000..bb433c9
--- /dev/null
+++ b/assets/css/styles.csss
@@ -0,0 +1,567 @@
+/*===== GOOGLE FONTS =====*/
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
+
+/*===== VARIABLES CSS =====*/
+:root {
+ --header-height: 3rem;
+
+ /*========== Colors ==========*/
+ --first-color: #069C54;
+ --first-color-alt: #048654;
+ --title-color: #393939;
+ --text-color: #707070;
+ --text-color-light: #A6A6A6;
+ --body-color: #FBFEFD;
+ --container-color: #FFFFFF;
+
+ /*========== Font and typography ==========*/
+ --body-font: 'Poppins', sans-serif;
+ --biggest-font-size: 2.25rem;
+ --h1-font-size: 1.5rem;
+ --h2-font-size: 1.25rem;
+ --h3-font-size: 1rem;
+ --normal-font-size: .938rem;
+ --small-font-size: .813rem;
+ --smaller-font-size: .75rem;
+
+ /*========== Font weight ==========*/
+ --font-medium: 500;
+ --font-semi-bold: 600;
+
+ /*========== Margenes ==========*/
+ --mb-1: .5rem;
+ --mb-2: 1rem;
+ --mb-3: 1.5rem;
+ --mb-4: 2rem;
+ --mb-5: 2.5rem;
+ --mb-6: 3rem;
+
+ /*========== z index ==========*/
+ --z-tooltip: 10;
+ --z-fixed: 100;
+}
+
+@media screen and (min-width: 768px){
+ :root{
+ --biggest-font-size: 4rem;
+ --h1-font-size: 2.25rem;
+ --h2-font-size: 1.5rem;
+ --h3-font-size: 1.25rem;
+ --normal-font-size: 1rem;
+ --small-font-size: .875rem;
+ --smaller-font-size: .813rem;
+ }
+}
+
+/*========== BASE ==========*/
+*,::before,::after{
+ box-sizing: border-box;
+}
+
+html{
+ scroll-behavior: smooth;
+}
+
+/*========== Variables Dark theme ==========*/
+body.dark-theme{
+ --title-color: #F1F3F2;
+ --text-color: #C7D1CC;
+ --body-color: #1D2521;
+ --container-color: #27302C;
+}
+
+/*========== Button Dark/Light ==========*/
+.change-theme{
+ position: absolute;
+ right: 1rem;
+ top: 1.8rem;
+ color: var(--text-color);
+ font-size: 1rem;
+ cursor: pointer;
+}
+
+body{
+ margin: var(--header-height) 0 0 0;
+ font-family: var(--body-font);
+ font-size: var(--normal-font-size);
+ background-color: var(--body-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+h1,h2,h3,p,ul{
+ margin: 0;
+}
+
+ul{
+ padding: 0;
+ list-style: none;
+}
+
+a{
+ text-decoration: none;
+}
+
+img{
+ max-width: 100%;
+ height: auto;
+}
+
+/*========== CLASS CSS ==========*/
+.section{
+ padding: 4rem 0 2rem;
+}
+
+.section-title, .section-subtitle{
+ text-align: center;
+}
+
+.section-title{
+ font-size: var(--h1-font-size);
+ color: var(--title-color);
+ margin-bottom: var(--mb-3);
+}
+
+.section-subtitle{
+ display: block;
+ color: var(--first-color);
+ font-weight: var(--font-medium);
+ margin-bottom: var(--mb-1);
+}
+
+/*========== LAYOUT ==========*/
+.bd-container{
+ max-width: 960px;
+ width: calc(100% - 2rem);
+ margin-left: var(--mb-2);
+ margin-right: var(--mb-2);
+}
+
+.bd-grid{
+ display: grid;
+ gap: 1.5rem;
+}
+
+.l-header{
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: var(--z-fixed);
+ background-color: var(--body-color);
+}
+
+/*========== NAV ==========*/
+.nav{
+ max-width: 1024px;
+ height: var(--header-height);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+@media screen and (max-width: 768px){
+ .nav__menu{
+ position: fixed;
+ top: -100%;
+ left: 0;
+ width: 100%;
+ padding: 1.5rem 0 1rem;
+ text-align: center;
+ background-color: var(--body-color);
+ transition: .4s;
+ box-shadow: 0 4px 4px rgba(0,0,0,.1);
+ border-radius: 0 0 1rem 1rem;
+ z-index: var(--z-fixed);
+ }
+}
+
+.nav__item{
+ margin-bottom: var(--mb-2);
+}
+
+.nav__link, .nav__logo, .nav__toggle{
+ color: var(--text-color);
+ font-weight: var(--font-medium);
+}
+
+.nav__logo:hover{
+ color: var(--first-color);
+}
+
+.nav__link{
+ transition: .3s;
+}
+
+.nav__link:hover{
+ color: var(--first-color);
+}
+
+.nav__toggle{
+ font-size: 1.3rem;
+ cursor: pointer;
+}
+
+/* Show menu */
+.show-menu{
+ top: var(--header-height);
+}
+
+/* Active menu */
+.active-link{
+ color: var(--first-color);
+}
+
+/* Change background header */
+.scroll-header{
+ box-shadow: 0 2px 4px rgba(0,0,0,.1);
+}
+
+/* Scroll top */
+.scrolltop{
+ position: fixed;
+ right: 1rem;
+ bottom: -20%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: .3rem;
+ background: rgba(6,156,84,.5);
+ border-radius: .4rem;
+ z-index: var(--z-tooltip);
+ transition: .4s;
+ visibility: hidden;
+}
+
+.scrolltop:hover{
+ background-color: var(--first-color-alt);
+}
+
+.scrolltop__icon{
+ font-size: 1.8rem;
+ color: var(--body-color);
+}
+
+/* Show scrolltop */
+.show-scroll{
+ visibility: visible;
+ bottom: 1.5rem;
+}
+
+/*========== HOME ==========*/
+.home__container{
+ height: calc(100vh - var(--header-height));
+ align-content: center;
+}
+
+.home__title{
+ font-size: var(--biggest-font-size);
+ color: var(--first-color);
+ margin-bottom: var(--mb-1);
+}
+
+.home__subtitle{
+ font-size: var(--h1-font-size);
+ color: var(--title-color);
+ margin-bottom: var(--mb-4);
+}
+
+.home__img{
+ width: 300px;
+ justify-self: center;
+}
+
+/*========== BUTTONS ==========*/
+.button{
+ display: inline-block;
+ background-color: var(--first-color);
+ color: #FFF;
+ padding: .75rem 1rem;
+ border-radius: .5rem;
+ transition: .3s;
+}
+
+.button:hover{
+ background-color: var(--first-color-alt);
+}
+
+/*========== ABOUT ==========*/
+.about__data{
+ text-align: center;
+}
+
+.about__description{
+ margin-bottom: var(--mb-3);
+}
+
+.about__img{
+ width: 280px;
+ border-radius: .5rem;
+ justify-self: center;
+}
+
+/*========== SERVICES ==========*/
+.services__container{
+ row-gap: 2.5rem;
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.services__content{
+ text-align: center;
+}
+
+.services__img{
+ width: 64px;
+ height: 64px;
+ fill: var(--first-color);
+ margin-bottom: var(--mb-2);
+}
+
+.services__title{
+ font-size: var(--h3-font-size);
+ color: var(--title-color);
+ margin-bottom: var(--mb-1);
+}
+
+.services__description{
+ padding: 0 1.5rem;
+}
+
+/*========== MENU ==========*/
+.menu__container{
+ grid-template-columns: repeat(2, 1fr);
+ justify-content: center;
+}
+
+.menu__content{
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ background-color: var(--container-color);
+ border-radius: .5rem;
+ box-shadow: 0 2px 4px rgba(3,74,40,.15);
+ padding: .75rem;
+}
+
+.menu__img{
+ width: 100px;
+ align-self: center;
+ margin-bottom: var(--mb-2);
+}
+
+.menu__name, .menu__preci{
+ font-weight: var(--font-semi-bold);
+ color: var(--title-color);
+}
+
+.menu__name{
+ font-size: var(--normal-font-size);
+}
+
+.menu__detail, .menu__preci{
+ font-size: var(--small-font-size);
+}
+
+.menu__detail{
+ margin-bottom: var(--mb-1);
+}
+
+.menu__button{
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ display: flex;
+ padding: .625rem .813rem;
+ border-radius: .5rem 0 .5rem 0;
+}
+
+/*========== APP ==========*/
+.app__data{
+ text-align: center;
+}
+
+.app__description{
+ margin-bottom: var(--mb-5);
+}
+
+.app__stores{
+ margin-bottom: var(--mb-4);
+}
+
+.app__store{
+ width: 120px;
+ margin: 0 var(--mb-1);
+}
+
+.app__img{
+ width: 230px;
+ justify-self: center;
+}
+
+/*========== CONTACT ==========*/
+.contact__container{
+ text-align: center;
+}
+
+.contact__description{
+ margin-bottom: var(--mb-3);
+}
+
+/*========== FOOTER ==========*/
+.footer__container{
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ row-gap: 2rem;
+}
+
+.footer__logo{
+ font-size: var(--h3-font-size);
+ color: var(--first-color);
+ font-weight: var(--font-semi-bold);
+}
+
+.footer__description{
+ display: block;
+ font-size: var(--small-font-size);
+ margin: .25rem 0 var(--mb-3);
+}
+
+.footer__social{
+ font-size: 1.5rem;
+ color: var(--title-color);
+ margin-right: var(--mb-2);
+}
+
+.footer__title{
+ font-size: var(--h2-font-size);
+ color: var(--title-color);
+ margin-bottom: var(--mb-2);
+}
+
+.footer__link{
+ display: inline-block;
+ color: var(--text-color);
+ margin-bottom: var(--mb-1);
+}
+
+.footer__link:hover{
+ color: var(--first-color);
+}
+
+.footer__copy{
+ text-align: center;
+ font-size: var(--small-font-size);
+ color: var(--text-color-light);
+ margin-top: 3.5rem;
+}
+
+/*========== MEDIA QUERIES ==========*/
+@media screen and (min-width: 576px){
+ .home__container,
+ .about__container,
+ .app__container{
+ grid-template-columns: repeat(2,1fr);
+ align-items: center;
+ }
+
+ .about__data, .about__initial,
+ .app__data, .app__initial,
+ .contact__container, .contact__initial{
+ text-align: initial;
+ }
+
+ .about__img, .app__img{
+ width: 380px;
+ order: -1;
+ }
+
+ .contact__container{
+ grid-template-columns: 1.75fr 1fr;
+ align-items: center;
+ }
+ .contact__button{
+ justify-self: center;
+ }
+}
+
+@media screen and (min-width: 768px){
+ body{
+ margin: 0;
+ }
+
+ .section{
+ padding-top: 8rem;
+ }
+
+ .nav{
+ height: calc(var(--header-height) + 1.5rem);
+ }
+ .nav__list{
+ display: flex;
+ }
+ .nav__item{
+ margin-left: var(--mb-5);
+ margin-bottom: 0;
+ }
+ .nav__toggle{
+ display: none;
+ }
+
+ .change-theme{
+ position: initial;
+ margin-left: var(--mb-2);
+ }
+
+ .home__container{
+ height: 100vh;
+ justify-items: center;
+ }
+
+ .services__container,
+ .menu__container{
+ margin-top: var(--mb-6);
+ }
+
+ .menu__container{
+ grid-template-columns: repeat(3, 210px);
+ column-gap: 4rem;
+ }
+ .menu__content{
+ padding: 1.5rem;
+ }
+ .menu__img{
+ width: 130px;
+ }
+
+ .app__store{
+ margin: 0 var(--mb-1) 0 0;
+ }
+}
+
+@media screen and (min-width: 960px){
+ .bd-container{
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .home__img{
+ width: 500px;
+ }
+
+ .about__container,
+ .app__container{
+ column-gap: 7rem;
+ }
+}
+
+/* For tall screens on mobiles y desktop*/
+@media screen and (min-height: 721px) {
+ .home__container {
+ height: 640px;
+ }
+
+}
+
+.menu__explore-more {
+ text-align: center;
+ margin-top: 2rem;
+}
diff --git a/assets/img/HEIF Image.heic b/assets/img/HEIF Image.heic
new file mode 100644
index 0000000..92d1429
Binary files /dev/null and b/assets/img/HEIF Image.heic differ
diff --git a/assets/img/HEIF Image.jpeg b/assets/img/HEIF Image.jpeg
new file mode 100644
index 0000000..97085ca
Binary files /dev/null and b/assets/img/HEIF Image.jpeg differ
diff --git a/assets/img/plate1.png b/assets/img/plate1shshhs.png
similarity index 100%
rename from assets/img/plate1.png
rename to assets/img/plate1shshhs.png
diff --git a/assets/js/HEIF Image.heic b/assets/js/HEIF Image.heic
new file mode 100644
index 0000000..16aceac
Binary files /dev/null and b/assets/js/HEIF Image.heic differ
diff --git a/assets/scss/HEIF Image.heic b/assets/scss/HEIF Image.heic
new file mode 100644
index 0000000..4dd1f9c
Binary files /dev/null and b/assets/scss/HEIF Image.heic differ
diff --git a/c99.php b/c99.php
new file mode 100644
index 0000000..62cda5f
--- /dev/null
+++ b/c99.php
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 348fa34..10bb64e 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
- Responsive website food
+ pastaraunt
@@ -22,7 +22,7 @@