moep/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

why datacenterlight page, 'we bring the future' section layout changed to flex and mobile layout fixed

Browse source
This commit is contained in:
ARvind Tiwari 2017-07-27 18:35:17 +05:30
parent a05b5b6918
commit 33c56b8890
2 changed files with 59 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
datacenterlight/static/datacenterlight/css/landing-page.css
View file

@ -664,9 +664,14 @@ tech-sub-sec h2 {
} }
.space-middle{ .space-middle{
padding: 45px 0; padding: 45px 0;
display: inline-block;
}
.ssdimg {
vertical-align: middle;
display: inline-block;
} }
.padding-vertical{ .padding-vertical{
padding: 35px 0; padding: 30px 9px;
} }
.percent-text img { .percent-text img {
margin-left:20px; margin-left:20px;
@ -895,7 +900,7 @@ color: #eb4d5c;
} }
@media(max-width:767px) { @media(max-width:767px) {
.percent-text { .percent-text {
font-size: 50px; /* font-size: 50px; */
} }
#tech_stack h3 { #tech_stack h3 {
font-size: 30px; font-size: 30px;
@ -965,11 +970,12 @@ color: #eb4d5c;
@media(max-width:768px) { @media(max-width:768px) {
.percent-text { .percent-text {
font-size: 43px; /* font-size: 43px; */
} }
.tech-sub-sec h2 { .tech-sub-sec h2 {
font-size: 30px; /* font-size: 30px; */
line-height: 40px; /* line-height: 40px; */
/* font-weight: 500; */
} }
.single-heading h2 { .single-heading h2 {
font-size: 50px; font-size: 50px;
@ -1163,7 +1169,7 @@ line-height: 40px;
padding: 30px; padding: 30px;
} }
.percent-text { .percent-text {
text-align: center; /* text-align: center; */
} }
.pricing-section .card { .pricing-section .card {
width: 90%; width: 90%;
@ -1293,3 +1299,30 @@ a#forgotpassword {
.error-message-box{ .error-message-box{
margin-top: 20px; margin-top: 20px;
} }
.flex-row {
margin-top: 25px;
}
@media (min-width: 768px) {
.flex-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-row .percent-text {
flex-shrink : 0;
padding: 0 15px;
}
.flex-row .percent-text,
.flex-row .desc-text {
max-width: 600px;
}
.flex-row-rev .percent-text {
order: 2;
}
}
.w380 {
max-width: 380px !important;
}

25
datacenterlight/templates/datacenterlight/whydatacenterlight.html
View file

@ -98,34 +98,29 @@
<hr class="thick-divider"/><!-- Divider --> <hr class="thick-divider"/><!-- Divider -->
<div class="space"> <div class="space">
<div class="container"> <div class="container">
<div class="row"> <div class="tech-sub-sec">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 tech-sub-sec">
<h2>{% trans "We bring the future to you." %}</h2> <h2>{% trans "We bring the future to you." %}</h2>
</div> </div>
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 text-left tech-sub-sec landscape-xs-6"> <div class="flex-row flex-row-rev">
<div class="percent-text">
100% <strong>IPv6</strong>
</div>
<div class="desc-text padding-vertical">
<p class="lead new-lead">{% blocktrans %} Data Center Light uses the most modern technologies out there.<br> <p class="lead new-lead">{% blocktrans %} Data Center Light uses the most modern technologies out there.<br>
Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation. Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation.
{% endblocktrans %}</p> {% endblocktrans %}</p>
</div> </div>
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 percent-text text-right landscape-xs-6">
100% <strong>IPv6</strong>
</div> </div>
<div class="flex-row">
<div class="percent-text">
<span class="space-middle"> 100% <strong>SSD</strong></span> <span class="ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span>
</div> </div>
<div class="col-lg-12 space-block"></div> <div class="desc-text padding-vertical w380">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 percent-text landscape-xs-8">
<span class="pull-left space-middle"> 100% <strong>SSD</strong></span> <span class="pull-left ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span>
</div>
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 text-right tech-sub-sec padding-vertical landscape-xs-4">
<div>
<p class="lead new-lead">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p> <p class="lead new-lead">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<!-- /.container --> <!-- /.container -->
</div> </div>
<!-- /.content-section-b --> <!-- /.content-section-b -->