minimo/index.html at main · saSaimon/minimo · 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!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">
    <title>MINIMO</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">

</head>

<body>
    <!-- header part starts -->
    <Header>
        <div class="logo">
            <img src="./images/minimo.png" alt="logo">
        </div>
        <nav>
            <ul>
                <li><a href="">lifestyle</a></li>
                <li><a href="">photodiary</a></li>
                <li><a href="">music</a></li>
                <li><a href="">travel</a></li>
            </ul>
        </nav>
    </Header>
    <!-- header part ends -->

    <!-- banner part starts -->
    <section class="banner">
        <img src="./images/banner.png" alt="banner">
    </section>
    <!-- banner part ends -->

    <!-- photodiary starts -->

    <section class="photodiary">

        <h5>photodiary</h5>

        <h1>The perfect weekend getway</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem labore cupiditate illo veritatis magnam reprehenderit, suscipit inventore illum unde dolores facere vitae architecto, possimus odio, impedit eum similique at omnis! Quia repudiandae illum, sint nulla ullam sapiente perferendis, ex earum deleniti quibusdam vel labore quam hic impedit praesentium maxime obcaecati? Assumenda molestias quasi, aliquid minima obcaecati iste consequuntur a mollitia, rerum, fuga soluta quo quos aut atque nihil impedit velit corrupti quibusdam doloribus ex culpa? Quae fugiat non quaerat dolorum corporis? Dignissimos molestiae repellendus velit quae tempore nihil iusto nobis ad minima vero accusamus, aspernatur praesentium perspiciatis numquam inventore pariatur.

        </p>
        <h5>leave a comment</h5>

    </section>

    <!-- photodiary ends -->

    <!-- lifestyle section starts -->

    <section class="lifestyle">

        <div class="lifestyle_one">

        <img src="./images/pic1.png" alt="pic1">
        <h5>lifestyle</h5>
        <h1>More than a jsut a music festival</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit autem distinctio, maxime adipisci consequatur maiores libero vitae facere, reprehenderit voluptatum molestiae quibusdam incidunt sunt non a sint velit consequuntur placeat.</p>


        </div>


        <div class="lifestyle_two">
            <img src="./images/pic2.png" alt="pic2">
            <h5>lifestyle</h5>
            <h1>life tests better with coffee</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit autem distinctio, maxime adipisci consequatur maiores libero vitae facere, reprehenderit voluptatum molestiae quibusdam incidunt sunt non a sint velit consequuntur placeat.</p>

        </div>
    </section>

    <section class="lifestyle">

        <div class="lifestyle_three">

        <img src="./images/pic3.png" alt="pic3">
        <h5>photodiary</h5>
        <h1>American Dream</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit autem distinctio, maxime adipisci consequatur maiores libero vitae facere, reprehenderit voluptatum molestiae quibusdam incidunt sunt non a sint velit consequuntur placeat.</p>


        </div>


        <div class="lifestyle_four">
            <img src="./images/pic4.png" alt="pic4">
            <h5>photodiary</h5>
            <h1>A day exploring the Alps</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit autem distinctio, maxime adipisci consequatur maiores libero vitae facere, reprehenderit voluptatum molestiae quibusdam incidunt sunt non a sint velit consequuntur placeat.</p>

        </div>
    </section>
    <!-- lifestart section ends -->

    <!-- newsletter section start -->
    <section class="newsletter">
        <div class="news">
          <h1>Sign up for our newletter!</h1>
          <input
            type="email"
            name=""
            id="email"
            placeholder="Enter a valid email address"
          />
          <div class="send">
            <img src="images/sendicon.png" alt="image" />
          </div>
        </div>
      </section>
 <!-- newsletter section ends -->

    <!-- bottom lifestyle starts -->
    <section class="lifestyle">

        <div class="lifestyle_five">

        <img src="./images/pic5.png" alt="pic3">
        <h5>lifestyle</h5>
        <h1>Top 10 songs for running</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit autem distinctio, maxime adipisci consequatur maiores libero vitae facere, reprehenderit voluptatum molestiae quibusdam incidunt sunt non a sint velit consequuntur placeat.</p>


        </div>


        <div class="lifestyle_six">
            <img src="./images/pic6.png" alt="pic4">
            <h5>lifestyle</h5>
            <h1>Cold winter days</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit autem distinctio, maxime adipisci consequatur maiores libero vitae facere, reprehenderit voluptatum molestiae quibusdam incidunt sunt non a sint velit consequuntur placeat.</p>

        </div>
    </section>


    <!-- bottom lifestyle ends -->

    <!-- load more section starts -->
    <section class="load">
        <div  class="loadmore">
            <input type="button" value="Load more" id="">
        </div>
    </section>
    <!-- load more section ends -->

    <!-- footer part starts -->

    <footer>
        <div class="terms">
            <ul>
                <li><a href="">Terms and condition</a></li>
                <li><a href="">Privacy</a></li>

            </ul>
        </div>
        <div class="social">
            <ul>
                <li><a href="">Follow</a></li>
                <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
                <li><a href=""><i class="fab fa-instagram"></i></a></li>
                <li><a href=""><i class="fab fa-twitter"></i></a></li>
            </ul>
        </div>

    </footer>
    <!-- footer part ends -->


</body>

</html>