Skip to content

C
CSS-Project
Commit 65107762 by Anburaj G
Options

gitlab

parent 8303b83d
Showing with 253 additions and 161 deletions
mobile.html
......@@ -10,123 +10,75 @@
</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" />
<img src="./logo-aoc.png" class="logo" />
</div>
</div>
<div class="card-1">
<img src="./logo-f-secure.png" />
<h3>Astonishing</br>features requries </br>worry free security</h3>
<hr>
<p>1 YEAR FREE MOBILE SECURITY</p>
<img src="./image-1.png" />
</div>
<div class="card-2">
<img src="./logo-digitainment.png" />
<h3>Be Hooked</h3>
<hr>
<p> 2000+ Movies from BollyWood</p>
<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>
<img src="./logo-adaptxt.png" />
<hr class="new">
<p>Free mobile Pouch</p>
</div>
<h3>The best things in </br>life are free </h3>
<hr>
<p>Free mobile pouch</p>
<img src="./image-3.png" />
</div>
</div>
</div>
<div class="card-4">
<img src="./logo-hungama.png" />
<div class="logo-4">
<img src="./logo-hungama.png" />
</div>
<div class="text-4">
<h3>Thump</h3>
<h3>never ends here</h3>
<h3>The thump never</br> ends here</h3>
<hr class="new">
<p>1000 of songs</p>
</div>
<hr>
<p>1000 of songs</p>
<img src="./image-4.png" />
</div>
</div>
</div>
<div class="card-5">
<img src="./logo-adaptxt.png" />
<h3>Being globally you</h3>
<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>
<hr>
<p>21 Indian & Foreign languages</p>
<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="./logo-read-where.png" />
<h3>For the wise</h3>
<hr>
<p>1000 PTS Discount</br> on subscription</p>
<img src="./image-6.png" />
</div>
</div>
</div>
</body>
......
stylesheet.css
......@@ -2,148 +2,289 @@ body{
padding: 0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
}
.header{
position: fixed;
background-color:black;
width: 320px;
max-height: 120px;
filter: invert(100%);
padding: 10px;
.card-1 :nth-child(1){
max-width:20%;
margin:40% 10% 5% 20%;
}
.card-1>h3{
line-height:1rem;
color:white;
font-size: 12px;
text-transform: uppercase;
margin:0% 10% 5% 20%;
}
.header img {
max-width:80px;
.card-1>hr{
margin-right: 28%;
margin-left: 20%;
border: 1px solid white;
}
.logo-1 img{
padding:60px 50px 0px 45px;
max-width: 50px;
.card-1>p{
color:white;
opacity: 0.7;
font-size: 12PX;
margin:0% 10% 5% 20%;
}
.logo-2 img{
padding:60px 50px 10px 45px;
max-width:90px;
.card-1>img{
max-width:100%;
margin-top:10px;
margin:1% 8% 10% 12%
}
.logo-3 img{
padding:60px 50px 10px 45px;
max-width:100px;
max-height: 100px;
/* //card-2 */
.card-2 :nth-child(1){
max-width:20%;
margin:20% 10% 5% 20%;
}
.logo-4 img{
padding:60px 50px 10px 45px;
max-width: 100px;
.card-2>h3{
line-height:1rem;
color:white;
font-size: 12px;
text-transform: uppercase;
margin:0% 10% 5% 20%;
}
.logo-5 img{
padding:60px 50px 10px 45px;
max-width: 100px;
.card-2>hr{
margin-right: 28%;
margin-left: 20%;
border: 1px solid white;
}
.card-2>p{
color:white;
opacity: 0.7;
font-size: 12PX;
margin:0% 10% 5% 20%;
}
.logo-6 img{
padding:60px 50px 10px 45px;
.card-2 :nth-child(5){
max-width:90%;
margin-top:10px;
margin:1% 8% 10% 17%
max-width: 70px;
max-height: 100px;
}
.text-1{
line-height: 0.5em;
/* card-3 */
.card-3 :nth-child(1){
max-width:25%;
margin:20% 10% 5% 20%;
}
.card-3>h3{
line-height:1rem;
color:white;
font-size: 12px;
color: white;
margin:15%
text-transform: uppercase;
margin:0% 10% 5% 20%;;
}
.card-3>hr{
margin-right: 28%;
margin-left: 20%;
border: 1px solid white;
}
.text-2,.text-3,.text-4,.text-5,.text-6{
line-height: 0.5em;
.card-3 >p{
color:white;
opacity: 0.7;
font-size: 12PX;
margin:0% 10% 5% 20%;
}
.card-3 :nth-child(5){
max-width:90%;
margin-top:10px;
margin:1% 8% 10% 13%
}
/* card-4 */
.card-4 :nth-child(1){
max-width:70px;
margin:20% 10% 5% 20%;
}
.card-4 >h3{
line-height:1rem;
color:white;
font-size: 12px;
text-transform: uppercase;
margin:0% 10% 3% 20%;;
}
.card-4>hr{
margin-right: 28%;
margin-left: 20%;
border: 1px solid white;
}
.card-4>p{
color:white;
margin:15%
opacity: 0.7;
font-size: 12PX;
margin:0% 10% 10% 20%;
}
.text-1~img{
max-width: 215px;
padding:15%;
.card-4 :nth-child(5){
max-width:95%;
margin:1% 18% 15% 15%
}
.text-2~img{
max-width: 200px;
padding:10px 5px 20px 60px
/* card-5 */
.card-5 :nth-child(1){
max-width:70px;
margin:20% 10% 5% 20%;
}
.text-3~img{
max-width: 210px;
padding:10px 50px 20px 60px
.card-5>h3{
line-height:1rem;
color:white;
font-size: 12px;
text-transform: uppercase;
margin:0% 10% 3% 20%;;
}
.text-4~img{
max-width: 200px;
max-height: 450px;
padding:10px 5px 30px 60px
.card-5>hr{
margin-right: 28%;
margin-left: 20%;
border: 1px solid white;
}
.text-5~img{
max-width: 200px;
max-height: 500px;
padding:10px 5px 30px 60px
.card-5>p{
color:white;
opacity: 0.7;
font-size: 12PX;
margin:0% 10% 5% 20%;
}
.text-6~img{
max-width: 250px;
.card-5 :nth-child(5){
max-width:90%;
margin:1% 17% 20% 17%
padding:10px 5px 10px 60px
}
.new{
border:1px solid white;
/* card-6 */
.card-6 :nth-child(1){
max-width:70px;
margin:20% 10% 5% 20%;
}
.card-1{
background-color:rgb(65,202,110);
box-sizing: border-box;
.card-6>h3{
line-height:1rem;
color:white;
font-size: 12px;
text-transform: uppercase;
margin:0% 10% 3% 20%;;
}
.card-6>hr{
margin-right: 28%;
margin-left: 20%;
border: 1px solid white;
}
.card-6>p{
color:white;
opacity: 0.7;
font-size: 12PX;
margin:0% 10% 5% 20%;
}
.card-2{
background-color: rgb(250,177,83);
box-sizing: border-box;
.card-6>img{
max-width:80%;
margin:5% 15% 1% 15%;
}
.card-3{
background-color:rgb(114,119,213);
.logo{
position:fixed ;
max-width: 100px;
margin:1% 25% 1% 5%
}
.card-4{
background-color:rgb(248,125,81);
box-sizing: border-box;
div:nth-child(2){
background-color:rgb(65,202,110);
}
div:nth-child(3){
background-color: rgb(250,177,83);
}
.card-5{
div:nth-child(4){
background-color:rgb(114,119,213);
background-color:rgb(237,84,102);
box-sizing: border-box;
}
div:nth-child(5){
background-color:rgb(248,125,81);
}
.card-6{
div:nth-child(6){
background-color:rgb(237,84,102);
background-color:rgb(78,194,231);
box-sizing: border-box;
}
\ No newline at end of file
}
div:nth-child(7){
background-color:rgb(78,194,231);
}
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