css-grid-layout-sample-web/about.html at main · sara-farokhi/css-grid-layout-sample-web · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />

    <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=Anton&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>news</title>
</head>

<body>
    <header>
        <!-- NAV -->
        <nav>
            <div class="nav container">

                <div class="nav-logo">GRID WEBSITE</div>
                <div class="socials">
                    <i class="fab fa-twitter"></i>
                    <i class="fab fa-facebook"></i>
                    <i class="fab fa-instagram"></i>
                    <i class="fab fa-youtube"></i>

                </div>
                <ul class="menu">
                    <li><a href="index.html">home</a></li>
                    <li><a href="about.html" class="current">about</a></li>
                </ul>
            </div>
        </nav>


    </header>
    <main>
        <!-- NEWS -->
        <div class="container">
            <div class="single-news-inner my-5">
                <div class="news-info card">

                    <h2>ABOUT US
                    </h2>

                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis dolorem voluptas reprehenderit asperiores vel, odit ipsa nemo exercitationem. Veniam tempora ab voluptas cumque iure mollitia tempore assumenda culpa nisi deleniti.</p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur iure incidunt asperiores exercitationem sint natus eum, nisi voluptatum quisquam, adipisci qui dolor itaque fugiat minus! Natus repellendus sint quis ullam? Lorem, ipsum dolor sit amet
                        consectetur adipisicing elit. Nam voluptatem minus natus libero, aperiam cumque ducimus officiis et iure adipisci quisquam expedita ipsum hic impedit eveniet obcaecati iste facere quod. Lorem ipsum dolor sit amet consectetur adipisicing
                        elit. Quis dolorem voluptas reprehenderit asperiores vel, odit ipsa nemo exercitationem. Veniam tempora ab voluptas cumque iure mollitia tempore assumenda culpa nisi deleniti.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis dolorem voluptas reprehenderit asperiores vel, odit ipsa nemo exercitationem. Veniam tempora ab voluptas cumque iure mollitia tempore assumenda culpa nisi deleniti.</p>

                </div>
                <div class="cat-join ">

                    <div class="join card">
                        <h2>join us</h2>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam distinctio itaque mollitia quo vero labore quidem temporibus tempora, voluptatum non excepturi nesciunt sed eos eaque doloremque alias amet illo optio.</p>
                        <div class="btn main-btn ">JOIN NOW</div>

                    </div>
                </div>


            </div>

        </div>
    </main>
    <footer class="py-3">
        <div class="container">
            <div class="footer-inner">
                <div class="col">
                    <h2>ANIMALS</h2>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde nostrum dolorem, ut voluptatem repellat accusantium ipsa ad a, debitis alias, voluptate sit. Est, eius? Animi facilis qui laudantium iste molestiae.
                </div>

                <div class="col">
                    <h2>EMAIL</h2>
                    <P>Lorem ipsum dolor sit amet consectetur, adipisicing</P>
                    <input type="text" placeholder="Enter Email">
                    <div class="btn second-btn">SUBMIT</div>
                </div>
                <div class="col">
                    <h2>SITE LINKS</h2>
                    <ul>
                        <li>Help & Support</li>
                        <li>Privacy & Policy
                        </li>
                        <li>About Us
                        </li>
                        <li>Contact</li>
                    </ul>
                </div>
                <div class="col">
                    <h2>JOIN US</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit

                    </p>
                    <div class="btn main-btn"> JOIN NOW</div>

                </div>
            </div>
        </div>
    </footer>

</body>

</html>