Skip to content

F
Float_Layout
Commit 51b6cac5 by Sujeeth AV
Options

Initial commit

parents
Showing with 336 additions and 0 deletions
Index.css 0 → 100644
* {
padding: 0;
margin: 0;
}
nav {
height: 1.3rem;
background-color: black;
}
nav img {
margin-top: 0.2rem;
height: 1rem;
background-color: black;
}
p {
font-size: 0.9rem;
}
h2 {
font-size: 1rem;
}
.card {
min-height: 50vh;
width: 100%;
color: white;
}
.logo img {
max-height: 2rem;
max-width: 6rem;
margin-top: 2rem;
margin-bottom: 1.5rem;
}
.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;
}
@media (min-width: 320px) {
.card {
min-height: 50vh;
}
.Img img {
padding: 2rem;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 3rem;
}
.card.card-6 .Img img {
margin-left: -2.5rem;
margin-left: 2rem;
min-height: 19.12rem;
max-width: 12.25rem;
}
p {
font-size: 0.5rem;
}
h2 {
font-size: 0.8rem;
}
}
@media (min-width: 768px) {
.card {
width: 50%;
float: left;
height: 100vh;
}
hr {
width: 250px;
}
.Img img {
margin-top: 1rem;
display: block;
margin-left: auto;
margin-right: auto;
padding: 0;
}
.card.card-2 .Img img {
min-height: 300px;
margin-left: 7rem;
margin-top: 3rem;
}
.card.card-6 .Img img {
margin-left: 5rem;
margin-top: 4rem;
}
p {
font-size: 0.8rem;
}
h2 {
font-size: 1rem;
}
}
@media (min-width: 1024px) {
.main {
min-width: 100%;
min-height: 100vh;
overflow: hidden;
}
hr {
width: 250px;
}
.card {
float: left;
width: 33.33%;
min-height: 50vh;
}
.Img img {
margin-top: 5.5rem;
display: inline-block;
vertical-align: middle;
display: block;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 0.9rem;
}
h2 {
font-size: 1.3rem;
}
.card.card-6 .Img img {
margin-left: 5rem;
margin-top: 7rem;
display: block;
margin-left: auto;
margin-right: auto;
}
.card.card-2 .Img img {
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) {
.card {
float: left;
width: 33.3%;
height: 100vh;
}
.Img img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
}
.card.card-6 .Img img {
margin-top: 3rem;
}
}
Layout.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Layout</title>
<link rel="stylesheet" href="Index.css">
</head>
<body>
<nav>
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-aoc.png" alt="Main Logo" />
</nav>
<main class="main">
<div class="row">
<div class="card card-1">
<div class="about">
<div class="logo">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-f-secure.png"
alt="F-Secure Logo" />
</div>
<h2>Astonishing features requires worry-free security</h2>
<hr />
<p>1 Year Free Mobile Security</p>
</div>
<div class="Img">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-1.png" alt="Feature Image 1" />
</div>
</div>
<div class="card card-2">
<div class="about">
<div class="logo">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-digitainment.png"
alt="Digitainment Logo" />
</div>
<h2>Be hooked!</h2>
<hr />
<p>2000+ Movies from Bollywood</p>
</div>
<div class="Img">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-2.png" alt="Feature Image 2" />
</div>
</div>
<div class="card card-3">
<div class="about">
<div class="logo">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png"
alt="Adaptxt Logo" />
</div>
<h2>The best things in life are free</h2>
<hr />
<p>Free Mobile Pouch</p>
</div>
<div class="Img">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-3.png" alt="Feature Image 3" />
</div>
</div>
<div class="card card-4">
<div class="about">
<div class="logo">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-hungama.png" alt="Hungama Logo" />
</div>
<h2>The thump never ends here</h2>
<hr />
<p>1000’s of songs</p>
</div>
<div class="Img">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-4.png" alt="Feature Image 4" />
</div>
</div>
<div class="card card-5">
<div class="about">
<div class="logo">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png" alt="Adaptxt Logo" />
</div>
<h2>Being globally you</h2>
<hr />
<p>21 Indian & Foreign Languages</p>
</div>
<div class="Img">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-5.png" alt="Feature Image 5" />
</div>
</div>
<div class="card card-6">
<div class="about">
<div class="logo">
<img src="https://krds-assignment.github.io/aoc/api-assets/logo-read-where.png"
alt="Read Where Logo" />
</div>
<h2>For the wise</h2>
<hr />
<p>1000 pts Discount on Subscription</p>
</div>
<div class="Img">
<img src="https://krds-assignment.github.io/aoc/api-assets/image-6.png" alt="Feature Image 6" />
</div>
</div>
</div>
</div>
</main>
</body>
</html>
\ 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