반응형

[ICON] ion-icon 아이콘 사용하기 

https://ionic.io/ionicons

 

Ionicons: The premium icon pack for Ionic Framework

Ionicons is an open-sourced and MIT licensed icon pack.

ionic.io

Installation

If you're using Ionic Framework, Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following <script> near the end of your page, right before the closing </body> tag, to enable them.

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Basic usage

To use a built-in icon from the Ionicons package, populate the name attribute on the ion-icon component:

<ion-icon name="heart"></ion-icon>
반응형
반응형

Magic inspired Social Share Button
-- https://codepen.io/codingstella/pen/gOQqaWo

https://codepen.io/codingstella/pen/gOQqaWo

 

Magic inspired Social Share Button

...

codepen.io

https://codepen.io/codingstella/

 

Coding Stella on CodePen

Amazing CSS Animation That You Have Never Seen 🤒

codepen.io

<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-ae5cde2e-fb64-f510-42d5-4efea99ca66b" crossorigin=""></script>

<div class="menu">
  <div class="toggle">
    <ion-icon name="share-social"></ion-icon>
    </div>
  
      <li style="--i:0;--clr:#1877f2">
      <a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
    </li>
    <li style="--i:1;--clr:#25d366">
      <a href="#"><ion-icon name="logo-whatsapp"></ion-icon></a>
    </li>
    <li style="--i:2;--clr:#1da1f2">
      <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
    </li>
     <li style="--i:3;--clr:#FF5733">
      <a href="#"><ion-icon name="logo-reddit"></ion-icon></a>
    </li>
    <li style="--i:4;--clr:#0a66c2">
      <a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
    </li>
    <li style="--i:5;--clr:#c32aa3">
      <a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
    </li>
    <li style="--i:6;--clr:#1b1e21">
      <a href="#"><ion-icon name="logo-github"></ion-icon></a>
    </li>
    <li style="--i:7;--clr:#ff0000">
      <a href="#"><ion-icon name="logo-youtube"></ion-icon></a>
    </li>
