css/index.html at master · MarcinGa/css · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- meta:vp -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- main style -->
    <link rel="stylesheet" href="css/style.css">

    <!-- responsive -->
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body>
    <nav id="main-nav" class="main-nav">
        <ul id="ul" class="ul">
            <span><a href="">123</a></span>
            <li class="nav-item"><span><a href="">tekst</a></span></li>
            <li class="nav-item"><a href="">tekst</a></li>
            <li class="nav-item"><a href="">tekst</a></li>
            <li class="nav-item"><a href="">tekst</a></li>
            <li class="nav-item"><a href="">tekst</a></li>
        </ul>
    </nav>

    <div class="background">
        <p>lorem</p>
        <span>123</span>
    </div>
    <section class="background">
        <p>lorem</p>
        <span>123</span>
    </section>

    <form action="">
        <input type="text" title="pierwszy input">
        <input type="text" title="drugi input">
        <input type="text" title="trzeci input">
        <input type="text" title="czwarty input">
        <input type="text" title="piaty input">
    </form>

    <!-- pozycjonowanie -->
    <div class="position">
        <div class="position-inner orange"></div>
        <div class="position-inner gray"></div>
    </div>

    <!-- jednostki miary -->
    <div id="jednostki-miary">
        <div id="piksele">400px</div>
        <div id="em">30em</div>
        <div id="procenty">50%</div>
        <div id="vh">50vh</div>
        <div id="rem">50rem</div>
    </div>

    <!-- kolory w css -->
    <div id="kolory">
        <div id="heksadecymalny">heksadecymalny</div>
    </div>

    <!-- wyswietlanie -->
    <div class="display">
        <div class="display-inner"></div>
        <div class="display-inner"></div>
        <div class="display-inner"></div>
        <div class="display-inner"></div>
    </div>

    <!-- float -->
    <div class="float">
        <div class="float-inner">
            <img src="https://dinoanimals.pl/wp-content/uploads/2015/01/Kot_zwislouchy_10-588x563.jpg" alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus nobis delectus cumque obcaecati et, consequuntur perferendis quod incidunt illo velit voluptatibus vel fugiat, nam est voluptates ratione! Neque, quia. At.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit perspiciatis veritatis soluta, aperiam ut minus, facilis nostrum, quaerat assumenda culpa nisi animi laudantium obcaecati nemo laborum itaque fuga corrupti numquam.</p>
            <div class="clear"></div>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit perspiciatis veritatis soluta, aperiam ut minus, facilis nostrum, quaerat assumenda culpa nisi animi laudantium obcaecati nemo laborum itaque fuga corrupti numquam.</p>
        </div>
    </div>

    <!-- tranzycje -->
    <div class="transition"></div>

    <!-- wlasciwosci tla -->
    <div class="background-property"></div>

    <!-- overflow -->
    <div class="overflow">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum corrupti mollitia nostrum laborum nihil odio. Asperiores, ipsam sunt. Ex ullam soluta eligendi eius ipsam asperiores doloribus rerum itaque tempora sit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ea nostrum cum eius vitae magni sit? Fuga est iusto ab ullam vel in vero quae, at distinctio error reprehenderit nulla.</p>
    </div>

    <!-- transform -->
    <div class="transform">
        <div class="rotate">
            <img src="https://dinoanimals.pl/wp-content/uploads/2015/01/Kot_zwislouchy_4.jpg" alt="">
        </div>
        <div class="translate">
            <img src="https://dinoanimals.pl/wp-content/uploads/2015/01/Kot_zwislouchy_4.jpg" alt="">
        </div>
        <div class="scale">
            <img src="https://dinoanimals.pl/wp-content/uploads/2015/01/Kot_zwislouchy_4.jpg" alt="">
        </div>
    </div>

    <!-- animation -->
    <div class="animation"></div>

    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
</body>
</html>