box/Box.html at main · BmwShNick/box · 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<html>
  <head>
    <meta charset="utf-8" />
    <title>Css box</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="css/box.css"
  </head>
  <header>
    <nav class="site_nav">
      <ul class="group">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Follow ME</a></li>
        <li><a href="#">Contact US</a></li>
      </ul>
    </nav>
  </header>
  <body>
    <div class="main_box">
      <div class="box-a">Box-a</div>
      <div class="box-b">Box-b</div>
      <div class="box-c">Box-с</div>
      <div class="box-d">Box-d</div>
      <div class="box-e">Box-e</div>
    </div>
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam
      accusamus porro repellendus impedit quis temporibus sit, aut ipsum
      ducimus, odit optio vero deleniti ullam vitae exercitationem! Eveniet,
      harum quia soluta impedit ducimus ad aliquid dolor nemo voluptate
      similique id, eos deserunt beatae hic? Incidunt harum consequatur
      asperiores pariatur recusandae eligendi in, quasi, corrupti iusto itaque
      fugiat inventore voluptates sit architecto ab magni accusantium maxime
      dicta eum sunt cum. Quisquam architecto, delectus eaque quia ipsam sit
      fuga adipisci beatae doloremque nemo debitis illum pariatur hic ullam
      facere, maiores velit labore fugit.
      <span class="glava1"
        >Aperiam necessitatibus soluta rerum eum odit. Minima doloremque
        blanditiis amet autem nam dolorem illo, quaerat voluptatibus, possimus
        nobis? Voluptas quas blanditiis minus sed, ducimus deleniti quisquam
        quis cum nulla tenetur, omnis corporis! Similique accusamus numquam,
        inventore doloremque placeat optio minima sunt!</span
      >
      Quasi veritatis harum blanditiis sequi maiores natus, ut magni laudantium
      cupiditate, officia saepe, architecto neque! Nam molestiae fugiat
      delectus, nobis repudiandae repellat laudantium! Fugiat ea laborum,
      molestias deserunt expedita, non harum sunt. Nemo alias, maxime iure quos,
      dignissimos, beatae rem magnam cupiditate, placeat accusantium rerum totam
      ducimus! Modi, consectetur, culpa. Veniam, optio, voluptatum. Assumenda
      reprehenderit beatae earum iusto enim accusamus! Impedit dicta alias,
      exercitationem id cupiditate aut, at placeat laboriosam vero similique
      reiciendis illum. Veniam non iusto sequi accusamus praesentium ratione
      modi. Veniam tempore beatae est a quam earum corporis consequatur quos
      necessitatibus! Nisi commodi ullam, libero quia quisquam cumque eveniet
      dignissimos, rerum obcaecati omnis aliquam et. Quos voluptatibus,
      temporibus dolores sed aliquid corrupti autem magni enim, error tenetur
      repudiandae obcaecati ipsum dolore rem consectetur ducimus ab alias
      asperiores pariatur soluta quod quae ex a. Vitae obcaecati, voluptate
      sapiente. Dolore assumenda, labore nulla aut qui nemo tempora ratione
      recusandae optio quam tempore atque facere maxime incidunt voluptatum
      cupiditate iste. Iusto earum voluptatibus asperiores, voluptas tenetur,
      eius laboriosam. Hic voluptas perspiciatis, necessitatibus ducimus rerum
      placeat, modi, molestias eligendi deleniti autem labore rem nobis ad quae
      saepe. Labore, numquam. Veritatis cupiditate vero soluta tenetur velit
      alias obcaecati! Enim earum adipisci alias, architecto deserunt a libero
      minima sed nostrum. Fugiat aliquam repellat placeat culpa obcaecati!
      Labore in veritatis error impedit quae saepe possimus, voluptate
      doloremque ratione atque blanditiis ducimus quisquam nihil fugiat commodi
      sed quas dolore dolorem suscipit quia consectetur reprehenderit aspernatur
      ipsa? Eaque esse temporibus sapiente, deserunt, debitis corporis beatae
      quo quae incidunt eos, repellat ducimus voluptas consequuntur velit
      necessitatibus nobis maxime rerum porro numquam quia assumenda aut atque
      repellendus.
    </p>
    <div class="my_table">
      <table class="grocery_list">
        <thead>
          <tr>
            <th class="table_head">Name</th>
            <th class="table_head">Age</th>
            <th class="table_head">Position</th>
            <th class="table_head">Nationality</th>
            <th class="table_head">Salary per Year</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="table_body1">Messi</td>
            <td class="table_body1">34</td>
            <td class="table_body1">Right Winger</td>
            <td class="table_body1">Argentinian</td>
            <td class="table_body1">61 Million$</td>
          </tr>
          <tr>
            <td class="table_body2">Neymar</td>
            <td class="table_body2">29</td>
            <td class="table_body2">Left Winger</td>
            <td class="table_body2">Brazilian</td>
            <td class="table_body2">45 Million$</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="container">
      <ul class="social">
        <li class="social-item facebook">
          <a href="https://www.facebook.com/">
            <i class="fa fa-facebook"></i>
          </a>
        </li>
        <li class="social-item instagram">
          <a href="https://www.instagram.com/">
            <i class="fa fa-instagram"></i>
          </a>
        </li>
        <li class="social-item telegram">
          <a href="https://web.telegram.org/">
            <i class="fa fa-telegram"></i>
          </a>
        </li>
        <li class="social-item vk">
          <a href="https://vk.com/">
            <i class="fa fa-vk"></i>
          </a>
        </li>
        <li class="social-item google">
          <a href="https://www.google.com/">
            <i class="fa fa-google"></i>
          </a>
        </li>
      </ul>
    </div>
    <div class="my_circle">
      <div class="circle">This is circle</div>
    </div>
  </body>
</html>