<html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Preahvihear&display=swap" rel="stylesheet">
<body>
<div style="background-color: #F5B7B1 ; margin: 72px; padding: 36px 36px; border-radius: 30px; background-position: center ; background-size: cover; height: 270vh;">
<h1 style="color: #641E16 ; font-family: 'Preahvihear', sans-serif; font-size: 45px;"> Codepens Converted to HTML Web Pages </h1>
<!-- First Codepen Demo -->
<h1 style="color: #641E16 ; margin-top: 70px"> First Codepen Demo </h1>
<p style="font-size: 25px;"> <a target=_blank href="https://codepen.io/CodingWithAnthony/pen/ExGmXyx"> Codepen </a> </p>
<p style="font-size: 25px;"> <a target=_blank href="https://sandbox.vamacreative.com/AnthonyPineda/firstcodepen.html"> HTML </a> </p>
<!-- Namecard -->
<h1 style="color: #641E16 ; margin-top: 70px"> Namecard </h1>
<p style="font-size: 25px;"> <a target=_blank href="https://codepen.io/CodingWithAnthony/pen/LYMOYgw"> Codepen </a> </p>
<p style="font-size: 25px;"> <a target=_blank href="https://sandbox.vamacreative.com/AnthonyPineda/namecard.html"> HTML </a> </p>
<!-- Color Palette -->
<h1 style="color: #641E16 ; margin-top: 70px"> Color Palette </h1>
<p style="font-size: 25px;"> <a target=_blank href="https://codepen.io/CodingWithAnthony/pen/zYyWJNW"> Codepen </a> </p>
<p style="font-size: 25px;"> <a target=_blank href="https://sandbox.vamacreative.com/AnthonyPineda/colorpalette.html"> HTML </a> </p>
<!-- Essential Links Demo -->
<h1 style="color: #641E16 ; margin-top: 70px"> Essential Links Demo </h1>
<p style="font-size: 25px;"> <a target=_blank href="https://codepen.io/CodingWithAnthony/pen/eYbMPOP"> Codepen </a> </p>
<p style="font-size: 25px;"> <a target=_blank href="https://sandbox.vamacreative.com/AnthonyPineda/linksdemo.html"> HTML </a> </p>
<!-- Color Updates -->
<h1 style="color: #641E16 ; margin-top: 70px"> Color Updates </h1>
<p style="font-size: 25px;"> <a target=_blank href="https://codepen.io/CodingWithAnthony/pen/ExGeQZo"> Codepen </a> </p>
<p style="font-size: 25px;"> <a target=_blank href="https://sandbox.vamacreative.com/AnthonyPineda/sicolorupdates.html"> HTML </a> </p>
<!-- Color Contrast -->
<h1 style="color: #641E16 ; margin-top: 70px"> Color Contrast </h1>
<p style="font-size: 25px;"> <a target=_blank href="https://codepen.io/CodingWithAnthony/pen/dywgqPM"> Codepen </a> </p>
<p style="font-size: 25px;"> <a target=_blank href="https://sandbox.vamacreative.com/AnthonyPineda/colorcontrast.html"> HTML </a> </p>
<!-- CSS Animations 1 -->
<h1 style="color: #641E16 ; margin-top: 70px"> CSS Animations 1 </h1>
<p style="font-size: 25px;"> <a target=_blank href="https://codepen.io/CodingWithAnthony/pen/VwgzrNd"> Codepen </a> </p>
<p style="font-size: 25px;"> <a target=_blank href="https://sandbox.vamacreative.com/AnthonyPineda/cssanimations.html"> HTML </a> </p>
<!-- CSS Animations 2 -->
<h1 style="color: #641E16 ; margin-top: 70px"> CSS Animations 2 </h1>
<p style="font-size: 25px;"> <a target=_blank href="https://codepen.io/CodingWithAnthony/pen/YzBEppo"> Codepen </a> </p>
<p style="font-size: 25px;"> <a target=_blank href="https://sandbox.vamacreative.com/AnthonyPineda/cssanimations2.html"> HTML </a> </p>
<!-- One Page Scroller -->
<h1 style="color: #641E16 ; margin-top: 70px"> One Page Scroller </h1>
<p style="font-size: 25px;"> <a target=_blank href="https://codepen.io/CodingWithAnthony/pen/GRzXbYX"> Codepen </a> </p>
<p style="font-size: 25px;"> <a target=_blank href="https://sandbox.vamacreative.com/AnthonyPineda/onepagescroller.html"> HTML </a> </p>
<!-- New/Updated Namecard -->
<h1 style="color: #641E16 ; margin-top: 70px"> New/Updated Namecard </h1>
<p style="font-size: 25px;"> <a target=_blank href="https://codepen.io/CodingWithAnthony/pen/ZEwgNJm"> Codepen </a> </p>
<p style="font-size: 25px;"> <a target=_blank href="https://sandbox.vamacreative.com/AnthonyPineda/newandupdatednamecard.html"> HTML </a> </p>
</body>
</html> body {background-color: #A93226 ; text-align: center; margin-top: 15vh;}
a:link {color: #E74C3C;}
a:visited {color: #641E16;}
a:hover{color: #E67E22 ;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.