Alignment(tut21)formating a box.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>Alignment</title>

    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
    <style>
        *{
           
        }
        body{
            font-family: 'Ubuntu', sans-serif;
        }
        .container{
            width: 900px;
            border:3px solid rgb(206, 68, 206);
            /* if you want to item in center of page then use margin auto */
            /* margin:auto; */
            margin: 33px auto;
            background-color: rgb(204, 163, 134);

        }
        .item{
            border:3px solid gray;
            margin:12px 3px;
            padding:12px 3px;
            background: rgb(241, 203, 203);

        }
        #fruits{
            float:left;
            width:48%;
        }
        #computer{
            float:right;
            width:48%;
        }
        #stationary{
            /* float:left; */
            width:98%;
            /* clear:left; */
            clear:both;
        }
        p,h3{
            text-align: left;
            text-align: right;
            text-align: center;
            text-align: justify;
        }
        h2{
            margin: 23px auto;
            width:455px;
        }
    </style>
</head>
<body>
  
    <div class="container">
        <h2>Welcome to my store</h2>
        <div id="fruits" class="item">
            <h3>Fruits</h3>
            <p id="fruitspara" clas="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet a ipsa, libero dolorum et obcaecati, neque, totam qui aperiam doloribus quia. Porro in quaerat numquam ullam est nemo ipsum accusantium! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, aliquid ipsam atque corporis possimus maxime at ipsum in harum deleniti sunt consequuntur, eligendi quod molestiae a nihil amet molestias doloribus!
            </p>

        </div>
        <div id="computer" class="item">
            <h3>Computer</h3>
            <p id="computerpara" clas="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet a ipsa, libero dolorum et obcaecati, neque, totam qui aperiam doloribus quia. Porro in quaerat numquam ullam est nemo ipsum accusantium! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla doloribus consequatur voluptatum veritatis cumque, vel adipisci, optio, necessitatibus laboriosam asperiores et nam cupiditate aliquid? Ipsam animi earum dolor ad odit</p>

        </div>
        <div id="stationary" class="item">
            <h3>Staionary</h3>
            <p id="stationarypara" clas="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet a ipsa, libero dolorum et obcaecati, neque, totam qui aperiam doloribus quia. Porro in quaerat numquam ullam est nemo ipsum accusantium!</p>

        </div>
    </div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

automation fitness center project synopsis

  1 Project Synopsis MCSP-060 “Automation System of Fitness Center” By SHRUTI RANI (182015660) Under the guidance of AMBIKESH In partial fulfillment of the requirements for the award of the degree Master of Computer Applications (MCA) January 2020 NAME : SHRUTI RANI ENROLLMENT NUMBER: 182015660 PROGRAMME CODE : MCA SEMESTER: 6 th STUDY CENTER CODE: 0769 STUDY CENTER NAME: SHYAM LAL COLLEGE REGIONAL CENTER CODE : 29 (DELHI 2) 2 3 4 5 6 PROJECT SYNOPSIS 7 Table of Contents 1. Introduction 9 1.1 Background 9 1.2 Objective 10 1.3 Purpose And Scope 11-12 1.3.1 Purpose 11 1.3.2 Scope 12 2. Input Of The Project 13 3. Output Of The Project 14 4. Servey Of Technologies 15 5. Requirements And Analysis 16-19 5.1 Problem Definition 16 5.1.1 Project Identification Of Need 16 5.1.2 Problem Statement 17 5.1.3 Existing System 17 5.1.4 Drawbacks Of Existing System 18 5.1.5 Proposed System 18 5.1.6 Advantages Of Proposed System 19 5.2 System Requirements Specification 20-21 5.2.1 Software 20 5.2.2 F...
Read more

CSS : Position, absolute, relative ,fixed and sticky(tut25).html

CSS : Position, absolute, relative ,fixed and sticky(tut25).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 >     < style >           .box {             display : inline-block ;             border : 2px solid red ;             width : 150px ;             height : 150px ;             margin : 2px ;         }         #box3     {         /* relative: Position to the element relative to its normal position and will give a gap at i...
Read more

Document.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 >      < a   href = "http://google.com"   target = "-blank" > Go to google </ a >< br >      < a   href = "http://facebook.com"   target = "-blank" > Go to facebook </ a >< br >      < a   href = "http://twitter.com"   target = "-blank" > Go to twitter </ a >< br >      < a   href = "http://linkedin.com"   target...
Read more