</div>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background: #262433;
}
.menu{
  position:relative;
 width:280px;
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.menu .toggle{
  position:relative;
  height:60px;
  width:60px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 3px 4px rgba(0,0,0,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#333;
  font-size:2rem;
  cursor:pointer;
  transition:1.25s;
  z-index:5;
}
.menu.active .toggle{
  transform:rotate(360deg);
  box-shadow: 0 6px 8px rgba(0,0,0,0.15),
    0 0 0 2px #333,
    0 0 0 8px #fff;
}
.menu li{
  position:absolute;
  left:0;
  list-style:none;
  transition:0.5s;
  transform:rotate(calc(360deg/8 * var(--i)));
  transform-origin:140px;
  scale:0;
  transition-delay: calc(0.05s * var(--i));
}
.menu.active li{
  scale:1;
}
.menu li a{
  position:relative;
  display:flex;
 transform:rotate(calc(360deg/-8 * var(--i)));
  width:60px;
  height:60px;
  background-color:#FFF;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:1.75rem;
  color:var(--clr);
   box-shadow:0 3px 4px rgba(0,0,0,0.15);
  transition:0.5s;
}
.menu li:hover a{
  font-size:2.5rem;
  box-shadow:0 0 0 2px var(--clr),
    0 0 0 6px #fff;
}
const menu=document.querySelector(".menu");
const toggle=document.querySelector(".toggle");
toggle.addEventListener("click",()=>{
  menu.classList.toggle("active");
})
반응형
반응형

bootstrap dashboard 

*** 27 Best Free Bootstrap Admin Templates 2021 
 -> https://athemes.com/collections/free-bootstrap-admin-templates/

 

25+ Best Free Bootstrap Admin Templates 2021 - aThemes

Creating a professional looking dashboard for your website or app needn’t be expensive. Thanks to this collection of the best free Bootstrap admin templates you…

athemes.com

 
1. https://designrevision.com/downloads/shards-dashboard-lite/

2. https://demos.creative-tim.com/light-bootstrap-dashboard/examples/dashboard.html

3. https://webthemez.com/demo/brilliant-free-bootstrap-admin-template/index.html

4. https://demos.wrappixel.com/free-admin-templates/bootstrap/matrix-bootstrap-free/html/index.html

5. https://p.w3layouts.com/demos/28-03-2016/shoppy/web/index.html#

6. https://webthemez.com/demo/target-free-responsive-bootstrap-admin-template/ui-elements.html

  
7. https://demos.wrappixel.com/premium-admin-templates/bootstrap/monster-bootstrap/package/html/horizontal/index4.html
   : 메뉴 상단 

 

Monster Template by WrapPixel

Daniel Kristeen UI/UX Designer Follow 14 Photos 54 Videos 145 Tasks Lorem ipsum dolor sit ametetur adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunLorem ipsum dolor sit ametetur adipisicing elit, sed do e

demos.wrappixel.com

 

8. https://p.w3layouts.com/demos/july-2016/22-07-2016/colored_admin_panel/web/charts.html
   : 작은 좌측메뉴, 컬러풀한 차트

 

Colored an Admin Panel Category Flat Bootstrap Responsive Website Template | Charts :: w3layouts

 

p.w3layouts.com

반응형
반응형

html table css 참고 

nanati.me/html_css_table_design/

 

html/css로 만드는 table 디자인 샘플

html ⁄ css만으로 디자인한 table 샘플 몇가지를 소개할게요^^ 웹에서 테이블은 정보의 가독성을 목적으로 한 것이기 때문에 심플한 디자인이 될 수 밖에 없죠.거기다 장식할만한 파트도 선이나

nanati.me

 

반응형
반응형

Bootstrap - admin LTE

 

version 3 :adminlte.io/themes/dev/AdminLTE/index3.html

 

AdminLTE 3 | Dashboard 3

12% CONVERSION RATE 0.8% SALES RATE 1% REGISTRATION RATE

adminlte.io

version 2 : adminlte.io/themes/AdminLTE/index2.html

 

AdminLTE 2 | Dashboard

Sales: 1 Jan, 2014 - 30 Jul, 2014

adminlte.io

반응형
반응형

Megatype: Easy typographic structure

 

Megatype makes it easy to create typographic structure.

megatype

 

반응형
반응형

Flexy Boxes: A flexbox code generator and playground

 

 

 

Flexy Boxes is a flexbox code generator and playground in one. Just set the options for your flexboxes, preview them, and then output the code.

flexy boxes

 

 

 

 

 

 

반응형
반응형
15 Free Under Construction and Coming Soon Website Templates

 

 

There is always a very high demand of under construction website templates which are otherwise also known as coming soon countdown website html templates which actually helps a webmasters to convey a message in a very professional way. Sometimes we as bloggers do not want our audience to view what is happening behind the scene when a webmaster is preparing a new blog for launch. These Under construction and coming soon templates help to convey this message in a very professional way like :

  • A countdown timer
  • Days remaining to the launch
  • Input Email to inform the visitors of the official launch at a later date
  • And sometimes even the presence of social sharing and like buttons

These Under construction templates which are totally free of cost are a niche alternatives for the ugly looking “site under construction” pages. These brand new and beautiful under construction templates are nothing but well coded html/css web templates. These free coming soon templates are a simple but professional way of informing your visitors that work on the website is going on and meanwhile one can input his/her email and visit the blog at a later date. Visitors can optin their Email IDs so that they get the formal announcement of the launch. These Under construction templates can be worked upon and customized according one’s need and liking.

Download Free Coming Soon & Under Construction HTML Templates

People who are really in need of free coming soon and under construction templates, feel free to go through our list of free html templates for Under construction websites. We have really put in a lot of hard work to bring you the best free coming soon template and beautiful under construction html/css website templates for you to download.

Free Coming Soon Website Template Glacier

A very beautiful free coming soon website template which can be customized as per you needs and liking. Visitors are able to leave their Email IDs for future communication.

You may like this: 25 Free WordPress Magazine Themes

Free-Coming-Soon-Template-Glacier

Click Here For More Info

Coming Soon HTML Template For Bakery

This is a free coming soon template that will entice your taste buds and force you submit your Email ID and also come back when the website is formally launched. This html template is totally free and no backlink is to provided to the original creator.

my-bakery-Coming-Soon-html-Template

Click Here For More Info

Free Coming Soon Page Template For Fashion Website

The perfect coming soon and under construction html template for a website based on the Fashion niche. This free under construction template has all the possible famous social networking sharing links.

we-the-fashion-coming-soon-page-html-template

Click Here For More Info

Free Coming Soon Page Template For iPhone App

This is the perfect coming soon and under construction template for a to be launched iPhone App. There is a get notified button which will let you input your email for future communication and all the social sharing profiles are also there to make use of.

drinkalike-the-iphone-app-coming-soon-template

Click Here For More Info

Taste The coffee HTML Website Template

Perfect under construction html template for any coffee company or any company for that matter. Facebook and twitter social profiles can be included for social engagement.

taste-the-coffee-coming-soon-website-template

Click Here For More Info

Coming Soon HTML Website Template – AutoCare

The ideal html template for under construction websites pertaining to Automobile niche based website and blogs. Social profiles and email are present in the template.

auto-care-coming-soon-website-template-free

Click Here For More Info

Evening Edition Free Coming Soon Website HTML Templates

A beautiful and very creative coming soon website html template for you to download for free. A big input Email ID blank for high conversion to get leads and optins with the presence of social profiles on the top. Enjoy this visual template for free.

evening-edition-coming-soon-html-template

Click Here For More Info

Coming Soon HTML Template – Special Holiday

This can be the ideal website html template for restaurant blogs that are coming soon. Beautiful under construction template will really please the customers.

special-holiday-free-coming-soon-html-template

Click Here For More Info

Just Music Under Construction Free HTML Template

This free Under Construction template is for the Music lovers. With the possibility of incorporating a video trailer or a short teaser of the actual product that will be available after the formal launch. People love videos and they would not mind a beautiful video describing the website about. Email Input is also available in this free coming soon html template.

just-music-free-under-construction-html-template

Click Here For More Info

Deep Blue Free Coming Soon HTML Template

Blue in color and what a majestic coming soon html template it is and that too for free. A very nice big hello is there to greet your readers and all the important contact info is quite big and bold enough. People can optin to get regualr updates about the chain of events regarding any activity on the website.

the-deep-blue-free-coming-soon-web-template

Click Here For More Info

[5 Bonus] – Free Coming Soon HTML Templates For Your Inspiration

Free Coming Soon Template For Company

Coming-Soon-template-Company

Free Coming Soon Website Template Alissa

Free-Coming-Soon-template-Alissa

Under Construction Coming Soon HTML Template

Coming-Soon-template-Under-Construction

Sooner Or Later Free Coming Soon Template

Coming-Soon-template-Sooner-Or-Later

Free Coming Soon HTML Template Download

Free-Coming-Soon-template-download

So these were some of the best Under Construction and coming soon html website templates for you download at totally free of cost. You can use these coming soon html templates till you are working at the back end of your website or blog. This will keep all your visitors engaged and you are also able to get email leads as well. If you have more Coming soon templates, please do share as well.

 

 

반응형

+ Recent posts