🧃 crd co codes

notes: please cr itzhuo if you are going to make this crd!!!


---- container with the bg ----
html>
<head>
<style>
.lace {
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
}
</style>
</head>
<body>

<img class=lace src="IMAGE URL GOES HERE" alt="." style="width:275px;height:150px;border-radius:10px;"> <!--- ur img link goes here! this also works with containers--->

</body>
</html>


---- image code ----
<style>

#photo {
position: absolute;
bottom: -110px;
z-index: 1;
}

img {
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
border: 3px solid white;
}

body {
padding-top: 1em;
}

</style>
<body>
<div id="photo">
<div align="left">
<img src="IMAGE URL GOES HERE" alt="." style="width:95px;height:95px;">
</div>
</div>
</body>


---- basic info ----
<head>

<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=Fredoka+One&display=swap" rel="stylesheet">

</head>

<style>

#info {
font-family: 'Fredoka One', cursive;
color: #fff;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #FFFFFF00, 0 -1px #fffFFF00, 0 0;
font-size:12px;
position:relative;
bottom: -150px;
left: 1px;
z-index:1;
}

</style>

<div id="info"><div align="center">
info info info
<p></p>
info info
<p></p>
info info
</div></div>


---- links ----
<head>

<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=Fredoka+One&display=swap" rel="stylesheet">

</head>

<style>

#nice {
font-family: 'Fredoka One', cursive;
color: #221f1f;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #FFFFFF00, 0 -1px #fffFFF00, 0 0;
font-size:9px;
position:absolute;
bottom: -30px;
z-index:1;
}

a.three:link,a.three:visited {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #FFFFFF00, 0 -1px #fffFFF00, 0 0; /* change the second text shadow here */
font-size:9px;
font-weight:normal;
color: #fff; /* change the second text color here */
text-align: left;
text-decoration: none;
}

</style>

<div id="nice"><div align="left">
<font color="#FFF">links ☆ </font>
<a class="three" href="link url"> link. </a>
<a class="three" href="link url"> link. </a>
<a class="three" href=""> <3. </a>
</div></div>


---- name ----
<style>
@font-face {
font-family: lovely;
src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);
}

#text02 {
position:relative;
top:-180px;
left: -20px;
z-index:1;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #FFFFFF00, 0 -1px #FFFFFF00, 0 0;
font-family: lovely;
color: #fff;
font-size: 45px;
transform: rotate(-20deg);
}
</style>

<div id="text02"><div align="left">name</div></div>


---- scrollboxes ----
<head>

<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=Mali:wght@500;700&display=swap" rel="stylesheet">

</head>
<style>
#scroll1 { /* use this for all of the containers just change the number and if you want play around with the position */
height: 100px;
width: 150px;
padding: 7px;
background: rgba(255, 255, 255, 0.75);
border-radius:8px;
font-family: 'Mali', cursive;
line-height: 1.3;
font-size:9px;
overflow: auto;
position: absolute;
top: -180px;
z-index: 1;
}

#scroll1::-webkit-scrollbar {
display: none;
}

</style>
<div id="scroll1"><div align="left">
hi!! i’m <strong> name </strong> info info info info info info info info info
<p></p>
͏ ͏ ͏
<p></p>
<strong> i like: </strong> info info info info info info info info info info info info</div>


---- menu ----
<head>

<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=Fredoka+One&display=swap" rel="stylesheet">

</head>

<style>

#lol {
font-family: 'Fredoka One', cursive;
color: #fff;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #FFFFFF00, 0 -1px #fffFFF00, 0 0;
font-size:14px;
position:absolute;
top: -75px;
z-index:1;
}

a.one:link,a.one:visited {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #FFFFFF00, 0 -1px #fffFFF00, 0 0; /* change the second text shadow here */
font-size:16px;
font-weight:normal;
color: #fff; /* change the second text color here */
text-align: left;
text-decoration: none;
}

</style>

<div id="lol"><div align="left">
<a class="one" href="#h"> 00 . </a>
<a class="one" href="#p1"> 01 . </a>
<a class="one" href="#p2"> 02 . </a>
<a class="one" href="#p3"> + . </a>
</div></div>