Hi Everyone,
i'm a web developer apprentice that is trying to replicate for a project this grid of boxes with related content, https://www.ibm.com/cloud/products, but i'm having trouble to find a tutorial or a documentation too about this kind of solution. Do you have any suggestion where i could find another similar job to learn this function?
Until now i learned how to make a card with a toggle function but it's not exactly the goal i need, here the result i got until now https://gf-deployment.it/test/index.html.
Here the code:
Thanks in advance!
i'm a web developer apprentice that is trying to replicate for a project this grid of boxes with related content, https://www.ibm.com/cloud/products, but i'm having trouble to find a tutorial or a documentation too about this kind of solution. Do you have any suggestion where i could find another similar job to learn this function?
Until now i learned how to make a card with a toggle function but it's not exactly the goal i need, here the result i got until now https://gf-deployment.it/test/index.html.
Here the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="style.css"/>
<title>Test</title>
</head>
<body>
<div class="card">
<div class="content">
<div class="profile">
<img src="img/icona_smartsafety.png"/>
</div>
<h3>SMART SAFETY</h3>
</div>
<ul class="nav">
<li>
<a href="#">
Man Down
</a>
</li>
<li>
<a href="#">
Man Down
</a>
</li>
<li>
<a href="#">
Man Down
</a>
</li>
</ul>
<div class="toggle">
<ion-icon name="chevron-down-outline"></ion-icon>
</div>
</div>
<br><br><br><br>
<div class="iot-solutions">
<div class="box">
<div class="selected">
<div>
<img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
</div>
<div class="titolo-chevron">
<h4 class="H4">SMART SAFETY</h4>
<div class="chevron">
<ion-icon name="chevron-down-outline"></ion-icon>
</div>
</div>
</div>
</div>
<div class="content-box" style="grid-row-start: 2;">
<div class="title-row">
<div class="title-row-content">
<h2 class="H2">SMART SAFETY</h2>
<div class="text-link">
<p class="css-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#" class="solution-link">See more</a>
</div>
</div>
</div>
<div class="use-cases">
<a href="#" class="use-cases-link">Lorem Ipsum</a>
<p class="css-cases">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, nostrum! Perferendis nihil facilis deserunt!</p>
</div>
</div>
<div class="box">
<div class="selected">
<div>
<img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
</div>
<div class="titolo-chevron">
<h4 class="H4">SMART SAFETY</h4>
<div class="chevron">
<ion-icon name="chevron-down-outline"></ion-icon>
</div>
</div>
</div>
</div>
<div class="box">
<div class="selected">
<div>
<img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
</div>
<div class="titolo-chevron">
<h4 class="H4">SMART SAFETY</h4>
<span class="chevron">
<ion-icon name="chevron-down-outline"></ion-icon>
</span>
</div>
</div>
</div>
<div class="box">
<div class="selected">
<div>
<img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
</div>
<div class="titolo-chevron">
<h4 class="H4">SMART SAFETY</h4>
<span class="chevron">
<ion-icon name="chevron-down-outline"></ion-icon>
</span>
</div>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script>
const card = document.querySelector(".card");
const cardtoggle = document.querySelector(".toggle");
cardtoggle.onclick = function () {
card.classList.toggle("active");
};
</script>
</body>
</html>
Thanks in advance!