why datacenterlight page, 'we bring the future' section layout changed to flex and mobile layout fixed
This commit is contained in:
parent
a05b5b6918
commit
33c56b8890
|
@ -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;
|
||||
}
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue