Skip to content

S
Simple-responsive-layout
Commit f9148c92 by Vinod
Options

working on flexbox

parent e857e484
Showing with 173 additions and 31 deletions
CSS/style.css
......@@ -4,7 +4,10 @@
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
color: white;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
......@@ -41,18 +44,24 @@ body {
margin: 10px 0 10px 0;
}
.row {
display: flex;
box-sizing: border-box;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
}
.row .column {
float: left;
width: 33.33%;
padding: 10px;
height: 475px;
position: relative;
display: flex;
/* flex-direction: row; */
flex-basis: calc(100% / 3);
align-items: flex-start;
min-height: 50%;
}
.desc {
margin: 10rem 0 0 5rem;
position: absolute;
margin: 15rem 0 0 5rem;
}
.title {
......@@ -68,51 +77,151 @@ body {
}
.logo {
width: 55px;
position: absolute;
width: 50px;
margin: 11rem 0 0 5rem;
}
.main-logo {
position: absolute;
display: flex;
flex-direction: row;
width: 15%;
margin: 15px 0 0 15px;
margin: 25px 0 0 25px;
}
.column .images {
box-sizing: border-boxs;
display: flex;
width: 35%;
margin: 5rem 0 0 19rem;
}
.row .column .image1 {
width: 13%;
margin-left: 18rem;
margin-top: 5rem;
position: absolute;
/* display: flex; */
margin-top: 10rem;
}
.row .column .image1 {
width: 40%;
.row .column .image2 {
display: flex;
width: 55%;
margin: 12rem 0 0 14rem;
}
.only-mobile {
display: none;
}
/* Styling For Mobile */
.header {
margin-top: 0;
height: 70px;
background-color: #41ca6e;
}
.logo-mobile img {
filter: grayscale(1) invert(1);
margin: 20px 0 20px 15px;
height: 22px;
}
.mobile-container {
width: 100%;
height: 100%;
background-color: #41ca6e;
}
.mobile-image {
width: 50%;
margin: 2rem 5rem 0 5rem;
position: absolute;
}
.mobile-logo {
width: 15%;
margin: 2rem 0 1rem 4rem;
}
.mobile-title {
text-transform: uppercase;
font-weight: 650;
font-size: larger;
margin: 0 0 0 4rem;
}
.mobile-hline {
width: 14rem;
height: 1.5px;
background: white;
margin: 10px 0 10px 4rem;
}
.mobile-offer {
text-transform: uppercase;
font-weight: 50;
font-size: 17px;
margin: 0 0 0 4rem;
}
.arrow {
position: absolute;
margin: 5rem 0 0 1.5rem;
border: solid white;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 15px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.right-arrow {
margin-left: 17rem;
}
.dot {
height: 10px;
width: 10px;
background-color: white;
border-radius: 50%;
position: absolute;
margin-top: 7rem;
margin: 20rem 0 0 10rem;
}
.row .column .image2 {
.circle {
position: absolute;
height: 35%;
width: 50%;
margin-left: 15rem;
margin-top: 10rem;
width: 10px;
padding-bottom: 5px;
border-radius: 50%;
border: 3px solid white;
margin: 20rem 0 0 11rem;
}
@media screen and (max-width: 992px) {
@media screen and (max-width: 768px) {
.row .column {
.row .column{
width: 50%;
}
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 480px) {
.row .column {
display: none;
}
.only-mobile {
width: 100%;
display: contents;
}
}
\ No newline at end of file
desktop.html
......@@ -13,8 +13,8 @@
<div class="row">
<div class="column">
<img class="main-logo" src="/Logos/logo-aoc.png" alt="logo-aoc">
<div class="desc">
<img class="logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure">
<div class="desc">
<div class="title">
<p>Astonishing <br>features requires <br>worry-free security</p>
</div>
......@@ -27,8 +27,8 @@
</div>
<div class="column">
<div class="desc">
<img class="logo" src="/Logos/logo-digitainment.png" alt="logo-f-secure">
<div class="desc">
<div class="title">
<p>Be hooked!</p>
</div>
......@@ -41,8 +41,8 @@
</div>
<div class="column">
<div class="desc">
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="desc">
<div class="title">
<p>The best things in <br>life are free<br></p>
</div>
......@@ -55,8 +55,8 @@
</div>
<div class="column">
<div class="desc">
<img class="logo" src="/Logos/logo-hungama.png" alt="logo-f-secure">
<div class="desc">
<div class="title">
<p>The thump <br>never ends here</p>
</div>
......@@ -69,8 +69,8 @@
</div>
<div class="column">
<div class="desc">
<img class="logo" src="/Logos/logo-adaptxt.png" alt="logo-f-secure">
<div class="desc">
<div class="title">
<p>Being globally you</p>
</div>
......@@ -83,8 +83,8 @@
</div>
<div class="column">
<div class="desc">
<img class="logo" src="/Logos/logo-read-where.png" alt="logo-f-secure">
<div class="desc">
<div class="title">
<p>For the wise</p>
</div>
......@@ -96,6 +96,37 @@
<img class="image2" src="/Images/image-6.png" alt="image-6">
</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="right-arrow">
<div class="arrow right"></div>
</div>
<img class="mobile-image" src="/Images/image-1.png" alt="image-1">
<div class="dot"></div>
<div class="circle"></div>
</div>
</div>
</body>
</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