FSW_7_Aug_8_PM/BoxModel.html at main · CodeKul/FSW_7_Aug_8_PM · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
  <head>
    <title>Box Model</title>
    <style>
        .box{
            background-color: bisque;
            /* width: 500px; */
            /* height: 20%; */
            /* margin: 5%; outer space  */
            margin-top: 2%;
            margin-bottom: 5%;
            margin-left: 10%;
            margin-right: 10%;
            /* padding: 2%; internal space */
            padding-left: 5%;
            padding-top: 2%;
            padding-right: 5%;
            padding-bottom: 2%;
            /* border: width style color; */
            /* border-width: 10px;
            border-color: red;
            border-style: groove;
            outline-width: 10px;
            outline-color: blue;
            outline-style: double; */
            border-top: 10px solid saddlebrown;
            border-bottom: 10px dotted darkorchid;
            border-left: 10px groove indianred;
            /* border-right: ; */
        }
    </style>
  </head>
  <body>
    <div class="box">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. In impedit
      quisquam perspiciatis eos cupiditate dolorem itaque quaerat! Animi magni
      molestiae placeat minus adipisci voluptates laudantium sunt quo provident
      rem aliquam necessitatibus dolores voluptatum a, autem hic omnis harum
      delectus commodi, maiores iure? Perferendis beatae consequuntur aliquam
      veritatis, libero dignissimos labore quia ad id vitae, tenetur dolore?
      Inventore eligendi quam incidunt. Nobis, corporis ut? Dolorum aliquid
      voluptates tenetur dicta beatae assumenda quos modi ratione molestiae enim
      illo similique, quisquam temporibus nisi ut! Officia, magnam! Illo
      voluptatum molestiae atque corporis dolor eum, itaque dolorem dolore
      repellat enim veniam magnam eos nemo assumenda!
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium doloremque corrupti est labore accusamus recusandae, repellat alias numquam perferendis distinctio.</p>
  </body>
</html>