Scribd
Upload
94 views3 pages

Indexzz

The document contains code for various neumorphic design elements including checkboxes, radio buttons, buttons, a clock, chips, circles, forms, search bars, segmented controls, icons, sliders, and social media links. It uses HTML, CSS and JavaScript to implement these elements with rounded edges and shadow effects to create a 3D illusion and soft, rounded aesthetic commonly known as neumorphism. Stylesheets are included for fonts, icons and animations.

Uploaded by

Aadhil Negim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
94 views3 pages

Indexzz

The document contains code for various neumorphic design elements including checkboxes, radio buttons, buttons, a clock, chips, circles, forms, search bars, segmented controls, icons, sliders, and social media links. It uses HTML, CSS and JavaScript to implement these elements with rounded edges and shadow effects to create a 3D illusion and soft, rounded aesthetic commonly known as neumorphism. Stylesheets are included for fonts, icons and animations.

Uploaded by

Aadhil Negim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Neumorphic Elements</title>
<link href="https://fonts.googleapis.com/css?
family=Poppins:400,600,700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

<script src="https://kit.fontawesome.com/f0601b0fb2.js"
crossorigin="anonymous"></script>
<script type='module'
src='https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js'></script>
<script nomodule='">
<input id="checkbox-1" type="checkbox">
<label for="checkbox-1">
<i class="material-icons">done</i></label>
</div>
<div class="checkbox__2">
<input id="checkbox-2" type="checkbox" checked>
<label for="checkbox-2">
<i class="material-icons">done</i></label>
</div>
</div>

<div class="radio">
<div class="radio__1">
<input id="radio-1" type="radio" name="radio" value="1">
<label for="radio-1"></label>
</div>

<div class="radio__2">
<input id="radio-2" type="radio" name="radio" value="2" checked>
<label for="radio-2"></label>
</div>
</div>

<div class="btn btn__primary"><p>Button</p></div>


<div class="btn btn__secondary"><p>Button</p></div>

<div class="clock">
<div class="hand hours"></div>
<div class="hand minutes"></div>
<div class="hand seconds"></div>
<div class="point"></div>
<div class="marker">
<span class="marker__1"></span>
<span class="marker__2"></span>
<span class="marker__3"></span>
<span class="marker__4"></span>
</div>
</div>

<div class="chip">
<div class="chip__icon">
<ion-icon name="color-palette"></ion-icon></div>
<p>Neumorphic Design</p>
<div class="chip__close">
<ion-icon name="close"></ion-icon>
</div>
</div>

<div class="circle">
<span class="circle__btn">
<ion-icon class="pause" name="pause"></ion-icon>
<ion-icon class="play" name="play"></ion-icon>
</span>
<span class="circle__back-1"></span>
<span class="circle__back-2"></span>
</div>

<div class="form">
<input type="text" class="form__input" placeholder="Type anything...">
</div>

<div class="search">
<input type="text" class="search__input" placeholder="Search...">
<div class="search__icon">
<ion-icon name="search"></ion-icon>
</div>
</div>

<div class="segmented-control">

<input type="radio" name="radio2" value="3" id="tab-1" checked/>


<label for="tab-1" class= "segmented-control__1">
<p>Tab 1</p></label>

<input type="radio" name="radio2" value="4" id="tab-2" />


<label for="tab-2" class= "segmented-control__2">
<p>Tab 2</p></label>

<input type="radio" name="radio2" value="5" id="tab-3" />


<label for="tab-3" class= "segmented-control__3">
<p>Tab 3</p></label>

<div class="segmented-control__color"></div>
</div>

<div class="icon">
<div class="icon__home">
<ion-icon name="home"></ion-icon></div>
<div class="icon__account">
<ion-icon name="person"></ion-icon></div>
<div class="icon__settings">
<ion-icon name="settings"></ion-icon></div>
</div>

<div class="slider">
<div class="slider__box">
<span class="slider__btn" id="find"></span>
<span class="slider__color"></span>
<span class="slider__tooltip">50%</span>
</div>
</div>
</div>
<a href="https://dribbble.com/myacode" class="dribbble" target="_blank"><ion-icon
name="logo-dribbble"></ion-icon></a>
</div>
<!-- partial -->
<script src="./script.js"></script>

</body>
</html>

You might also like