Fotoula - takenote
- Thread starter Fotoula
- Start date
Fotoula
Member
Code:
[div=wrapperBg||url('https://i.redd.it/uwzwkfuuuwd61.jpg')][div=flexContainer||][div=tipWrapper||]
[div=tipContainer||][div=charTip||][div=tipImg||url('https://i.imgur.com/cOlO8ss.jpeg')][/div]Fotoula Andreadi[/div][/div]
[/div]
[div=container||][div=infoWrapper||][div=infoTitle||]INFORMATION[/div][div=infoLine||][/div][div=infoText||]Trường học Imperia [2024.04.13][/div][/div]
[div=content||] (văn bủn) [/div][div=footer||][/div][/div][/div][/div]
[style]
.wrapperBg {
padding-top: 120px;
padding-bottom: 120px;
background-color: rgba(28, 31, 36,0.8) !important;
background-blend-mode: darken !important;
background-size: auto 100% !important;
background-position: center !important;
}
.flexContainer {
display: flex;
flex-direction: column;
}
.container {
width: 80%;
max-width: 1600px;
padding-top: 120px;
margin: auto;
border-radius: 3px;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
background: url(https://grainy-gradients.vercel.app/noise.svg);
background-color: #e8eaed;
box-shadow: inset 0px 0px 50px rgba(0,0,0,.2), inset 0px 0px 50px rgba(0,0,0,.2);
}
.tipWrapper {
display: flex;
flex-direction: row;
justify-content: start;
width: 80%;
margin: auto;
transform: translateX(5%);
margin-bottom: -80px;
}
.suspect {
position: absolute;
top: 0;
left: 0;
transform: translateX(-20%);
color: #042cdb;
font-family: Bebas Neue, sans-serif;
letter-spacing: 2px;
font-size: 24px;
z-index: 1;
}
.tipContainer {
background-color: #fcfcfc;
transform: rotate(3deg);
padding: 12px;
position: relative;
transition: 0.25s;
}
.tipContainer:nth-child(2n) {
transform: rotate(-3deg) translateY(-2%);
}
.tipContainer:hover {
box-shadow: 10px 10px 0px #042cdb;
transform: rotate(8deg) translateY(-5%);
}
.tipContainer:nth-child(2n):hover {
transform: rotate(-8deg) translateY(-2%);
}
.charTip {
display: flex;
flex-direction: column;
align-items: center;
}
.tipImg {
background-size: 120px 120px !important;
width:120px;
height: 120px;
filter: grayscale(100%);
margin-bottom: 4px;
transition: 0.25s;
}
.tipImg:hover {
filter: none;
}
.content {
width: 80%;
max-width: 1024px;
margin: auto;
}
.infoWrapper {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 40px;
}
.infoTitle {
font-family: Bebas Neue, sans-serif;
letter-spacing: 2px;
font-size: 16px;
text-align: left;
background-color: #0223b3;
color: #fcfcfc;
letter-spacing: 2px;
line-height: 100%;
padding: 4px;
display: inline-block;
}
.infoLine {
flex: 1;
height: 1px;
background-color: #0223b3;
}
.infoText {
margin: 0 24px 0 8px;
color: #0223b3;
font-family: Josefin Sans, sans-serif;
letter-spacing: 1px;
}
.footer {
margin: auto;
margin-top: 80px;
margin-bottom: 40px;
width: 100px;
height: 25px;
border-radius: 40px;
background-color: #4f4e52;
box-shadow: inset 0px 0px 15px rgba(0,0,0,.5), inset 0px 0px 15px rgba(0,0,0,.5);
}
@media screen and (max-width: 600px) {
.container{
width: 90%;
}
[/style]
[gfont]family=Bebas+Neue&display=swap[/gfont]
[gfont]family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap[/gfont]
Last edited:
Fotoula
Member
Code:
[div=npctt1||][div=bg1||][div=tips1||]
[box=;display: inline-block;width:122px;margin:5px;text-align:center||||][box=; border: 1px #3f3f3f solid;||||][szimg=120|120]https://i.imgur.com/cOlO8ss.jpeg[/szimg][/box]Fotoula Andreadi[/box]
[/div]
[div=date||]Lớp học trường Imperia[/div]
Em trao cho anh con tim sao anh trao cho em một cú lừa?
[/div][/div]
[style]
.npctt1 {background-color:#fff;background-image:linear-gradient(135deg,rgba(233,233,233,.75) 12.5%,#fff 12.5%,#fff 50%,rgba(233,233,233,.75) 50%,rgba(233,233,233,.75) 62.5%,#fff 62.5%,#fff 100%);background-size:8px 8px;background-attachment:fixed;padding:30px}.bg1{background:#fff;border:1px solid #e9e9e9;box-sizing:border-box;padding:20px 90px 50px;}.tips1 {display: flex;flex-wrap:wrap;padding:5px;border-bottom:2px solid #efefef}.date {border-top:1px solid #efefef;border-bottom:1px solid #efefef;padding:10px;text-align:center;background-image:linear-gradient(135deg,rgba(233,233,233,.75) 12.5%,#fff 12.5%,#fff 50%,rgba(233,233,233,.75) 50%,rgba(233,233,233,.75) 62.5%,#fff 62.5%,#fff 100%);background-size:8px 8px;background-attachment:fixed;font-weight:bold;margin:auto;}@media (max-width: 650px) {.npctt1 {padding:15px !important}.bg1 {padding:10px 10px 30px !important;}.tips {justify-content:center}}
[/style]
Last edited:
Fotoula
Member
Code:
[box=;width:100px;margin:auto;border:1px solid #e6e6e6;||||][szimg=100|]https://i.imgur.com/cOlO8ss.jpeg[/szimg][/box]Fotoula Andreadi
[box=;width:calc(100% - 150px);border-radius:0px 25px 25px;border:1px solid #e6e6e6;box-sizing:border-box;padding:35px;display:flex;flex-flow:row wrap;justify-content:space-between;margin-bottom:25px;||||][box=;||||]Title: Test [/box][box=;color:#777;||||]20/04/24[/box][box=#e6e6e6;width:100%;height:1px;margin-bottom:25px;||||][/box]
Cái code trông xịn xò vãi?! [/box]
