diff --git a/README.md b/README.md index e0c77ba..46856d0 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,14 @@ # Win95.CSS Make your bootstrap look like Windows 95/98. - -![](https://i.imgur.com/AgQonjb.png) - +

+ + + +

- [Demo](https://alexbsoft.github.io/win95.css/) +- Documentation will be soon. ## Features @@ -24,4 +27,15 @@ Make your bootstrap look like Windows 95/98. - Fully Responsive -- Bootstrap 4 \ No newline at end of file +- Bootstrap 4 + +## Some screenshots + +![](https://i.imgur.com/AgQonjb.png) + +### You can do like that: + +![](https://i.imgur.com/rTDXYOE.png) + +![](https://i.imgur.com/mea9LmK.png) + diff --git a/assets/Svidetel.png b/assets/Svidetel.png new file mode 100644 index 0000000..979ede2 Binary files /dev/null and b/assets/Svidetel.png differ diff --git a/assets/clouds2.jpg b/assets/clouds2.jpg new file mode 100644 index 0000000..cf43cbb Binary files /dev/null and b/assets/clouds2.jpg differ diff --git a/assets/macbook-mockup.png b/assets/macbook-mockup.png new file mode 100644 index 0000000..22a7ed5 Binary files /dev/null and b/assets/macbook-mockup.png differ diff --git a/assets/never-gonna-give-you-up.mp3 b/assets/never-gonna-give-you-up.mp3 new file mode 100644 index 0000000..7b699cc Binary files /dev/null and b/assets/never-gonna-give-you-up.mp3 differ diff --git a/assets/win95.css b/assets/win95.css index 824c98a..2458f27 100644 --- a/assets/win95.css +++ b/assets/win95.css @@ -1,7 +1,10 @@ /* WIN95.CSS + https://github.com/AlexBSoft/win95.css + Author: Alex B (alex-b.me) + Version: 1.0.1 */ html { @@ -15,6 +18,10 @@ body { color: white; padding-bottom: 28px; } +.bg-cloud{ + background-image: url(clouds2.jpg); + color:#212529; +} .btn{ @@ -64,7 +71,8 @@ button:focus{ border-color: buttonface; border-right-color: #424242; border-bottom-color: #424242; - color:#6c757d; + color: grey; + text-shadow: 1px 1px #fff; } /* @@ -93,6 +101,9 @@ CARDS padding-bottom: 1px; text-align: left; } +.card-header.icon{ + padding-left: 4px; +} .header-inactive{ background: gray !important; } @@ -216,6 +227,7 @@ FORMS color: #424242; background: #fff; box-shadow: -1px -1px 0 0 #828282; + margin-top: 4px; padding-left:2px; } .bootstrap-select, @@ -244,6 +256,10 @@ input[type="radio"],input[type="checkbox"] { top: 0; left: 0; } +.form-check-label{ + margin-left: 6px; +} + input[type="radio"] + .form-check-label::before, input[type="radio"] + .form-check-label::after { @@ -253,17 +269,18 @@ input[type="radio"] + .form-check-label::after { .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; - } - input[type="radio"] + .form-check-label::after { display: none; width: 8px; height: 8px; margin: 6px; + top: 3px; background: black; } input[type="checkbox"] + .form-check-label::after { @@ -272,8 +289,66 @@ input[type="checkbox"] + .form-check-label::after { width: 12px; height: 12px; margin: 4px; + top: 3px; } - input:checked + .form-check-label::after { display: block; -} \ No newline at end of file +} +/* + +TABS + +*/ +.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; +} +.nav-tabs { + border-bottom: 2px solid white; +} +.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; +} +.nav-tabs .nav-link { + border: 0; + padding: 1rem 1rem; +} diff --git a/index.html b/index.html index 13641cd..c3da745 100644 --- a/index.html +++ b/index.html @@ -44,11 +44,36 @@ - +

Win95.CSS

Windows 95/98 stylized Bootstrap 4 theme. Responsive. Minimalistic. Modern.

+ +
+
+
+ +
+
+
+
+

Check out personal page

+
+
+
    +
  • Portfolio/Landing template
    • +
  • Alex's page
    • +
  • Cloud background
    • +
  • Winamp
    • +
  • It is very cool
    • +
+ Okay, go +
+
+
+
+
@@ -184,7 +209,7 @@
Author - GitHub + GitHub
By Alex B
diff --git a/personal_page.html b/personal_page.html new file mode 100644 index 0000000..be71ad4 --- /dev/null +++ b/personal_page.html @@ -0,0 +1,198 @@ + + + + + Personal Webpage + + + + + + + + + + + + + +
+

Alex B's personal webpage

+

Who and why.

+
+ +
+
+
+ +
+
+
+
+

About me

+
+
+
    +
  • It is not my photo
    • +
  • My name is Alexander
    • +
  • I am from Russia
    • +
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+

Classic cloud background

+
+
+
    +
  • Yeah thats cool
    • +
  • Like in Windows 98
    • +
  • Welcome to 90s
    • +
  • Made with Win95.css
    • +
+
+
+
+
+

I have winamp on my site

+
+
+
    +
  • Rick Astley included
    • +
  • You can play your own tracks
    • +
  • More info here
    • +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+

Send me e-mail

+
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ + +
+
+
Check it you are spamer
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+ +
+ +
+ + + + + + + + + + + + + + + \ No newline at end of file