Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@howtorespawn
howtorespawn authored Jun 21, 2024
0 parents commit b5ba5bf
Show file tree
Hide file tree
Showing 49 changed files with 819 additions and 0 deletions.
163 changes: 163 additions & 0 deletions css/about.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
.about {
display: flex;
justify-content: center;
align-items: center;
background-color: #273838;
color: rgb(249, 250, 252);
box-sizing: content-box;
height: calc(100vh - 88px);
font-family: tanker;
}

.body1 {
padding: 30px 0px 30px 0px;
width: 80%;

> h1 {
font-size: 4rem;
text-decoration: underline dotted;
margin-bottom: 30px;
}
}

.about-content {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.card-body{
margin: 10px;
padding: 20px;
border: 2px white solid;
height: 120px;
overflow: hidden;
display: flex;
/* width: calc(500px - 60px); */
width: 42%;
background-color: #242824;
}
.card-content{
height: 120px;
}
.card-image{
margin-left: 20px;
width: 100px;
height: 120px;
display: flex;
align-items: center;
}
.card-image > img{
border-radius: 100px;
width: 170px;
}
.card-image > img:nth-last-child(1){
border-radius: 100px;
width: 200px;
}

.card-body:nth-child(1){
background-color: #242824;
-webkit-transition: background-color 0.4s linear;
-ms-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}
.card-body:hover:nth-child(1){
background-color: #4D5564;
-webkit-transition: background-color 0.4s linear;
-ms-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}
.card-body:nth-child(2){
background-color: #242824;
-webkit-transition: background-color 0.4s linear;
-ms-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}
.card-body:hover:nth-child(2){
background-color: #20A9E1;
-webkit-transition: background-color 0.4s linear;
-ms-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}
.card-body:nth-child(3){
background-color: #242824;
-webkit-transition: background-color 0.4s linear;
-ms-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}
.card-body:hover:nth-child(3){
background-color: #77C2AE;
-webkit-transition: background-color 0.4s linear;
-ms-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}
.card-body:nth-child(4){
background-color: #242824;
-webkit-transition: background-color 0.4s linear;
-ms-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}
.card-body:hover:nth-child(4){
-webkit-transition: background-color 0.4s linear;
-ms-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
background-color: #F78D8D;
}
@media (max-width:1100px) {
.card-content > p{
font-size: 14px;
}
}
@media (max-width:1000px) {
.card-body{
width: 80%;
}
}
@media (max-width:700px) {
.body1 > h1{
font-size: 2.5rem;
margin-bottom: 10px;
margin-left: 10px;
}
.about{
height: auto;
}
.card-body{
width: 90%;
height: 90px;
padding: 10px;
}
.card-content{
height: 120px;
}
.card-content > h1{
font-size: 1.5rem;
}
.card-content > p{
font-size: .7rem;
}
.card-image{
width: 50px;
height: 90px;
display: flex;
align-items: center;
}
.card-image > img{
border-radius: 100px;
width: 200px;
}

.card-image{
margin-left: 10px;
width: 50px;
height: 90px;
display: flex;
align-items: center;
}
.card-image > img:nth-last-child(1){
border-radius: 100px;
width: 120px;
}
}
110 changes: 110 additions & 0 deletions css/form.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
.forms{
display: flex;
justify-content: center;
align-items: center;
background: #273838;
color: aliceblue;
font-family: tanker;
.body1{
width: 80vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}

.form-content{
/* background: #13121A; */

border-bottom: 4px grey solid;
border-right: 4px #070707 solid;
box-shadow: -5px -3px #0000002a;
width: 100%;
height: auto;
padding: 30px;
border-radius: 8px;
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.form-info{
backdrop-filter: blur(1px);
width: 50%;
display: flex;
position: relative;
align-items: center;
border-left: 5px white solid;
border-radius: 10px;
padding: 10px 0px 20px 10px;

p{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
margin-bottom: 0px;
}
h2{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: clash;
text-decoration: white underline;
font-weight: 500;
font-size: 1.3rem;
margin-top: 0px;
}
.form-info-heading{
margin-top: 10px;
display: flex;
align-items: center;
}
.line{
position: absolute;
left: 0;
width: 15px;
height: 3px;
background: white;
}
.line2{
position: absolute;
left: 0;
width: 18px;
height: 4px;
background: #67C15E;
}
.line3{
position: absolute;
left: 0;
width: 18px;
height: 4px;
background: #8791F6;
}
.form-info-heading:nth-child(1){
margin-top: 0;
}
img{
height: 2rem;
padding-right: 10px;
}
}
.form-content{
--s: 84px; /* control the size*/
--c1: #466565;
--c2: #314747;
--c3: #1d2929;

--_g: 0 120deg,#0000 0;
background:
conic-gradient(from 0deg at calc(500%/6) calc(100%/3),var(--c3) var(--_g)),
conic-gradient(from -120deg at calc(100%/6) calc(100%/3),var(--c2) var(--_g)),
conic-gradient(from 120deg at calc(100%/3) calc(500%/6),var(--c1) var(--_g)),
conic-gradient(from 120deg at calc(200%/3) calc(500%/6),var(--c1) var(--_g)),
conic-gradient(from -180deg at calc(100%/3) 50%,var(--c2) 60deg,var(--c1) var(--_g)),
conic-gradient(from 60deg at calc(200%/3) 50%,var(--c1) 60deg,var(--c3) var(--_g)),
conic-gradient(from -60deg at 50% calc(100%/3),var(--c1) 120deg,var(--c2) 0 240deg,var(--c3) 0);
background-size: calc(var(--s)*1.732) var(--s);
}
@media (max-width:800px) {
.form-info{
width: 100%;
backdrop-filter: blur(0);
}
}
Loading

0 comments on commit b5ba5bf

Please sign in to comment.