Skip to content

Commit

Permalink
Fixed element positions in cards
Browse files Browse the repository at this point in the history 
Update 1.3.2
Fixed actions in cards and title and description position
  • Loading branch information
@KirillKapteily
KirillKapteily committed Jun 9, 2024
1 parent a261d8f commit c04f7c3
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 50 deletions.
116 changes: 79 additions & 37 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<body>
<div class="container">
<header>

<a href="index.html" class="antools"> <img src="images/logo.png" alt="Antools" class="imgh"> antools.</a>
<nav class="header-nav">
<ul class="header-list">
Expand Down Expand Up @@ -67,58 +67,82 @@ <h1 class="main-titlee">Most Popular Tools</h1>
most popularly used in the world</p>
<ul class="pop-tool-list">
<li class="pop-tool-item">
<img src="images/figma.png" alt="figma">
<h3 class="card-title">FIGMA</h3>
<p class="card-par">Free</p>
<img src="images/figma.png" alt="figma" class="card-img">
<div class="pord-info">
<h3 class="card-title">FIGMA</h3>
<p class="card-par">Free</p>
</div>
<p class="card-desctip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<button type="button" class="visit-button">Visit</button>
<div class="card-actions">
<img src="images/like.png" alt="like" class="like" class="card-immg">
<img src="images/folder.png" alt="folder" class="folder" class="card-immg">
<button type="button" class="visit-button">Visit</button>
</div>
</li>
<li class="pop-tool-item">
<img src="images/sketch.png" alt="sketch">
<h3 class="card-title">Sketch</h3>
<p class="card-par">Trial & Paid</p>
<img src="images/sketch.png" alt="sketch" class="card-img">
<div class="pord-info">
<h3 class="card-title">Sketch</h3>
<p class="card-par">Trial & Paid</p>
</div>
<p class="card-desctip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card-actions">
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<button type="button" class="visit-button">Visit</button>
</div>
</li>
<li class="pop-tool-item">
<img src="images/visualstudiocode.png" alt="Visual Studio Code">
<h3 class="card-title">Visual Studio Code</h3>
<p class="card-par">Free</p>
<img src="images/visualstudiocode.png" alt="Visual Studio Code" class="card-img">
<div class="pord-info">
<h3 class="card-title">Visual Studio Code</h3>
<p class="card-par">Free</p>
</div>
<p class="card-desctip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card-actions">
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<button type="button" class="visit-button">Visit</button>
</div>
</li>
<li class="pop-tool-item">
<img src="images/notion.png" alt="Notion">
<h3 class="card-title">Notion</h3>
<p class="card-par">Free & Paid</p>
<img src="images/notion.png" alt="Notion" class="card-img">
<div class="pord-info">
<h3 class="card-title">Notion</h3>
<p class="card-par">Free & Paid</p>
</div>
<p class="card-desctip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card-actions">
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<button type="button" class="visit-button">Visit</button>
</div>
</li>
<li class="pop-tool-item">
<img src="images/slack.png" alt="Slack">
<h3 class="card-title">Slack</h3>
<p class="card-par">Free & Paid</p>
<img src="images/slack.png" alt="Slack" class="card-img">
<div class="pord-info">
<h3 class="card-title">Slack</h3>
<p class="card-par">Free & Paid</p>
</div>
<p class="card-desctip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card-actions">
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<button type="button" class="visit-button">Visit</button>
</div>
</li>
<li class="pop-tool-item">
<img src="images/invision.png" alt="Invision">
<h3 class="card-title">Invision</h3>
<p class="card-par">Free & Paid</p>
<img src="images/invision.png" alt="Invision" class="card-img">
<div class="pord-info">
<h3 class="card-title">Invision</h3>
<p class="card-par">Free & Paid</p>
</div>
<p class="card-desctip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button type="button" class="visit-button">Visit</button>
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<div class="card-actions">
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<button type="button" class="visit-button">Visit</button>
</div>
</li>
</ul>
<button type="button" class="load-more-button">Load more</button>
Expand All @@ -137,44 +161,61 @@ <h2 class="main-titlee2">Trusted more than 150+ brand</h2>
<section>
<h1 class="main-titlee3">Newcomer Tools</h1>
<p class="main-para12">Wow! see the latest update of the most <br>recommended tools from reliable designers
<br> and developers</p>
<br> and developers
</p>
<button type="button" class="explore-more-button">Explore more</button>
<ul class="newcomer-tools">
<li class="newcomer-tools-item">
<img src="images/zeplin.png" alt="Zeplin">
<img src="images/zeplin.png" alt="Zeplin" class="card-img">
<div class="pord-info">
<h3 class="card-title2">Zeplin</h3>
<p class="card-par2">Free & Paid</p>
</div>
<p class="card-desctip2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card-actions-2">
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<button type="button" class="visit-button">Visit</button>
<button type="button" class="visit-button-2">Visit</button>
</div>
</li>
<li class="newcomer-tools-item">
<img src="images/phpstorm.png" alt="PHPStorm">
<img src="images/phpstorm.png" alt="PHPStorm" class="card-img">
<div class="pord-info">
<h3 class="card-title2">PHPStorm</h3>
<p class="card-par2">Free</p>
</div>
<p class="card-desctip2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card-actions-2">
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<button type="button" class="visit-button">Visit</button>
<button type="button" class="visit-button-2">Visit</button>
</div>
</li>
<li class="newcomer-tools-item">
<img src="images/toolbox.png" alt="toolbox">
<img src="images/toolbox.png" alt="toolbox" class="card-img">
<div class="pord-info">
<h3 class="card-title2">Toolbox</h3>
<p class="card-par2">Free</p>
</div>
<p class="card-desctip2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card-actions-2">
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<button type="button" class="visit-button">Visit</button>
<button type="button" class="visit-button-2">Visit</button>
</div>
</li>
<li class="newcomer-tools-item">
<img src="images/procreate.png" alt="Procreate">
<img src="images/procreate.png" alt="Procreate" class="card-img">
<div class="pord-info">
<h3 class="card-title2">Procreate</h3>
<p class="card-par2">Paid</p>
</div>
<p class="card-desctip2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card-actions-2">
<img src="images/like.png" alt="like" class="like">
<img src="images/folder.png" alt="folder" class="folder">
<button type="button" class="visit-button">Visit</button>
<button type="button" class="visit-button-2">Visit</button>
</div>
</li>
</ul>
</section>
Expand Down Expand Up @@ -204,8 +245,9 @@ <h1 class="main-titlee">Become a contributor?</h1>
<div class="container">
<footer>
<ul class="footer-list-i">
<img src="images/logoor.png" alt="Antools">
<a href="index.html" class="antools" class="antools-f">antools.</a>

<a href="index.html" class="antools" class="antools-f"><img src="images/logoor.png" alt="Antools"
class="imgf">antools.</a>
<li><b class="copyright">Copyright 2021. Antools</b></li>
<li>
<p class="footer-desc">Antool is a web collection of <br> information on paid or free Design <br>
Expand All @@ -214,7 +256,7 @@ <h1 class="main-titlee">Become a contributor?</h1>
</ul>
<ul class="footer-list">
<b class="footer-font-i">Contact Us</b>
<li><a href="tel:+621987463" class="footer-link">+621987463</a></li>
<li><a href="tel:+621987463" class="footer-link" class="tel">+621987463</a></li>
<li>
<p class="footer-link">M Building, No.10 A</p>
</li>
Expand Down
Loading

0 comments on commit c04f7c3

Please sign in to comment.