Skip to content

L
Layouts
Commit dd0065ee by Sujeeth AV
Options

Update index.css

parent 5670586c
Showing with 152 additions and 132 deletions
Float/src/index.css
...@@ -6,13 +6,10 @@ ...@@ -6,13 +6,10 @@
box-sizing: border-box; box-sizing: border-box;
color: white; color: white;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
} }
body { body {
max-width: 198rem; max-width: 100vw;
margin: 0; margin: 0;
margin-inline: auto; margin-inline: auto;
} }
...@@ -24,7 +21,7 @@ html { ...@@ -24,7 +21,7 @@ html {
nav { nav {
position: sticky; position: sticky;
background-color: rgb(249, 249, 249); background-color: rgb(249, 249, 249);
height: 5rem !important; height: 5rem;
padding: 0.8rem 3rem; padding: 0.8rem 3rem;
width: 100%; width: 100%;
padding-inline: 1rem; padding-inline: 1rem;
...@@ -43,17 +40,15 @@ image { ...@@ -43,17 +40,15 @@ image {
.main { .main {
display: block; display: block;
max-width: 100vw; min-width: 100vw;
min-height: 100vh; min-height: 100vh;
margin-inline: auto; margin-inline: auto;
width: 100%;
} }
.card { .card {
display: block; display: block;
padding: 4rem; /* padding: 4rem; */
height: 50vh !important; height: 50vh !important;
gap: 3rem;
text-align: center; text-align: center;
} }
...@@ -97,10 +92,9 @@ image { ...@@ -97,10 +92,9 @@ image {
font-weight: 100; font-weight: 100;
} }
.card .about .logo { .card .about .logo {
width: 5rem; width: 7rem;
margin-block: 0.7rem; /* margin-block: 0.7rem; */
} }
.card .about img { .card .about img {
...@@ -146,11 +140,9 @@ image { ...@@ -146,11 +140,9 @@ image {
background: #4ec2e7; background: #4ec2e7;
} }
/* Media Queries */ /* Media Queries */
@media (min-width: 10px) and (max-width: 200px) {
@media(min-width:10px) and (max-width:200px){
* { * {
margin: 0 !important; margin: 0 !important;
} }
...@@ -170,45 +162,34 @@ image { ...@@ -170,45 +162,34 @@ image {
} }
.card > :nth-child(2) img { .card > :nth-child(2) img {
margin: 0 !important; margin: 0 !important;
padding-top: 0 !important; padding-top: 0 !important;
width: 100% !important; width: 100% !important;
height: 120px; height: 120px;
max-height: 300px; max-height: 300px;
} }
/* .img-container {
margin: 0 !important;
padding-top: 0 !important;
width: 100% !important;
} */
} }
@media (min-width: 200px) and (max-width: 639px) {
@media(min-width:200px) and (max-width:640px){ * {
*{
margin: 0px !important; margin: 0px !important;
} }
.card{ .card {
width: 100%; width: 110%;
height: 100vh !important; height: 75vh !important;
padding: 3rem;
} }
.card .about hr{ .card .about hr {
width:350px; width: 350px;
height: 1.5px; height: 1.5px;
} }
.card > :nth-child(2) img { .card > :nth-child(2) img {
margin-top: 2rem !important; margin-bottom: 10rem;
padding: 5px !important; width: 150px !important;
width: 150px; height: 30rem;
margin-left: auto; max-width: 300px;
margin-right: auto; margin-inline: auto;
max-width: 300px !important;
} }
.card .about { .card .about {
...@@ -239,81 +220,73 @@ image { ...@@ -239,81 +220,73 @@ image {
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
} }
.card .about p{ .card .about p {
font-weight: 200; font-weight: 200;
} }
.card-1 > :nth-child(2) img{ .card-1 > :nth-child(2) img {
aspect-ratio: 1/ 2; aspect-ratio: 1/ 2;
margin-left: 4.5rem !important; margin-left: 5.5rem !important;
height: 50rem !important; margin-top: 5rem !important;
} }
.card-6 >:nth-child(2) img{ .card-6 > :nth-child(2) img {
width: 100%; width: 100%;
aspect-ratio: 1 / 2; aspect-ratio: 1 / 2;
min-height: 35rem; min-height: 35rem;
transform: scale(1.2); margin-left: 10rem !important;
transform: scale(1.8);
}
.card-2 > :nth-child(2) img {
margin-top: 14rem;
height: 40rem;
width: 20rem;
min-height: 50rem;
margin-left: 8.5rem !important;
}
.card-3 > :nth-child(2) img {
margin-top: 14rem;
height: 50rem;
width: 20rem;
min-height: 35rem;
margin-left: 8.5rem !important;
}
.card-4 > :nth-child(2) img {
margin-top: 14rem;
height: 60rem;
width: 40rem;
min-height: 35rem;
margin-left: 8.5rem !important;
}
.card-5 > :nth-child(2) img {
margin-top: 14rem;
height: 50rem;
width: 20rem;
min-height: 35rem;
margin-left: 8.5rem !important;
}
.card-3 .logo img {
height: 5rem;
width: 9rem;
margin-bottom: 3rem;
} }
.card-2 >:nth-child(2) img{
margin-top: 14rem !important;
height: 50rem !important;
width: 20rem !important;
min-height: 35rem !important;
margin-left: 4.5rem !important;
}
.card-3 >:nth-child(2) img{
margin-top: 14rem !important;
height: 50rem !important;
width: 20rem !important;
min-height: 35rem !important;
margin-left: 4.5rem !important;
}
.card-4 >:nth-child(2) img{
margin-top: 14rem !important;
height: 50rem !important;
width: 20rem !important;
min-height: 35rem !important;
margin-left: 4.5rem !important;
}
.card-5 >:nth-child(2) img{
margin-top: 14rem !important;
height: 50rem !important;
width: 20rem !important;
min-height: 35rem !important;
margin-left: 4.5rem !important;
}
.card-3 .logo img{
height: 5rem !important;
}
} }
@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: 0vh !important; min-height: 0vh;
vertical-align: middle; vertical-align: middle;
} }
.card .about h4{ .card .about h4 {
font-size: 2rem !important; font-size: 2rem;
} }
.card .about h5{ .card .about h5 {
font-size: 1.5rem !important; font-size: 1.5rem;
} }
.card .about, .card .about,
.card > :nth-child(2) { .card > :nth-child(2) {
...@@ -321,34 +294,36 @@ image { ...@@ -321,34 +294,36 @@ image {
width: 49%; width: 49%;
margin-bottom: 40px; margin-bottom: 40px;
padding-left: 60px; padding-left: 60px;
} }
.card > :nth-child(2) img { .card > :nth-child(2) img {
height: 260px; height: 260px;
max-width:250px !important; max-width: 250px;
width: 250px; width: 250px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.card {
padding: 2rem;
}
.card > :nth-child(2) img { .card > :nth-child(2) img {
height: 30rem; height: 30rem;
margin-top: 5rem; margin-top: 5rem;
max-width: 110px !important; max-width: 110px;
} }
nav { nav {
background: transparent; background: transparent;
position: fixed; position: fixed;
top: 0; top: 0;
} }
.card-1 .about hr{ .card-1 .about hr {
width: 120px; width: 120px;
} }
nav img{ nav img {
filter: brightness(5); filter: brightness(5);
height: 1.4rem; height: 1.4rem;
} }
.main { .main {
display: block; display: block;
} }
...@@ -364,13 +339,12 @@ nav img{ ...@@ -364,13 +339,12 @@ nav img{
width: 50%; width: 50%;
padding-left: 2rem; padding-left: 2rem;
height: 60vh; height: 60vh;
} }
.card .about h4{ .card .about h4 {
font-size: 1.6rem !important; font-size: 1.6rem;
} }
.card .about p{ .card .about p {
font-size: 1.3rem !important; font-size: 1.3rem;
} }
.card .about, .card .about,
.card > :nth-child(2) { .card > :nth-child(2) {
...@@ -383,7 +357,7 @@ nav img{ ...@@ -383,7 +357,7 @@ nav img{
.card > :nth-child(2) img { .card > :nth-child(2) img {
height: 20rem; height: 20rem;
margin-top: 5rem; margin-top: 5rem;
max-width: 140px !important; max-width: 140px;
width: 140px; width: 140px;
} }
...@@ -392,7 +366,6 @@ nav img{ ...@@ -392,7 +366,6 @@ nav img{
margin-left: 0.6rem; margin-left: 0.6rem;
margin-top: 5rem; margin-top: 5rem;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
...@@ -402,7 +375,7 @@ nav img{ ...@@ -402,7 +375,7 @@ nav img{
overflow: hidden; overflow: hidden;
} }
.card-1 .about hr{ .card-1 .about hr {
width: auto; width: auto;
} }
...@@ -411,14 +384,13 @@ nav img{ ...@@ -411,14 +384,13 @@ nav img{
width: 33.33%; width: 33.33%;
padding-left: 0; padding-left: 0;
height: 60vh; height: 60vh;
} }
.card .about h2{ .card .about h2 {
font-size: 1.5rem; font-size: 1.5rem;
} }
.card .about p{ .card .about p {
font-size: 1rem; font-size: 1rem;
} }
.card .about, .card .about,
.card > :nth-child(2) { .card > :nth-child(2) {
display: inline-block; display: inline-block;
...@@ -428,12 +400,10 @@ nav img{ ...@@ -428,12 +400,10 @@ nav img{
} }
.card > :nth-child(2) img { .card > :nth-child(2) img {
height: 40rem; height: 37rem;
margin-top: 5rem; max-width: 150px;
max-width:150px !important; width: 145px;
width:145px;
margin-left: 2rem; margin-left: 2rem;
} }
.card-6 > :nth-child(2) img { .card-6 > :nth-child(2) img {
...@@ -441,21 +411,12 @@ nav img{ ...@@ -441,21 +411,12 @@ nav img{
margin-left: 0.3rem; margin-left: 0.3rem;
margin-top: 5rem; margin-top: 5rem;
.card .logo img{ .card .logo img {
margin-top: 0; margin-top: 0;
} }
} }
} }
@media (min-width: 1600px) { @media (min-width: 1600px) {
.main { .main {
min-width: 100vw; min-width: 100vw;
...@@ -463,16 +424,14 @@ nav img{ ...@@ -463,16 +424,14 @@ nav img{
overflow: hidden; overflow: hidden;
} }
.card-1 .about hr{ .card-1 .about hr {
width: 250px; width: 250px;
} }
.card { .card {
float: left; float: left;
width: 33.33%; width: 33.33%;
height: 60vh; height: 60vh;
} }
.card .about, .card .about,
...@@ -484,16 +443,77 @@ nav img{ ...@@ -484,16 +443,77 @@ nav img{
.card > :nth-child(2) img { .card > :nth-child(2) img {
margin-top: 0; margin-top: 0;
margin-left:9.5rem; margin-left: 9.5rem;
max-width: 200px !important; max-width: 200px;
} }
.card-6 > :nth-child(2) img { .card-6 > :nth-child(2) img {
transform: scale(1.2); transform: scale(1.2);
margin-left: 0.6rem; margin-left: 0.6rem;
margin-top: 5rem; margin-top: 5rem;
}
.card .about .logo {
width: 11.5rem;
margin-bottom: 2rem;
}
}
@media (min-width: 2560px) {
.main {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
.card-1 .about hr {
width: 350px;
} }
.card {
float: left;
min-width: 33.33%;
}
.card .about,
.card > :nth-child(2) {
display: inline-block;
width: 49%;
vertical-align: middle;
}
.card > :nth-child(2) img {
margin-top: 0;
margin-left: 9.5rem;
width: 78rem;
height: 70rem;
}
.card-5 > :nth-child(2) img {
margin-top: 0;
margin-left: 9.5rem;
width: 78rem;
height: 70rem;
}
.card-6 > :nth-child(2) img {
transform: scale(1.2);
margin-left: 0.6rem;
margin-top: 5rem;
height: 33rem;
width: 120%;
}
.card .about h2 {
font-size: 3rem;
text-transform: capitalize;
font-weight: 400;
}
.card .about p {
font-weight: 100;
font-size: 1.6rem;
text-transform: uppercase;
}
.card .about .logo {
width: 12.5rem;
margin-bottom: 2rem;
}
} }
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