Skip to content

Commit

Permalink
Add animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Max1mkasssss
Max1mkasssss committed Feb 13, 2024
1 parent 4334219 commit 670f2d6
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 16 deletions.
3 changes: 3 additions & 0 deletions Readme.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,6 @@ <h3 align="left">Languages and Tools:</h3>

<h3 align="left">Support:</h3>
<p><a href="https://www.buymeacoffee.com/Nice!"> <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="Nice!" /></a></p><br><br>



41 changes: 25 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,15 @@
<!-- Website Icon -->
<link rel="website icon" href="/img/logotype.svg">

<!-- Animation -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

</head>

<body class="no-select" translate="no">
<!-- Header -->
<header class="header">
<header class="header animate__animated animate__backInLeft">
<div class="container">
<nav class="nav-bar flex">
<div class="logotype-wrapp flex">
Expand All @@ -46,14 +50,13 @@ <h3>antools.</h3>
<main class="main">

<!-- Section-1 (Hero) -->
<section class="hero">
<section class="hero animate__animated animate__backInLeft" >
<div class="container">
<div class="background-section-hero">
<div class="wrapper-section-hero flex">
<div class="text-block-section-hero">
<h1>Awesome tools for Designer & Developer<span class="accent-point">.</span></h1>
<h2>Antool is a web collection of information on paid or free Design and Development tools
</h2>
<h1 class="">Awesome tools for Designer & Developer<span class="accent-point">.</span></h1>
<h2>Antool is a web collection of information on paid or free Design and Development tools</h2>
<div class="input-wrapper flex">
<img src="/img/search.svg" alt="">
<input type="text" placeholder="find more than 430+ tools...">
Expand All @@ -69,15 +72,15 @@ <h2>Antool is a web collection of information on paid or free Design and Develop
</div>
</div>
</section>
<section class="most-popular-tools">
<section data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine" class="most-popular-tools">
<div class="container">
<h2 id="Categories">Most Popular Tools</h2>
<h3>Tools for the best Designers and Developers
<br> most popularly used in the world
</h3>
<div class="cards">
<ul class="card-list flex">
<li class="card-list-item">
<li class="card-list-item">
<div class="card-text-about-apps flex">
<img src="/img/figma-logo.svg" alt="">
<div class="card-text-about-apps-wrapper flex">
Expand All @@ -94,7 +97,7 @@ <h4>Free</h4>
<p><a href="#">Visit</a></p>
</div>
</li>
<li class="card-list-item">
<li class="card-list-item">
<div class="card-text-about-apps flex">
<img src="/img/scetch-logo.svg" alt="">
<div class="card-text-about-apps-wrapper flex">
Expand All @@ -111,7 +114,7 @@ <h4>Trial & Paid</h4>
<p><a href="#">Visit</a></p>
</div>
</li>
<li class="card-list-item">
<li class="card-list-item">
<div class="card-text-about-apps flex">
<img src="/img/vs-code-logo.svg" alt="">
<div class="card-text-about-apps-wrapper flex">
Expand All @@ -128,7 +131,7 @@ <h4>Free</h4>
<p><a href="#">Visit</a></p>
</div>
</li>
<li class="card-list-item">
<li class="card-list-item">
<div class="card-text-about-apps flex">
<img src="/img/notion-logo.svg" alt="">
<div class="card-text-about-apps-wrapper flex">
Expand All @@ -145,7 +148,7 @@ <h4>Free & Paid</h4>
<p><a href="#">Visit</a></p>
</div>
</li>
<li class="card-list-item">
<li class="card-list-item">
<div class="card-text-about-apps flex">
<img src="/img/slack-logo.svg" alt="">
<div class="card-text-about-apps-wrapper flex">
Expand All @@ -162,7 +165,7 @@ <h4>Free & Paid</h4>
<p><a href="#">Visit</a></p>
</div>
</li>
<li class="card-list-item">
<li class="card-list-item">
<div class="card-text-about-apps flex">
<img src="/img/invision-logo.svg" alt="">
<div class="card-text-about-apps-wrapper flex">
Expand All @@ -188,7 +191,7 @@ <h4>Free & Paid</h4>
</section>

<!-- Section-2 -->
<section class="net-works">
<section class="net-works" data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine" class="most-popular-tools">
<div class="container">
<div class="net-works-section-wrapper">
<h2>Trusted more than 150+ brand</h2>
Expand All @@ -203,7 +206,7 @@ <h2>Trusted more than 150+ brand</h2>
</section>

<!-- section 3 -->
<section class="Newcomer-Tools">
<section class="Newcomer-Tools" data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine" class="most-popular-tools">
<div class="container">
<div class="Newcomer-tools-wrapper flex">
<div class="Newcomer-tools-section-text-block">
Expand Down Expand Up @@ -289,7 +292,7 @@ <h4>Paid</h4>
</section>


<section class="section-4">
<section class="section-4" data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine" class="most-popular-tools">
<div class="container">
<div class="wrapper-section-4 flex">
<div class="foto-section-4">
Expand All @@ -309,7 +312,7 @@ <h3>Ronald Richards</h3>
</div>
</div>
</section>
<section class="BAA">
<section class="BAA" data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine" class="most-popular-tools">
<div class="container">
<h2>Become a contributor?</h2>
<p style="width: 427px; text-align: center;">Join us and get tips & tricks to become a great Designer and Developer</p>
Expand Down Expand Up @@ -354,6 +357,12 @@ <h3 class="logo-footer">Company Info</h3>
</ul>
</div>
</footer>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>

</body>

</html>

0 comments on commit 670f2d6

Please sign in to comment.