Online tools, scripts en SEO-generators voor iedereen

Heel erg mooie index!

Voorbeeld:

🆕 Laatste nieuws Nieuws & updates UPDATES 🛠️ Online tools Generators en meer POPULAIR 👾 Alle scripts Javascripts, PHP, HTML, CSS, etc SCRIPTS 💾 Downloads Windows, iOS, Android, etc SOFTWARE 📝 Sollicitatie generator Dezespeciale bot schrijft jouw motivatie POPULAIR 🗣️ Voice generator Laat ons systeem jouw tekst zeggen NIEUW 🆕 🤡 Meme generator Maak je eigen Meme plaatjes HOT 🔥 💻 SEO Website checker Analyseer je website TOOL 🧑‍💻 ✨ SEO Generator Maak SEO-titels en meta descriptions met AI NIEUW 🆕 🧪 HTML Tester Test snel je HTML-code online NIEUW 🆕 ⚡ HTML naar Javascript Zet HTML-code om naar Javascript ☢️ TIP 🚨 🤱 Studio ViaNova De moeder van al onze websites 🖥️ URL 🔗

HTML Code

<div class=”tj-tools”>

<!– Nieuw –>
<a class=”tj-tool” href=”/nieuws”> <span class=”tj-icon”>🆕</span> <span class=”tj-info”> <strong>Laatste nieuws</strong> <small>Nieuws & updates</small> </span> <span class=”tj-badge tj-algemeen”>UPDATES</span> </a> 

<!– Online tools –>
<a class=”tj-tool” href=”/online-tools”> <span class=”tj-icon”>🛠️</span> <span class=”tj-info”> <strong>Online tools</strong> <small>Generators en meer</small> </span> <span class=”tj-badge tj-hot”>POPULAIR</span> </a> 

<!– Scripts –>
<a class=”tj-tool” href=”/alle-scripts”> <span class=”tj-icon”>👾</span> <span class=”tj-info”> <strong>Alle scripts</strong> <small>Javascripts, PHP, HTML, CSS, etc</small> </span> <span class=”tj-badge tj-tip”>SCRIPTS</span> </a> 



<!– Downloads –>
<a class=”tj-tool” href=”/download-index”> <span class=”tj-icon”>💾</span> <span class=”tj-info”> <strong>Downloads</strong> <small>Windows, iOS, Android, etc</small> </span> <span class=”tj-badge tj-algemeen”>SOFTWARE</span> </a> 

<!– Sollicitatie generator  –>
<a class=”tj-tool tj-new” href=”online-tools/solicitatie-generato”> <span class=”tj-icon”>📝</span> <span class=”tj-info”> <strong>Sollicitatie generator</strong> <small>Dezespeciale bot schrijft jouw motivatie</small> </span> <span class=”tj-badge tj-hot”>POPULAIR</span> </a>


<!– Voice generator –>
<a class=”tj-tool tj-new” href=”/voice-generator”> <span class=”tj-icon”>🗣️</span> <span class=”tj-info”> <strong>Voice generator</strong> <small>Laat ons systeem jouw tekst zeggen</small> </span> <span class=”tj-badge”>NIEUW 🆕</span> </a> 

<!– Meme generator –>
<a class=”tj-tool” href=”/online-tools”> <span class=”tj-icon”>🤡</span> <span class=”tj-info”> <strong>Meme generator</strong> <small>Maak je eigen Meme plaatjes</small> </span> <span class=”tj-badge tj-hot”>HOT 🔥</span> </a> 

<!– Website checker –>
<a class=”tj-tool tj-new” href=”/website-checker”> <span class=”tj-icon”>💻</span> <span class=”tj-info”> <strong>SEO Website checker</strong> <small>Analyseer je website</small> </span> <span class=”tj-badge tj-tooltje”>TOOL 🧑‍💻</span> </a> 

<!–SEO Titels maken  –>
<a class=”tj-tool tj-tool” href=”/seo-generator”> <span class=”tj-icon”>✨</span> <span class=”tj-info”> <strong>SEO Generator</strong> <small>Maak SEO-titels en meta descriptions met AI</small> </span> <span class=”tj-badge”>NIEUW 🆕</span> </a> 

