3D Weather Card ✨

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

3D Weather Card ✨

For full source code visit : https://freecodez.com/post/2guecqb

<!-- https://freecodez.com -->

<div class="container">
    <div class="card">
        <div class="w-title"> Mostly Sunny </div>
        <div class="time"> now </div>
        <div class="temp"> 30&deg;C </div>
        <h2>Greater Noida</h2>
        <div class="weather weather--sun">
            <div class="icon">
                <div class="icon__sun">
                    <div class="icon__sun-lights">
                        <div class="icon__sun-light"></div>
                        <div class="icon__sun-light"></div>
                        <div class="icon__sun-light"></div>
                        <div class="icon__sun-light"></div>
                        <div class="icon__sun-light"></div>
                        <div class="icon__sun-light"></div>
                        <div class="icon__sun-light"></div>
                        <div class="icon__sun-light"></div>
                    </div>
                </div>
                <div class="icon__cloud">
                    <div class="icon__cloud-reflect icon__cloud-reflect--1">
                    </div>
                    <div class="icon__cloud-reflect icon__cloud-reflect--2">
                    </div>
                    <svg class="icon__cloud-svg" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewbox="0 0 200 500"
                        width="50%">
                        <clipPath id="cloud-path">
                            <path
                                d=" M 146.5 293 C 65.644 293 0 227.356 0 146.5 C 0 65.644 65.644 0 146.5 0 C 205.641 0 256.643 35.12 279.772 85.624 C 293.416 79.445 308.559 76 324.5 76 C 384.383 76 433 124.617 433 184.5 C 433 244.383 384.383 293 324.5 293 L 324.5 293 C 324.5 293 324.5 293 324.5 293 L 146.5 293 Z "
                                fill="currentColor" />
                        </clipPath>
                    </svg>
                </div>
                <div class="icon__cloud-shadow">
                </div>
            </div>
        </div>
    </div>
</div>

Source Code : https://freecodez.com/post/2guecqb

For more such articles visit : https://freecodez.com