Код:
<!--HTML--> <div class="u_theme"> <div class="u_title">Где же прекрасный мужчина?</div> <div class="u_body"> Скучаете по кому-то очень близкому? Не находите себе места? Не спите ночами? Хочется снова слышать знакомый звонкий смех и чувствовать ритм сердца? Не тревожьтесь, ведь эта тема, созданная специально для таких, как вы, не даст потерять последнюю надежду. Благодаря ей вы сможете найти кого-то только захотите: родственную душу, давно потерянного брата или злейшего врага. Стоит только заполнить шаблон ниже, рассказать вашу непростую историю отношений и ждать, пока ваш игрок не найдется. Одно маленькое условие - заявка не должна пестреть смайликами вместо текста, такие заявки будут сразу же сносится в архив. <b>Друзья, не забывайте самостоятельно помечать заявку, если она уже не действительна, и человек нашёлся! </b>Актуальность вашей заявки на нужного зависит исключительно от вас. Раз в две недели заявки под спойлером будут убираться в архив, поэтому не забывайте обновлять статус самостоятельно. Если же ваша заявка исчезла, попросите восстановить ее из архива. </div></div>
look like
Код:<!--HTML--> <style>.fonnz { width: 625px; background: url(https://forumstatic.ru/files/0019/93/79/78207.png) top no-repeat, url(https://forumstatic.ru/files/0019/93/79/72229.png) bottom no-repeat, url(https://forumstatic.ru/files/0019/93/79/96694.png) repeat-y; height: 517px; margin-left: 15px!important; } .zagnz { position: absolute; margin-top: -24px!important; margin-left: 56px!important; text-align: center; width: 500px; font-size: 19px; font-family: bebasneueregular; padding-top: 50px; font-weight: normal; color: #eeeeee; text-shadow: #4d6c7b8f 1px 1px 0px; } .vnehanz{ position: absolute; margin-left: 360px!important; margin-top: 82px!important; width: 200px; height: 20px; overflow: auto; background-color: #132a34; border-radius: 20px; padding: 9px 0px 1px 18px; color: white !important; font-family: bebasneueregular !important; border-width: 1px; border-style: solid; border-color: rgb(37, 57, 66); border-image: initial; background: linear-gradient(rgb(18, 40, 50), rgb(20, 44, 55)) !important; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(59, 93, 107) 0px 0px 18px inset; font-size: 14px; letter-spacing: 2px; font-weight: normal!important; text-shadow: 0 0 3px #9ab3be; } .vozrastnz{ position: absolute; margin-left: 360px!important; margin-top: 118px!important; width: 200px; height: 16px; overflow: auto; background-color: #132a34; border-radius: 20px; padding: 4px 0px 0px 16px; color: white !important; font-family: bebasneueregular !important; border-width: 1px; border-style: solid; border-color: rgb(37, 57, 66); border-image: initial; background: linear-gradient(rgb(18, 40, 50), rgb(20, 44, 55)) !important; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(59, 93, 107) 0px 0px 18px inset; font-size: 12px; letter-spacing: 2px; font-weight: normal!important; text-shadow: 0 0 3px #9ab3be; } .deyatnz{ position: absolute; margin-left: 360px!important; margin-top: 144px!important; width: 200px; height: 16px; overflow: auto; background-color: #132a34; border-radius: 20px; padding: 4px 0px 0px 16px; color: white !important; font-family: bebasneueregular !important; border-width: 1px; border-style: solid; border-color: rgb(37, 57, 66); border-image: initial; background: linear-gradient(rgb(18, 40, 50), rgb(20, 44, 55)) !important; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(59, 93, 107) 0px 0px 18px inset; font-size: 10px; letter-spacing: 2px; font-weight: normal!important; text-shadow: 0 0 3px #9ab3be; } .orientnz{ position: absolute; margin-left: 360px!important; margin-top: 170px!important; width: 200px; height: 16px; overflow: auto; background-color: #132a34; border-radius: 20px; padding: 4px 0px 0px 16px; color: white !important; font-family: bebasneueregular !important; border-width: 1px; border-style: solid; border-color: rgb(37, 57, 66); border-image: initial; background: linear-gradient(rgb(18, 40, 50), rgb(20, 44, 55)) !important; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(59, 93, 107) 0px 0px 18px inset; font-size: 10px; letter-spacing: 2px; font-weight: normal!important; text-shadow: 0 0 3px #9ab3be; } .mestonz{ position: absolute; margin-left: 360px!important; margin-top: 196px!important; width: 200px; height: 16px; overflow: auto; background-color: #132a34; border-radius: 20px; padding: 4px 0px 0px 16px; color: white !important; font-family: bebasneueregular !important; border-width: 1px; border-style: solid; border-color: rgb(37, 57, 66); border-image: initial; background: linear-gradient(rgb(18, 40, 50), rgb(20, 44, 55)) !important; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(59, 93, 107) 0px 0px 18px inset; font-size: 10px; letter-spacing: 2px; font-weight: normal!important; text-shadow: 0 0 3px #9ab3be; } .textnz{ position: absolute; font-family: roboto; color: #142c37!important; font-size: 11px; width: 524px; height: 194px; overflow: auto; margin-left: 32px!important; margin-top: 245px!important; line-height: 14px; padding-right: 15px; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(176, 195, 203) 0px 0px 18px inset; padding: 18px; border-width: 1px; border-style: solid; border-color: rgb(197, 211, 216); border-image: initial; background: rgb(238, 238, 238); } .avanz img{ position: absolute; margin-left: 66px!important; margin-top: 77px!important; width: 250px; height: 148px; object-fit: cover; opacity: 1; border: 2px solid white; box-shadow: 0 0 2px #39596978; border-radius: 30px; } .avanzk{ position: absolute; } </style> <div class="fonnz"> <div class="zagnz">Я ищу ТЕБЯ</div> <div class="avanz"><img src="http://via.placeholder.com/250x148"> </div> <div class="avanzk"></div> <div class="vnehanz">Name Surname внешности</div> <div class="vozrastnz">00 y.o</div> <div class="deyatnz">деятельность</div> <div class="orientnz">ориентация</div> <div class="mestonz">место рождения</div> <div class="textnz"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales lorem tortor, scelerisque ullamcorper elit dignissim vel. Sed et quam aliquam, accumsan turpis vel, rhoncus risus. Suspendisse sodales efficitur ligula, ac egestas arcu posuere sed. Sed mattis pretium arcu, id feugiat lectus placerat ac. Donec in velit ultricies, ornare erat at, vehicula tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lobortis, leo nec varius consequat, lorem sapien tincidunt dolor, eget pellentesque erat enim sit amet turpis. Etiam ac nisl ac massa rhoncus pharetra ac in nisl. Suspendisse dignissim quis tellus in rhoncus. Maecenas et mi nisi. Suspendisse potenti. Quisque vel odio et ante consectetur commodo eget at mi. </div> </div>
не забудь поставить в код HTML
Код:<style>.fonnz { width: 625px; background: url(https://forumstatic.ru/files/0019/93/79/78207.png) top no-repeat, url(https://forumstatic.ru/files/0019/93/79/72229.png) bottom no-repeat, url(https://forumstatic.ru/files/0019/93/79/96694.png) repeat-y; height: 517px; margin-left: 15px!important; } .zagnz { position: absolute; margin-top: -24px!important; margin-left: 56px!important; text-align: center; width: 500px; font-size: 19px; font-family: bebasneueregular; padding-top: 50px; font-weight: normal; color: #eeeeee; text-shadow: #4d6c7b8f 1px 1px 0px; } .vnehanz{ position: absolute; margin-left: 360px!important; margin-top: 82px!important; width: 200px; height: 20px; overflow: auto; background-color: #132a34; border-radius: 20px; padding: 9px 0px 1px 18px; color: white !important; font-family: bebasneueregular !important; border-width: 1px; border-style: solid; border-color: rgb(37, 57, 66); border-image: initial; background: linear-gradient(rgb(18, 40, 50), rgb(20, 44, 55)) !important; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(59, 93, 107) 0px 0px 18px inset; font-size: 14px; letter-spacing: 2px; font-weight: normal!important; text-shadow: 0 0 3px #9ab3be; } .vozrastnz{ position: absolute; margin-left: 360px!important; margin-top: 118px!important; width: 200px; height: 16px; overflow: auto; background-color: #132a34; border-radius: 20px; padding: 4px 0px 0px 16px; color: white !important; font-family: bebasneueregular !important; border-width: 1px; border-style: solid; border-color: rgb(37, 57, 66); border-image: initial; background: linear-gradient(rgb(18, 40, 50), rgb(20, 44, 55)) !important; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(59, 93, 107) 0px 0px 18px inset; font-size: 12px; letter-spacing: 2px; font-weight: normal!important; text-shadow: 0 0 3px #9ab3be; } .deyatnz{ position: absolute; margin-left: 360px!important; margin-top: 144px!important; width: 200px; height: 16px; overflow: auto; background-color: #132a34; border-radius: 20px; padding: 4px 0px 0px 16px; color: white !important; font-family: bebasneueregular !important; border-width: 1px; border-style: solid; border-color: rgb(37, 57, 66); border-image: initial; background: linear-gradient(rgb(18, 40, 50), rgb(20, 44, 55)) !important; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(59, 93, 107) 0px 0px 18px inset; font-size: 10px; letter-spacing: 2px; font-weight: normal!important; text-shadow: 0 0 3px #9ab3be; } .orientnz{ position: absolute; margin-left: 360px!important; margin-top: 170px!important; width: 200px; height: 16px; overflow: auto; background-color: #132a34; border-radius: 20px; padding: 4px 0px 0px 16px; color: white !important; font-family: bebasneueregular !important; border-width: 1px; border-style: solid; border-color: rgb(37, 57, 66); border-image: initial; background: linear-gradient(rgb(18, 40, 50), rgb(20, 44, 55)) !important; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(59, 93, 107) 0px 0px 18px inset; font-size: 10px; letter-spacing: 2px; font-weight: normal!important; text-shadow: 0 0 3px #9ab3be; } .mestonz{ position: absolute; margin-left: 360px!important; margin-top: 196px!important; width: 200px; height: 16px; overflow: auto; background-color: #132a34; border-radius: 20px; padding: 4px 0px 0px 16px; color: white !important; font-family: bebasneueregular !important; border-width: 1px; border-style: solid; border-color: rgb(37, 57, 66); border-image: initial; background: linear-gradient(rgb(18, 40, 50), rgb(20, 44, 55)) !important; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(59, 93, 107) 0px 0px 18px inset; font-size: 10px; letter-spacing: 2px; font-weight: normal!important; text-shadow: 0 0 3px #9ab3be; } .textnz{ position: absolute; font-family: roboto; color: #142c37!important; font-size: 11px; width: 524px; height: 194px; overflow: auto; margin-left: 32px!important; margin-top: 245px!important; line-height: 14px; padding-right: 15px; box-shadow: rgb(255, 255, 255) 0px 0px 2px inset, rgb(249, 247, 244) 0px 0px 1px inset, rgb(176, 195, 203) 0px 0px 18px inset; padding: 18px; border-width: 1px; border-style: solid; border-color: rgb(197, 211, 216); border-image: initial; background: rgb(238, 238, 238); } .avanz img{ position: absolute; margin-left: 66px!important; margin-top: 77px!important; width: 250px; height: 148px; object-fit: cover; opacity: 1; border: 2px solid white; box-shadow: 0 0 2px #39596978; border-radius: 30px; } .avanzk{ position: absolute; } </style> <div class="fonnz"> <div class="zagnz">Я ищу ТЕБЯ</div> <div class="avanz"><img src="http://via.placeholder.com/250x148"> </div> <div class="avanzk"></div> <div class="vnehanz">Name Surname внешности</div> <div class="vozrastnz">00 y.o</div> <div class="deyatnz">деятельность</div> <div class="orientnz">ориентация</div> <div class="mestonz">место рождения</div> <div class="textnz"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales lorem tortor, scelerisque ullamcorper elit dignissim vel. Sed et quam aliquam, accumsan turpis vel, rhoncus risus. Suspendisse sodales efficitur ligula, ac egestas arcu posuere sed. Sed mattis pretium arcu, id feugiat lectus placerat ac. Donec in velit ultricies, ornare erat at, vehicula tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lobortis, leo nec varius consequat, lorem sapien tincidunt dolor, eget pellentesque erat enim sit amet turpis. Etiam ac nisl ac massa rhoncus pharetra ac in nisl. Suspendisse dignissim quis tellus in rhoncus. Maecenas et mi nisi. Suspendisse potenti. Quisque vel odio et ante consectetur commodo eget at mi. </div> </div>