design

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » design » Новый форум » хтмл


хтмл

Сообщений 1 страница 9 из 9

1

лдд

0

2

[html]<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700|Playfair+Display:400,900|Raleway:100" rel="stylesheet"> <style>
#geom {
   width: 400px;
    height: 600px;
    position:relative;
    margin: auto;
}
.geom1 {
   width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 200px 300px 200px;
    border-color: transparent transparent #525758 transparent;
}
.geom1:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0px;
    margin: auto;
    left: 0px;
    border-style: solid;
    border-width: 300px 200px 0 200px;
    border-color: #525758 transparent transparent transparent;
}
.geom2 {
   width: 0;
    height: 0;
    position: absolute;
    top: -300px;
    left: 5px;
    top: 10px;
    margin: auto;
    border-style: solid;
    border-width: 0 195px 290px 195px;
    border-color: transparent transparent #768c97 transparent;
}
.geom3 {
    width: 0;
    height: 0;
    position: absolute;
    bottom: 10px;
    margin: auto;
    left: 5px;
    border-style: solid;
    border-width: 290px 195px 0 195px;
    border-color: #768c97 transparent transparent transparent;
}
.geom4 {
   position: absolute;
    top: 100px;
    width: 0;
    height: 0;
    overflow: hidden;
    border-style: solid;
    border-width: 0 200px 350px 200px;
    border-color: transparent transparent #222 transparent;
}
.geom5 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(45deg);
    background: #fff;
    padding: 3px;
    border: 1px solid #222;
    outline: 1px solid #222;
    z-index: 3;
}
.geom7 {
   position: absolute;
    top: -17px;
    left: -17px;
    right: 0px;
    margin: auto;
    z-index: 3;
    transform:rotate(-45deg);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    width: 140px;
    height: 140px;
    background-image: url(http://forumupload.ru/uploads/0013/27/a2/2/349955.jpg);
    background-size: cover;
    background-position: top center;
}
.geom6 {
   background: rgba(0,0,0,0.2);
    width: 100px;
    height: 100px;
    position: absolute;
    top: 95px;
    left: 0;
    border: 1px solid #222;
    right: 0;
    opacity: 0.8;
    margin: auto;
    transform: scale(1,1) rotate(45deg);
    animation: diamp 3s linear infinite;
}
@keyframes diamp {
   0% {
       transform: scale(1,1) rotate(45deg);
   }
    50% {
       transform: scale(1.5,1.5) rotate(45deg);
        opacity: 0.0;
   }
    100% {
       transform: scale(1,1) rotate(45deg);
        opacity: 0.0;
   }
}
.geom8 {
   transform: rotate(-45deg);
    border: 1px solid #222;
    position: absolute;
    bottom: 45px;
    left: 0;
    width: 140px;
    height: 140px;
    right: 0;
    margin: auto;
    padding: 20px;
}
.geom9 {
   position: absolute;
    bottom: 150px;
    left: 0;
    right: 0;
    z-index: 10;
    margin: auto;
    overflow: hidden;
    border-bottom: 1px solid #222;
    width: 350px;
    height: 50px;
}
.geom9 h1 {
   margin: 0;
    text-align: center;
    font: 55px playfair display;
    font-weight: 900;
    letter-spacing: -5px;
    text-transform: uppercase;
    color: #fff;
}
.geom10 {
   color: #fff;
    padding-right: 10px;
    height: 130px;
    overflow: auto;
    text-align: justify;
    line-height: 120%;
    font: 10px pt sans;
    width: 150px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 10;
    bottom: 205px;
}
.geom10 p:first-letter {
   font: 50px playfair display;
    float: left;
    margin: 5px 10px 0 5px;
    text-transform: uppercase;
}
.geom10 b {
   font: 14px raleway;
    font-weight: 100;
}
.geom10 i {
   letter-spacing: 1px;
    font: 12px playfair display;
    font-style: italic;
    font-weight: 400;
}
.geom11 {
   position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    text-align: center;
    width: 1px;
    height: 70px;
    background: #222;
}
.geom11 sub {
   display: block;
    text-align: center;
    font: 40px raleway;
    margin: 60px 0 0 -20px;
}

</style><div id="geom"><div class="geom1"></div><div class="geom2"></div><div class="geom3"></div><div class="geom4"></div><div class="geom5">

<div class="geom7" style="background-image: url(140X140 IMAGE HERE, WILL RESIZE);"></div>

</div><div class="geom6"></div><div class="geom8"></div><div class="geom9"><h1>

sempiternal

</h1></div><div class="geom10">

<p>post here. if you want the fancy first letter break your paragraphs up with a P tag.

</div><div class="geom11"><sub><i class="sf sf-heart-2"></i></sub></div></div><div style="font-family: arial; text-align: center; text-transform: uppercase; font-size: 7px; margin: auto;"><a href="https://lolitajcink.tumblr.com/">LOLITA  ღゝ◡╹)ノ♡</a></div>[/html]

0

3

[html]<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"><link href='https://fonts.googleapis.com/css?family=Cousine|Raleway:400,900' rel='stylesheet' type='text/css'><style>
#utchance {width: 550px; height: 400px; background-color: #222; position: relative;}
.utchancee {position: relative; width: 550px;}
.utchancez label {font: 40px arial black; color: #fff; position: absolute; right: 10px; top: 0px; z-index: 5; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg);}
.utchancez [type=checkbox] {display: none;}
.utchancec {width: 320px; position: absolute; top: 80px; right: 50px; background-color: transparent; opacity: 0.0; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; height: 270px; padding: 5px; border: 1px solid #fff;}
.utchancez [type=checkbox]:checked ~ label {z-index: 5; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg);}
[type=checkbox]:checked ~ label ~ .utchancec {z-index: 1; opacity: 1.0;}
.utchanceimg {width: 250px; height: 400px; background-size: cover; position: absolute; right: 0px; top: 0px; background-image: url(http://placehold.it/250x400);}
.utchancesmall {font: 7.5px cousine; text-transform: uppercase; color: #fff; position: absolute; right: 10px; bottom: 10px; width: 230px; text-align: center;}
.utchancename {text-align: left; font: 30px raleway; font-weight: 400; text-transform: uppercase; color: #fff; position: absolute; top: 20px; left: 20px; width: 230px;}
.utchancename b {color: #FC354C; font-weight: 900;}
.utchancename:after {display: block; content: ""; height: 5px; background-color: #FC354C; position: relative; left: 0px; width: 100px;}
.utchance1 {position: absolute; bottom: 20px; left: 30px; width: 120px; height: 270px; font: 8px cousine; text-transform: uppercase; color: #fff; text-align: left;}
.utchance1 i {color: #FC354C; font-weight: bold;}
.utchance2 {padding: 20px; width: 280px; height: 230px; background-color: #fff;}
.utchance3 {height: 190px; overflow: auto; padding-right: 10px; font: 10px tahoma; color: #222; text-align: justify; line-height: 105%; margin: 20px;}
.utchance3 b {color: #FC354C; font: 12px raleway; font-weight: bold;}
.utchance3 i {color: #FC354C;}
.utchance3 m {float: left; font-size: 40px; color: #FC354C; margin: 10px 15px 10px 10px;}

</style><center><div id="utchance">

<div class="utchanceimg" style="background-image: url(250 X 400 IMAGE HERE);"></div>
<div class="utchancesmall">

where iron meets flesh we'll take it all

</div><div class="utchancename">

first<b>last</b>

</div><div class="utchance1"><i class="fa fa-user"></i> age
<p><i class="fa fa-folder"></i> series
<p><i class="fa fa-home"></i> group
<p><i class="fa fa-university"></i> job
<p><i class="fa fa-balance-scale"></i> zodiac
<p><i class="fa fa-heart"></i> status
<p><i class="fa fa-tag"></i> something
<p><i class="fa fa-pencil"></i> something
<p><i class="fa fa-bolt"></i> something
<p><i class="fa fa-star"></i> something
<p><i class="fa fa-child"></i> something
<p><i class="fa fa-coffee"></i> something
<p><i class="fa fa-comments"></i> something

</div><div class="utchancee"><div class="utchancez"><input type="checkbox" id="utchancez-1" name="utchancez-group-1"><label for="utchancez-1">+</label><div class="utchancec"><div class="utchance2"><div class="utchance3">

<m class="fa fa-quote-left"></m>Не следует, однако, забывать о том, что повышение уровня гражданского сознания требует от нас анализа дальнейших направлений развитая системы массового участия. Значимость этих проблем настолько очевидна, что консультация с профессионалами из IT играет важную роль в формировании системы обучения кадров, соответствующей насущным потребностям. Соображения высшего порядка, а также социально-экономическое развитие играет важную роль в формировании новых предложений.

<p><m class="fa fa-users"></m>Не следует, однако, забывать о том, что повышение уровня гражданского сознания требует от нас анализа дальнейших направлений развитая системы массового участия. Значимость этих проблем настолько очевидна, что консультация с профессионалами из IT играет важную роль в формировании системы обучения кадров, соответствующей насущным потребностям. Соображения высшего порядка, а также социально-экономическое развитие играет важную роль в формировании новых предложений.

<p><m class="fa fa-user-times"></m>Не следует, однако, забывать о том, что повышение уровня гражданского сознания требует от нас анализа дальнейших направлений развитая системы массового участия. Значимость этих проблем настолько очевидна, что консультация с профессионалами из IT играет важную роль в формировании системы обучения кадров, соответствующей насущным потребностям. Соображения высшего порядка, а также социально-экономическое развитие играет важную роль в формировании новых предложений.

<p><m class="fa fa-heartbeat"></m>Не следует, однако, забывать о том, что повышение уровня гражданского сознания требует от нас анализа дальнейших направлений развитая системы массового участия. Значимость этих проблем настолько очевидна, что консультация с профессионалами из IT играет важную роль в формировании системы обучения кадров, соответствующей насущным потребностям. Соображения высшего порядка, а также социально-экономическое развитие играет важную роль в формировании новых предложений.

</div></div></div></div></div></div><div style="width: 550px; font-family: arial; text-align: right; text-transform: uppercase; font-size: 7px;"><a href="https://lolitajcink.tumblr.com/">&copy; lolita</a></div></center>[/html]

0

4

[html]<link href="https://fonts.googleapis.com/css?family=PT+Sans:700|Raleway:100,100i,900" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"><style>
#phantoms {
   width: 550px;
    margin: auto;
    outline: 1px solid #8572ab;
    box-shadow: 7px 7px 0px #8572ab;
    border: 10px solid #fbfbfb;
    height: 350px;
    position: relative;
    overflow: hidden;
}
.phantri {
   position: absolute;
    top: -150px;
    left: -40px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 800px 0 0 600px;
    border-color: transparent transparent transparent #8572ab;
    transform: rotate(10deg);
    z-index: 3;
}
.phanimg {
   position: absolute;
    top: 0;
    right: 0;
    height: 350px;
    width: 420px;
    background-size: cover;
    background-image: url(http://placehold.it/420x350);
}
#phantoms h1 {
   margin: 0;
    font: 37px raleway;
    font-weight: 900;
    letter-spacing: -3px;
    color: #fff;
    text-transform: uppercase;
    position: absolute;
    bottom: 50px;
    left: 20px;
    text-align: left;
    z-index: 4;
    width: 200px;
}
#phantoms h1 u {
   text-decoration: none;
    border-bottom: 1px solid #fff;
    display: block;
}
#phantoms h1 sub {
   display: block;
    font: 8px 'pt sans';
    letter-spacing: 2px;
    text-align: left;
    margin-top: 5px;
}
#phantoms h1 i {
   font: 100px arial;
    margin-left: 20px;
}
.beat {
   animation: beat 2s infinite both;
}
@keyframes beat {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
   }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
   }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
   }
}
.phanw {
   position: absolute;
    top: 0px;
    left: -310px;
    background: rgba(255,255,255,0.9);
    height: 350px;
    width: 420px;
    z-index: 2;
    transition-duration: 0.6s;
    transition-delay: 0.3s;
}
#phantoms:hover .phanw {
   left: 130px;
}
#phantoms h2 {
   margin: 0px;
    position: absolute;
    top: 30px;
    right: -500px;
    width: 200px;
    height: 270px;
    font: 10px courier;
    text-align: justify;
    line-height: 110%;
    overflow: auto;
    z-index: 5;
    padding-right: 10px;
    transition-duration: 0.6s;
    transition-delay: 0.0s;
}
#phantoms:hover h2 {
   right: 30px;
    transition-delay: 0.6s;
}
#phantoms h2 b {
   color: #8572ab;
    font: 12px raleway;
    font-weight: 900;
}
#phantoms h2 i {
   color: #8572ab;
    letter-spacing: 1px;
}

</style><div id="phantoms"><h1><div class="beat"><i class="sf sf-broken-heart-o"></i></div><u>

phantoms

</u><sub>

walk me through the shadows no longer afraid how they become us the phantoms of youth

</sub></h1><div class="phantri"></div><h2>

post here

</h2><div class="phanw"></div>

<div class="phanimg" style="background-image: url(420x350 image here, it will resize);"></div>

</div><BR><div style="font-family: arial; text-align: center; text-transform: uppercase; font-size: 7px;"><a href="https://lolitajcink.tumblr.com/">LOLITA  ღゝ◡╹)ノ♡</a></div>[/html]

0

5

[html]<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,900|Lato:100|Cousine" rel="stylesheet"><style>#sound {width: 550px; background-color: #121212; position: relative;}
.silence {width: 550px; background-color: #222; position: relative; height: 400px; overflow: hidden;}
@-moz-keyframes ontheblinkk {18%, 29%, 35%, 37%, 43% {color: transparent; text-shadow: none;} 16%, 28%, 30%, 34%, 36%, 38% {color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #ff9000, 0 0 15px #ff0000;}}
@-webkit-keyframes ontheblinkk {18%, 29%, 35%, 37%, 43% {color: transparent; text-shadow: none;} 16%, 28%, 30%, 34%, 36%, 38% {color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #ff9000, 0 0 15px #ff0000;}}
@-moz-keyframes ontheblink {21%, 39%, 45%, 47%, 53% {color: transparent; text-shadow: none;} 26%, 38%, 40%, 44%, 46%, 48% {color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #ff9000, 0 0 15px #ff0000;}}
@-webkit-keyframes ontheblink {21%, 39%, 45%, 47%, 53% {color: transparent; text-shadow: none;} 26%, 38%, 40%, 44%, 46%, 48% {color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #ff9000, 0 0 15px #ff0000;}}
.soslyr {color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #ff9000, 0 0 15px #ff0000; font: 100px Playfair Display; letter-spacing: -5px; text-align: center;}
.out {-moz-animation: ontheblink 10s infinite; -ms-animation: ontheblink 10s infinite; -webkit-animation: ontheblink 10s infinite;}
.out2 {-moz-animation: ontheblinkk 10s infinite; -ms-animation: ontheblinkk 10s infinite; -webkit-animation: ontheblinkk 10s infinite;}
.soslyr2 {padding: 10px; text-align: right; font: 8px cousine; color: #fff; text-transform: uppercase;}
.soslyr3 {color: #fff; font: 8px cousine; text-transform: uppercase; text-align: left; padding: 30px 0px 0px 40px; margin-bottom: -25px;}
.soslyr3:after {content: ""; display: inline-block; vertical-align: middle; margin-left: 20px; height: 1px; background-color: #fff; width: 220px;}
.soslyr4 {color: #616161; font: 20px lato; font-weight: 100; text-transform: uppercase; text-align: center; margin-top: -15px; padding: 0px 0px 30px 0px; letter-spacing: 40px; margin-left: 35px;}
#sound .sosimg {width: 550px; height: 400px; background-position: 0px 0px; background-image: url(http://placehold.it/700x400); background-size: cover; transition-delay: 0.6s; -moz-transition-delay: 0.6s; -webkit-transition-delay: 0.6s; transition-duration: 0.8s; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s;}
#sound:hover .sosimg {background-position: -150px 0px; transition-delay: 0.0s; -moz-transition-delay: 0.0s; -webkit-transition-delay: 0.0s;}
#sound .sosbg {transition-delay: 0.0s; -moz-transition-delay: 0.0s; -webkit-transition-delay: 0.0s; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; width: 550px; height: 400px; background-color: rgba(18,18,18,0.9); bottom: -400px; position: absolute; left: 0px;}
#sound:hover .sosbg {bottom: 0px; transition-delay: 0.6s; -moz-transition-delay: 0.6s; -webkit-transition-delay: 0.6s;}
.sosbg2 {margin: 20px; border: 1px solid #2f2f2f; padding: 20px; height: 320px; position: relative;}
.soswrite {background-color: rgba(18,18,18,0.6); padding: 20px; position: absolute; top: 20px; left: 20px; border: 1px solid #2f2f2f; width: 200px; height: 280px;}
.soswrite2 {color: #616161; font: 9px tahoma; text-align: justify; line-height: 105%; height: 240px; padding-right: 10px; overflow: auto; margin: 20px;}
.soswrite2 b {font: 10px playfair display; font-weight: 900; color: #9f4141;} .soswrite2 i {color: #9f4141;}
.sosimg2 img {position: absolute; top: 20px; right: 20px; padding: 10px; background-color: rgba(18,18,18,0.6); border: 1px solid #2f2f2f; height: 300px; width: 180px; filter: grayscale(100%); -moz-filter: grayscale(100%); -webkit-filter: grayscale(100%);}
</style><center><div id="sound"><div class="soslyr3">and the people bowed and prayed to the</div>
<div class="soslyr">h<span class="out">a</span>se ni<span class="out2">e</span>to</div><div class="soslyr4">they made</div><div class="silence">

<div class="sosimg" style="background-image: url(http://forumupload.ru/uploads/0013/27/a2/2/136163.jpg);">

<div class="sosbg"><div class="sosbg2"><div class="soswrite"><div class="soswrite2">

post

</div></div><div class="sosimg2">

<img src="http://placehold.it/180x300" />

</div></div></div></div></div><div class="soslyr2">

tagged and notes

</div></div><div style="width: 550px; font-family: arial; text-align: right; text-transform: uppercase; font-size: 7px;"><a href="https://lolitajcink.tumblr.com/">LOLITA  ღゝ◡╹)ノ♡</a></div></center>[/html]

0

6

[html]<div id="antlia"><div class="__anbody"><div class="__andectext">It's a crazy situation You always keep me waiting Because its only make believe And I would come a-running To give you all my loving If one day you would notice me</div><div class="__ancirpul"><div class="__anicon"></div></div><div class="__ansepb"></div><div class="__anleftimg"></div><div class="__anrightb"><div class="__aninfob"><div class="__andade">25 años</div><div class="__andade">estrella fugaz</div><div class="__andade">alemana</div><div class="__andade">bisexual</div><div class="__andade">diva del pop</div><div class="__andade">ahri - lol</div></div><div class="__anallb"><div class="__anndec"></div><div class="__annm">ahri<br><span class="__anap">the fox spirit</span></div><div class="__anpsib"><div class="__anmcircle"></div><div class="__anmnum">psicología</div><br><div class="__amtext">Suspendisse mollis lorem ante, nec vulputate quam vulputate at. Duis sed rhoncus eros, nec luctus mi. Praesent in felis vitae eros eleifend rhoncus ut pretium augue. Pellentesque ultrices nulla nunc, vestibulum blandit orci mollis nec. Suspendisse sed nunc vitae odio pretium aliquet ut ut ipsum. Nullam ut porta justo, vitae pharetra lacus. In sem purus, tristique vitae rhoncus vel, porttitor vitae ipsum. Ut scelerisque magna a justo aliquam sodales ut ut nisi. Curabitur laoreet urna a volutpat cursus. Nulla ac pharetra turpis. Sed suscipit et leo a vulputate. Phasellus consectetur erat nec quam convallis dictum. Fusce et aliquet magna.</div>
<div class="__anmcircle"></div><div class="__anmnum">historia</div><br><div class="__amtext"> Suspendisse mollis lorem ante, nec vulputate quam vulputate at. Duis sed rhoncus eros, nec luctus mi. Praesent in felis vitae eros eleifend rhoncus ut pretium augue. Pellentesque ultrices nulla nunc, vestibulum blandit orci mollis nec. Suspendisse sed nunc vitae odio pretium aliquet ut ut ipsum. Nullam ut porta justo, vitae pharetra lacus. In sem purus, tristique vitae rhoncus vel, porttitor vitae ipsum. Ut scelerisque magna a justo aliquam sodales ut ut nisi. Curabitur laoreet urna a volutpat cursus. Nulla ac pharetra turpis. Sed suscipit et leo a vulputate. Phasellus consectetur erat nec quam convallis dictum. Fusce et aliquet magna.</div>
<div class="__anmcircle"></div><div class="__anmnum">extras</div><br><div class="__amtext"> Suspendisse mollis lorem ante, nec vulputate quam vulputate at. Duis sed rhoncus eros, nec luctus mi. Praesent in felis vitae eros eleifend rhoncus ut pretium augue. Pellentesque ultrices nulla nunc, vestibulum blandit orci mollis nec. Suspendisse sed nunc vitae odio pretium aliquet ut ut ipsum. Nullam ut porta justo, vitae pharetra lacus. In sem purus, tristique vitae rhoncus vel, porttitor vitae ipsum. Ut scelerisque magna a justo aliquam sodales ut ut nisi. Curabitur laoreet urna a volutpat cursus. Nulla ac pharetra turpis. Sed suscipit et leo a vulputate. Phasellus consectetur erat nec quam convallis dictum. Fusce et aliquet magna.</div>
<br><br></div></div></div></div><div class="__andown"><div class="__vsic"><i class="th th-microphone"></i></div><div class="__vmtext">Everybody knows inside that we had it good<br>Good things don't last like we thought they would I've got a front seat, watch it unfold in front of me It's only the end</div></div><center><a href="http://j.gs/19765185/cactuscodes" class="cactuscodes">cactus</a></center></div>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;800;900&family=Roboto:ital,wght@0,100;0,300;0,700;0,900;1,400&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><style>#antlia .__anbody{width: 550px;height: 800px;overflow: hidden;border-radius: 4px 4px 0px 0px;margin: 0 auto;background: linear-gradient(151deg, #e686ab, #F08BB2, #CC7697, #F28DB4);background-size: 800% 800%;-webkit-animation: anbggr 30s ease infinite;animation: anbggr 30s ease infinite;color:#171717;}@-webkit-keyframes anbggr {0%{background-position:13% 0%}50%{background-position:88% 100%}100%{background-position:13% 0%}}@keyframes anbggr {0%{background-position:13% 0%}50%{background-position:88% 100%}100%{background-position:13% 0%}}#antlia .__andectext{position:relative;z-index: 1;font-size: 60px;letter-spacing: -3px;font-family: Montserrat;color: rgba(255, 255, 255, 0);font-weight: 700;text-transform: lowercase;-webkit-text-stroke: 1px #ffffff20;font-style:italic;line-height: 80%;text-align: left;width: 800px;margin: -10px 0px 0px -20px;height: 300px;overflow: hidden;}#antlia .__ancirpul{position: relative;z-index: 1;top: -351px;left: 236px;background: #171717;width: 370px;height: 370px;border-radius: 50%;box-shadow: 0 0 0 0 rgba(23, 23, 23, 1);transform: scale(1);animation: pulse 2s infinite;}@keyframes pulse {0% {box-shadow: 0 0 0 0 rgba(23, 23, 23, 0.3);}70% {box-shadow: 0 0 0 250px rgba(23, 23, 23, 0);}100% {box-shadow: 0 0 0 0 rgba(23, 23, 23, 0);}}#antlia .__anicon{width: 150px;height: 150px;background: url(https://images2.imgbox.com/f4/ff/eO9aFs1A_o.png);background-size: cover;border-radius: 50%;position: relative;top: 105px;border: 10px solid #17171790;right: -100px;}#antlia .__ansepb{width: 900px;height: 50px;background: #171717;transform: rotate(-5deg);margin: -400px 0px 0px -35px;position:relative;z-index: 2;}#antlia .__anleftimg{width: 135px;height: 490px;background: url(https://images2.imgbox.com/50/07/z2mYlMPJ_o.png);background-size: cover;box-shadow: inset 0 0 0 1000px rgba(230,134,171,0.70);float:left;position: relative;z-index:1;}#antlia .__anrightb{position: relative;z-index:1;width: 415px;height: 510px;margin-top: -12px;float: right;background: #F3F3F3;}#antlia .__aninfob{width: 140px;height: 300px;position:relative;left: -100px;top: 140px;}#antlia .__andade{width: 110px;background: #171717;font-family: roboto;color: #E686AB;text-transform: uppercase;font-size: 8.5px;font-weight: 700;letter-spacing: 1px;padding: 5px 15px 5px 5px;text-align: right;border-radius: 4px;margin-bottom: 15px;}#antlia .__anallb{width: 340px;height: 420px;position:relative;top: -250px;left: 55px;overflow:hidden;}#antlia .__annm{text-align: right;font-family: Montserrat;font-weight: 700;font-size: 45px;line-height: 60%;letter-spacing: -2px;position:relative;top: -45px;right: 70px;}#antlia .__anap{font-size: 20px;font-weight: 300;letter-spacing:-1px;}#antlia .__anndec{background: #E686AB;width: 100px;height: 100px;border-radius: 50%;position:relative;top: 20px;left:190px;}#antlia .__anpsib{width: 330px;height: 295px;overflow: auto;top: -20px;}#antlia .__anpsib::-webkit-scrollbar {width: 3px !important;margin-right: 1px !important;background-color: #E686AB !important;}#antlia .__anpsib::-webkit-scrollbar-track {width: 1px !important;background-color: #F3F3F3 !important;}#antlia .__anpsib::-webkit-scrollbar-thumb {width: 1px !important;background-color: #E686AB !important;}#antlia .__anmnum{font-family: roboto;font-weight: 900;text-transform: lowercase;letter-spacing: -3px;font-size: 35px;color:#171717;position:relative;top: -15px;left: 20px;}#antlia .__anmcircle{background:#E686AB;width: 70px;height: 50px;position:relative;border-radius: 10px;top: 20px;left: 0px;}#antlia .__anmnumlight{font-weight: 100;}#antlia .__amtext{text-align: justify;font-family: Montserrat;font-size: 11px;font-weight: 400;padding: 0px 15px 0px 15px;margin-top: -10px;line-height: 130%;letter-spacing: 0px;}#antlia .__andown{height:150px;width:550px;margin: 0 auto;background: #171717;border-radius: 0px 0px 4px 4px;}#antlia .__vsic{width: 550px;text-align: center;font-size: 30px;position:relative;top:40px;background: linear-gradient(to top, #e686ab 0%, #a162a1 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}#antlia .__vmtext{width: 350px;margin: 0 auto;position:relative;top:50px;text-align: center;font-size: 7px;letter-spacing: 1px;font-family: Montserrat;color: #afafaf;font-weight: 400;text-transform: uppercase;line-height: 120%;}.cactuscodes{color: #ccc;text-decoration: none;font-family:georgia;font-size: 9px;text-transform: uppercase;font-weight:100;}</style>[/html]

0

7

[html]<div id="lynx"><div class="__body"><div class="__icon1"><i class="fas fa-moon"></i></div><div class="__title">Sweet Dreams</div><div class="__subtitle">I'm trapped in the illusion</div><div class="__sep"></div><div class="__icon2"><span class="th th-planet-2"></span></div><div class="__title2">cronología</div><div class="thread"><div class="open"><div class="__icon3"><span class="th th-open-lock"></span></div></div><a href="/" class="linko">It's like a big black hole in my heart</a><br><span class="with">Federico García Lorca</span></div><div class="thread"><div class="close"><div class="__icon3"><span class="th th-closed-lock"></span></div></div><a href="/" class="linkc">Fly high yeah</a><br><span class="with">Federico García Lorca</span></div><div class="thread"><div class="open"><div class="__icon3"><span class="th th-open-lock"></span></div></div><a href="/" class="linko">It's like a big black hole in my heart</a><br><span class="with">Federico García Lorca</span></div><div class="thread"><div class="close"><div class="__icon3"><span class="th th-closed-lock"></span></div></div><a href="/" class="linkc">Fly high yeah</a><br><span class="with">Federico García Lorca</span></div></div></div><center><a href="http://j.gs/19765185/cactuscodes" class="cactuscodes">cactus</a></center><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;800&family=Nunito:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<style>#lynx{width: 500px;margin: 0 auto;}#lynx .__body{width: 500px;border-radius: 10px 10px 10px 10px;background: linear-gradient(to top, #F1C7C9 0%, #9BAAD3 100%);padding: 120px 0px 100px 0px;}#lynx .__icon1{color: #fff;font-size: 60px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);width: 500px;text-align: center;}#lynx .__title{font-family:inter;color: #fff;text-transform: uppercase;font-weight: 100;font-size: 27px;letter-spacing: 4px;width: 500px;text-align: center;margin-top: 50px;text-shadow: 0px 0px 4px rgba(255, 255, 255, 1);}@keyframes shiny {0% {text-shadow: 0px 0px 4px rgba(255, 255, 255, 1);}50% {text-shadow: 0px 0px 4px rgba(255, 255, 255, 0);}100% {text-shadow: 0px 0px 4px rgba(255, 255, 255, 1);}}#lynx .__subtitle{font-family:nunito;color: #fff;text-transform: uppercase;font-weight: 400;font-size: 8px;letter-spacing: 3px;width: 500px;text-align: center;margin-top: 5px;}#lynx .__sep{width: 1px;height: 50px;background: #FFFFFF80;margin: 0 auto;margin-top: 50px;}#lynx .__title2{font-family:inter;color: #fff;text-transform: uppercase;font-weight: 200;font-size: 20px;letter-spacing: 4px;width: 500px;text-align: center;margin-top: 20px;margin-bottom: 30px;}#lynx .__icon2{color: #fff;font-size: 35px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);width: 500px;text-align: center;margin-top: 50px;}#lynx .thread{width: 400px;height: 50px;margin: 0 auto;background: #FFFFFF80;border-radius: 10px 10px 10px 10px;margin-bottom: 10px;}#lynx .open{background: #7f96d180;float: left;width: 70px;height: 50px;border-radius: 10px 0px 0px 10px;margin-right: 20px;}#lynx .close{background: #ce7dce80;float: left;width: 70px;height: 50px;border-radius: 10px 0px 0px 10px;margin-right: 20px;}#lynx .linko{font-family: nunito;text-decoration: none;color: #9BAAD3;text-transform: uppercase;font-size: 11px;font-weight: 700;position: relative;top: 10px;}#lynx .linkc{font-family: nunito;text-decoration: none;color: #cea9ab;text-transform: uppercase;font-size: 11px;font-weight: 700;position: relative;top: 10px;}#lynx .with{font-family: nunito;text-decoration: none;color: #a5a5a5;font-size: 11px;font-weight: 700;position: relative;top: 5px;}#lynx .__icon3{color: #FFFFFF50;font-size: 20px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);width:70px;text-align: center;margin-top: 15px;}.cactuscodes{color: #ccc;text-decoration: none;font-family:georgia;font-size: 9px;text-transform: uppercase;font-weight:100;}</style>[/html]

0

8

[html]<div id="lynx"><div class="__body"><div class="__icon1"><i class="fas fa-moon"></i></div><div class="__title">Sweet dreams</div><div class="__subtitle">I'm trapped in the illusion</div><div class="__sep"></div><div class="__icon2"><span class="th th-satellite"></span></div><div class="__title2">Relaciones</div><div class="__charbox"><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-aquarius"></span></div><div class="__rname">Jack</div><div class="__rtype">the nemesis</div></div><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-aries"></span></div><div class="__rname">Angelica</div><div class="__rtype">my besty</div></div><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-cancer"></span></div><div class="__rname">Susan</div><div class="__rtype">captain</div></div><br><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-capricorn"></span></div><div class="__rname">renaldo</div><div class="__rtype">princess</div></div><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-gemini"></span></div><div class="__rname">paco</div><div class="__rtype">a random</div></div><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-leo"></span></div><div class="__rname">Max</div><div class="__rtype">hero</div></div></div></div></div><center><a href="http://j.gs/19765185/cactuscodes" class="cactuscodes">cactus</a></center><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;800&family=Nunito:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<style>#lynx{width: 500px;margin: 0 auto;}#lynx .__body{width: 500px;border-radius: 10px 10px 10px 10px;background: linear-gradient(to top, #F1C7C9 0%, #9BAAD3 100%);padding: 120px 0px 100px 0px;}#lynx .__icon1{color: #fff;font-size: 60px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);width: 500px;text-align: center;}#lynx .__title{font-family:inter;color: #fff;text-transform: uppercase;font-weight: 100;font-size: 27px;letter-spacing: 4px;width: 500px;text-align: center;margin-top: 50px;text-shadow: 0px 0px 4px rgba(255, 255, 255, 1);}@keyframes shiny {0% {text-shadow: 0px 0px 4px rgba(255, 255, 255, 1);}50% {text-shadow: 0px 0px 4px rgba(255, 255, 255, 0);}100% {text-shadow: 0px 0px 4px rgba(255, 255, 255, 1);}}#lynx .__subtitle{font-family:nunito;color: #fff;text-transform: uppercase;font-weight: 400;font-size: 8px;letter-spacing: 3px;width: 500px;text-align: center;margin-top: 5px;}#lynx .__sep{width: 1px;height: 50px;background: #FFFFFF80;margin: 0 auto;margin-top: 50px;}#lynx .__title2{font-family:inter;color: #fff;text-transform: uppercase;font-weight: 200;font-size: 20px;letter-spacing: 4px;width: 500px;text-align: center;margin-top: 20px;margin-bottom: 30px;}#lynx .__icon2{color: #fff;font-size: 35px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);width: 500px;text-align: center;margin-top: 50px;}#lynx .thread{width: 500px;height: 50px;background: #FFFFFF80;border-radius: 10px 10px 10px 10px;margin-bottom: 10px;}#lynx .open{background: #7f96d180;float: left;width: 70px;height: 50px;border-radius: 10px 0px 0px 10px;margin-right: 20px;}#lynx .close{background: #ce7dce80;float: left;width: 70px;height: 50px;border-radius: 10px 0px 0px 10px;margin-right: 20px;}#lynx .linko{font-family: nunito;text-decoration: none;color: #9BAAD3;text-transform: uppercase;font-size: 11px;font-weight: 700;position: relative;top: 10px;}#lynx .linkc{font-family: nunito;text-decoration: none;color: #cea9ab;text-transform: uppercase;font-size: 11px;font-weight: 700;position: relative;top: 10px;}#lynx .with{font-family: nunito;text-decoration: none;color: #a5a5a5;font-size: 11px;font-weight: 700;position: relative;top: 5px;}#lynx .__icon3{color: #FFFFFF50;font-size: 20px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);width:70px;text-align: center;margin-top: 15px;}#lynx .__charbox{width: 400px;margin: 0 auto;}#lynx .character{width: 120px;height: 150px;background: #FFFFFF90;border-radius: 10px 10px 10px 10px;display: inline-block;margin-left: 10px;margin-bottom: 10px;transition: 1s;overflow: hidden;}#lynx .character:hover{transform:scale(1.1,1.1);transition: 1s;}#lynx .__image{width: 120px;height: 70px;background-size: cover;box-shadow: inset 0 0 0 1000px rgba(155,170,211,.80);transition: 1s;}#lynx .__image:hover{height: 93px;transition: 1s;box-shadow: inset 0 0 0 1000px rgba(155,170,211,.5);border-radius: 0px 0px 10px 10px;}#lynx .__rname{font-family: inter;color: #7d7d7d;text-transform: uppercase;font-size: 16px;font-weight: 400;letter-spacing: 1px;width: 100px;height: 15px;overflow: hidden;margin: 0 auto;text-align: center;line-height: 90%;margin-top: 5px;}#lynx .__rtype{font-family: nunito;text-decoration: none;color: #a5a5a5;font-size: 9px;font-weight: 700;width: 100px;margin: 0 auto;text-align: center;text-transform: uppercase;letter-spacing:2px;margin-top: 2px;}#lynx .__icon4{width: 100px;height: 25px;margin: 0 auto;text-align: center;color: #9BAAD380;font-size: 20px;margin-top: 10px;text-shadow: 0px 0px 2px rgba(155, 170, 212, 0.5);}.cactuscodes{color: #ccc;text-decoration: none;font-family:georgia;font-size: 9px;text-transform: uppercase;font-weight:100;}</style>[/html]

0

9

[html]<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap" rel="stylesheet"><div id="__arabody"><div class="__bannercontainer"><div class="__arabanner"><div class="__araicon"></div></div><div class="__arabantext">death <div class="__arabancolortext">is a song</div><div class="__arabansubtext">filled with drama</div></div></div><div class="__bottom"><div class="__bottomt1">wanna write something else<div class="__bottomtsub">so i am putting it here</div></div></div><div class="__boxtext"><div class="__fulltext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat imperdiet dictum. Sed lacinia nisl quis ante pellentesque tempor. Aenean ultrices feugiat tortor, a ullamcorper enim porta non. Duis at ornare justo. Aenean nunc massa, aliquet vel rutrum cursus, suscipit nec tortor. Mauris eget arcu et eros tincidunt vehicula. Phasellus pharetra ligula turpis, a porta metus interdum in.<br><br>Nunc purus ligula, congue non mauris in, euismod dapibus lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse efficitur sodales sagittis. Nullam cursus justo sed sapien laoreet, id posuere turpis tincidunt. Suspendisse potenti. Ut pharetra ligula ligula, pharetra varius lectus bibendum ac. Suspendisse aliquam dui quis massa pulvinar, a tincidunt ex aliquam. Cras luctus placerat lectus, nec eleifend mauris volutpat eu. Phasellus maximus neque eu erat interdum pretium. Etiam aliquam ligula in leo pulvinar, in dapibus libero finibus. Nunc commodo tincidunt quam sed consectetur. Vivamus elementum tortor arcu, vel congue ligula maximus sit amet.</div></div><div class="__colorspace"><div class="__colorimage"></div><div class="__colortext">Nunc rhoncus vel dolor sit amet rutrum. Ut molestie ut lacus a viverra. Proin eget felis feugiat, euismod erat id, lobortis purus.</div><div class="__plustext">first things first<div class="__plustexttwo">first things first</div></div></div></div><center><a href="http://j.gs/19765185/cactuscodes" class="cactuscodes">cactus</a></center><style>:root{--dark: #0d0d0d;--darksec: #0a0a0a;--color: #d52a2e;--white: #dedede;--border: 20px solid #dedede;--border2: 1px solid #171717;}#__arabody{width: 500px;background: var(--dark);margin: 0 auto;}.__bannercontainer{width: 500px;height: 250px;overflow: hidden;}.__arabanner{background: url(http://via.placeholder.com/500x250);width: 500px;height: 250px;background-size: cover;filter: grayscale(100%);box-shadow: inset 0 0 0 1000px rgba(0,0,0,.90);}.__araicon{background: url(http://via.placeholder.com/120x120);width: 120px;height: 120px;background-size: cover;border: var(--border);border-radius: 50%;box-shadow: inset 0 0 0 1000px rgba(0,0,0,.50);position: relative;left: 60px;top: 50px;}.__arabantext{font-family: inter;font-size: 60px;color: var(--white);letter-spacing: -5px;font-weight:700;position: relative;left: 180px;bottom: 150px;line-height: 60%;text-align: right;width: 250px;}.__arabancolortext{color:var(--color);font-size:45px;letter-spacing: -4px;}.__arabansubtext{width: 150px;overflow: hidden;font-size: 6px;letter-spacing: 4px;text-transform: uppercase;position: relative;left: 75px;bottom: 10px;}.__colorspace{border-top: var(--border2);background: var(--color);width: 500px;height: 180px;overflow: hidden;}.__colorimage{width: 400px;height: 250px;background: url(http://via.placeholder.com/400x250);clip-path: polygon(60% 0, 0 100%, 900% 0);position:relative;left: 100px;background-size: cover;filter: grayscale(100%);box-shadow: inset 0 0 0 1000px rgba(0,0,0,.85);}.__colortext{color: var(--white);width: 140px;height: 70px;overflow: hidden;font-size: 7px;font-weight: 700;letter-spacing: 2px;text-transform: uppercase;position: relative;left: 45px;bottom: 190px;font-family: inter;text-align: justify;line-height: 120%;}.__plustext{color: var(--color);font-family: inter;text-transform: uppercase;font-weight: 700;font-size: 20px;width: 220px;text-align: right;position: relative;bottom: 200px;left: 260px;}.__plustexttwo{color: var(--white);width: 220px;overflow: hidden;font-size: 6px;letter-spacing: 4px;text-transform: uppercase;}.__boxtext{width: 300px;padding: 40px 40px 40px 40px;background: var(--darksec);margin: 60px 0px 60px 0px;position: relative;left: 60px;border: var(--border2);}.__fulltext{font-family: inter;font-size: 10.2px;line-height: 130%;color: var(--white);text-align: justify;font-weight: 400;letter-spacing: 0px;}.__bottom{width: 500px;height: 150px;background: var(--color);border-top: var(--border2);}.__bottomt1{color: var(--dark);padding: 65px 0px 40px 0px;text-align: center;font-family: inter;font-size: 13px;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;}.__bottomtsub{color: var(--white);font-size: 8px;letter-spacing: 2px;}.cactuscodes{color: #ccc;text-decoration: none;font-family:georgia;font-size: 9px;text-transform: uppercase;font-weight:100;}</style>
[/html]

0


Вы здесь » design » Новый форум » хтмл


Рейтинг форумов | Создать форум бесплатно