Skip to content

F
Float_Layout
Commit d18a9c51 by Sujeeth AV
Options

Update Index.css

parent 51b6cac5
Showing with 98 additions and 110 deletions
Index.css
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box;
} }
nav { nav {
height: 1.3rem; position: sticky;
background-color: black; background-color: rgb(249, 249, 249);
height: 3rem;
padding: 0.8rem 1rem;
width: 100%;
} }
nav img { nav img {
margin-top: 0.2rem; height: 65%;
height: 1rem; filter: brightness(0);
background-color: black;
}
p {
font-size: 0.9rem;
}
h2 {
font-size: 1rem;
} }
.card { .card {
min-height: 50vh; min-height: 50vh;
width: 100%; width: 100vw;
color: white; color: white;
padding: 7px;
} }
.logo img { .logo img {
max-height: 2rem; max-height: 2rem;
...@@ -58,68 +53,101 @@ h2 { ...@@ -58,68 +53,101 @@ h2 {
background: #4ec2e7; background: #4ec2e7;
} }
@media (min-width: 320px) { .Img img {
.card { padding: 2rem;
min-height: 50vh; display: block;
} margin-left: auto;
.Img img { margin-right: auto;
padding: 2rem; margin-top: 3rem;
display: block; }
margin-left: auto; .card.card-6 .Img img {
margin-right: auto; display: block;
margin-top: 3rem; margin-left: auto;
} margin-right: auto;
.card.card-6 .Img img { min-height: 19.12rem;
margin-left: -2.5rem; max-width: 12.25rem;
margin-left: 2rem; }
min-height: 19.12rem;
max-width: 12.25rem;
}
p { p {
font-size: 0.5rem; font-size: 0.8rem;
} text-transform: uppercase;
}
h2 { h2 {
font-size: 0.8rem; font-size: 1rem;
} text-transform: uppercase;
}
hr {
margin-top: 2.5px;
margin-bottom: 2.5px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.card { .card {
width: 50%; width: 50%;
float: left; float: left;
height: 100vh; height: 28rem;
padding: 5px;
box-sizing: border-box;
} }
hr { .card .about {
width: 250px; display: inline-block;
width: 48%;
vertical-align: middle;
padding-left: 1rem;
box-sizing: border-box;
}
.card .Img {
display: inline-block;
width: 48%;
vertical-align: middle;
text-align: right;
box-sizing: border-box;
max-width: 100%;
} }
.Img img { .Img img {
margin-top: 1rem; margin-top: 4rem;
display: block; display: inline-block;
margin-left: auto; padding: 3px;
margin-right: auto; max-width: 100%;
padding: 0; max-height: 300px;
} }
.card.card-2 .Img img { .card-1 .Img img {
min-height: 300px; margin-top: 5.4rem;
margin-left: 7rem; }
.card-2 .Img img {
margin-top: 3rem; margin-top: 3rem;
} }
.card.card-6 .Img img { .card-6 .Img img {
margin-left: 5rem; margin-top: 13.5rem;
margin-top: 4rem; }
hr {
width: 150px;
} }
p { p {
font-size: 0.8rem; font-size: 1rem;
} }
h2 { h2 {
font-size: 1rem; font-size: 1.2rem;
font-weight: 400px;
}
nav {
background: transparent;
position: fixed;
top: 0;
}
nav img {
filter: brightness(5);
} }
} }
...@@ -131,7 +159,7 @@ h2 { ...@@ -131,7 +159,7 @@ h2 {
} }
hr { hr {
width: 250px; width: 135px;
} }
.card { .card {
...@@ -144,79 +172,39 @@ h2 { ...@@ -144,79 +172,39 @@ h2 {
margin-top: 5.5rem; margin-top: 5.5rem;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
display: block;
margin-left: auto;
margin-right: auto;
} }
p { p {
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 70;
} }
h2 { h2 {
font-size: 1.3rem; font-size: 1.1rem;
font-weight: 400;
} }
.card.card-6 .Img img { .card.card-6 .Img img {
margin-left: 5rem; margin-top: 14rem;
margin-top: 7rem; transform: scale(1.2);
display: block;
margin-left: auto;
margin-right: auto;
} }
.card.card-2 .Img img { .card.card-2 .Img img {
margin-top: 5rem; margin-top: 5rem;
display: block;
margin-left: auto;
margin-right: auto;
nav {
height: 35px;
}
nav img {
height: 30px;
}
}
}
@media (min-width: 1440px) {
.card {
float: left;
width: 33.3%;
height: 50vh;
}
.Img img {
display: block;
margin-top: 5rem;
margin-left: auto;
margin-right: auto;
}
.card.card-2 .Img img {
display: block;
margin-top: 5rem;
margin-left: auto;
margin-right: auto;
}
.card.card-6 .Img img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 3rem;
} }
} }
@media (min-width: 1440px) { @media (min-width: 1280px) {
.card { .card {
float: left; min-height: 50vh;
width: 33.3%;
height: 100vh;
} }
h2 {
.Img img { font-size: 1rem;
display: block; font-weight: 200px;
margin-left: auto; }
margin-right: auto; p {
margin-top: 5rem; font-size: 0.6rem;
} }
.card.card-6 .Img img { .card.card-6 .Img img {
margin-top: 3rem; margin-top: 6.5rem;
transform: scale(1.2);
} }
} }
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