Cum se adaugă o linie orizontală în HTML?
Crearea unei pagini web atractive din punct de vedere vizual și bine structurat implică adesea utilizarea de linii orizontale. Aceste rânduri pot ajuta la separarea diferitelor secțiuni de conținut, facilitând citirea și înțelegerea informațiilor prezentate de către utilizatori. În acest ghid, vom explora două metode eficiente de a adăuga linii orizontale în HTML: folosind >
etichete și proprietăți CSS.
Diferite abordări pentru a adăuga o linie orizontală în HTML
1. Folosind
etichetă:
The Regula orizontală t la (
) este folosit pentru a insera linii orizontale în documentul HTML pentru a separa secțiuni ale documentului. Este o etichetă goală sau neîmperecheată, ceea ce înseamnă că nu este nevoie de eticheta de închidere.
Exemplu: Acest exemplu descrie
eticheta pentru a adăuga linia orizontală.
HTML
Titlul liniei orizontale> cap> <body> <h2>Linie orizontală folosind diverse atributesh2> <hr width='100%' size='2'> <hr width='100%' size='2' color='blue' noshade> <hr width='100%;' color='red' size='5'>body> html>> </pre> </code> <p dir='ltr'> <b> <strong>Ieșire: </strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html.webp' alt='Linie orizontală HTML folosind eticheta hr'> <p>Ieșire </p> <h3> <b> <strong>2. Utilizarea proprietăților CSS: </strong> </b> </h3> <p dir='ltr'> <span>În această abordare, vom folosi </span> <i> <em>stil de chenar </em> </i> <span>Proprietate </span> <i> <em> </em> </i> <span>pentru a crea linia orizontală. Putem folosi fie </span> <i> <em>border-top </em> </i> <span>proprietate care specifică stilul chenarului superior sau al </span> <i> <em>chenar-de jos </em> </i> <span>proprietate, care poate seta stilul marginii de jos a unui element. Ambele proprietăți pot fi folosite pentru a adăuga linia orizontală. </span> </p> <p dir='ltr'> <b> <strong>Exemplu: </strong> </b> <span>Acest exemplu descrie desenul liniei orizontale folosind </span> <i> <em>stil de bordura </em> </i> <span>Proprietate. </span> </p>HTML <code> <pre> <html> <head> <title>Linie orizontală folosind CSS Propertiestitle> <style>.linie_orizontală { lățime: 90%; înălțime: 5px; chenar-sus: 5px negru punctat; înălțimea liniei: 80%; } .line { border-bottom: 5px continu red; margine-sus: 5px; latime: 90%; } stil> cap> <body> <h2>Linie orizontală folosind CSS Propertiesh2> <h3>linie orizontală punctatăh3> <div>div> <h3>Linie orizontală simplăh3> <div>div> body> html>> </pre> </code> <p dir='ltr'> <b> <strong>Ieșire: </strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html-2.webp' alt='linie orizontală folosind exemplu de ieșire CSS'> <p>Ieșire </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Distribuie </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Cum se adaugă o linie orizontală în HTML?&url=https://www.techcodeview.com/ro/how-add-horizontal-line-html"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/ro/how-add-horizontal-line-html"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/ro/how-add-horizontal-line-html&title=Cum se adaugă o linie orizontală în HTML?"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
S-Ar Putea Să Vă Placă </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/ro/what-is-sat-evidence-based-reading-1311112" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/blog/83/what-is-sat-evidence-based-reading.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce este citirea și scrierea bazate pe dovezi SAT?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/ro/what-is-sat-evidence-based-reading-1311112">Ce este citirea și scrierea bazate pe dovezi SAT? </a>
</h4>
</div> <div class="group">
<a href="/ro/third-normal-form" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/dbms-normalization/99/third-normal-form.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="A treia formă normală (3NF)" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/ro/third-normal-form">A treia formă normală (3NF) </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Articole </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/what-does-javascript">
<img src="https://techcodeview.com/img/javascript-questions/07/what-does-javascript.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ce înseamnă javascript:void(0)?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/what-does-javascript" class="hover:text-tech-500 transition-colors line-clamp-3">Ce înseamnă javascript:void(0)? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/conditional-ternary-operator">
<img src="https://techcodeview.com/img/c-operators/75/conditional-ternary-operator.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Operator condiționat sau ternar (?:) în C" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/conditional-ternary-operator" class="hover:text-tech-500 transition-colors line-clamp-3">Operator condiționat sau ternar (?:) în C </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/how-flip-screen-windows">
<img src="https://techcodeview.com/img/windows-tutorial/13/how-flip-screen-windows.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cum să răsturnați ecranul pe Windows?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/how-flip-screen-windows" class="hover:text-tech-500 transition-colors line-clamp-3">Cum să răsturnați ecranul pe Windows? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/git-log">
<img src="https://techcodeview.com/img/git-tutorial/21/git-log.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Jurnal Git" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/git-log" class="hover:text-tech-500 transition-colors line-clamp-3">Jurnal Git </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/phpmyadmin-login">
<img src="https://techcodeview.com/img/php-tutorial/34/phpmyadmin-login.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Autentificare PHPMyAdmin" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/phpmyadmin-login" class="hover:text-tech-500 transition-colors line-clamp-3">Autentificare PHPMyAdmin </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/how-install-pip-windows">
<img src="https://techcodeview.com/img/how-install/78/how-install-pip-windows.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cum se instalează PIP pe Windows?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/how-install-pip-windows" class="hover:text-tech-500 transition-colors line-clamp-3">Cum se instalează PIP pe Windows? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/mvc-framework-introduction">
<img src="https://techcodeview.com/img/geeks-premier-league-2022/53/mvc-framework-introduction.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Introducere MVC Framework" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/mvc-framework-introduction" class="hover:text-tech-500 transition-colors line-clamp-3">Introducere MVC Framework </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/crontab-linux-with-examples">
<img src="https://techcodeview.com/img/linux-command/69/crontab-linux-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="„crontab” în Linux cu exemple" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/crontab-linux-with-examples" class="hover:text-tech-500 transition-colors line-clamp-3">„crontab” în Linux cu exemple </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/m4u-free-alternatives">
<img src="https://techcodeview.com/img/alternatives/16/m4u-free-alternatives.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Alternative gratuite M4u" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/m4u-free-alternatives" class="hover:text-tech-500 transition-colors line-clamp-3">Alternative gratuite M4u </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ro/memory-management-java">
<img src="https://techcodeview.com/img/java-misc/33/memory-management-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Managementul memoriei în Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ro/memory-management-java" class="hover:text-tech-500 transition-colors line-clamp-3">Managementul memoriei în Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Categorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/ro/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/ro/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversie Java
</a> <a href="/ro/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Matematica
</a> <a href="/ro/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Colecții Java
</a> <a href="/ro/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Diferențele
</a> <a href="/ro/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Șir Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Articole Interesante </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/75/aries-moon-sign-what-does-it-mean.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Semnul Lunii Berbec: Ce înseamnă?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/aries-moon-sign-what-does-it-mean-1311504">Semnul Lunii Berbec: Ce înseamnă? </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/81/how-solve-rubiks-cube.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cum să rezolvi un cub Rubik: 4 moduri diferite" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/how-solve-rubiks-cube-13132">Cum să rezolvi un cub Rubik: 4 moduri diferite </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/mathematical/02/time-required-to-meet-in-equilateral-triangle.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Timpul necesar pentru a se întâlni în triunghi echilateral" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/mathematical/">Matematic </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/time-required-to-meet-in-equilateral-triangle">Timpul necesar pentru a se întâlni în triunghi echilateral </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java-misc/61/how-run-java-program-eclipse.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cum să rulați programul Java în eclipse" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/java-misc/">Java Diverse </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/how-run-java-program-eclipse">Cum să rulați programul Java în eclipse </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/information-security/88/how-remove-password-from-pdf.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cum să eliminați parola din PDF?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/information-security/">Informații-Securitate </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/how-remove-password-from-pdf">Cum să eliminați parola din PDF? </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/23/who-is-medusa-snake-haired-gorgon.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cine este Medusa, Gorgona cu păr de șarpe?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ro/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ro/who-is-medusa-snake-haired-gorgon-131884">Cine este Medusa, Gorgona cu păr de șarpe? </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Toate Drepturile Rezervate |
<a href="//www.techcodeview.com/lt/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>