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{
padding: 45px 0;
display: inline-block;
}
.ssdimg {
vertical-align: middle;
display: inline-block;
}
.padding-vertical{
padding: 35px 0;
padding: 30px 9px;
}
.percent-text img {
margin-left:20px;
@ -895,7 +900,7 @@ color: #eb4d5c;
}
@media(max-width:767px) {
.percent-text {
font-size: 50px;
/* font-size: 50px; */
}
#tech_stack h3 {
font-size: 30px;
@ -965,11 +970,12 @@ color: #eb4d5c;
@media(max-width:768px) {
.percent-text {
font-size: 43px;
/* font-size: 43px; */
}
.tech-sub-sec h2 {
font-size: 30px;
line-height: 40px;
/* font-size: 30px; */
/* line-height: 40px; */
/* font-weight: 500; */
}
.single-heading h2 {
font-size: 50px;
@ -1163,7 +1169,7 @@ line-height: 40px;
padding: 30px;
}
.percent-text {
text-align: center;
/* text-align: center; */
}
.pricing-section .card {
width: 90%;
@ -1293,3 +1299,30 @@ a#forgotpassword {
.error-message-box{
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;
}

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

@ -64,7 +64,7 @@
<img class="img-responsive btm-space-tayga" src="{% static 'datacenterlight/img/tayga.png' %}" alt="Tayga">
<span class="logo-caption">{% trans "Our NAT64 gateway" %}</span>
</div>
</div>
</div>
</div>
@ -98,30 +98,25 @@
<hr class="thick-divider"/><!-- Divider -->
<div class="space">
<div class="container">
<div class="row">
<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>
</div>
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 text-left tech-sub-sec landscape-xs-6">
<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.
{% endblocktrans %}</p>
</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 class="tech-sub-sec">
<h2>{% trans "We bring the future to you." %}</h2>
</div>
<div class="flex-row flex-row-rev">
<div class="percent-text">
100% <strong>IPv6</strong>
</div>
<div class="col-lg-12 space-block"></div>
<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>
</div>
</div>
<div class="desc-text padding-vertical">
<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.
{% endblocktrans %}</p>
</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 class="desc-text padding-vertical w380">
<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>
@ -154,6 +149,6 @@
</div>
</div>
<!-- End Why Data Center Light? -->
{% endblock %}