css-web-3/index.html at main · ManonCacciatore/css-web-3 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web 3.0 Project</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container-header">

            <svg width="65" height="40" viewBox="0 0 65 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path id="W." fill-rule="evenodd" clip-rule="evenodd" d="M23.786 38.92C23.59 39.1067 23.3333 39.2 23.016 39.2H12.46C12.1427 39.2 11.8813 39.1067 11.676 38.92C11.4707 38.7333 11.368 38.4627 11.368 38.108V36.288C11.368 36.008 11.3447 35.7607 11.298 35.546C11.2513 35.3313 11.172 35.0093 11.06 34.58L3.22 4.172C3.08933 3.68667 2.93067 3.332 2.744 3.108C2.55733 2.884 2.28667 2.70667 1.932 2.576L0.7 2.184C0.457333 2.072 0.28 1.918 0.168 1.722C0.056 1.526 0 1.316 0 1.092C0 0.756 0.112 0.49 0.336 0.294C0.56 0.098 0.896 0 1.344 0H17.556C18.0227 0 18.368 0.098 18.592 0.294C18.816 0.49 18.928 0.756 18.928 1.092C18.928 1.596 18.676 1.932 18.172 2.1L16.716 2.436C16.3427 2.548 16.1093 2.77667 16.016 3.122L15.9871 3.25653C15.934 3.58218 15.981 3.99 16.128 4.48L22.63 30.389L28.183 10.914L26.432 4.172C26.264 3.57467 26.11 3.17333 25.97 2.968C25.83 2.76267 25.6293 2.61333 25.368 2.52L24.192 2.1C23.912 1.988 23.7113 1.85267 23.59 1.694C23.4687 1.53533 23.408 1.344 23.408 1.12C23.408 0.765333 23.5247 0.49 23.758 0.294C23.9913 0.098 24.332 0 24.78 0H40.656C41.1227 0 41.468 0.098 41.692 0.294C41.916 0.49 42.028 0.765333 42.028 1.12C42.028 1.36267 41.958 1.57267 41.818 1.75C41.678 1.92733 41.4587 2.072 41.16 2.184L39.928 2.52C39.5733 2.632 39.3493 2.83267 39.256 3.122L39.2294 3.22519C39.1704 3.51832 39.2073 3.95526 39.34 4.536L45.817 30.346L51.352 6.86C51.5947 5.83333 51.5247 4.93733 51.142 4.172C50.7593 3.40667 50.008 2.81867 48.888 2.408L48.272 2.184C48.0107 2.05333 47.8193 1.90867 47.698 1.75C47.5767 1.59133 47.516 1.38133 47.516 1.12C47.516 0.784 47.6327 0.513333 47.866 0.308C48.0993 0.102667 48.4493 0 48.916 0H57.82C58.2867 0 58.6367 0.102667 58.87 0.308C59.1033 0.513333 59.22 0.784 59.22 1.12C59.22 1.38133 59.15 1.59133 59.01 1.75C58.87 1.90867 58.632 2.072 58.296 2.24L57.624 2.548C56.8027 2.90267 56.0747 3.458 55.44 4.214C54.8053 4.97 54.3387 5.97333 54.04 7.224L47.824 34.132C47.6933 34.6173 47.6047 35.0047 47.558 35.294C47.5113 35.5833 47.488 35.9147 47.488 36.288V38.108C47.488 38.4627 47.3853 38.7333 47.18 38.92C46.9747 39.1067 46.7227 39.2 46.424 39.2H35.728C35.4107 39.2 35.154 39.1067 34.958 38.92C34.762 38.7333 34.664 38.4627 34.664 38.108V36.288C34.664 36.0267 34.6407 35.7887 34.594 35.574L34.5714 35.4749C34.5211 35.2623 34.44 34.964 34.328 34.58L29.506 16.01L24.416 34.132C24.3227 34.4493 24.2433 34.776 24.178 35.112C24.1127 35.448 24.08 35.84 24.08 36.288V38.108C24.08 38.4627 23.982 38.7333 23.786 38.92ZM61.026 39.032C60.0833 39.6107 59.0147 39.9 57.82 39.9C56.6627 39.9 55.6127 39.6107 54.67 39.032C53.7273 38.4533 52.9807 37.674 52.43 36.694C51.8793 35.714 51.604 34.6547 51.604 33.516C51.604 32.3587 51.8793 31.304 52.43 30.352C52.9807 29.4 53.7273 28.6393 54.67 28.07C55.6127 27.5007 56.6627 27.216 57.82 27.216C59.0147 27.216 60.0833 27.5007 61.026 28.07C61.9687 28.6393 62.7153 29.4 63.266 30.352C63.8167 31.304 64.092 32.3587 64.092 33.516C64.092 34.6547 63.8167 35.714 63.266 36.694C62.7153 37.674 61.9687 38.4533 61.026 39.032Z" fill="#00001A"/>
            </svg>


            <label class="burger" for="burger-active">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
                    <path fill="#888888" fill-rule="evenodd" d="M20.75 7a.75.75 0 0 1-.75.75H4a.75.75 0 0 1 0-1.5h16a.75.75 0 0 1 .75.75m0 5a.75.75 0 0 1-.75.75H4a.75.75 0 0 1 0-1.5h16a.75.75 0 0 1 .75.75m0 5a.75.75 0 0 1-.75.75H4a.75.75 0 0 1 0-1.5h16a.75.75 0 0 1 .75.75" clip-rule="evenodd"/>
                </svg>
                <input id="burger-active" type="checkbox" style="display: none;">
            </label>

            <nav class="navigation">
                <ul>
                    <li>Home</li>
                    <li>New</li>
                    <li>Popular</li>
                    <li>Trending</li>
                    <li>Categories</li>
                </ul>
            </nav>
        </div>
    </header>

    <section>
        <div class="section1-container">
            <div class="news-featured">
                <div class="image-header">
                    <img src="assets/vasilis-chatzopoulos-6lwyzronth8-unsplash (1).png" alt="">
                </div>
                <div class="text">
                    <div>
                        <h1>The Bright Future of Web 3.0?</h1>
                    </div>
                    <div class="parbutton">
                        <p>We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. But is it really fulfilling its promise?</p>
                        <button>Read more</button>
                    </div>
                </div>

            </div>
            <div class="news">
                <h2>New</h2>
                <h3>Hydrogen VS Electric Cars</h3>
                <p>Will hydrogen-fueled cars ever catch up to EVs?</p>
                <hr>
                <h3>The Downsides of AI Artistry</h2>
                <p>What are the possible adverse effects of on-demand AI image generation?</p>
                <hr>
                <h3>Is VC Funding Drying Up?</h2>
                <p>Private funding by VC firms is down 50% YOY. We take a look at what that means.</p>
            </div>
        </div>
    </section>

    <article>
        <div class="section2-container">
            <div class="item1">
                <div>
                    <img src="assets/Bitmap.png" alt="">
                </div>
                <div>
                    <h2>01</h2>
                    <h3>Reviving Retro PCs</h3>
                    <p>What happens when old PCs are given modern upgrades?</p>
                </div>

            </div>
            <div class="item2">
                <div>
                    <img src="assets/Bitmap (1).png" alt="">
                </div>
                <div>
                    <h2>02</h2>
                    <h3>Top 10 Laptops of 2022</h3>
                    <p>Our best picks for various needs and budgets.</p>
                </div>

            </div>
            <div class="item3">
                <div>
                    <img src="assets/Bitmap (2).png" alt="">
                </div>
                <div>
                    <h2>03</h2>
                    <h3>The Growth of Gaming</h3>
                    <p>How the pandemic has sparked fresh opportunities.</p>
                </div>
            </div>
        </div>
    </article>
</body>
</html>