miranda-clone/index.html at main · ayythrva/miranda-clone · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Miranda — Paper Portfolio</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="main">
      <div id="page1">
        <div id="nav">
          <h5>Amsterdam, NL</h5>
          <img
            src="https://uploads-ssl.webflow.com/5f2429f172d117fcee10e819/5f7f87c8b81a6e7a214312f0_header.svg"
            alt=""
          />
          <i class="ri-menu-3-line"></i>
        </div>
        <div id="elems">
          <div id="elem1">
            <div id="img-div">
              <img src="img1.jpeg" alt="" />
            </div>
            <h3>AVRO | KO <span>NEW</span></h3>
            <p>
              AvroKO is an award-winning global design firm, established itself
              as a global leader in interior architecture for hospitality,
              restaurant and bars.
            </p>
          </div>
          <div id="elem2">
            <h2>ALL WORK!</h2>
            <h5>A Featured selection
                the latest work - <br>
                of the last years.
            </h5>
            <p><span>TIP!</span> Click on the image to explore</p>
          </div>
          <div id="elem3">
            <div id="img-div">
              <img src="img2.webp" alt="" />
            </div>
            <h3>THE ROGER HUB <span>NEW</span></h3>
            <p>
                The Roger Hub is an immersive web experience showcasing
                the tennis-inspired 'On' sneakers, a collaboration born out of
                a partnership with the legendary Roger Federer.
            </p>
          </div>

          </div>
        <div id="hero-text-div">
            <h1>MIRANDA</h1>
        </div>
        </div>
        <div id="page2">
            <div id="page2-left">
                <div id="line-sathicha-div">
                    <h2>INTERACTIVE <span>ARTIST!</span></h2>
                </div>
                <img src="img3.jpeg" alt="">
                <p><span>A</span>s a multidisciplinary freelancer,
                    I'm passionate about creating
                    iconic digital experiences
                    through motion, typography, and
                    creative coding for companies and
                    agencies around the world.</p>
            </div>
            <div id="page2-right">
                <img src="img4.jpeg" alt="">
                <h4 id="pahila">DIGITAL ART DIRECTOR</h4>
                <h4>INTERACTIVE DESIGNER</h4>
                <h4>CREATIVE DEVELOPER</h4>
                <h4>BASED IN AMSTERDAM, NL.</h4>
            </div>
        </div>
        <div id="page3">
            <h2>WEBSITE</h2>
            <img src="img5.png" alt="">
        </div>
        <div id="page4">
            <div id="page4-left">
                <div id="page4-left-top">
                    <div id="page4-elems">
                        <div id="page4-elem1">
                            <h2>UPCOMING NEXT</h2>
                            <h5>Fresh entry - A selected
                                work from the latest
                                digital releases.
                            </h5>
                            <p><span>TIP!</span> Click on the image to explore</p>
                          </div>
                        <div id="page4-elem2">
                          <div id="img-div">
                            <img src="img7.webp" alt="" />
                          </div>
                          <h3>UNEXPECTED TIME</h3>
                          <p>
                            Unexpected Time is a classic-furitistic gamification web
experience showcasing the lost history & culture in a world
dominated by the virtual reality.
                          </p>
                        </div>


                        </div>
                </div>
                <div id="page4-left-bottom">
                    <img src="img6.jpeg" alt="">
                </div>
            </div>
            <div id="page4-right">
                <div id="page4-line-sathicha-div">
                    <h2>THINK, CREATE <span>DELIVER</span></h2>
                </div>
                <p>A strong project is created by
                    deep collaboration. I design,
                    develop, and deliver websites
                    that drive results and win awards. <br><br>
                    Like an artisan, I like to start from raw
matter and give life to an iconic
product that makes your brand stand
out, starting from a Visual Strategy
that guide the client's vision to reality.
                </p>
                <div id="anda">
                    <h2>ALL WORK</h2>
                    <img src="https://cdn.prod.website-files.com/5f2429f172d117fcee10e819/61001a3509319b6ae39e156b_arrow-long.svg" alt="">
                </div>
            </div>
        </div>
        <div id="page5">
            <div id="scrolling-div">
                <h2>Let's create something together <span>EMAIL ME</span></h2>
                <h2>Let's create something together <span>EMAIL ME</span></h2>
                <h2>Let's create something together <span>EMAIL ME</span></h2>
                <h2>Let's create something together <span>EMAIL ME</span></h2>
            </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="script.js"></script>
  </body>
</html>