THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create a Website like the 90s using New CSS Framework NES.CSS in 2019

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 file
  • style - 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>



No comments:

Post a Comment