From 05506793fdcd15e1ceb69a2f590d4632c5156991 Mon Sep 17 00:00:00 2001 From: siyamkumar <siyam.kumar@krds.fr> Date: Wed, 20 Apr 2022 18:32:38 +0530 Subject: [PATCH] mobileviewalign --- public/index.html | 87 ++++++++++++++++++++++++++++----------------------------------------------------------- src/App.css | 43 ++++++++++++++++++++----------------------- 2 files changed, 48 insertions(+), 82 deletions(-) diff --git a/public/index.html b/public/index.html index fc5e5a6..acf4ceb 100644 --- a/public/index.html +++ b/public/index.html @@ -8,98 +8,67 @@ <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> - <!-- - manifest.json provides metadata used when your web app is installed on a - user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ - --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="stylesheet" href="App.css"> - <!-- - Notice the use of %PUBLIC_URL% in the tags above. - It will be replaced with the URL of the `public` folder during the build. - Only files inside the `public` folder can be referenced from the HTML. - - Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will - work correctly both with client-side routing and a non-root public URL. - Learn how to configure a non-root public URL by running `npm run build`. - --> - <title>React App</title> </head> <body> - <noscript>You need to enable JavaScript to run this app.</noscript> - <div id="root"></div> - <div> - <div class="header"> - <div> + <header> <img src="logo-aoc.png" alt="aoc"> - </div> - </div> + </header> <div class='container'> <div> <img src="logo-f-secure.png" alt="fsecure" class="subimage"> - <div> - <h4>ASTONISHING FEATURES REQUIRES WORRY-FREE SECURITY</h4> - <hr> - <h5>1 YEAR FREE MOBILE SECURITY</h5> - <img src="image-1.png" alt="image1" class="mainimage"> - </div> + <h4>ASTONISHING FEATURES REQUIRES WORRY-FREE SECURITY</h4> + <hr> + <p>1 YEAR FREE MOBILE SECURITY</p> + <img src="image-1.png" alt="image1" class="mainimage"> </div> <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> + <h4>BE HOOKED !</h4> + <hr> + <p>2000+ MOVIES FROM BOLLYWOOD</p> + <img src="image-2.png" alt="image2" class="mainimage"> </div> <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> + <h4>THE BEST THINGS IN LIFE ARE FREE</h4> + <hr> + <p>FREE MOBILE POUCH</p> + <img src="image-3.png" alt="image3" class="mainimage"> </div> <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> + <h4>THE THUMP NEVER ENDS HERE</h4> + <hr> + <p>1000’s OF SONGS</p> + <img src="image-4.png" alt="image4" class="mainimage"> </div> <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> + <h4>BEING GLOBALLY YOU</h4> + <hr> + <p>21 INDIAN & FOREIGN LANGUAGES</p> + <img src="image-5.png" alt="image5" class="mainimage"> </div> <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> + <h4>FOR THE WISE</h4> + <hr> + <p>1000 PTS DISCOUNT ON SUBSCRIPTION</p> + <img src="image-6.png" alt="image6" class="mainimage"> </div> </div> - </div> - </div> + </div> </body> + </html> \ No newline at end of file diff --git a/src/App.css b/src/App.css index d9ba3fc..d284502 100644 --- a/src/App.css +++ b/src/App.css @@ -1,47 +1,44 @@ -.header { +header { padding-top: 15px; padding-bottom: 15px; + padding-left: 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; -} - -.header img{ - height: 40px; +header > img { + height: 30px; } .container h4 { color: #f4f9fd; - text-align: center; - text-justify: inter-word; padding-left: 50px; padding-right: 60px; + font-size: 24px; + } -.container h5 { +.container p { color: #f4f9fd; - text-align: center; opacity: 0.5; + padding-left:45px; + + } hr { - border: 3px solid #faf8f8; + border: 1px solid #faf8f8; + width: 75%; + margin-top: -20px; + margin-bottom:-10px; } -.container > div { - margin: auto; - width: 60%; - padding: 10px; - height: 750px; - width: 400px; +.container > div { + width: 390px; + height:750px; + overflow: hidden; } .container> :nth-child(1) { @@ -66,10 +63,10 @@ hr { .mainimage { padding-left: 80px; padding-top: 40px; + } .subimage { - padding-left: 20px; + padding-left: 50px; padding-top: 30px; - padding-bottom: 30px; } \ No newline at end of file -- libgit2 0.27.0