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