<!– HTML tester –>
<a class=”tj-tool tj-new” href=”/html-tester”> <span class=”tj-icon”>🧪</span> <span class=”tj-info”> <strong>HTML Tester</strong> <small>Test snel je HTML-code online</small> </span> <span class=”tj-badge”>NIEUW 🆕</span> </a> 

<!– HTML naar Javascript –>
<a class=”tj-tool” href=”/html2java”> <span class=”tj-icon”>⚡</span> <span class=”tj-info”> <strong>HTML naar Javascript</strong> <small>Zet HTML-code om naar Javascript</small> </span> <span class=”tj-badge tj-tip”>☢️ TIP 🚨</span> </a> 

<!– Studio ViaNova –>
<a target=”_blank” class=”tj-tool” href=”https://studiovianova.nl”> <span class=”tj-icon”>🤱</span> <span class=”tj-info”> <strong>Studio <i>Via</i>Nova</strong> <small>De moeder van al onze websites</small> </span> <span class=”tj-badge tj-tip”>🖥️ URL 🔗</span> </a> 
</div>

CSS Style
Zie onderstaande

<style>
/* ==============================
   TOOLJUNKIE - ONLINE TOOLS MENU
   ============================== */
.tj-tools {
    width: 100%;
    max-width: 850px;
    margin: 15px auto 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
/* Tegel */
.tj-tool,
.tj-tool:link,
.tj-tool:visited {
    position: relative;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(0,0,0,.08);
    color: #333;
    text-decoration: none;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}
/* Hover */
.tj-tool:hover {
    transform: translateY(-2px);
    border-color: #3b8dbd;
    box-shadow:
        0 5px 15px rgba(0,0,0,.13);
    text-decoration: none;
}
/* Icoon */
.tj-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f1f3f5;
    font-size: 22px;
}
/* Tekst */
.tj-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tj-info strong {
    color: #333;
    font-size: 14px;
    line-height: 1.25;
}
.tj-info small {
    color: #888;
    font-size: 11px;
    line-height: 1.35;
}
/* NEW / TIP */
.tj-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 2px 10px 0 10px;
    border-radius: 4px;
  -webkit-box-shadow: 0px 0px 2px 1px #1115;
    background: #ff174d;
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: .5px;
}
.tj-badge.tj-tip {
    background: #3b8dbd;
}
.tj-badge.tj-tooltje {
    background: green;
}
.tj-badge.tj-algemeen {
    background: #3332;
color: #333;
}
.tj-badge.tj-hot {
  background: #f3f92a;
  color: #111;
//  text-shadow: #161616 0.5px 0.7px 1px, #222 0px 0px 1px;
}
 
/* Mobiel */
@media (max-width: 650px) {
    .tj-tools {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .tj-tool {
        min-height: 70px;
        padding: 11px 13px;
    }
    .tj-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        font-size: 20px;
    }
}
.hidden {
  display: none;
}
</style>

HTML & CSS in één

<div class="tj-tools">

<!-- Nieuw -->
<a class="tj-tool" href="/nieuws"> <span class="tj-icon">🆕</span> <span class="tj-info"> <strong>Laatste nieuws</strong> <small>Nieuws & updates</small> </span> <span class="tj-badge tj-algemeen">UPDATES</span> </a> 

<!-- Online tools -->
<a class="tj-tool" href="/online-tools"> <span class="tj-icon">🛠️</span> <span class="tj-info"> <strong>Online tools</strong> <small>Generators en meer</small> </span> <span class="tj-badge tj-hot">POPULAIR</span> </a> 

<!-- Scripts -->
<a class="tj-tool" href="/alle-scripts"> <span class="tj-icon">👾</span> <span class="tj-info"> <strong>Alle scripts</strong> <small>Javascripts, PHP, HTML, CSS, etc</small> </span> <span class="tj-badge tj-tip">SCRIPTS</span> </a> 



<!-- Downloads -->
<a class="tj-tool" href="/download-index"> <span class="tj-icon">💾</span> <span class="tj-info"> <strong>Downloads</strong> <small>Windows, iOS, Android, etc</small> </span> <span class="tj-badge tj-algemeen">SOFTWARE</span> </a> 

<!-- Sollicitatie generator  -->
<a class="tj-tool tj-new" href="online-tools/solicitatie-generato"> <span class="tj-icon">📝</span> <span class="tj-info"> <strong>Sollicitatie generator</strong> <small>Dezespeciale bot schrijft jouw motivatie</small> </span> <span class="tj-badge tj-hot">POPULAIR</span> </a>


