fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <link rel="stylesheet" href="https://c...content-available-to-author-only...e.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  9.     <style>
  10.         @import url('https://f...content-available-to-author-only...s.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  11.  
  12.         * {
  13.             margin: 0;
  14.             padding: 0;
  15.             box-sizing: border-box;
  16.             font-family: "Poppins", sans-serif;
  17.         }
  18.  
  19.         nav {
  20.             height: 80px;
  21.             background-color: #1b1b1b;
  22.             display: flex;
  23.             align-items: center;
  24.             justify-content: space-between;
  25.             padding: 0px 50px 0px 100px;
  26.         }
  27.  
  28.         nav .logo {
  29.             font-size: 33px;
  30.             color: white;
  31.             font-weight: 600;
  32.         }
  33.  
  34.         nav ul {
  35.             display: flex;
  36.             list-style: none;
  37.         }
  38.  
  39.         nav ul li {
  40.             margin: 0 5px;
  41.         }
  42.  
  43.         nav ul li a {
  44.             color: white;
  45.             text-decoration: none;
  46.             font-size: 18px;
  47.             font-weight: 500;
  48.             letter-spacing: 1px;
  49.             padding: 8px 10px;
  50.             border-radius: 5px;
  51.             transition: all ease 0.3s;
  52.         }
  53.  
  54.         nav ul li a:hover,
  55.         nav ul li a.active {
  56.             background-color: white;
  57.             color: #1b1b1b;
  58.         }
  59.         nav .menu-btn i{
  60.             color: white;
  61.             font-size: 22px;
  62.             cursor: pointer;
  63.             display: none;
  64.         }
  65.         #click{
  66.             display: none;
  67.         }
  68.  
  69.         @media (max-width:940px) {
  70.             nav .menu-btn i{
  71.                 display: block;
  72.             }
  73.             nav ul {
  74.                 position: fixed;
  75.                 top: 80px;
  76.                 left: 0;
  77.                 background: #1b1b1b;
  78.                 height: 100vh;
  79.                 width: 100%;
  80.                 display: block;
  81.                 text-align: center;
  82.                 left: -100%;
  83.                 transition: all 0.3s ease;
  84.             }
  85.             #click:checked ~ ul{
  86.                 left: 0%;
  87.             }
  88.  
  89.             nav ul li {
  90.                 margin: 40px 0;
  91.             }
  92.  
  93.             nav ul li a {
  94.                 font-size: 20px;
  95.                 display: block;
  96.             }
  97.  
  98.             nav ul li a:hover,
  99.             nav ul li a.active {
  100.                 background: none;
  101.                 color: cyan;
  102.             }
  103.     </style>
  104. </head>
  105.  
  106. <body>
  107.     <nav>
  108.         <div class="logo">APTECH</div>
  109.         <input type="checkbox" id="click">
  110.         <label for="click" class="menu-btn">
  111.             <i class="fa-solid fa-bars"></i>
  112.         </label>
  113.         <ul>
  114.             <li><a href="#" class="active">Home</a></li>
  115.             <li><a href="#">About</a></li>
  116.             <li><a href="#">Contact</a></li>
  117.             <li><a href="#">Feedback</a></li>
  118.             <li><a href="#">Services</a></li>
  119.         </ul>
  120.     </nav>
  121. </body>
  122. </html>
Success #stdin #stdout 0.03s 26012KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="https://c...content-available-to-author-only...e.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        @import url('https://f...content-available-to-author-only...s.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Poppins", sans-serif;
        }

        nav {
            height: 80px;
            background-color: #1b1b1b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 50px 0px 100px;
        }

        nav .logo {
            font-size: 33px;
            color: white;
            font-weight: 600;
        }

        nav ul {
            display: flex;
            list-style: none;
        }

        nav ul li {
            margin: 0 5px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 1px;
            padding: 8px 10px;
            border-radius: 5px;
            transition: all ease 0.3s;
        }

        nav ul li a:hover,
        nav ul li a.active {
            background-color: white;
            color: #1b1b1b;
        }
        nav .menu-btn i{
            color: white;
            font-size: 22px;
            cursor: pointer;
            display: none;
        }
        #click{
            display: none;
        }

        @media (max-width:940px) {
            nav .menu-btn i{
                display: block;
            }
            nav ul {
                position: fixed;
                top: 80px;
                left: 0;
                background: #1b1b1b;
                height: 100vh;
                width: 100%;
                display: block;
                text-align: center;
                left: -100%;
                transition: all 0.3s ease;
            }
            #click:checked ~ ul{
                left: 0%;
            }

            nav ul li {
                margin: 40px 0;
            }

            nav ul li a {
                font-size: 20px;
                display: block;
            }

            nav ul li a:hover,
            nav ul li a.active {
                background: none;
                color: cyan;
            }
    </style>
</head>

<body>
    <nav>
        <div class="logo">APTECH</div>
        <input type="checkbox" id="click">
        <label for="click" class="menu-btn">
            <i class="fa-solid fa-bars"></i>
        </label>
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Feedback</a></li>
            <li><a href="#">Services</a></li>
        </ul>
    </nav>
</body>
</html>
https://ideone.com/53bQ7B
language:
PHP (php 7.3.5)
created:
19 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!