Skip to content

G
gridlayout
Commit 1d60ae37 by Manivasagam S
Options

style changed

parent dead429c
Showing with 199 additions and 92 deletions
src/App.css
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
} }
body { body {
max-width: 198rem;
margin: 0 auto; margin: 0 auto;
} }
...@@ -37,7 +36,6 @@ image { ...@@ -37,7 +36,6 @@ image {
.main { .main {
display: block; display: block;
max-width: 100vw;
min-height: 100vh; min-height: 100vh;
margin-inline: auto; margin-inline: auto;
width: 100%; width: 100%;
...@@ -49,12 +47,13 @@ image { ...@@ -49,12 +47,13 @@ image {
/*height: 50vh !important;*/ /*height: 50vh !important;*/
gap: 3rem; gap: 3rem;
text-align: center; text-align: center;
min-height: 60vh;
} }
.card .about, .card .about,
.card > :nth-child(2) { .card > :nth-child(2) {
display: inline-block; display: inline-block;
width: 50%; /* width: 50%; */
vertical-align: middle; vertical-align: middle;
text-align: left; text-align: left;
} }
...@@ -65,15 +64,17 @@ image { ...@@ -65,15 +64,17 @@ image {
} }
.card .about h5 { .card .about h5 {
font-weight: 100; font-weight: 70;
font-size: 1.4rem; font-size: 1.7rem;
text-transform: uppercase; text-transform: uppercase ;
opacity: 60%;
} }
.card .about h4 { .card .about h4 {
font-size: 1.7rem; font-size: 2rem;
text-transform: capitalize; text-transform: uppercase ;
font-weight: 400; font-weight: 700;
margin-top: 15px;
} }
.card .about hr { .card .about hr {
...@@ -86,7 +87,7 @@ image { ...@@ -86,7 +87,7 @@ image {
} }
.card .about .logo { .card .about .logo {
width: 5rem; width: 6rem;
margin-block: 0.7rem; margin-block: 0.7rem;
} }
...@@ -96,6 +97,7 @@ image { ...@@ -96,6 +97,7 @@ image {
.card img { .card img {
object-fit: contain; object-fit: contain;
width: 100%;
} }
.card > :nth-child(2) { .card > :nth-child(2) {
...@@ -105,184 +107,288 @@ image { ...@@ -105,184 +107,288 @@ image {
margin: 0 auto; margin: 0 auto;
} }
.card > :nth-child(2) img { .card > :nth-child(2) {
width: 100%; width: 100%;
height: auto; height: auto;
max-width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
display: block; display: block;
min-height: 20rem; max-width: 25rem;
height: 35rem; height: 100%;
/* border: 2px solid green; */
margin-inline: auto; margin-inline: auto;
max-width: 30rem; margin-top: 3rem;
padding-top: 30px; }
.card .about .logo{
width: 6rem;
}
.card-1 .about .logo{
width: 5rem;
}
.card-3 .about .logo{
width: 8rem;
}
.card-4 .about .logo{
width: 9rem;
}
.card-5 .about .logo{
width:8rem;
}
.card.card-1 {
background: #41ca6e;
}
.card.card-2 {
background: #fab153;
}
.card.card-3 {
background: #7277d5;
}
.card.card-4 {
background: #f87d51;
}
.card.card-5 {
background: #ed5466;
}
.card.card-6 {
background: #4ec2e7;
} }
.card.card-1 { background: #41ca6e; } .card-6 .img-container {
.card.card-2 { background: #fab153; } /* border: 2px solid red; */
.card.card-3 { background: #7277d5; } max-height: 40rem;
.card.card-4 { background: #f87d51; } height: 50vh;
.card.card-5 { background: #ed5466; } }
.card.card-6 { background: #4ec2e7; } .card .img-container{
max-width: 23rem;
margin-top: 12vh;
}
.card-6 .img-container img {
width: 100%;
height: 100%;
}
.card-1 .img-container {
max-width: 30rem;
margin-right:rem;
}
@media (min-width: 640px) { @media (min-width: 640px) {
.main { .main {
display: inline-block; display: inline-block;
min-width: 100vw; /* min-width: 100vw; */
width: 100%; width: 100%;
} }
.card { .card {
padding: 3.3rem; padding: 3.3rem;
min-height: 50vh !important; /* min-height: 50vh !important; */
min-height: auto;
vertical-align: middle; vertical-align: middle;
} }
.card .about, .card .about,
.card > :nth-child(2) { .card > .img-container {
display: inline-block; display: inline-block;
width: 49%; max-width: 45%;
margin-bottom: 40px; margin-bottom: 40px;
width: 100%;
}
.card .img-container {
margin: 10px 5%;
min-height: 25rem;
max-width: 18rem;
margin-left: 7rem;
}
.card-1 .img-container{
margin-left:5rem;
max-width: 22rem;
} }
.card .about h4 { .card .about h4 {
font-size: 1.7rem ; font-size: 1.7rem;
margin-top: 10px;
} }
.crad-6 .img-container img{
transform: scale(1.3);
}
.card .about h5 { .card .about h5 {
font-size: 1.5rem ; font-size: 1.5rem;
opacity: 100%;
} }
.card > :nth-child(2) img { .card .about .logo{
min-height: 30rem; width: 6rem;
min-width: 250px; }
max-width: 250px ; .card-1 .about .logo{
margin-right: 1rem; width: 5rem;
} }
.card-1 > :nth-child(2) img{ .card-3 .about .logo{
max-height: 25rem; width: 8rem;
margin-right: 5rem; }
.card-4 .about .logo{
width: 9rem;
}
.card-5 .about .logo{
width:8rem;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
nav { nav {
background: transparent; background: transparent;
position: fixed; position: fixed;
top: 0; top: 0;
} }
nav img { nav img {
filter: brightness(5); filter: brightness(5);
} }
.main { .main {
display: block; display: block;
min-width: 100vw; /* min-width: 100vw; */
min-height: 100vh; min-height: 100vh;
overflow: hidden; overflow: hidden;
} }
.card { .card {
float: left; float: left;
width: 50%; max-width: 50%;
height: 50vh !important; width: 100%;
max-height: 40rem;
min-height: 30rem;
height: 100vh;
padding: 2rem;
}
.card .img-container img {
width: 100%;
height: 100%;
}
.card .about {
margin: 0;
}
.card .img-container {
max-height: 35rem;
max-width: 10rem;
margin-top: auto;
/* border: 2px solid red; */
} }
.card .about, .card-1 .about,
.card-1 .img-container {
margin-top: -2rem;
}
.card .img-container {
max-width: 50%;
margin: 0px 0;
margin-left: 5%;
}
/* .card .about,
.card > :nth-child(2) { .card > :nth-child(2) {
display: inline-block; display: inline-block;
width: 49%;
vertical-align: middle; vertical-align: middle;
} */
}
.card .about h4 { .card .about h4 {
font-size: 1.4rem !important; font-size: 1.6rem ;
} text-transform:none;
font-weight: 400;
margin-top: 10px;
.card .about h5 {
font-size: 1.3rem ;
} }
.card > :nth-child(2) img { .card .about h5 {
min-width: 14.5rem; font-size: 1.3rem;
min-height: 30rem;
} }
.card-1 .about hr { .card-1 .about hr {
width: auto; width: auto;
} }
.card-6 .about {
.card-6 > :nth-child(2) img { max-width: 40%;
transform: scale(1.1); width: 100%;
margin-left: 0.6rem;
margin-top: 5rem;
} }
.card-1 > :nth-child(2) img{ .card-6 .img-container {
min-height: 35rem; max-width: 55%;
max-width: 23rem; width: 100%;
margin-left: 5px;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
body {
max-width: 2160px;
margin-inline: auto;
}
.main { .main {
min-width: 100vw; min-width: auto;
min-height: 100vh;
overflow: hidden; overflow: hidden;
} }
.card { .card {
padding: 4rem;
float: left; float: left;
width: 33.33%; max-width: 33.33%;
height: 60vh; width: 100%;
max-height: 43rem;
height: 43rem;
}
.card .about .logo{
width: 6rem;
}
.card-1 .about .logo{
width: 5rem;
}
.card-3 .about .logo{
width: 8rem;
}
.card-4 .about .logo{
width: 9rem;
}
.card-5 .about .logo{
width:8rem;
} }
.card .about, .card .about,
.card > :nth-child(2) { .card > :nth-child(2) {
display: inline-block; display: inline-block;
width: 49%;
vertical-align: middle; vertical-align: middle;
} }
.card .about h4 { .card .about h4 {
font-size: 1.5rem !important ; margin-top:15px;
font-size: 1.5rem ;
font-weight: 400;
} }
.card .about h5 { .card .about h5 {
font-size: 1.4rem !important ; font-size: 1.2rem ;
}
.card > :nth-child(2) img {
max-width: 35rem;
min-height: 15rem;
margin-left: 10px;
} }
.card-6 .about {
margin-bottom: 1rem;
}
.card-3 .about {
margin-top: 12px;
}
.card-1 .about hr { .card-1 .about hr {
width: auto; width: auto;
} }
.card .about hr{ .card .about hr {
width:auto; width: auto;
}
.card-6 > :nth-child(2) img {
transform: scale(1.1);
margin-left: -0.2rem;
margin-top: 1rem;
} }
.card-1 > :nth-child(2) img{ }
min-height: 35rem;
max-width: 19.5rem;
transform: scale(1);
@media (min-width: 1280px) {
.card {
/* max-height: 49rem;*/
min-height: 50vh;
height: 35rem;
}
.card .img-container{
max-width: 40%;
}
.card .about h4{
font-size: 1.6rem;
}
.card .about h5{
font-size: 1.4rem;
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment