Skip to content

L
layout-basics
Commit acca7e9d by Gurubaran B
Options

initial-commit

parents
Showing with 1161 additions and 0 deletions
flexbox/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<title>Training - Flexbox</title>
<link rel="stylesheet" href="./style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header>
<div class="header_logo_wrapper">
<img
class="header_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-aoc.png"
/>
</div>
</header>
<section class="container">
<div class="list_container">
<div class="list_item container_1">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo mini_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-f-secure.png"
/>
</div>
<div class="description_title"><p>Astonishing features requires worry-free security</p></div>
<hr class="divider" />
<div class="description_content"><p>1 Year Free Mobile Security</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="image" src="https://krds-assignment.github.io/aoc/api-assets/image-1.png" />
</div>
</div>
</div>
<div class="list_item container_2">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-digitainment.png"
/>
</div>
<div class="description_title"><p>Be hooked!</p></div>
<hr class="divider" />
<div class="description_content"><p>2000+ Movies from Bollywood</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="image" src="https://krds-assignment.github.io/aoc/api-assets/image-2.png" />
</div>
</div>
</div>
<div class="list_item container_3">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png"
/>
</div>
<div class="description_title"><p>The best things in life are free</p></div>
<hr class="divider" />
<div class="description_content"><p>Free Mobile Pouch</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="image" src="https://krds-assignment.github.io/aoc/api-assets/image-3.png" />
</div>
</div>
</div>
<div class="list_item container_4">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-hungama.png"
/>
</div>
<div class="description_title"><p>The thump never ends here</p></div>
<hr class="divider" />
<div class="description_content"><p>1000’s of songs</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="image" src="https://krds-assignment.github.io/aoc/api-assets/image-4.png" />
</div>
</div>
</div>
<div class="list_item container_5">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png"
/>
</div>
<div class="description_title"><p>Being globally you</p></div>
<hr class="divider" />
<div class="description_content"><p>21 Indian & Foreign Languages</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="image" src="https://krds-assignment.github.io/aoc/api-assets/image-5.png" />
</div>
</div>
</div>
<div class="list_item container_6">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-read-where.png"
/>
</div>
<div class="description_title"><p>For the wise</p></div>
<hr class="divider" />
<div class="description_content"><p>
1000 pts Discount on Subscription,</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="large image" src="https://krds-assignment.github.io/aoc/api-assets/image-6.png" />
</div>
</div>
</div>
</div>
</section>
</body>
</html>
flexbox/style.css 0 → 100644
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container_1 {
background-color: #41ca6e;
}
.container_2 {
background-color: #fab153;
}
.container_3 {
background-color: #7277d5;
}
.container_4 {
background-color: #f87d51;
}
.container_5 {
background-color: #ed5466;
}
.container_6 {
background-color: #4ec2e7;
}
header {
position: fixed;
padding: 15px;
background-color: white;
width: 100%;
}
.header_logo_wrapper {
width: 20%;
height: auto;
}
.header_logo {
filter: invert();
max-width: 100%;
height: auto;
}
.list_container {
display: flex;
flex-wrap: wrap;
}
.list_item {
height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-top: 4rem;
}
.description_section {
margin-top: 2rem;
color: white;
text-transform: uppercase;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: flex-end;
padding: 0rem 4rem 0rem 4rem;
}
.description_logo_wrapper {
margin-bottom: 10px;
max-width: 5rem;
}
.description_logo {
max-width: 100%;
height: auto;
}
.description_title {
font-size: 21px;
line-height: 1.3;
margin-bottom: 10px;
font-weight: 700;
}
.description_content {
font-size: 18px;
font-weight: 100;
line-height: 1.3;
color: rgba(255, 255, 255, 0.35);
}
.divider {
border: none;
height: 1px;
background-color: white;
margin-bottom: 10px;
}
.image_section {
display: flex;
justify-content: space-around;
align-items: center;
padding: 0rem 4rem 0rem 4rem;
}
.image_wrapper {
display: flex;
justify-content: space-around;
align-items: center;
}
.image_wrapper {
max-width: 85%;
}
.image {
max-width: 100%;
height: auto;
}
@media all and (min-width: 580px) {
header {
position: absolute;
padding: 1rem;
background-color: transparent;
width: 100%;
}
.header_logo_wrapper {
width: 10%;
height: auto;
}
.header_logo {
filter: none;
}
.list_item {
width: 50%;
height: 50dvh;
flex-direction: row;
padding-top: 0rem;
}
.description_section,
.image_section {
width: 50%;
height: 100%;
}
.description_section {
margin-top: 0rem;
align-items: center;
padding: 0rem 0rem 0rem 2rem;
}
.description_logo_wrapper {
max-width: 4rem;
}
.description_title {
font-size: 16px;
font-weight: 100;
color: rgba(255, 255, 255);
text-transform: none;
}
.divider {
width: 80%;
}
.description_content {
font-size: 15px;
color: rgba(255, 255, 255);
}
.image_section {
padding: 1rem;
}
}
@media all and (min-width: 950px) {
.header_logo_wrapper {
width: 5%;
height: auto;
}
.list_item {
width: calc(100% / 3);
padding: 2rem 0rem 0rem 1rem;
}
.description_section {
padding-left: 1.5rem;
}
.image_section {
padding: 0rem;
}
.image_wrapper {
max-width: 70%;
}
}
@media all and (min-width: 1025px) {
.description_section {
padding-left: 3rem;
}
.description_title {
max-width: 80%;
}
}
@media all and (min-width: 1405px) {
.image_wrapper {
max-width: 65%;
}
}
grid/.vscode/settings.json 0 → 100644
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
grid/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<title>Training - Grid</title>
<link rel="stylesheet" href="./style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header>
<div class="header_logo_wrapper">
<img
class="header_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-aoc.png"
/>
</div>
</header>
<section class="container">
<div class="list_container">
<div class="list_item container_1">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper mini_logo">
<img
class="description_logo "
src="https://krds-assignment.github.io/aoc/api-assets/logo-f-secure.png"
/>
</div>
<div class="description_title"><p>Astonishing features requires worry-free security</p></div>
<hr class="divider" />
<div class="description_content"><p>1 Year Free Mobile Security</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="image" src="https://krds-assignment.github.io/aoc/api-assets/image-1.png" />
</div>
</div>
</div>
<div class="list_item container_2">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-digitainment.png"
/>
</div>
<div class="description_title"><p>Be hooked!</p></div>
<hr class="divider" />
<div class="description_content"><p>2000+ Movies from Bollywood</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="image" src="https://krds-assignment.github.io/aoc/api-assets/image-2.png" />
</div>
</div>
</div>
<div class="list_item container_3">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png"
/>
</div>
<div class="description_title"><p>The best things in life are free</p></div>
<hr class="divider" />
<div class="description_content"><p>Free Mobile Pouch</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="image" src="https://krds-assignment.github.io/aoc/api-assets/image-3.png" />
</div>
</div>
</div>
<div class="list_item container_4">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-hungama.png"
/>
</div>
<div class="description_title"><p>The thump never ends here</p></div>
<hr class="divider" />
<div class="description_content"><p>1000’s of songs</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="image" src="https://krds-assignment.github.io/aoc/api-assets/image-4.png" />
</div>
</div>
</div>
<div class="list_item container_5">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png"
/>
</div>
<div class="description_title"><p>Being globally you</p></div>
<hr class="divider" />
<div class="description_content"><p>21 Indian & Foreign Languages</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="image" src="https://krds-assignment.github.io/aoc/api-assets/image-5.png" />
</div>
</div>
</div>
<div class="list_item container_6">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-read-where.png"
/>
</div>
<div class="description_title"><p>For the wise</p></div>
<hr class="divider" />
<div class="description_content"><p>
1000 pts Discount on Subscription,</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img class="large image" src="https://krds-assignment.github.io/aoc/api-assets/image-6.png" />
</div>
</div>
</div>
</div>
</section>
</body>
</html>
grid/style.css 0 → 100644
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container_1 {
background-color: #41ca6e;
}
.container_2 {
background-color: #fab153;
}
.container_3 {
background-color: #7277d5;
}
.container_4 {
background-color: #f87d51;
}
.container_5 {
background-color: #ed5466;
}
.container_6 {
background-color: #4ec2e7;
}
header {
position: fixed;
padding: 1rem;
background-color: white;
width: 100%;
z-index: 1;
}
.header_logo_wrapper {
width: 3.5rem;
height: auto;
}
.header_logo {
filter: invert();
max-width: 100%;
height: auto;
}
.list_container {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 100dvh;
}
.list_item {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
justify-items: center;
}
.description_section {
color: white;
text-transform: uppercase;
font-family: Arial, sans-serif;
align-self: end;
padding: 2rem 4rem 0rem 4rem;
}
.description_logo_wrapper {
margin-bottom: 10px;
max-width: 5rem;
}
.description_logo {
max-width: 100%;
height: auto;
}
.description_title {
font-size: 21px;
line-height: 1.3;
margin-bottom: 10px;
font-weight: 700;
}
.description_content {
font-size: 18px;
font-weight: 100;
line-height: 1.3;
color: rgba(255, 255, 255, 0.35);
}
.divider {
border: none;
height: 1px;
background-color: white;
margin-bottom: 10px;
}
.image_section {
align-self: center;
}
@media all and (min-width: 580px) {
header {
position: absolute;
padding: 1rem;
background-color: transparent;
width: 100%;
}
.header_logo_wrapper {
width: 10%;
height: auto;
}
.header_logo {
filter: none;
}
.list_container {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 50dvh;
}
.list_item {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100%;
justify-items: center;
grid-gap: 1rem;
}
.description_section {
color: white;
text-transform: uppercase;
font-family: Arial, sans-serif;
align-self: center;
padding: 0rem 1rem 0rem 1.5rem;
}
.description_logo_wrapper {
max-width: 4rem;
}
.description_title {
font-size: 16px;
font-weight: 100;
color: rgba(255, 255, 255);
text-transform: none;
}
.divider {
width: 80%;
}
.description_content {
font-size: 15px;
color: rgba(255, 255, 255);
}
.image_section {
justify-self: end;
}
.image_wrapper {
max-width: 90%;
}
.image {
max-width: 100%;
height: auto;
}
}
@media all and (min-width: 950px) {
.header_logo_wrapper {
width: 5%;
height: auto;
}
.list_container {
grid-template-columns: 1fr 1fr 1fr;
}
.list_item {
padding: 2rem 0rem 0rem 1rem;
}
.description_section {
padding: 0rem 0rem 0rem 2rem;
}
}
@media all and (min-width: 1025px) {
.header_logo_wrapper {
width: 5%;
height: auto;
}
.list_container {
grid-template-columns: 1fr 1fr 1fr;
}
.list_item {
padding: 2rem 0rem 0rem 2rem;
}
.description_section {
padding: 0rem 0rem 0rem 2rem;
}
.description_title {
padding: 0rem 4rem 0rem 0rem;
}
.image_wrapper {
max-width: 70%;
}
}
vanilla_html&css/.vscode/settings.json 0 → 100644
{
"liveServer.settings.port": 5502
}
\ No newline at end of file
vanilla_html&css/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<title>Training - Vanilla</title>
<link rel="stylesheet" href="./style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header>
<div class="header_logo_wrapper">
<img
class="header_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-aoc.png"
/>
</div>
</header>
<section class="container">
<div class="list_container">
<div class="list_item container_1">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo mini_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-f-secure.png"
/>
</div>
<div class="description_title">
<p>Astonishing features requires worry-free security</p>
</div>
<hr class="divider" />
<div class="description_content">
<p>1 Year Free Mobile Security</p>
</div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img
class="image"
src="https://krds-assignment.github.io/aoc/api-assets/image-1.png"
/>
</div>
</div>
</div>
<div class="list_item container_2">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-digitainment.png"
/>
</div>
<div class="description_title"><p>Be hooked!</p></div>
<hr class="divider" />
<div class="description_content">
<p>2000+ Movies from Bollywood</p>
</div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img
class="image"
src="https://krds-assignment.github.io/aoc/api-assets/image-2.png"
/>
</div>
</div>
</div>
<div class="list_item container_3">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png"
/>
</div>
<div class="description_title">
<p>The best things in life are free</p>
</div>
<hr class="divider" />
<div class="description_content"><p>Free Mobile Pouch</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img
class="image"
src="https://krds-assignment.github.io/aoc/api-assets/image-3.png"
/>
</div>
</div>
</div>
<div class="list_item container_4">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-hungama.png"
/>
</div>
<div class="description_title">
<p>The thump never ends here</p>
</div>
<hr class="divider" />
<div class="description_content"><p>1000’s of songs</p></div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img
class="image"
src="https://krds-assignment.github.io/aoc/api-assets/image-4.png"
/>
</div>
</div>
</div>
<div class="list_item container_5">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-adaptxt.png"
/>
</div>
<div class="description_title"><p>Being globally you</p></div>
<hr class="divider" />
<div class="description_content">
<p>21 Indian & Foreign Languages</p>
</div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img
class="image"
src="https://krds-assignment.github.io/aoc/api-assets/image-5.png"
/>
</div>
</div>
</div>
<div class="list_item container_6">
<div class="description_section">
<div class="description_wrapper">
<div class="description_logo_wrapper">
<img
class="description_logo"
src="https://krds-assignment.github.io/aoc/api-assets/logo-read-where.png"
/>
</div>
<div class="description_title"><p>For the wise</p></div>
<hr class="divider" />
<div class="description_content">
<p>1000 pts Discount on Subscription,</p>
</div>
</div>
</div>
<div class="image_section">
<div class="image_wrapper">
<img
class="large image"
src="https://krds-assignment.github.io/aoc/api-assets/image-6.png"
/>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
vanilla_html&css/style.css 0 → 100644
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container_1 {
background-color: #41ca6e;
}
.container_2 {
background-color: #fab153;
}
.container_3 {
background-color: #7277d5;
}
.container_4 {
background-color: #f87d51;
}
.container_5 {
background-color: #ed5466;
}
.container_6 {
background-color: #4ec2e7;
}
header {
position: fixed;
padding: 1rem;
background-color: white;
width: 100%;
z-index: 1;
}
.header_logo_wrapper {
width: 3.5rem;
height: auto;
}
.header_logo {
filter: invert();
max-width: 100%;
height: auto;
}
.list_item {
height: 100dvh;
padding: 5rem 3.5rem 0rem 3.5rem;
}
.description_section {
color: white;
text-transform: uppercase;
font-family: Arial, sans-serif;
}
.description_logo_wrapper {
margin-bottom: 9px;
max-width: 5rem;
}
.description_logo {
max-width: 100%;
height: auto;
}
.description_title {
font-size: 21px;
line-height: 1.3;
margin-bottom: 9px;
font-weight: 700;
}
.description_content {
font-size: 18px;
font-weight: 100;
line-height: 1.3;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 2rem;
}
.divider {
border: none;
height: 1px;
background-color: white;
margin-bottom: 10px;
}
.image_section {
height: 50%;
}
.image_wrapper {
text-align: center;
height: 100%;
}
.image {
max-height: 100%;
max-width: 100%;
}
@media all and (min-width: 580px) {
header {
position: absolute;
padding: 1rem;
background-color: transparent;
width: 100%;
}
.header_logo_wrapper {
width: 10%;
height: auto;
}
.header_logo {
filter: none;
}
.list_item {
height: 50dvh;
padding: 4rem 1rem 1rem 2.5rem;
width: 50%;
float: left;
}
.description_section,
.image_section {
height: 100%;
float: left;
width: 50%;
}
.description_section {
display: table;
}
.description_wrapper {
display: table-cell;
vertical-align: middle;
}
.description_logo_wrapper {
max-width: 4rem;
}
.description_title {
font-size: 16px;
font-weight: 100;
color: rgba(255, 255, 255);
text-transform: none;
}
.divider {
width: 80%;
}
.description_content {
font-size: 15px;
color: rgba(255, 255, 255);
}
.image_wrapper {
align-content: center;
}
}
@media all and (min-width: 950px) {
.header_logo_wrapper {
width: 5%;
height: auto;
}
.list_item {
width: calc(100% / 3);
padding: 4rem 1rem 2rem 2rem;
}
}
@media all and (min-width: 1025px) {
.list_item {
padding: 4rem 1rem 3rem 3rem;
}
}
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