Skip to main content

CSS Tutorial 21

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Alignment</title>

    <style>

        *{

        box-sizing: border-box;

        }

        body{font-family: cursive;}


        .container{

            background-color: lightyellow;

            /* padding: 21px; */

            border: royalblue 3px solid;

            width: 900px;

            margin: 33px auto;

        }

        .items{

            background-color: lightseagreen;

            border: 3px solid darkorange;

            margin: 12px 3px;

            padding: 12px 3px;

        }

        #fruit{

            float: left;

            width: 48%;

           

        }

        #computer{

            float: right;

            width: 48%;

        }

        #stationary{

            clear: both;

            width: 100%;

            /* float: left; */

        }

        #glasses{

           clear: both;

            width: 100%;

        }

p, h2{

    /* text-align: left;

    text-align: right;

    text-align: center; */

    text-align: justify;   

}

h1{

    text-align: center;

}

    </style>

</head>

<body>

    

    <div class="container">

        <h1>Welcome to My STORE</h1>

        <div id="fruit" class="items">

            <h2>Fruits left</h2>

            <p id="fruitpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia commodi corporis necessitatibus sit at, nobis corrupti esse. Ea at reiciendis sequi, reprehenderit natus assumenda consequatur deserunt consequuntur tempora dolorum possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea aspernatur officia eos commodi fugit iste provident laudantium. Perspiciatis voluptate eos eum minima veritatis, qui voluptates delectus quis non, aspernatur alias? Voluptates, officia!</p>

        </div>

        <div id="computer" class="items">

            <h2>Computer Right</h2>

            <p id="computerpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia commodi corporis necessitatibus sit at, nobis corrupti esse. Ea at reiciendis sequi, reprehenderit natus assumenda consequatur deserunt consequuntur tempora dolorum possimus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea aspernatur officia eos commodi fugit iste provident laudantium. Perspiciatis voluptate eos eum minima veritatis, qui voluptates delectus quis non, aspernatur alias? Voluptates, officia! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, laboriosam?</p>

        </div>

        <div id="stationary" class="items">

            <h2>Stationary</h2>

            <p id="statinorypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia commodi corporis necessitatibus sit at, nobis corrupti esse. Ea at reiciendis sequi, reprehenderit natus assumenda consequatur deserunt consequuntur tempora dolorum possimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta sit nam tempora recusandae, deserunt, ad cupiditate ipsa eos tenetur illum, ab laboriosam. Fugiat officiis tempora ullam quas quo ea expedita repellat excepturi?</p>

        </div>

        <div id="glasses" class="items">

            <h2>Glasses</h2>

            <p id="glassespara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia commodi corporis necessitatibus sit at, nobis corrupti esse. Ea at reiciendis sequi, reprehenderit natus assumenda consequatur deserunt consequuntur tempora dolorum possimus.</p>

        </div>

        

    </div>

</body>

</html>

Labels:

Comments

Post a Comment

Popular posts from this blog

HTML Tutorial 9

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Inline & Block Elements</title> </head> <body>      </body> </html>
Post a Comment
Read more

CSS Tutorial 24

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>CSS Display Property</title>     <style>         *{             box-sizing: border-box;         }         header {             margin: auto;             border: 2px solid firebrick;             /* width: 30%; */         }         img {             /* display: inline; this is most property display inline, block and inline block */             /* if you select display inline so...... you do not set width but */             /* you select displ...
Post a Comment
Read more

HTML Tutorial 5

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Heading Paragraphs and Emmet</title> </head> <body> <h1>Heading 1 for Rajendra </h1>     <h2>Heading 2 for Rajendra </h2>     <h3>Heading 3 for Rajendra </h3>    <!-- if you need some example world so you use loram12 for 12 words --> <p> • Incompatible: the chosen fixed size may be too large for a user's available live space, causing the user to scroll in order to view the whole page; a fixedWeb page may also appear too small, leaving unsightly blank spaces.     <!-- <br> tag use for a line break or line change and it is self closing tags -->     <br>• Totalitarian: the Web does not want to run the risk of being under too mu...
Post a Comment
Read more