Floats-Project/index.html at main · CodeBySayak/Floats-Project · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="nav">
        <div class="text">
            <h3><b>Floaty — UI Workshop</b></h3>
            <p>Simple, elegant layout built with floats</p>
        </div>
        <p class="button">Get Started</p>
    </nav>
    <div class="main">
        <div class="content">
            <p>Overview</p>
            <p>Features</p>
            <p>Tutorials</p>
            <p>Resources</p>
            <p>Contact</p>
        </div>
        <div class="item">
            <div class="child1">
            <h3><b>Build responsive layouts with just floats</b></h3>
            <p>This demo uses floats for structure and modern styles (rounded corners, subtle shadows, gradients) for a polished look.</p>
            </div>
            <div class="child2">
                <div class="gc gc1">
                    <h5>Lightweight</h5>
                    <p>No heavy frameworks — pure HTML + CSS with float-driven layout.</p>
                </div>
                <div class="gc gc2">
                    <h5>Customizable</h5>
                    <p>Easily change colors, borders, and background to match your brand.</p>
                </div>
                <div class="gc gc3">
                    <h5>Responsive</h5>
                    <p>Media queries stack floated columns on small screens for readability.</p>
                </div>
                <div class="fix"></div>
            </div>
            <div class="child3">
                <div class="img"></div>
                <div class="textarea">
                    <h5>Why floats still matter</h5>
                    <p>Floats were the original way to build multi-column layouts. They are simple, well-supported, and still useful for specific layout patterns — like this sidebar + content page and card grids. Use them when you need predictable flow and wide browser compatibility.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>