Skip to content

S
Simple-responsive-layout
Commit 94a990b9 by Vinod
Options

Initial commit

parents
Showing with 196 additions and 0 deletions
CSS/style.css 0 → 100644
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: white;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.hline {
width: 10rem;
height: 1.5px;
background: white;
margin: 10px 0 10px 0;
}
.row .column {
float: left;
width: 33.33%;
padding: 10px;
height: 475px;
position: relative;
display: flex;
/* flex-direction: row; */
}
.desc {
margin: 10rem 0 0 5rem;
}
.title {
color: white;
font-weight: lighter;
}
.offer {
color: white;
text-transform: uppercase;
font-weight: lighter;
font-size: smaller;
}
.logo {
width: 55px;
}
.main-logo {
position: absolute;
width: 15%;
margin: 15px 0 0 15px;
}
.column .images {
box-sizing: border-boxs;
width: 35%;
margin-left: 18rem;
margin-top: 5rem;
position: absolute;
/* display: flex; */
}
.row .column .image1 {
width: 40%;
margin-left: 17rem;
position: absolute;
margin-top: 7rem;
}
.row .column .image2 {
position: absolute;
height: 35%;
width: 50%;
margin-left: 15rem;
margin-top: 10rem;
}
@media screen and (max-width: 992px) {
.row .column {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.row .column {
width: 100%;
}
}
\ No newline at end of file
desktop.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/CSS/style.css">
</head>
<body>
<div class="row">
<div class="column" style="background-color: #41ca6e">
<img class="main-logo" src="/Logos/logo-aoc.png" alt="logo-aoc">
<div class="desc">
<img class="logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure">
<div class="title">
<p>Astonishing <br>features requires <br>worry-free security</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>1 year free mobile security</p>
</div>
</div>
<img class="image1" src="/Images/image-1.png" alt="image-1">
</div>
<div class="column" style="background-color: #fab153">
<div class="desc">
<img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure">
<div class="title">
<p>Be hooked!</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>2000+ movies from bollywood</p>
</div>
</div>
<img class="images" src="/Images/image-2.png" alt="image-2">
</div>
<div class="column" style="background-color: #7277d5">
<div class="desc">
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="title">
<p>The best things in <br>life are free<br></p>
</div>
<div class="hline"></div>
<div class="offer">
<p>free mobile pouch</p>
</div>
</div>
<img class="images" src="/Images/image-3.png" alt="image-3">
</div>
<div class="column" style="background-color: #f87d51">
<div class="desc">
<img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure">
<div class="title">
<p>The thump <br>never ends here</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>1000's of songs</p>
</div>
</div>
<img class="images" src="/Images/image-4.png" alt="image-4">
</div>
<div class="column" style="background-color: #ed5466">
<div class="desc">
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="title">
<p>Being globally you</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>21 indian & foreign languages</p>
</div>
</div>
<img class="images" src="/Images/image-5.png" alt="image-5">
</div>
<div class="column" style="background-color: #4ec2e7">
<div class="desc">
<img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure">
<div class="title">
<p>For the wise</p>
</div>
<div class="hline"></div>
<div class="offer">
<p>1000 pts discount <br>on subscription</p>
</div>
</div>
<img class="image2" src="/Images/image-6.png" alt="image-6">
</div>
</div>
</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