<!-- Voice generator -->
<a class="tj-tool tj-new" href="/voice-generator"> <span class="tj-icon">🗣️</span> <span class="tj-info"> <strong>Voice generator</strong> <small>Laat ons systeem jouw tekst zeggen</small> </span> <span class="tj-badge">NIEUW 🆕</span> </a> 

<!-- Meme generator -->
<a class="tj-tool" href="/online-tools"> <span class="tj-icon">🤡</span> <span class="tj-info"> <strong>Meme generator</strong> <small>Maak je eigen Meme plaatjes</small> </span> <span class="tj-badge tj-hot">HOT 🔥</span> </a> 

<!-- Website checker -->
<a class="tj-tool tj-new" href="/website-checker"> <span class="tj-icon">💻</span> <span class="tj-info"> <strong>SEO Website checker</strong> <small>Analyseer je website</small> </span> <span class="tj-badge tj-tooltje">TOOL 🧑‍💻</span> </a> 

<!--SEO Titels maken  -->
<a class="tj-tool tj-tool" href="/seo-generator"> <span class="tj-icon">✨</span> <span class="tj-info"> <strong>SEO Generator</strong> <small>Maak SEO-titels en meta descriptions met AI</small> </span> <span class="tj-badge">NIEUW 🆕</span> </a> 

<!-- HTML tester -->
<a class="tj-tool tj-new" href="/html-tester"> <span class="tj-icon">🧪</span> <span class="tj-info"> <strong>HTML Tester</strong> <small>Test snel je HTML-code online</small> </span> <span class="tj-badge">NIEUW 🆕</span> </a> 

<!-- HTML naar Javascript -->
<a class="tj-tool" href="/html2java"> <span class="tj-icon">⚡</span> <span class="tj-info"> <strong>HTML naar Javascript</strong> <small>Zet HTML-code om naar Javascript</small> </span> <span class="tj-badge tj-tip">☢️ TIP 🚨</span> </a> 

<!-- Studio ViaNova -->
<a target="_blank" class="tj-tool" href="https://studiovianova.nl"> <span class="tj-icon">🤱</span> <span class="tj-info"> <strong>Studio <i>Via</i>Nova</strong> <small>De moeder van al onze websites</small> </span> <span class="tj-badge tj-tip">🖥️ URL 🔗</span> </a> 
</div>


<style>
/* ==============================
   TOOLJUNKIE - ONLINE TOOLS MENU
   ============================== */
.tj-tools {
    width: 100%;
    max-width: 850px;
    margin: 15px auto 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
/* Tegel */
.tj-tool,
.tj-tool:link,
.tj-tool:visited {
    position: relative;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(0,0,0,.08);
    color: #333;
    text-decoration: none;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}
/* Hover */
.tj-tool:hover {
    transform: translateY(-2px);
    border-color: #3b8dbd;
    box-shadow:
        0 5px 15px rgba(0,0,0,.13);
    text-decoration: none;
}
/* Icoon */
.tj-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f1f3f5;
    font-size: 22px;
}
/* Tekst */
.tj-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tj-info strong {
    color: #333;
    font-size: 14px;
    line-height: 1.25;
}
.tj-info small {
    color: #888;
    font-size: 11px;
    line-height: 1.35;
}
/* NEW / TIP */
.tj-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 2px 10px 0 10px;
    border-radius: 4px;
  -webkit-box-shadow: 0px 0px 2px 1px #1115;
    background: #ff174d;
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: .5px;
}
.tj-badge.tj-tip {
    background: #3b8dbd;
}
.tj-badge.tj-tooltje {
    background: green;
}
.tj-badge.tj-algemeen {
    background: #3332;
color: #333;
}
.tj-badge.tj-hot {
  background: #f3f92a;
  color: #111;
//  text-shadow: #161616 0.5px 0.7px 1px, #222 0px 0px 1px;
}
 
/* Mobiel */
@media (max-width: 650px) {
    .tj-tools {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .tj-tool {
        min-height: 70px;
        padding: 11px 13px;
    }
    .tj-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        font-size: 20px;
    }
}
.hidden {
  display: none;
}
</style>

Heel erg mooi index overzicht (menu)

Geef een reactie Reactie annuleren