Alignment in css

-

 <!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>Alignment</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Ubuntu', sans-serif;
        }

        .container {
            width: 900px;
            border: 3px solid purple;
            margin: 33px auto;
            background-color: rgb(248, 191, 141);
        }

        .item {
            border: 3px solid rgb(92, 79, 79);
            margin: 12px 3px;
            padding: 12px 3px;
            background: rgb(248, 221, 221);
        }

        #fruits {
            float: left;
            width: 48%;
        }

        #computer {
            float: right;
            width: 48%;
        }

        #stationary {
            /* float: left; */
            width: 100%;
            clear: both;
        }

      
        p,h1{
            /* text-align: right;
            text-align: left;
            text-align: center; */
            text-align: justify;
        }

        h1 {

            margin: 23px auto;
            width: 455px;
        }
        
    </style>
</head>

<body>
    <div class="container">
        <h1>Welcome to my store </h1>
        <div id="fruits" class="item">
            <h3>fruits</h3>
            <p id="fruitspara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt architecto
                praesentium tempora voluptate Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, nesciunt!
                Magni odio reiciendis, alias, ab sequi sapiente nesciunt dolor corrupti cum id atque culpa error
                accusantium beatae modi, nobis facere non saepe hic vitae! placeat enim ut repellendus odit. Tenetur
                ipsa officiis similique nostrum
                impedit dicta alias molestiae excepturi ducimus <deleniti class="lorem34"></deleniti>
            </p>
        </div>

        <div id="computer" class="item">
            <h3>computer</h3>
            <p id="computerpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
                architecto praesentium tempora voluptate placeat enim ut repellendus odit. Tenetur ipsa officiis
                similique nostrum impedit Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime recusandae
                ea, ipsa ducimus hic molestias facere nisi dolor, sint similique, placeat ullam. Officia atque,
                doloremque mollitia eligendi modi iure in deleniti quae placeat exercitationem.dicta alias molestiae
                excepturi ducimus </p>
        </div>

        <div id="stationary" class="item">
            <h3>stationary</h3>
            <p id="stationarypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
                architecto praesentium Lorem ipsum dolor sit amet consectetur adipisicing elit. repellendus odit.
                Tenetur ipsa officiis
                similique nostrum impedit dicta alias ducimus deleniti.</p>
        </div>

        <div id="glasses" class="item">
            <h3>glasses</h3>
            <p id="glassespara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
                architecto praesentium Lorem ipsum dolor sit amet consectetur adipisicing elit. repellendus odit.
                Tenetur ipsa officiis
                similique nostrum impedit dicta alias ducimus deleniti.</p>
        </div>

    </div>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

priority_queue

-
  #include <iostream> #include <queue> #include <vector> using namespace std ; int main (){     // priority_queue<int> q;     // priority_queue<int, vector<int>, greater<int>> q;     auto cmp = []( int a , int b ){         return a < b ;     };     priority_queue < int , vector < int > , decltype (cmp) > q(cmp);         vector < int > v = { 8 , 1 , 6 , 4 , 0 , 7 , 2 , 9 };     for ( int x: v) q. push (x);     while ( ! q. empty ()){         cout << q. top () << " " ;         q. pop ();     }     cout << endl ;     return 0 ; }
Read more

Queue data structure in c++

-
  #include <iostream> using namespace std ; #define n 10 class queue {     int * arr;     int front;     int back;     public:       queue (){          arr = new int [ n ];          front =- 1 ;          back =- 1 ;      }       void push ( int x ){           if (back == n - 1 ){              cout << "queue is not empty " << endl ;               return ;          }          back ++ ;          arr[back] = x ;           if (front ==- 1 ){              front ++ ;          }      }       void pop (){           if (front > back || front ==- 1 ){              cout << "no element is in the queue " << endl ;               return ;          }          front ++ ;      }       int peek (){           if (front > back || front ==- 1 ){              cout << "no element in the queue" << endl ;               return - 1 ;          }           return arr[front];      }       bool empty (){           if (front &
Read more