Skip to content

N
new-mobiles
Commit ca806a21 by Siyam Kumar
Options

desktopview3

parent 0985d807
Showing with 93 additions and 72 deletions
public/index.html
...@@ -14,65 +14,91 @@ ...@@ -14,65 +14,91 @@
<header> <header>
<img src="logo-aoc.png" alt="aoc"> <img src="logo-aoc.png" alt="aoc">
</header> </header>
<div class='container'> <div class='container'>
<div> <div>
<img src="logo-f-secure.png" alt="fsecure" class="subimage"> <div class="part1">
<div class="desc"> <img src="logo-f-secure.png" alt="fsecure" class="subimage">
<h4>Astonishing features requires worry-free security</h4> <div class="desc">
<hr> <h4>Astonishing features requires worry-free security</h4>
<p>1 Year Free Mobile Security</p> <hr>
<p>1 Year Free Mobile Security</p>
</div>
</div>
<div class="part2">
<img src="image-1.png" alt="image1" class="mainimage">
</div> </div>
<img src="image-1.png" alt="image1" class="mainimage">
</div> </div>
<div> <div>
<img src="logo-digitainment.png" alt="digit" class="subimage"> <div class="part1">
<div class="desc"> <img src="logo-digitainment.png" alt="digit" class="subimage">
<h4>Be hooked!</h4> <div class="desc">
<hr> <h4>Be hooked!</h4>
<p>2000+ Movies from Bollywood</p> <hr>
<p>2000+ Movies from Bollywood</p>
</div>
</div>
<div class="part2">
<img src="image-2.png" alt="image2" class="mainimage">
</div> </div>
<img src="image-2.png" alt="image2" class="mainimage">
</div> </div>
<div> <div>
<img src="logo-adaptxt.png" id="img2" alt="adaptxt" class="subimage"> <div class="part1">
<div class="desc"> <img src="logo-adaptxt.png" id="img2" alt="adaptxt" class="subimage">
<h4>The best things in life are free</h4> <div class="desc">
<hr> <h4>The best things in life are free</h4>
<p>Free Mobile Pouch</p> <hr>
<p>Free Mobile Pouch</p>
</div>
</div>
<div class="part2">
<img src="image-3.png" alt="image3" class="mainimage">
</div> </div>
<img src="image-3.png" alt="image3" class="mainimage">
</div> </div>
<div> <div>
<img src="logo-hungama.png" alt="hungama" class="subimage"> <div class="part1">
<div class="desc"> <img src="logo-hungama.png" alt="hungama" class="subimage">
<h4>The thump never ends here</h4> <div class="desc">
<hr> <h4>The thump never ends here</h4>
<p>1000’s of songs </p> <hr>
<p>1000’s of songs </p>
</div>
</div>
<div class="part2">
<img src="image-4.png" alt="image4" class="mainimage">
</div> </div>
<img src="image-4.png" alt="image4" class="mainimage">
</div> </div>
<div> <div>
<img src="logo-adaptxt.png" alt="adapt" class="subimage"> <div class="part1">
<div class="desc"> <img src="logo-adaptxt.png" alt="adapt" class="subimage">
<h4>Being globally you</h4> <div class="desc">
<hr> <h4>Being globally you</h4>
<p>21 Indian & Foreign Languages</p> <hr>
<p>21 Indian & Foreign Languages</p>
</div>
</div>
<div class="part2">
<img src="image-5.png" alt="image5" class="mainimage">
</div> </div>
<img src="image-5.png" alt="image5" class="mainimage">
</div> </div>
<div> <div>
<img src="logo-read-where.png" alt="read" class="subimage"> <div class="part1">
<div class="desc"> <img src="logo-read-where.png" alt="read" class="subimage">
<h4>For the wise</h4> <div class="desc">
<hr> <h4>For the wise</h4>
<p>1000 pts Discount on Subscription</p> <hr>
<p>1000 pts Discount on Subscription</p>
</div>
</div>
<div class="part2">
<img src="image-6.png" alt="image6" class="mainimage">
</div> </div>
<img src="image-6.png" alt="image6" class="mainimage">
</div> </div>
</div> </div>
</div> </div>
......
src/App.css
...@@ -88,8 +88,6 @@ hr { ...@@ -88,8 +88,6 @@ hr {
padding-top: 70px; padding-top: 70px;
} }
header { header {
position: fixed; position: fixed;
background-color: initial; background-color: initial;
...@@ -100,58 +98,54 @@ hr { ...@@ -100,58 +98,54 @@ hr {
@media screen and (min-width: 780px) { @media screen and (min-width: 780px) {
.container>div { .container>div {
width: 33.3%; width: 33.3%;
padding: 50px; height: 50vh;
} }
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
.container>div { .container>div {
width: 33.3%; width: 33.3%;
min-height: 50vh; min-height: 50vh;
padding: 65px; padding: 5% 3%;
}
.mainimage {
float: right;
margin-top: -160px;
max-width: 130px;
min-height: 190px;
}
.container h4 {
max-width: 20%;
text-transform: initial;
font-size: 12px;
} }
.container p { .part1{
font-size: 11px; width: 50%;
float: left; float: left;
text-transform: uppercase; margin-top: 25px;
} }
hr { .part2{
width: 50%; width: 50%;
float: left; float: right;
margin-right: 170px;
} }
} .subimage{
height: 50px;
}
@media screen and (min-width: 1540px) {
.mainimage { .mainimage {
float: right; margin-right:0;
margin-top: -160px; max-height: 250px;
max-width: 185px; }
min-height: 310px;
}
.container h4 { .container h4 {
max-width: 50%; text-transform: initial;
font-size: 17px; font-size: 18px;
font-weight: normal;
} }
.container p{ .container p {
font-size: 13px; font-size: 15px;
text-transform: uppercase;
opacity: initial;
font-weight: normal;
} }
.desc{
margin: 0px;
}
}
@media screen and (min-width: 1540px) {
} }
\ 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