Skip to content

N
new-mobiles
Commit 6a70aa1e by Siyam Kumar
Options

mobileviewchanges

parent 54693d49
Showing with 102 additions and 139 deletions
public/index.html
...@@ -30,92 +30,76 @@ ...@@ -30,92 +30,76 @@
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<div class='container'> <div>
<div class="item1"> <div class="header">
<div class="topnav"> <div>
<img src="logo-aoc.png" alt="aoc" style="height: 40px;"> <img src="logo-aoc.png" alt="aoc">
</div> </div>
</div>
<img src="logo-f-secure.png" alt="fsecure" style="padding-top: 50px; padding-left: 40px;"> <div class='container'>
<div class="item11"> <div>
<ul style="list-style: none;"> <img src="logo-f-secure.png" alt="fsecure" class="subimage">
<li>ASTONISHING</li> <div>
<li>FEATURES REQUIRES</li> <h4>ASTONISHING FEATURES REQUIRES WORRY-FREE SECURITY</h4>
<li>WORRY-FREE SECURITY</li>
<hr> <hr>
<li style="color: #c0c8cf;">1 YEAR FREE MOBILE SECURITY</li> <h5>1 YEAR FREE MOBILE SECURITY</h5>
</ul> <img src="image-1.png" alt="image1" class="mainimage">
<img src="image-1.png" alt="image1" id="img1"> </div>
</div> </div>
</div>
<div class="item2"> <div>
<img src="logo-digitainment.png" alt="digit" style="padding-top: 50px; padding-left: 40px; height: 60px;"> <img src="logo-digitainment.png" alt="digit" class="subimage">
<div class="item11"> <div>
<ul style="list-style: none; padding-top: 20px;"> <h4>BE HOOKED !</h4>
<li>BE HOOKED !</li> <hr>
<hr> <h5>2000+ MOVIES FROM BOLLYWOOD</h5>
<li>2000+ MOVIES FROM BOLLYWOOD</li> <img src="image-2.png" alt="image2" class="mainimage">
</ul> </div>
<img src="image-2.png" alt="image2" id="img2">
</div> </div>
</div>
<div class="item3"> <div>
<img src="logo-adaptxt.png" id="img2" alt="adaptxt" style="padding-top: 50px; padding-left: 40px; height: 40px;"> <img src="logo-adaptxt.png" id="img2" alt="adaptxt" class="subimage">
<div class="item11"> <div>
<ul style="list-style: none; padding-bottom: 30px; padding-top: 25px;"> <h4>THE BEST THINGS IN LIFE ARE FREE</h4>
<li>THE BEST THINGS IN LIFE ARE FREE</li> <hr>
<hr> <h5>FREE MOBILE POUCH</h5>
<li>FREE MOBILE POUCH</li> <img src="image-3.png" alt="image3" class="mainimage">
</ul> </div>
<img src="image-3.png" alt="image3" id="img3">
</div> </div>
</div>
<div class="item4"> <div>
<img src="logo-hungama.png" alt="hungama" style="padding-top: 50px; padding-left: 40px; height: 40px;"> <img src="logo-hungama.png" alt="hungama" class="subimage">
<div class="item11"> <div>
<ul style="list-style: none; padding-bottom: 30px; padding-top: 25px;"> <h4>THE THUMP NEVER ENDS HERE</h4>
<li>THE THUMP NEVER ENDS HERE</li> <hr>
<hr> <h5>1000’s OF SONGS</h5>
<li>1000’s OF SONGS</li> <img src="image-4.png" alt="image4" class="mainimage">
</ul> </div>
<img src="image-4.png" alt="image4" id="img4">
</div> </div>
</div>
<div class="item5"> <div>
<img src="logo-adaptxt.png" alt="adapt" style="padding-top: 50px; padding-left: 40px; height: 40px;"> <img src="logo-adaptxt.png" alt="adapt" class="subimage">
<div class="item11"> <div>
<ul style="list-style: none; padding-bottom: 30px; padding-top: 25px;"> <h4>BEING GLOBALLY YOU</h4>
<li>BEING GLOBALLY YOU</li> <hr>
<hr> <h5>BEING GLOBALLY YOU21 INDIAN & FOREIGN LANGUAGES</h5>
<li>BEING GLOBALLY YOU21 INDIAN & FOREIGN LANGUAGES</li> <img src="image-5.png" alt="image5" class="mainimage">
</ul> </div>
<img src="image-5.png" alt="image5" id="img5">
</div> </div>
</div>
<div class="item6"> <div>
<img src="logo-read-where.png" alt="read" style="padding-top: 50px; padding-left: 40px; height: 80px;"> <img src="logo-read-where.png" alt="read" class="subimage">
<div class="item11"> <div>
<ul style="list-style: none; padding-bottom: 30px; padding-top: 25px;"> <h4>FOR THE WISE</h4>
<li>FOR THE WISE</li> <hr>
<hr> <h5>1000 PTS DISCOUNT ON SUBSCRIPTION</h5>
<li>1000 PTS DISCOUNT ON SUBSCRIPTION</li> <img src="image-6.png" alt="image6" class="mainimage">
</ul> </div>
<img src="image-6.png" alt="image6" id="img6">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
src/App.css
.topnav{ .header {
width: 100%; padding-top: 15px;
padding-left: 10px; padding-bottom: 15px;
padding-top: 10px; position: sticky;
top: 0;
filter: invert(1);
background-color: #000000;
margin-left: 730px;
margin-right: 575px;
} }
.header > div {
padding-left: 20px;
padding-top: 10px;
}
.item1{ .header img{
margin: auto; height: 40px;
width: 60%;
padding: 10px;
background-color: #62c662;
height: 750px;
width:400px;
} }
.item11 { .container h4 {
color: #f4f9fd; color: #f4f9fd;
font-size: 20px; text-align: center;
font-family: sans-serif; text-justify: inter-word;
padding-left: 50px;
padding-right: 60px;
} }
.item2{ .container h5 {
margin: auto; color: #f4f9fd;
width: 60%; text-align: center;
padding: 10px; opacity: 0.5;
background-color: #ddb257;
height: 750px;
width:400px;
} }
.item3{ hr {
margin: auto; border: 3px solid #faf8f8;
width: 60%;
padding: 10px;
background-color: #8760f4;
height: 750px;
width:400px;
} }
.item4{ .container > div {
margin: auto; margin: auto;
width: 60%; width: 60%;
padding: 10px; padding: 10px;
background-color: #f18451;
height: 750px; height: 750px;
width:400px; width: 400px;
} }
.item5{ .container> :nth-child(1) {
margin: auto; background-color: #62c662;
width: 60%;
padding: 10px;
background-color: #e15e6e;
height: 750px;
width:400px;
} }
.container> :nth-child(2) {
.item6{ background-color: #ddb257;
margin: auto;
width: 60%;
padding: 10px;
background-color: #4dc1e9;
height: 750px;
width:400px;
} }
.container> :nth-child(3) {
#img1{ background-color: #8760f4;
padding-left: 50px;
padding-top: 20px;
} }
.container> :nth-child(4) {
#img2{ background-color: #f18451;
padding-left: 80px;
padding-top: 20px;
} }
.container> :nth-child(5) {
#img3{ background-color: #e15e6e;
padding-left: 80px;
padding-top: 40px;
} }
.container> :nth-child(6) {
#img4{ background-color: #4dc1e9;
padding-left: 80px;
padding-top: 40px;
} }
#img5{ .mainimage {
padding-left: 80px; padding-left: 80px;
padding-top: 40px; padding-top: 40px;
} }
#img6{ .subimage {
padding-left: 30px; padding-left: 20px;
padding-top: 40px; padding-top: 30px;
padding-bottom: 30px;
} }
\ 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