Skip to content

L
Layouts
Commit dd0065ee by Sujeeth AV
Options

Update index.css

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