InnovateHub/index.html at main · SwamiTheDev/InnovateHub · 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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- favicon -->
    <link rel="icon"
        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🏣</text></svg>">

    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/responsive.css">
    <link rel="stylesheet" href="css/common.css">
    <title>InnovateHub</title>
</head>

<body>

    <header class="header container grid-layout">
        <!-- <a href="#main" class="skip-content font-body"> Skip to main content. </a> -->
        <div class="header-box grid-area">
            <a href="/" class="header__logo">
                InnovateHub <span class="spane"> &#9632;</span>
            </a>
            <nav class="nav">
                <button data-menu="button" aria-expanded="false" aria-controls="menu" aria-label="menu" type="button">
                    <svg width="24" height="18" aria-hidden="true">
                        <g fill="#000" fill-rule="evenodd" opacity=".5">
                            <path d="M0 0h24v2H0zM0 8h24v2H0zM0 16h24v2H0z" />
                        </g>
                    </svg>
                    <span class="sr-only">menu</span>
                    <svg aria-hidden="true" width="20" height="20">
                        <g fill-rule="evenodd" opacity=".5">
                            <path d="M2.222.808l16.97 16.97-1.414 1.414L.808 2.222z" />
                            <path d="M.808 17.778L17.778.808l1.414 1.414-16.97 16.97z" />
                        </g>
                    </svg>
                </button>

                <div class="nav__menu-box" data-menu="menu-list" id="menu">
                    <ul class="nav__list grid-layout" data-menu="list">
                        <li><a class="nav__link" href="#about">About</a></li>
                        <li><a class="nav__link" href="#service">Service</a></li>
                        <li><a class="nav__link" href="#project">Projects</a></li>
                    </ul>
                    <a class="nav__btn btn-font" href="#schedule">Schedule a Call</a>
                </div>
            </nav>
        </div>
    </header>

    <main>

        <section class="hero container">
            <div class="hero-box grid-layout">
                <div class="hero__content grid-area">
                    <h1 class="hero__title font-h1">
                        Branding & website design agency
                    </h1>
                    <p class="hero__desc font-body">
                        We specialize in visual storytelling by creating cohesive brand
                        and website design solutions for small businesses, giving lasting
                        impressions to audiences in a digital world.
                    </p>
                    <a class="hero__btn" href="#">Learn More</a>
                </div>
                <picture class="hero__img-box grid-area">
                    <source media="(max-width: 23.75rem)" srcset="./images/mobile/image-hero.jpg" />
                    <source media="(max-width: 41.25rem)" srcset="./images/mobile_/image-hero.jpg" />
                    <source media="(max-width: 58.75rem)" srcset="./images/tablet/image-hero.jpg" />
                    <img class="hero__img" src="./images/desktop/image-hero.jpg" aria-hidden="true" alt="" />
                </picture>
            </div>
        </section>

        <article class="section design grid-layout" id="about">
            <picture class="design__img-box">
                <source media="(max-width: 32.5rem)" srcset="./images/mobile/image-strategic.jpg" />
                <source media="(max-width: 48rem)" srcset="./images/tablet/image-strategic.jpg" />
                <img class="design__img" src="./images/desktop/image-strategic.jpg" aria-hidden="true" alt="" />
            </picture>
            <div class="design__content grid-layout">
                <div class="design__content-box">
                    <h2 class="design__title font-h2">
                        <span class="design__title--red">Design</span> is strategic.
                    </h2>
                    <p class="design__desc font-body">
                        “A well-crafted design strategy consistently produces desired
                        outcomes and brand awareness. We are firm believers that success
                        lies in creative collaboration with our clients.”
                    </p>
                    <a class="design__link grid-layout" href="#schedule">Schedule a Call</a>
                </div>
            </div>
        </article>

        <section class="section approach grid-layout" id="service">
            <div class="approach-box grid-area">
                <h2 class="approach__title grid-area font-h2">
                    Our approach for creating a winning brand
                </h2>
                <ul class="approach__list grid-area grid-layout">
                    <li class="approach__item grid-layout">
                        <span class="approach__number grid-area font-h1">01</span>
                        <div class="approach__item-box grid-area">
                            <h3 class="approach__sub font-h3">Brand Strategy</h3>
                            <p class="approach__desc font-body">
                                Brand strategy is critical for long-term success. Outshining
                                competitors and capturing the target audience are key.
                            </p>
                        </div>
                    </li>
                    <li class="approach__item grid-layout">
                        <span class="approach__number grid-area grid-area font-h1">02</span>
                        <div class="approach__item-box grid-area">
                            <h3 class="approach__sub font-h3">Brand Design</h3>
                            <p class="approach__desc font-body">
                                Keeping the brand design unique and meaningful helps in
                                communicating the brand’s timeless value effectively.
                            </p>
                        </div>
                    </li>
                    <li class="approach__item grid-layout">
                        <span class="approach__number grid-area font-h1">03</span>
                        <div class="approach__item-box grid-area">
                            <h3 class="approach__sub font-h3">Web Design</h3>
                            <p class="approach__desc font-body">
                                A beautifully crafted website is the best tool for brand
                                awareness, and ultimately results in increased revenues.
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="bg grid-area"></div>
        </section>

        <section class="section brand-box grid-layout" id="project">
            <div class="brand grid-layout grid-area">
                <div class="brand__title-box grid-area">
                    <h2 class="brand__title font-h2">Brand naming & guidelines</h2>
                </div>
                <div class="brand__content grid-layout grid-area">
                    <picture class="brand__img-box grid-area">
                        <source media="(max-width: 31.25rem)" srcset="../images/mobile/mobile marvels.png" />
                        <source media="(max-width: 50rem)" srcset="./images/tablet/mobile marvels.png" />
                        <img class="brand__img" src="./images/desktop/mobile marvels.png" aria-hidden="true" alt="" />
                    </picture>
                    <p class="brand__info grid-layout font-body grid-area">
                        <span>Mobile Marvels </span>
                        <span class="brand__date"> 2023 Project </span>
                    </p>
                </div>
            </div>

            <div class="brand grid-layout grid-area visible">
                <div class="brand__title-box grid-area">
                    <h2 class="brand__title font-h2">Brand identity & merchandise</h2>
                </div>
                <div class="brand__content grid-layout grid-area">
                    <picture class="brand__img-box grid-area">
                        <source media="(max-width: 31.25rem)" srcset="./images/mobile/travel thumbail.png" />
                        <source media="(max-width: 50rem)" srcset="./images/tablet/travel thumbail.png" />
                        <img class="brand__img" src="./images/desktop/travel thumbail.png" aria-hidden="true" alt="" />
                    </picture>
                    <p class="brand__info grid-area grid-layout font-body">
                        <span>Adventure</span>
                        <span class="brand__date">2023 Project</span>
                    </p>
                </div>
            </div>

            <div class="brand grid-layout grid-area visible">
                <div class="brand__title-box grid-area">
                    <h2 class="brand__title font-h2">Brand identity & web design</h2>
                </div>
                <div class="brand__content grid-layout grid-area">
                    <picture class="brand__img-box grid-area">
                        <source media="(max-width: 31.25rem)"
                            srcset="./images/mobile/anastase-maragos-9dzWZQWZMdE-unsplash.jpg" />
                        <source media="(max-width: 50rem)"
                            srcset="./images/tablet/anastase-maragos-9dzWZQWZMdE-unsplash.jpg" />
                        <img class="brand__img" src="./images/desktop/anastase-maragos-9dzWZQWZMdE-unsplash.jpg"
                            aria-hidden="true" alt="" />
                    </picture>
                    <p class="font-body brand__info grid-area grid-layout">
                        <span>BodyBlitz Gym</span>
                        <span class="brand__date">2023 Project</span>
                    </p>
                </div>
            </div>

            <div class="brand__btn-box">
                <button class="brand__btn-left" aria-label="left" type="button">
                    <span class="sr-only">left</span>
                    <svg aria-hidden="true" width="40" height="40">
                        <g transform="matrix(-1 0 0 1 40 0)" stroke="#F94F4F" fill="none" fill-rule="evenodd">
                            <circle cx="20" cy="20" r="19.5" />
                            <path stroke-width="2" d="M17.5 15l5 5-5 5" />
                        </g>
                    </svg>
                </button>
                <button class="brand__btn-right" aria-label="right" type="button">
                    <span class="sr-only">right</span>
                    <svg aria-hidden="true" width="40" height="40">
                        <g stroke="#F94F4F" fill="none" fill-rule="evenodd">
                            <circle cx="20" cy="20" r="19.5" />
                            <path stroke-width="2" d="M17.5 15l5 5-5 5" />
                        </g>
                    </svg>
                </button>
            </div>
        </section>
    </main>

    <footer class="footer container" id="schedule">
        <p class="footer__desc font-h2">Let's build something great together.</p>
        <a class="footer__btn btn-font" href="/">Schedule a Call</a>
    </footer>

    <p class="__dev_details">
        Desgin and Develop by <a href="https://swamithedev.vercel.app" target="_blank" class="
        __portfolio_link">Swamithedev</a>
    </p>

</body>
<script src="script.js"></script>

</html>