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
commit 33c56b8890
2 changed files with 59 additions and 31 deletions
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;
}

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"> <img class="img-responsive btm-space-tayga" src="{% static 'datacenterlight/img/tayga.png' %}" alt="Tayga">
<span class="logo-caption">{% trans "Our NAT64 gateway" %}</span> <span class="logo-caption">{% trans "Our NAT64 gateway" %}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -98,30 +98,25 @@
<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"> <h2>{% trans "We bring the future to you." %}</h2>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 tech-sub-sec"> </div>
<h2>{% trans "We bring the future to you." %}</h2> <div class="flex-row flex-row-rev">
</div> <div class="percent-text">
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 text-left tech-sub-sec landscape-xs-6"> 100% <strong>IPv6</strong>
<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> </div>
<div class="col-lg-12 space-block"></div> <div class="desc-text padding-vertical">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <p class="lead new-lead">{% blocktrans %} Data Center Light uses the most modern technologies out there.<br>
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 percent-text landscape-xs-8"> Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation.
<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> {% endblocktrans %}</p>
</div> </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>
<div> <div class="flex-row">
<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 class="percent-text">
</div> <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="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> </div>
</div> </div>
@ -154,6 +149,6 @@
</div> </div>
</div> </div>
<!-- End Why Data Center Light? --> <!-- End Why Data Center Light? -->
{% endblock %} {% endblock %}