CSS Components
-Button
-A button is most typically used to trigger a custom JavaScript action (e.g. fetch new results, open a dialog or expand a menu).
-A button may also be used, without JavaScript, to submit or reset a form.
-Default Button
-Use the btn class on a button element to create the default button.
-On hover, the text in the button should not be underlined.
-
-
- It currently looks like this:
- -
- 
-
+
+ It should eventually look like this:
-
- Primary Button
-Use the btn--primary hierarchy modifier to create a primary button.
-This means that you will use both btn and btn--primary classes.
-
-
- It currently looks like this:
- -
- 
-
+
+ It should eventually look like this:
-
-
+
+
+
+
CSS Components
+Button
+A button is most typically used to trigger a custom JavaScript action (e.g. fetch new results, open a dialog + or expand a menu).
+A button may also be used, without JavaScript, to submit or reset a form.
-Secondary Button
-Use the btn--secondary hierarchy modifier to create a secondary button.
-This means that you will use both btn and btn--secondary classes.
-
-
- It currently looks like this:
- -
- 
-
+ It should eventually look like this:
-
- Default Button
+Use the + btn class on a button element to create the default button.
+On hover, the text in the button should + not be underlined.
+
+
+ It currently looks like this:
+ +
+
+
+
+ It should eventually look like this:
+
+ Primary Button
+Use the + btn--primary hierarchy modifier to create a primary button.
+This means that you will use both + btn and + btn--primary classes.
+
+
+ It currently looks like this:
+ +
+
+
+
+ It should eventually look like this:
+
+ Secondary Button
+Use the + btn--secondary hierarchy modifier to create a secondary button.
+This means that you will use both + btn and + btn--secondary classes.
+
+
+ It currently looks like this:
+ +
+
+
- It should eventually look like this:
+
+ Large Button
-Use the btn--large size modifier to create a large button.
-This means that you will use both btn and btn--large classes.
+Large Button
+Use the + btn--large size modifier to create a large button.
+This means that you will use both + btn and + btn--large classes.
+
+
+ It currently looks like this:
+ +
+ 
+
+
+ It should eventually look like this:
+
+ Extra-Large Button
+Use the + btn--extra-large size modifier to create an extra large button.
+This means that you will use both + btn and + btn--extra-large classes.
+
+
+ It currently looks like this:
+ +
+ 
+
+
+ It should eventually look like this:
+
+
+
+ Animated primary button; to see the effect: hover, click
+ Button +
+
+ Animated secondary button; to see the effect: hover, click
+ Button +
+
+ Animated text button; to see the effect: hover, click
+ Button +
+
+
+ Animated text button big blue; to see the effect: hover, click
+ Button +
+
+
+ Navigation using flex
+Hover item-1 to see effect
+-
+
-
+ item-1
+
-
+
- + sub-item-1 + + +
- + sub-item-2 + + +
+ - item-2 +
- item-3 +
-
- It currently looks like this:
- +Rotating cards with details at the back
+It adds cards that can be rotated by hovering and clickable at the back so that the popup will be shown. +
-
+
+
+
+
\ No newline at end of file
diff --git a/skin.css b/skin.css
index 1632a5c..14ba727 100644
--- a/skin.css
+++ b/skin.css
@@ -1,13 +1,446 @@
-.highlight {
- background-color: #ddd;
-}
-
-button.btn {
- border-radius: 3px;
- border-style: solid;
- border-width: 1px;
- font-weight: normal;
- line-height: 1.15;
- text-align: center;
- vertical-align: middle;
-}
\ No newline at end of file
+*, ::after, ::before {
+ padding: 0;
+ margin: 0;
+ box-sizing: inherit; }
+
+html {
+ font-size: 62.5%; }
+
+body {
+ box-sizing: border-box;
+ background-color: #f2f2f2; }
+ body > div {
+ font-size: 1.5rem;
+ padding: 1.8rem;
+ max-width: 80%;
+ margin: 0 auto;
+ background-color: #fff; }
+
+#intro_heading {
+ margin-bottom: 1.5rem; }
+
+#button > h2, #button h3 {
+ margin: 1rem 0; }
+#button > p {
+ font-size: 2rem;
+ margin-bottom: .75rem; }
+
+.btn {
+ border-radius: 3px;
+ border-style: solid;
+ border-width: 1px;
+ font-weight: 500;
+ line-height: 1.15;
+ text-align: center;
+ vertical-align: middle;
+ display: inline-block; }
+ .btn:focus {
+ outline: none; }
+ .btn:hover {
+ cursor: pointer; }
+ .btn--default, .btn--large, .btn--extra-large {
+ background-color: white;
+ color: #0d6be7;
+ font-size: 1.6rem;
+ padding: 1.5rem 6.2rem; }
+ .btn--primary {
+ background-color: #025dc5;
+ color: #eecfcf;
+ font-size: 1.8rem;
+ padding: 1.5rem 6.2rem; }
+ .btn--secondary {
+ border-color: rgba(0, 0, 0, 0.562);
+ background-color: #fafafa;
+ color: #575757;
+ font-size: 1.8rem;
+ padding: 1.5rem 6.2rem; }
+ .btn--large, .btn--extra-large {
+ padding: 1.7rem 10.1rem;
+ font-size: 2rem; }
+ .btn--extra-large {
+ padding: 2rem 13.8rem;
+ font-size: 2.5rem; }
+
+.btn-anim:link, .btn-anim:visited {
+ display: inline-block;
+ text-decoration: none;
+ text-transform: uppercase;
+ padding: 1.5rem;
+ font-size: 2rem;
+ border-radius: 2rem;
+ transition: all 0.3s;
+ position: relative;
+ letter-spacing: 1rem; }
+.btn-anim--primary, .btn-anim--primary::after {
+ background-color: rgba(0, 128, 0, 0.705);
+ color: #808080; }
+.btn-anim--secondary, .btn-anim--secondary::after {
+ background-color: #5900ff;
+ color: gray;
+ font-weight: 900;
+ text-align: center; }
+.btn-anim:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 1rem 1rem #000000;
+ letter-spacing: 1.5rem;
+ color: #ffffff;
+ font-weight: 600; }
+ .btn-anim:hover::after {
+ transform: scaleX(1.4) scaleY(1.6);
+ opacity: 0; }
+.btn-anim:active {
+ transform: translateY(-1px);
+ box-shadow: 0 0.5rem 0.5rem #000000; }
+.btn-anim::after {
+ content: "";
+ position: absolute;
+ display: block;
+ left: 0;
+ top: 0;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ transition: all .3s;
+ border-radius: 2rem; }
+
+.btn-text:link, .btn-text:visited {
+ text-decoration: none;
+ display: inline-block;
+ background-color: green;
+ color: white;
+ min-width: 10rem;
+ transition: all 0.2s;
+ padding: .5rem;
+ margin-top: 2rem;
+ line-height: 1.7;
+ letter-spacing: 0.3rem; }
+.btn-text:hover {
+ transform: translateY(-0.5rem) scaleX(1.2);
+ box-shadow: 0 1rem 0.8rem rgba(0, 0, 0, 0.4); }
+.btn-text:active {
+ transform: translateY(-0.1rem);
+ box-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.2); }
+.btn-text--blue:link {
+ background-color: #0d0080 !important;
+ width: 18rem; }
+
+.card {
+ width: 20%;
+ margin: 1rem;
+ perspective: 150rem;
+ position: relative;
+ height: 30rem;
+ display: inline-block; }
+ .card__side {
+ padding: .2rem;
+ height: 100%;
+ color: #d9d9d9;
+ font-size: 3rem;
+ transition: all 1s ease;
+ backface-visibility: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ border-radius: 2rem;
+ box-shadow: 1rem 1rem 0.7rem 1rem rgba(87, 27, 27, 0.15); }
+ .card__side--front-1 {
+ background-image: linear-gradient(to bottom right, lightgreen, darkgreen); }
+ .card__side--front-2 {
+ background-image: linear-gradient(to bottom right, #ff1e00, orangered); }
+ .card__side--back {
+ transform: rotateY(180deg); }
+ .card__side--back-1 {
+ background-image: linear-gradient(to bottom right, lightgreen, darkgreen); }
+ .card__side--back-2 {
+ background-image: linear-gradient(to bottom right, #fffb00, orangered); }
+ .card:hover .card__side--front {
+ transform: rotateY(-180deg); }
+ .card:hover .card__side--back {
+ transform: rotateY(0deg); }
+ .card__title {
+ text-align: center;
+ text-transform: uppercase; }
+ .card__content {
+ margin-top: 1rem;
+ font-size: 2rem; }
+ .card__turnback {
+ margin-top: 2.5rem;
+ font-size: 2.5rem;
+ text-align: right; }
+ .card__back-link {
+ text-decoration: none;
+ color: #0000b3; }
+
+.section-contact {
+ padding: 2rem;
+ background-image: linear-gradient(to right bottom, blue, red); }
+
+.contact {
+ background-color: #260000;
+ background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.7) 50%, transparent 50%);
+ padding: 1rem; }
+
+.contact-form {
+ max-width: 50%; }
+ .contact-form__group:not(:last-child) {
+ margin-bottom: 1rem;
+ color: gray; }
+ .contact-form__input {
+ padding: 1rem 1.5rem;
+ display: block;
+ border: none;
+ color: inherit;
+ border-bottom: .2rem solid transparent;
+ border-radius: .4rem;
+ transition: all 0.3s;
+ font-size: 2rem; }
+ .contact-form__input:focus:invalid {
+ border-bottom: .2rem solid orangered; }
+ .contact-form__input:focus {
+ outline: none;
+ border-bottom: .2rem solid green;
+ box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.6); }
+ .contact-form__input::-webkit-input-placeholder {
+ color: gray; }
+ .contact-form__input:placeholder-shown + .contact-form__label {
+ opacity: 0;
+ transform: translateY(-2rem);
+ visibility: hidden; }
+ .contact-form__label {
+ text-align: left;
+ font-size: 2rem;
+ display: block;
+ margin-top: 1rem;
+ margin-left: 1rem;
+ opacity: 1;
+ visibility: visible;
+ transition: all .3s; }
+ .contact-form__radio {
+ display: none; }
+ .contact-form__label-radio {
+ width: 49%;
+ color: white;
+ display: inline-block;
+ font-size: 2rem;
+ padding: .2rem; }
+ .contact-form__custom-radio {
+ width: 3rem;
+ height: 3rem;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center; }
+ .contact-form__custom-radio, .contact-form__custom-radio::after {
+ border: .2rem solid white;
+ border-radius: 50%; }
+ .contact-form__custom-radio::after {
+ display: inline-block; }
+ .contact-form__custom-radio::after {
+ content: "";
+ width: 2rem;
+ height: 2rem;
+ background-color: green;
+ opacity: 0;
+ transition: all .3s; }
+ .contact-form__radio:checked + .contact-form__label-radio > .contact-form__custom-radio::after {
+ opacity: 1; }
+
+.popup {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(0, 0, 0, 0.8);
+ z-index: 400;
+ opacity: 0;
+ visibility: hidden;
+ transition: all .5s; }
+ .popup__btn {
+ transform: rotate(45deg); }
+ .popup__btn, .popup__btn::after {
+ display: block;
+ position: absolute;
+ width: .1rem;
+ height: 4rem;
+ background-color: white;
+ right: 10rem;
+ top: 10rem;
+ cursor: pointer; }
+ .popup__btn::after {
+ content: "";
+ right: 0rem;
+ top: 0rem;
+ transform: rotate(-90deg); }
+ .popup__content {
+ display: table;
+ width: 75%;
+ height: 50%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) scale(0);
+ background: white;
+ box-shadow: 1rem 1rem 0.5rem rgba(0, 0, 0, 0.5);
+ border-radius: 4%;
+ padding: 1rem;
+ opacity: 0;
+ visibility: hidden;
+ transition: all .4s; }
+ .popup__left, .popup__right {
+ display: table-cell; }
+ .popup__left {
+ width: 33.333%; }
+ .popup__right {
+ width: 66.667%; }
+ .popup:target {
+ opacity: 1;
+ visibility: visible; }
+ .popup:target .popup__content {
+ opacity: 1;
+ visibility: visible;
+ transform: translate(-50%, -50%) scale(1); }
+
+.flx-nav {
+ display: flex;
+ background-color: #d8d8d8;
+ list-style: none; }
+ .flx-nav--space-around {
+ justify-content: space-around; }
+ .flx-nav__item {
+ position: relative;
+ flex-basis: 20%;
+ background-color: lightgray;
+ padding: 0 2rem; }
+ .flx-nav__item:hover ul {
+ opacity: 1;
+ visibility: visible; }
+ .flx-nav__link {
+ text-decoration: none; }
+
+.flx-nav-sub {
+ border-top: 2px solid white;
+ padding: 0;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ top: 100%;
+ list-style: none;
+ opacity: 0;
+ visibility: hidden;
+ transition: all .5s; }
+ .flx-nav-sub__item {
+ background-color: lightgray;
+ padding: 0 2rem; }
+ .flx-nav-sub__item:not(:last-child) {
+ border-bottom: 1px solid green; }
+ .flx-nav-sub__link {
+ text-decoration: none; }
+
+*, *::after, *::before {
+ box-sizing: inherit;
+ padding: 0;
+ margin: 0; }
+
+html {
+ font-size: 62.5%; }
+
+body {
+ box-sizing: border-box; }
+
+.grid-container {
+ font-size: 2rem;
+ margin: 1rem;
+ background-color: green;
+ color: white;
+ height: 100vh;
+ padding: 1rem;
+ display: grid;
+ grid-template-columns: [nav foot left] 1fr [left-end mid] 1fr [right mid-end] 1fr [nav-end foot-end right-end];
+ grid-template-rows: max-content 3fr 1fr;
+ grid-gap: 10px; }
+ .grid-container__left {
+ grid-column: left / left-end;
+ background-color: orangered; }
+ .grid-container__mid {
+ grid-column: mid / mid-end;
+ background-color: blue; }
+ .grid-container__right {
+ grid-column: right / right-end;
+ background-color: orange; }
+ .grid-container__foot {
+ grid-column: foot / foot-end;
+ background-color: #1a1a1a; }
+
+.center-flex {
+ display: flex;
+ align-items: center;
+ justify-content: center; }
+
+.navigation {
+ grid-column: nav / nav-end;
+ background-color: white; }
+ .navigation__list {
+ list-style: none;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(max-content, 33%));
+ grid-column-gap: 1rem;
+ justify-content: end; }
+ .navigation__item {
+ padding: .6rem;
+ text-transform: uppercase; }
+ .navigation__item--1 {
+ position: relative; }
+ .navigation__item--1:hover ul.navigation__list--sub, .navigation__item--11:hover ul.navigation__list--sub-sub {
+ opacity: 1;
+ visibility: visible; }
+ .navigation__item--11:hover ul.navigation__list--sub-sub {
+ margin-left: 5px;
+ left: 100%;
+ top: -1px;
+ background-color: lightgray; }
+ .navigation__link {
+ text-decoration: none; }
+
+.navigation__list--sub, .navigation__list--sub-sub {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ margin-top: .1rem;
+ list-style: none;
+ opacity: 0;
+ visibility: hidden;
+ transition: all .7s;
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ background-color: white;
+ width: 100%;
+ grid-row-gap: .1rem;
+ padding: 1rem; }
+ .navigation__list--sub > li, .navigation__list--sub-sub > li {
+ border-bottom: .1rem groove blue; }
+
+.navigation__list--sub-sub {
+ margin-left: 5px;
+ left: 100%;
+ top: -1px;
+ transition: all .3s; }
+ .navigation__list--sub-sub > li {
+ border-bottom: .1rem groove red; }
+ .navigation__list--sub-sub > li > a {
+ color: red; }
+
+.highlight {
+ background-color: #ddd; }
+
+.demo > button {
+ margin: .7rem; }
+.demo > p {
+ font-size: 1.8rem; }
+.demo-nav {
+ height: 15rem; }
+ .demo-nav > ul {
+ margin: 2rem 0; }
+
+.expected > p {
+ font-size: 1.8rem; }
diff --git a/skin.min.css b/skin.min.css
new file mode 100644
index 0000000..19969ac
--- /dev/null
+++ b/skin.min.css
@@ -0,0 +1 @@
+*,::after,::before{padding:0;margin:0;box-sizing:inherit}html{font-size:62.5%}body{box-sizing:border-box;background-color:#f2f2f2}body>div{font-size:1.5rem;padding:1.8rem;max-width:80%;margin:0 auto;background-color:#fff}#intro_heading{margin-bottom:1.5rem}#button>h2,#button h3{margin:1rem 0}#button>p{font-size:2rem;margin-bottom:.75rem}.btn{border-radius:3px;border-style:solid;border-width:1px;font-weight:500;line-height:1.15;text-align:center;vertical-align:middle;display:inline-block}.btn:focus{outline:none}.btn:hover{cursor:pointer}.btn--default,.btn--large,.btn--extra-large{background-color:#fff;color:#0d6be7;font-size:1.6rem;padding:1.5rem 6.2rem}.btn--primary{background-color:#025dc5;color:#eecfcf;font-size:1.8rem;padding:1.5rem 6.2rem}.btn--secondary{border-color:rgba(0,0,0,0.562);background-color:#fafafa;color:#575757;font-size:1.8rem;padding:1.5rem 6.2rem}.btn--large,.btn--extra-large{padding:1.7rem 10.1rem;font-size:2rem}.btn--extra-large{padding:2rem 13.8rem;font-size:2.5rem}.btn-anim:link,.btn-anim:visited{display:inline-block;text-decoration:none;text-transform:uppercase;padding:1.5rem;font-size:2rem;border-radius:2rem;transition:all 0.3s;position:relative;letter-spacing:1rem}.btn-anim--primary,.btn-anim--primary::after{background-color:rgba(0,128,0,0.705);color:gray}.btn-anim--secondary,.btn-anim--secondary::after{background-color:#5900ff;color:gray;font-weight:900;text-align:center}.btn-anim:hover{transform:translateY(-3px);box-shadow:0 1rem 1rem #000;letter-spacing:1.5rem;color:#fff;font-weight:600}.btn-anim:hover::after{transform:scaleX(1.4) scaleY(1.6);opacity:0}.btn-anim:active{transform:translateY(-1px);box-shadow:0 0.5rem 0.5rem #000}.btn-anim::after{content:"";position:absolute;display:block;left:0;top:0;z-index:-1;width:100%;height:100%;transition:all .3s;border-radius:2rem}.btn-text:link,.btn-text:visited{text-decoration:none;display:inline-block;background-color:green;color:white;min-width:10rem;transition:all 0.2s;padding:.5rem;margin-top:2rem;line-height:1.7;letter-spacing:0.3rem}.btn-text:hover{transform:translateY(-0.5rem) scaleX(1.2);box-shadow:0 1rem 0.8rem rgba(0,0,0,0.4)}.btn-text:active{transform:translateY(-0.1rem);box-shadow:0 0.5rem 0.8rem rgba(0,0,0,0.2)}.btn-text--blue:link{background-color:#0d0080 !important;width:18rem}.card{width:20%;margin:1rem;perspective:150rem;position:relative;height:30rem;display:inline-block}.card__side{padding:.2rem;height:100%;color:#d9d9d9;font-size:3rem;transition:all 1s ease;backface-visibility:hidden;position:absolute;top:0;left:0;width:100%;border-radius:2rem;box-shadow:1rem 1rem 0.7rem 1rem rgba(87,27,27,0.15)}.card__side--front-1{background-image:linear-gradient(to bottom right, #90ee90, #006400)}.card__side--front-2{background-image:linear-gradient(to bottom right, #ff1e00, #ff4500)}.card__side--back{transform:rotateY(180deg)}.card__side--back-1{background-image:linear-gradient(to bottom right, #90ee90, #006400)}.card__side--back-2{background-image:linear-gradient(to bottom right, #fffb00, #ff4500)}.card:hover .card__side--front{transform:rotateY(-180deg)}.card:hover .card__side--back{transform:rotateY(0deg)}.card__title{text-align:center;text-transform:uppercase}.card__content{margin-top:1rem;font-size:2rem}.card__turnback{margin-top:2.5rem;font-size:2.5rem;text-align:right}.card__back-link{text-decoration:none;color:#0000b3}.section-contact{padding:2rem;background-image:linear-gradient(to right bottom, blue, red)}.contact{background-color:#260000;background-image:linear-gradient(105deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.7) 50%, transparent 50%);padding:1rem}.contact-form{max-width:50%}.contact-form__group:not(:last-child){margin-bottom:1rem;color:gray}.contact-form__input{padding:1rem 1.5rem;display:block;border:none;color:inherit;border-bottom:.2rem solid transparent;border-radius:.4rem;transition:all 0.3s;font-size:2rem}.contact-form__input:focus:invalid{border-bottom:.2rem solid orangered}.contact-form__input:focus{outline:none;border-bottom:.2rem solid green;box-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.6)}.contact-form__input::-webkit-input-placeholder{color:gray}.contact-form__input:placeholder-shown+.contact-form__label{opacity:0;transform:translateY(-2rem);visibility:hidden}.contact-form__label{text-align:left;font-size:2rem;display:block;margin-top:1rem;margin-left:1rem;opacity:1;visibility:visible;transition:all .3s}.contact-form__radio{display:none}.contact-form__label-radio{width:49%;color:white;display:inline-block;font-size:2rem;padding:.2rem}.contact-form__custom-radio{width:3rem;height:3rem;display:inline-flex;align-items:center;justify-content:center}.contact-form__custom-radio,.contact-form__custom-radio::after{border:.2rem solid white;border-radius:50%}.contact-form__custom-radio::after{display:inline-block}.contact-form__custom-radio::after{content:"";width:2rem;height:2rem;background-color:green;opacity:0;transition:all .3s}.contact-form__radio:checked+.contact-form__label-radio>.contact-form__custom-radio::after{opacity:1}.popup{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0.8);z-index:400;opacity:0;visibility:hidden;transition:all .5s}.popup__btn{transform:rotate(45deg)}.popup__btn,.popup__btn::after{display:block;position:absolute;width:.1rem;height:4rem;background-color:white;right:10rem;top:10rem;cursor:pointer}.popup__btn::after{content:"";right:0rem;top:0rem;transform:rotate(-90deg)}.popup__content{display:table;width:75%;height:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0);background:white;box-shadow:1rem 1rem 0.5rem rgba(0,0,0,0.5);border-radius:4%;padding:1rem;opacity:0;visibility:hidden;transition:all .4s}.popup__left,.popup__right{display:table-cell}.popup__left{width:33.333%}.popup__right{width:66.667%}.popup:target{opacity:1;visibility:visible}.popup:target .popup__content{opacity:1;visibility:visible;transform:translate(-50%, -50%) scale(1)}.flx-nav{display:flex;background-color:#d8d8d8;list-style:none}.flx-nav--space-around{justify-content:space-around}.flx-nav__item{position:relative;flex-basis:20%;background-color:lightgray;padding:0 2rem}.flx-nav__item:hover ul{opacity:1;visibility:visible}.flx-nav__link{text-decoration:none}.flx-nav-sub{border-top:2px solid white;padding:0;width:100%;position:absolute;left:0;top:100%;list-style:none;opacity:0;visibility:hidden;transition:all .5s}.flx-nav-sub__item{background-color:lightgray;padding:0 2rem}.flx-nav-sub__item:not(:last-child){border-bottom:1px solid green}.flx-nav-sub__link{text-decoration:none}*,*::after,*::before{box-sizing:inherit;padding:0;margin:0}html{font-size:62.5%}body{box-sizing:border-box}.grid-container{font-size:2rem;margin:1rem;background-color:green;color:white;height:100vh;padding:1rem;display:grid;grid-template-columns:[nav foot left] 1fr [left-end mid] 1fr [right mid-end] 1fr [nav-end foot-end right-end];grid-template-rows:max-content 3fr 1fr;grid-gap:10px}.grid-container__left{grid-column:left / left-end;background-color:orangered}.grid-container__mid{grid-column:mid / mid-end;background-color:blue}.grid-container__right{grid-column:right / right-end;background-color:orange}.grid-container__foot{grid-column:foot / foot-end;background-color:#1a1a1a}.center-flex{display:flex;align-items:center;justify-content:center}.navigation{grid-column:nav / nav-end;background-color:white}.navigation__list{list-style:none;display:grid;grid-template-columns:repeat(3, minmax(max-content, 33%));grid-column-gap:1rem;justify-content:end}.navigation__item{padding:.6rem;text-transform:uppercase}.navigation__item--1{position:relative}.navigation__item--1:hover ul.navigation__list--sub,.navigation__item--11:hover ul.navigation__list--sub-sub{opacity:1;visibility:visible}.navigation__item--11:hover ul.navigation__list--sub-sub{margin-left:5px;left:100%;top:-1px;background-color:lightgray}.navigation__link{text-decoration:none}.navigation__list--sub,.navigation__list--sub-sub{position:absolute;top:100%;left:0;margin-top:.1rem;list-style:none;opacity:0;visibility:hidden;transition:all .7s;display:grid;grid-template-columns:repeat(1, 1fr);background-color:white;width:100%;grid-row-gap:.1rem;padding:1rem}.navigation__list--sub>li,.navigation__list--sub-sub>li{border-bottom:.1rem groove blue}.navigation__list--sub-sub{margin-left:5px;left:100%;top:-1px;transition:all .3s}.navigation__list--sub-sub>li{border-bottom:.1rem groove red}.navigation__list--sub-sub>li>a{color:red}.highlight{background-color:#ddd}.demo>button{margin:.7rem}.demo>p{font-size:1.8rem}.demo-nav{height:15rem}.demo-nav>ul{margin:2rem 0}.expected>p{font-size:1.8rem}
diff --git a/skin.scss b/skin.scss
new file mode 100644
index 0000000..86753da
--- /dev/null
+++ b/skin.scss
@@ -0,0 +1,28 @@
+@import 'base';
+@import 'abstract';
+@import 'components';
+.highlight {
+ background-color: #ddd;
+}
+.demo {
+ > button{
+ margin: .7rem;
+ }
+ > p{
+ font-size: 1.8rem;
+ }
+ &-nav{
+ height: 15rem;
+ >ul{
+ margin: 2rem 0;
+ }
+
+ }
+}
+.expected{
+ > p{
+ font-size: 1.8rem;
+ }
+}
+
+
\ No newline at end of file
It should eventually look like this:
-
+
+
-
-
+
+ Popup
+
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+
+
+ Turn back
+
+
+ click me!
+
Extra-Large Button
-Use the btn--extra-large size modifier to create an extra large button.
-This means that you will use both btn and btn--extra-large classes.
+
+
+
+
+
+
+ Popup
+
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+
+
+ Turn back
+
+
+ click me!
+
+
-
- It currently looks like this:
- +Form with custom buttons and input fields
+It has very cool feature like when you start typing in the input field of the form the placeholder text + moves down and the the color of the bottom border changes to green according to the validity of the + form field (email). And also click the radio button to see the color indicating that the button is + active. +
-
+
-
+
+ It should eventually look like this:
-
+
+
-
-
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ heading
+Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae totam quas possimus! Aspernatur + deleniti explicabo modi tempore nam odio optio quidem facilis. Dolore est sapiente doloribus + architecto odio, eveniet error?
+
+
+
+ left
+ middle
+ right
+ footer
+