Scribd Logo
Upload

Welcome to Scribd!

  • Sddedce

    Uploaded by

    Aadhil Negim
    6 views2 pages

    Original Title

    sddedce

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views2 pages

    Sddedce

    Uploaded by

    Aadhil Negim

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!

    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
    <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