Skip to content

C
CSS-Project
Commit 8303b83d by Anburaj G
Options

mobile-view

parent 0bd605f0
Showing with 262 additions and 68 deletions
grid.html deleted 100644 → 0
<!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="style.css" />
</head>
<body>
<div class="container">
<div class="card-1">
<div class="info">
<p>Astonshing features required<br>worry free security<br><br>____________________</br> ONE YEAR FREE
MOBILE SECURITY</p>
<img src="./image-1.png">
</div>
</div>
<div class="card-2">
<div class="info">
<p>Be Hooked<br>_________________________________</br>2000+ movies+ from Bollywood</p>
<img src="./image-2.png">
</div>
</div>
<div class="card-3">
<div class="info">
<p>The best thing in life are free<br>_______________</br>FREE MOBILE POUCH</p>
<img src="./image-3.png">
</div>
</div>
<div class="card-4">
<div class="info">
<p>The thumb never endgis here<br>_______________</br>1000 of song's</p>
<img src="./image-4.png">
</div>
</div>
<div class="card-5">
<div class="info">
<p>Being globally you<br>_______________</br>20's FOREIGN AND INDIAN LANGUAGES</p>
<img src="./image-5.png">
</div>
</div>
<div class="card-6">
<div class="info">
<p>The thumb never ends here<br>_______________</br>1000 points on discount subscription</p>
<img src="./image-6.png">
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
mobile.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="./stylesheet.css" />
</head>
<body>
<div class="header">
<img src="./logo-aoc.png" />
</div>
<div class="card-1">
<div class="logo-1">
<img src="./logo-f-secure.png" />
</div>
<div class="text-1">
<h3>ASTONISHING </h3>
<h3> FEATURES REQUIRES</h3>
<h3>WORRY FREE SECURITY</h3>
<hr class="new">
<p>1 YEAR FREE SECURITY</p>
</div>
<img src="./image-1.png" />
</div>
</div>
</div>
<div class="card-2">
<div class="logo-2">
<img src="./logo-digitainment.png" />
</div>
<div class="text-2">
<h3>Be Hooked</h3>
<hr class="new">
<p>2000+ Movies from Bollywood</p>
</div>
<img src="./image-2.png" />
</div>
</div>
<div class="card-3">
<div class="logo-3">
<img src="./logo-adaptxt.png" />
</div>
<div class="text-3">
<h3>The best things in life are free </h3>
<hr class="new">
<p>Free mobile Pouch</p>
</div>
<img src="./image-3.png" />
</div>
</div>
</div>
<div class="card-4">
<div class="logo-4">
<img src="./logo-hungama.png" />
</div>
<div class="text-4">
<h3>Thump</h3>
<h3>never ends here</h3>
<hr class="new">
<p>1000 of songs</p>
</div>
<img src="./image-4.png" />
</div>
</div>
</div>
<div class="card-5">
<div class="logo-5">
<img src="./logo-adaptxt.png" />
</div>
<div class="text-5">
<h3>Being globally you</h3>
<hr class="new">
<p>21 INDIAN & FOREIGN LANGUAGES</p>
</div>
<img src="./image-5.png" />
</div>
</div>
</div>
<div class="card-6">
<div class="logo-6">
<img src="./logo-read-where.png" />
</div>
<div class="text-6">
<h3>For the wise</h3>
<hr class="new">
<p>1000 point Discount</p>
<p>on Discount</p>
</div>
<img src="./image-6.png" />
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
stylesheet.css
body{
padding: 0;
padding: 0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.header{
position: fixed;
background-color:black;
width: 320px;
max-height: 120px;
filter: invert(100%);
padding: 10px;
}
.header img {
max-width:80px;
}
.logo-1 img{
padding:60px 50px 0px 45px;
max-width: 50px;
}
.logo-2 img{
padding:60px 50px 10px 45px;
max-width:90px;
}
.logo-3 img{
padding:60px 50px 10px 45px;
max-width:100px;
max-height: 100px;
}
.logo-4 img{
padding:60px 50px 10px 45px;
max-width: 100px;
}
.logo-5 img{
padding:60px 50px 10px 45px;
max-width: 100px;
}
.logo-6 img{
padding:60px 50px 10px 45px;
.logo{
padding:20%
max-width: 70px;
max-height: 100px;
}
.text{
.text-1{
line-height: 0.5em;
font-size: 12px;
color: white;
margin: 0px;
margin:15%
}
.text-2,.text-3,.text-4,.text-5,.text-6{
line-height: 0.5em;
font-size: 12px;
color:white;
margin:15%
}
.text-1~img{
max-width: 215px;
padding:15%;
}
.text-2~img{
max-width: 200px;
padding:10px 5px 20px 60px
}
.text-3~img{
max-width: 210px;
padding:10px 50px 20px 60px
}
.text-4~img{
max-width: 200px;
max-height: 450px;
padding:10px 5px 30px 60px
}
.text-5~img{
max-width: 200px;
max-height: 500px;
padding:10px 5px 30px 60px
}
.text-6~img{
max-width: 250px;
padding:10px 5px 10px 60px
}
.new{
border:1px solid white;
margin:10PX
}
.card-1{
background-color: #41ca6e;
background-color:rgb(65,202,110);
box-sizing: border-box;
}
#aoc{
max-width:50px;
margin-top:10px;
.card-2{
background-color: rgb(250,177,83);
box-sizing: border-box;
}
.card-3{
background-color:rgb(114,119,213);
}
.card-4{
background-color:rgb(248,125,81);
box-sizing: border-box;
}
.card-5{
background-color:rgb(237,84,102);
box-sizing: border-box;
}
.card-6{
background-color:rgb(78,194,231);
box-sizing: border-box;
}
\ 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