Skip to content

S
Simple-responsive-layout
Commit bd96c762 by Vinod
Options

Updated after review (mobile code removed) - With Grid

parent f71d2249
Showing with 36 additions and 130 deletions
CSS/style.css
...@@ -87,11 +87,6 @@ body { ...@@ -87,11 +87,6 @@ body {
margin: 35% 0 5% 25%; margin: 35% 0 5% 25%;
} }
.logo-small {
width: 25%;
margin: 35% 0 5% 25%;
}
.image-block { .image-block {
width: 40%; width: 40%;
float: right; float: right;
...@@ -116,107 +111,48 @@ body { ...@@ -116,107 +111,48 @@ body {
display: none; display: none;
} }
/* Media Query for Mobile Devices */
@media (max-width: 480px) {
.container {
grid-template-columns: repeat(1, 1fr);
}
/* Styling For Mobile */ .main-logo {
width: 15%;
.header { margin: 4%;
margin-top: 0; }
height: 70px;
background-color: #41ca6e;
}
.logo-mobile img {
filter: grayscale(1) invert(1);
margin: 5% 0 5% 5%;
height: 22px;
}
.mobile-container {
margin: auto;
width: 100%;
min-height: 65em;
background-color: #41ca6e;
position: relative;
}
.mobile-image {
width: 50%;
margin: 10% 0 0 25%;
position: absolute;
}
.mobile-logo {
width: 15%;
margin: 10% 0 5% 15%;
}
.mobile-title {
text-transform: uppercase;
font-weight: 650;
font-size: larger;
margin: 0 0 0 15%;
}
.mobile-hline {
width: 65%;
height: 1.5px;
background: white;
margin: 3% 0 3% 15%;
}
.mobile-offer {
text-transform: uppercase;
font-weight: 50;
font-size: 17px;
margin: 0 0 0 15%;
}
.arrow { .hline {
display: inline-block; width: 38%;
position: absolute; margin: 2% 0 2% 25%;
margin: 15% 0 0 5%; }
border: solid white;
border-width: 0 2px 2px 0;
padding: 15px;
}
.right { .desc {
transform: rotate(-45deg); width: 100%;
display: inline-block; }
margin-left: 80%;
}
.left { .image-block {
transform: rotate(135deg); float: none;
} margin-left: 30%;
}
.dot { .image-block .images {
height: 10px; float: none;
width: 10px; margin: 10% 0 5% 5%;
background-color: white; }
border-radius: 50%;
position: absolute;
margin: 80% 0 0 45%;
}
.circle { .image-block .image1 {
position: absolute; width: 85%;
width: 10px; margin: 20% 15% 5% 0;
padding-bottom: 5px; }
border-radius: 50%;
border: 3px solid white;
margin: 80% 0 0 49%;
}
/* Media Query for Mobile Devices */ .image-block .image2 {
@media (max-width: 480px) { float: none;
.container { margin: 30% 30% 5% 0;
display: none;
} }
.only-mobile { .logo {
width: 100%; margin: 20% 0 0 25%;
display: contents;
} }
} }
......
desktop.html
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<div class="card"> <div class="card">
<div class="wrapper"> <div class="wrapper">
<div class="desc"> <div class="desc">
<img class="logo-small" src="/Logos/logo-adaptxt.png" alt="logo-f-secure"> <img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="title"> <div class="title">
<p>The best things in <br>life are free<br></p> <p>The best things in <br>life are free<br></p>
</div> </div>
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
<div class="card"> <div class="card">
<div class="wrapper"> <div class="wrapper">
<div class="desc"> <div class="desc">
<img class="logo-small" src="/Logos/logo-hungama.png" alt="logo-f-secure"> <img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure">
<div class="title"> <div class="title">
<p>The thump <br>never ends here</p> <p>The thump <br>never ends here</p>
</div> </div>
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
<div class="card"> <div class="card">
<div class="wrapper"> <div class="wrapper">
<div class="desc"> <div class="desc">
<img class="logo-small" src="/Logos/logo-adaptxt.png" alt="logo-f-secure"> <img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="title"> <div class="title">
<p>Being globally you</p> <p>Being globally you</p>
</div> </div>
...@@ -120,35 +120,6 @@ ...@@ -120,35 +120,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Mobile UI -->
<div class="only-mobile">
<div class="logo-mobile">
<img src="/Logos/logo-aoc.png" alt="logo-aoc">
</div>
<div class="mobile-container">
<div>
<img class="mobile-logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure">
<div class="mobile-title">
<p>Astonishing <br>features requires <br>worry-free security</p>
</div>
<div class="mobile-hline"></div>
<div class="mobile-offer">
<p>1 year free mobile security</p>
</div>
</div>
<div class="arrow left"></div>
<div class="arrow right"></div>
<img class="mobile-image" src="/Images/image-1.png" alt="image-1">
<div class="dot"></div>
<div class="circle"></div>
</div>
</div>
</body> </body>
</html> </html>
\ 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