Create a Website like the 90s using New CSS Framework NES.CSS in 2019
There are many CSS Frameworks. But I think NES.CSS has something that is simply awesome. After all, It reminds our childhood and the times we spent while playing video games.
So In this video, I explained how to use and apply it on your websites.
So guys Here is the link and below is the way to install and use it.
All the Information is taken from NES.CSS GitHub Page.
NES.css is a NES-style(8bit-like) CSS Framework.
Installation
Styles
NES.css is available via either npm (preferred), Yarn, or a CDN.
via package manager
npm install nes.css
# or
yarn add nes.css
Our
package.json
contains some additional metadata under the following keys:sass
- path to our main Sass source filestyle
- path to our non-minified CSS
via CDN
Import the CSS via a
<link />
element:<!-- minify -->
<link href="https://unpkg.com/nes.css@2.1.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- core style only -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
Here is my code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://unpkg.com/nes.css@2.1.0/css/nes.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<style>
header{width: 80%; margin: 20px auto; }
.sectionclass{ margin: 40px 0; }
</style>
</head>
<body>
<header>
<section class=" sectionclass nes-container with-title ">
<p class="title">90s Website Thapa</p>
<h1>NES.CSS</h1>
<section class="message-list nes-container">
<section class="message -left">
<i class="nes-bcrikko"></i>
<!-- Balloon -->
<div class="nes-balloon from-left">
<p>Hello NES.css</p>
</div>
</section>
<section class="message -right">
<!-- Balloon -->
<div class="nes-balloon from-right">
<p>DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
Believe me all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)
</p>
</div>
<i class="nes-bcrikko"></i>
</section>
</section>
<br>
<br>
<section class="icon-list nes-container">
<!-- Copyright Nintendo -->
<i class="nes-mario"></i>
<i class="nes-ash"></i>
<i class="nes-pokeball"></i>
<i class="nes-bulbasaur"></i>
<i class="nes-charmander"></i>
<i class="nes-squirtle"></i>
<i class="nes-kirby"></i>
</section>
</header>
</body>
</html>