STYLING DETAILS TAG WITH CSS AWESOME WITH CODE 😀

CANOJIYA April 03, 2022
USING DETAILS TAG / CSS

THIS IS CODE



CODE FOR YOU HTML



  <!DOCTYPE html>
     <html lang="en ">
        <head>
            <meta charset="UTF-8 ">
            <meta http-equiv="X-UA-Compatible " content="IE=edge ">
           <meta name="viewport " content="width=device-width, initial-scale=1.0 ">
           <title>Document</title>
        </head>
        <body>
            <nav>
             <div class="div1 ">
                <details id="my1d ">
                    <summary id="sum1 "> CODE</summary>
                    <p class="para ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci saepe alias, dolorum dicta reprehenderit ipsam consequuntur ipsum autem ducimus quas tempora libero animi quod repudiandae recusandae accusamus? Molestias quas alias neque
                            aliquam nam dolorum facilis accusantium incidunt repudiandae, excepturi minima in iusto, cum laudantium quidem distinctio necessitatibus labore sunt soluta. Cupiditate, laborum. Vitae maxime dolore asperiores recusandae repellendus
                            laudantium quam nesciunt cum dignissimos odio ad, nobis necessitatibus laboriosam unde officiis commodi, voluptates illo, quia voluptas non dolor voluptatem officia libero. Saepe ratione nesciunt cumque optio esse incidunt sunt culpa
                            nostrum eum quas voluptate eius, accusamus quos alias, at repellendus Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium quae placeat quis veritatis, dolore laborum doloremque nisi ipsam, excepturi nemo culpa! Reprehenderit
                            suscipit consectetur labore quisquam magnam, vel in Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero vel magnam corrupti possimus ipsam perferendis exercitationem, fugit ex eius explicabo suscipit autem consequuntur
                            nam ea quasi consectetur cupiditate quos animi.
                    </p>
                </details>
             </div>
             <div class="div2 ">
                <details id="my2d ">
                    <summary id="sum2 ">OUTPUT</summary>
                    <p class="para ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam nam quam ab, sint officiis nisi nostrum cum possimus rem repellendus eius, debitis iusto labore? Voluptate, aspernatur ipsum! Labore asperiores pariatur vitae. Corporis, dolorem.
                        Dolores explicabo ducimus sunt reprehenderit harum iure numquam odio cum, a, veniam voluptatem dicta beatae cupiditate eum sit modi, voluptates culpa alias exercitationem quos labore. Minus illum maxime blanditiis at quae quibusdam
                        eligendi atque odit aspernatur iusto amet hic fuga, rem excepturi adipisci sed, dolorem expedita? Quidem ea odit amet voluptas, quos provident a vero cupiditate consectetur. Consequuntur, a. Deserunt provident temporibus tempora molestias
                        nesciunt ducimus suscipit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, eius quasi laborum ea similique aliquid unde, doloremque sapiente animi laudantium nobis reprehenderit accusamus distinctio labore nisi inventore!
                        Nam omnis itaque ipsum ab. Vel quos corporis ipsa placeat sequi totam laboriosam culpa necessitatibus aut ut! Provident, officiis. Praesentium enim repellendus mollitia laboriosam necessitatibus molestias autem tempora commodi amet
                        ab facilis eveniet, explicabo assumenda inventore maxime dicta. Dolorum ea id placeat similique? Quam earum explicabo nesciunt? Placeat maxime enim aliquam voluptates deserunt omnis sint, velit itaque animi, tempore tempora voluptatum
                        natus maiores doloremque quod molestias magni mollitia eaque officiis harum eligendi dolor.
                    </p>
                </details>
             </div>
            </nav>
         </body>
     </html>


CODE FOR YOU CSS



        nav {
            width: 69%;
            margin-right: auto;
            margin-left: auto;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            padding: 5px;
            word-wrap: break-word;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .div1 {
            margin-right: auto;
            margin-left: auto;
            width: 47.3%;
            border-radius: 10px;
            padding-right: 5px;
            float: left;
            display: inline;
        }
        
        .div2 {
            width: 47.3%;
            border-width: 49%;
            border-radius: 10px;
            padding-right: 5px;
            float: right;
        }
        
        details {
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        /* CODE & OUTPUT*/
        summary {
            background-color: rgb(230, 98, 120);
            color: white;
            border: 3px solid white;
            border-radius: 10px;
            padding: 5px;
            margin: 1px;
            text-align: center;
            font-family: Georgia, 'Times New Roman', Times, serif;
        }
        .para {
            color: black;
            background-color: lightblue;
            height: 400px;
            font-family: Arial, Helvetica, sans-serif;
            border: 5px double black;
            border-radius: 5px;
            padding: 5px;
            overflow-y: scroll;
            cursor: text;
        }
        summary:hover {
            text-align: center;
            border-color: white;
            color: white;
        }        
        #sum1:hover {
            background-color: blue;
        }
        #sum2:hover {
            background-color: red;
        }
        /* For Tablet Size */
        @media only screen and (max-width: 768px) {
            nav {
                width: 90%;
            }
            .div1 {
                width: 48.7%;
            }
            .div2 {
                width: 48.7%;
            }
        }
        /* For Phone Size */
        @media only screen and (max-width: 600px) {
            nav {
                width: 100%;
            }
            .div1 {
                width: 48.7%;
            }
            .div2 {
                width: 48.7%;
            }
        }

THIS IS AN OUPUT OF THIS CODE

Post a Comment

0 Comments