Skip to content

G
gridlayout
Commit 8f065194 by Manivasagam S
Options

new changes

parent 97adeebd
Showing with 174 additions and 124 deletions
src/App.css
......@@ -10,60 +10,83 @@
body {
max-width: 198rem;
margin-inline: auto;
margin: 0 auto;
}
html {
font-size: 62.5%;
}
nav {
position: fixed;
position: sticky;
background-color: rgb(249, 249, 249);
height: 5rem !important;
padding: 0.8rem 3rem;
padding: 0.8rem 1rem;
width: 100%;
top: 0;
}
nav img {
height: 70%;
filter: brightness(0);
}
image {
max-height: 100%;
}
.main {
display: grid;
grid-template-columns: 1fr;
display: block;
max-width: 100vw;
min-height: 100vh;
margin-inline: auto;
width: 100%;
}
.card {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 2rem 1.7rem;
overflow: hidden;
align-items: center;
display: block;
padding: 4rem;
/*height: 50vh !important;*/
gap: 3rem;
text-align: center;
}
.card .about,
.card > :nth-child(2) {
display: inline-block;
width: 50%;
vertical-align: middle;
text-align: left;
}
.card .about {
width: 100%;
margin-left: 9%;
margin-inline: auto;
}
.card .about h5 {
font-weight: 100;
font-size: 1.6rem;
font-size: 1.4rem;
text-transform: uppercase;
}
.card .about h4 {
font-size: 1.7rem;
text-transform: capitalize;
font-weight: 400;
}
.card .about hr {
height: 0.1rem;
background-color: white;
border: none;
border-radius: 0.1rem;
width: 100%;
margin: 10px 0;
}
.card .about .logo {
width: 6rem;
width: 5rem;
margin-block: 0.7rem;
}
......@@ -71,168 +94,195 @@ image {
width: 100%;
}
.card > :nth-child(2) {
width: auto;
}
.card > :nth-child(2) img {
width: 100%;
.card img {
object-fit: contain;
}
.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 > :nth-child(2) {
max-width: 30rem;
margin-inline: auto;
height: 100%;
}
nav {
position: sticky;
background-color: black;
width: 100%;
padding-inline: 1rem;
margin: 0;
}
.main {
grid-template-columns: 1fr;
}
.card {
display: grid;
grid-template-columns: 1fr;
padding: 4rem;
gap: 3rem;
min-height: 100vh;
}
.card .about .logo {
width: 5rem;
margin-block: 0.7rem;
max-width: 100%;
text-align: center;
margin: 0 auto;
}
.card > :nth-child(2) img {
width: 100%;
height: 100%;
}
.card .about {
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
display: block;
min-height: 20rem;
height: 35rem;
margin-inline: auto;
}
max-width: 30rem;
padding-top: 30px;
.card .about h4,
.card .about hr {
width: 100%;
margin-block: 1rem;
font-size: 1.7rem;
font-weight: 700;
text-transform: uppercase;
}
.card img {
object-fit: contain;
}
.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-6 > :nth-child(2) img {
width: 100%;
aspect-ratio: 1 / 1;
min-height: 30rem;
transform: scale(1.2);
}
.card-1 > :nth-child(2) img {
aspect-ratio: 1/2;
height: 50rem;
}
@media (min-width: 640px) {
.main {
display: grid;
grid-template-columns: 1fr;
}
.card > :nth-child(2) img {
display: inline-block;
min-width: 100vw;
width: 100%;
object-fit: contain;
}
.card {
padding: 3.3rem;
grid-template-columns: repeat(2, 1fr);
min-height: 50vh;
min-height: 50vh !important;
vertical-align: middle;
}
.card .about,
.card > :nth-child(2) {
display: inline-block;
width: 49%;
margin-bottom: 40px;
}
.card .about h4 {
font-size: 1.7rem ;
}
.card .about h5 {
font-size: 1.5rem ;
}
.card > :nth-child(2) img {
min-height: 30rem;
min-width: 250px;
max-width: 250px ;
margin-right: 1rem;
}
.card-1 > :nth-child(2) img{
max-height: 25rem;
margin-right: 5rem;
}
}
@media (min-width: 768px) {
nav {
background: transparent;
position: fixed;
top: 0;
}
nav img {
filter: brightness(5);
}
.main {
display: grid;
grid-template-columns: 1fr 1fr;
display: block;
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
}
.card {
padding: 2rem;
gap: 2rem;
float: left;
width: 50%;
height: 50vh !important;
}
.card .about,
.card > :nth-child(2) {
display: inline-block;
width: 49%;
vertical-align: middle;
}
.card .about h4 {
font-size: 1.5rem;
text-transform: capitalize;
font-weight: 400;
font-size: 1.4rem !important;
}
.card .about h5 {
font-size: 1.4rem;
text-transform: uppercase;
font-weight: 100;
font-size: 1.3rem ;
}
.card > :nth-child(2) img {
min-width: 14.5rem;
min-height: 30rem;
}
.card-1 > :nth-child(2) img {
min-height: 100%;
.card-1 .about hr {
width: auto;
}
.card-6 > :nth-child(2) img {
transform: scale(1.1);
margin-left: 0.6rem;
margin-top: 5rem;
}
.card-1 > :nth-child(2) img{
min-height: 35rem;
max-width: 23rem;
margin-left: 5px;
}
}
@media (min-width: 1024px) {
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
}
.card {
padding-left: 5rem;
float: left;
width: 33.33%;
height: 60vh;
}
.card .about,
.card > :nth-child(2) {
display: inline-block;
width: 49%;
vertical-align: middle;
}
.card .about h4 {
font-size: 1.5rem !important ;
}
.card .about h5 {
font-size: 1.4rem !important ;
}
.card > :nth-child(2) img {
height: 33rem;
margin-top: 5rem;
max-width: 35rem;
min-height: 15rem;
margin-left: 10px;
}
.card .about .logo {
width: 5rem;
margin-block: 0.7rem;
.card-1 .about hr {
width: auto;
}
.card .about hr{
width:auto;
}
.card-6 > :nth-child(2) img {
transform: scale(1.2);
margin-left: 0.6rem;
margin-top: 6rem;
transform: scale(1.1);
margin-left: -0.2rem;
margin-top: 1rem;
}
.card-1 > :nth-child(2) img {
margin-top: 0.5rem;
.card-1 > :nth-child(2) img{
min-height: 35rem;
max-width: 19.5rem;
transform: scale(1);
}
}
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