Skip to content

Commit

Permalink
Update abt.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@Prajwal0225
Prajwal0225 authored Oct 24, 2023
1 parent ee64e8b commit 1d981b8
Showing 1 changed file with 110 additions and 226 deletions.
336 changes: 110 additions & 226 deletions abt.css
View file
Original file line number Diff line number Diff line change
@@ -1,261 +1,145 @@

body {
background-color: black;
margin: 0;
}

nav.stroke ul li a,
nav.fill ul li a {
position: relative;
h2,
h3 {
margin-bottom: 1rem;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: ".";
color: transparent;
background: white;
height: 1px;
p {
line-height: 1.2rem;
}
nav.stroke ul li a:hover:after {
width: 100%;
}



.main-container {

justify-content: center;
display: flex;
margin: 2rem 2rem;
border-radius: 0.75rem;
color: white;
display: flex;
justify-content: space-between;
max-width: 90%;
/* Set a maximum width for the container */
margin: 0 auto;
height: 75%;
}

.left-container {
max-width: 45%;
justify-content: center;
display: flex;
margin: 2rem 2rem;
box-shadow: rgb(33, 98, 13) 0px 3px 30px;
border-radius: 0.75rem;
color: white;
display: flex;
justify-content: space-between;
max-width: 90%;
margin: 0 auto;
height: 75%;
}

.wr {
margin-left: 40%;

@keyframes flip-left {
0% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
100% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}

.l-container {
max-width: 100%;
.info-contribute {
display: flex;
margin: 2rem 2rem;
box-shadow: rgb(98, 13, 88) 0px 3px 30px;
border-radius: 0.75rem;
margin-left: 5%;
margin-right: 5%;
padding: 30px;
}


.mainpic1 {
width: 300%;
height: auto;
margin: 90px auto;
}

.right-container {
align-items: right;
justify-content: right;
margin: 2rem 2rem;
float: right;
flex: 0 0 45%;
max-width: 45%;
border: 1px solid #000;
box-sizing: border-box;
height: 75%;
margin-top: 0%;
}

.bold {
align-items: center;

}

.wr>p{
color: white;
margin: 5rem 0;
padding: 10px;
transform: translateY(1px);
font-family: 'Roboto Slab', serif;
font-weight: bold;
background: #3e0078;
border: 2px dashed #8d8d8d;
border-left-width: 0px;
border-right-width: 0px;
}

.wr p:nth-child(2) {
margin: auto;
line-height: 35px;
transform: translateY(20px);
font-family: 'Nunito Sans', sans-serif;
color: rgb(158, 201, 222);
}

.first-para>p{
color: #F6AA1C;
font-size: 2.5rem;
padding-left: 5rem;



.info-contribute div {
font-size: 25px;
padding: 0 0.5rem;
}

.first-para>div{
color: white;
font-size: 1.5rem;
padding-left: 5rem;
padding-top: 1rem;

.info-contribute h1 {
font-size: 20px;
align-items: center;
font-family: "Times New Roman", Times, serif;
text-align: center;
text-transform: uppercase;
}

.second-para>p{
color: #F6AA1C;
font-size: 2.5rem;
padding-left: 5rem;
padding-top: 6rem;
.hacktoberfest {
display: flex;
justify-content: center;
align-items: center;
}

.second-para>div{
color: white;
font-size: 1.5rem;
padding-left: 5rem;
padding-top: 1rem;

.hacktoberfest > div {
padding: 1rem;
flex: 1;
max-width: 500px;
background: #101010;
box-shadow: 10px 10px #161616;
}


.third-para>p{
color: #F6AA1C;
font-size: 2.5rem;
padding-left: 5rem;
padding-top: 6rem;
.hacktoberfest h1 {
margin-bottom: 0.5em;
}

.third-para>div{
color: white;
font-size: 1.5rem;
padding-left: 5rem;
.hacktoberfest p {
font-size: 18px;
color: rgb(212 212 216);
text-align: center;
padding-top: 1rem;

}

.image > img{
width: 40rem;
height: 40rem;
border: 2px solid red;
float: right;
border: 1px dotted black;
margin: 0px 0px 15px 20px;
}

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.grid-item {
text-align: center;
background-color: black;
padding: 2rem;
margin: 5rem;
color:#F6AA1C;
font-size: 24px;
.hacktoberfest img {
border-radius: 20px;
}

.heading{
color: #F6AA1C;
font-size: 3rem;
padding-left: 5rem;
padding-top: 6rem;
@media (min-width: 768px) {
.hacktoberfest {
flex-direction: row;
}
.info-contribute {
padding: 1rem;
}
.info-contribute h1 {
font-size: 25px;
}
}

.head {
padding-bottom: 50px;
#content-1 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}

.head>p{
color: rgb(211, 248, 5);
padding:3rem;
font-size: 3rem;
text-align: center;

#content-1 > div {
flex: 1;
}
.footer-container{
width:100%;
padding: 70px 30px 20px;
#content-1 > div:nth-child(1) {
display: flex;
flex-direction: column;
gap: 1rem;
order: 2;
}

.social-icons{
display:flex;
#content-1 > div:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
order: 1;
}

.social-icons a{
text-decoration: none;
padding: 10px;
background-color: white;
margin:20px;
border-radius: 50%;
#content-1 img {
max-width: 70vw;
animation: flip-left 0.5s ease-in-out;
}

.social-icons a i{
font-size: 2em;
color: black;
opacity: 0.9;
#content-2 {
border-top: 1px solid #4c4c4c;
padding-top: 5rem;
}
.social-icons a:hover{
background-color: #111;
transition: 0.5s;
}
.social-icons a:hover i{
color:white;
transition: 0.5s;
}
.footer-bottom{
padding:10px;
padding-bottom: 100px;
#content-2 > div {
display: grid;
grid-template-columns: repeat(1, 1fr);
text-align: center;
background-color: #000;
gap: 1rem;
}
.footer-bottom p{
color:white;
#content-2 > div > div {
padding: 1rem;
background: #201710;
border: 1px solid #603c20;
}


@media screen and (max-width: 500px) {
.grid-container{
display: flex;
flex-direction: column;

@media (min-width: 768px) {
#content-1 {
flex-direction: row;
padding-top: 0px;
padding-bottom: 0px;
}
#content-1 > div:nth-child(1) {
order: 2;
}
#content-1 > div:nth-child(2) {
order: 1;
}
#content-1 img {
max-width: 300px;
}

.grid-item {
margin: auto;
width:21.4rem;
margin-top: 1rem;
#content-2 > div {
grid-template-columns: repeat(3, 1fr);
}
}
}
@media (min-width: 1024px) {
#content-2 > div {
gap: 5rem;
}
}

0 comments on commit 1d981b8

Please sign in to comment.