so what i miss ?i try to solve it but i cant or should i start again?
that is html code and if you want css too i can send it :
<section id="contact" class="section">
<!-- Container Starts -->
<div class="container">
<!-- Start Row -->
<div class="row">
<!-- Start Col -->
<div class="col-lg-6 col-md-12">
<div class="Container">
<div class="contactinfo">
<div>
<h2>Contact Info</h2>
<ul class="info">
<li>
<span><img src="img/contact/Email.png"></span>
<span>colbration#visionviewplus.com</span>
</li>
<li>
<span><img src="img/contact/wechat.png"></span>
<span>wechat ID : 212131321</span>
</li>
<li>
<span><img src="img/contact/qq.png"></span>
<span>QQ ID : 212131321</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</section>
=============================
Related
I am trying to create a Split Layout using https://tympanus.net/codrops/2013/10/25/split-layout/
However, I am unable to see the contents below the split view. I am able to scroll but cannot see contents of element id "services". I am not posting the CSS in order to avoid making it readable. The CSS can be found on the link above. Thank you.
<div id="splitlayout" class="splitlayout">
<div class="intro">
<div class="side side-left">
<header class="codropsheader clearfix">
<span>Blueprint <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span></span>
<h1>Split Layout</h1>
<nav>
<span>Previous Blueprint</span>
<!--a href="" class="bp-icon bp-icon-next" data-info="next Blueprint"><span>Next Blueprint</span></a-->
<span>back to the Codrops article</span>
<span>Go to the archive</span>
</nav>
<div class="demos">
<a class="current" href="index.html">Effect 1</a>
Effect 2
</div>
</header>
<div class="intro-content">
<div class="image-container">
<img class="img-fluid" src ={% static "images/teacher-4.png" %} alt="alternative">
</div>
<h1><span>Toby Blue </span><span>Web Designer</span></h1>
</div>
<div class="overlay"></div>
</div>
<div class="side side-right">
<div class="intro-content">
<div class="image-container">
<img class="img-fluid" src ={% static "images/student-2.png" %} alt="alternative">
</div>
<h1><span>Amy White </span><span>Web Developer</span></h1>
</div>
<div class="overlay"></div>
</div>
</div><!-- /intro -->
<div class="page page-right">
<div class="page-inner">
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</div><!-- /page-inner -->
</div><!-- /page-right -->
<div class="page page-left">
<div class="page-inner">
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</div><!-- /page-inner -->
</div><!-- /page-left -->
→
←
</div><!-- /splitlayout -->
<!-- Services -->
<div id="services" class="cards-1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Create an eQuiz and schedule it in less than 1 minute.</h2>
<p class="p-heading p-large">Now all you need are a few clicks and your students get an eQuiz</p>
</div> <!-- end of col -->
</div> <!-- end of row -->
<div class="row">
<div class="col-lg-12">
<!-- Card -->
<div class="card">
<img class="card-image" src ={% static "images/employee.svg" %} alt="alternative">
<div class="card-body">
<h4 class="card-title">Pick Difficulty & Topic</h4>
<p>The questions and quiz comes with a level of difficulty and spread across all chapters </p>
</div>
</div>
<!-- end of card -->
<!-- Card -->
<div class="card">
<img class="card-image" src ={% static "images/quiz-icon.svg" %} alt="alternative">
<div class="card-body">
<h4 class="card-title">Random Q&A</h4>
<p>Students get random questions and options from our huge pool of questions</p>
</div>
</div>
<!-- end of card -->
<!-- Card -->
<div class="card">
<img class="card-image" src ={% static "images/quiz-2.svg" %} alt="alternative">
<div class="card-body">
<h4 class="card-title">Different Options</h4>
<p> You can test students on MCQ, True/False & Essay Type Questions </p>
</div>
</div>
<!-- end of card -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of cards-1 -->
<!-- end of services -->
Change the position: fixed; on .side to position: absolute;.
.side {
position: absolute;
top: 0;
z-index: 100;
width: 50%;
height: 100%;
text-align: center;
-webkit-backface-visibility: hidden;
}
Check it in action on Codepen: https://codepen.io/manaskhandelwal1/pen/YzpWvaZ
I am attempting to add two {content} areas on my Weebly website that are separated by custom code in the HTML/CSS editor. I am not understanding the basic fundamentals to how {content} sections work in Weebly.
I initially copied and pasted:
<section id="wb_sections">
{{#sections}}
<div class="row">
{content}
</div>
{{/sections}}
</section>
But it simply duplicated the content on the page.
I am hitting a dead end in most of my searching. Please see the code below. I am trying to add a second editable (drag and drop) {content} section area between the "Portfolio" section and "footer" section. Thank you for your help in advance.
<body id="top" class="homepage-sections home-custom-header wsite-theme-light">
<!-- Pre Loader -->
<div id="loading" class="loading"></div>
<div class="wft-layout">
<!-- Main Wrapper -->
<div id="home" class="top">
<!-- Info Bar - Text, Social -->
<div class="info-bar">
<div class="row">
<div class="clearfix">
<div class="info-left">
<ul class="info-links clearfix">
<li><i class="typcn typcn-time"></i>{info:text}</li>
</ul>
</div>
<div class="info-right">
<ul class="info-links clearfix">
<li class="info-social">{social}</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Top Bar & Menu -->
<div class="top-bar">
<!-- Logo, Menu, Cart-->
<div class="header-bar ib-large">
<div class="row d-table">
<div class="eq-col-left pad-0">
{logo}
</div>
<div class="eq-col-right pad-0">
<div class="details-bar">
<div class="row">
<div class="clearfix">
<div class="details-right">
<ul class="details-links clearfix">
<li class="t-address"><i class="typcn typcn-location-outline"></i>{details-address:text}<br>
<span>{detail-address:text}</span>
</li>
<li class="t-phone"><i class="typcn typcn-phone-outline"></i>{details-phone:text}<br>
<span>{detail-phone:text}</span>
</li>
<li class="t-email"><i class="typcn typcn-mail"></i>{details-email:text}<br>
<span>{detail-email:text}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="menu-container" class="menu-container">
<div class="row">
<span id="cart">{minicart}</span>
<!-- Menu Toggle -->
<input type="checkbox" id="toggle" />
<label for="toggle" class="toggle"></label>
<!-- Menu -->
<div class="menu relative">
<div class="nm-inner">
<!-- Scroller Menu Items -->
<div id="scroller-nav">
<ul id="nav">
<li class="home-nav">{menu1:text}</li>
<li class="sec1-nav">{menu2:text}</li>
<li class="sec2-nav">{menu3:text}</li>
<li class="sec3-nav">{menu4:text}</li>
<li class="sec4-nav">{menu5:text}</li>
<li class="sec5-nav">{menu6:text}</li>
<li class="blog-nav">{menu7:text}</li>
<li class="features-nav">{menu8:text}</li>
</ul>
</div>
<!-- Multi Page Menu -->
<div id="multi-nav">{menu}</div>
<!-- Mobile Menu -->
<div id="navmobile">
<div class="mb-inner">{menu}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Custom Header -->
<section id="home" class="home">
<div class="wft-banner-wrap">
{{#header}}
<div class="container">
<div class="wft-banner">{content}</div>
</div>
{{/header}}
</div>
</section>
<!-- Sections -->
<section id="wb_sections">
{{#sections}}
<div class="row">
{content}
</div>
{{/sections}}
</section>
<!-- Portfolio Section 3 -->
<section id="section-three" class="portfolio pad-t100 relative wft-content-wrap" style="background-color: #ffffff;">
<div class="row wft-ph ph-standard-3">
{portfolio:content global="false"}
</div>
<div class="portfolio-img-row row wft-ph ph-standard-3">
<!-- portfolio starts here -->
<!-- Portfolio Filter -->
<!-- to add more title tabs, just add more <li> lines and give it a new class and {porttitle?:text}
<ul class="option-set" data-option-key="filter">
<li><a class="selected" href="#filter" data-option-value="*"><span></span>All</a></li>
<li id="filter1"><span></span>{porttitle1:text}</li>
<li id="filter2"><span></span>{porttitle2:text}</li>
<li id="filter3"><span></span>{porttitle3:text}</li>
<li id="filter4"><span></span>{porttitle4:text}</li>
<li id="filter5"><span></span>{porttitle5:text}</li>
</ul> -->
<!-- End Filters -->
<!-- Portfolio Items -->
<div id="posts" class="row isotope ph-portfolio">
<!-- Start Project -->
<div id="folio1" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio1:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio2" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio2:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio3" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio3:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio4" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio4:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio5" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio5:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio6" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio6:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio7" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio7:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio8" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio8:content global="false"}</div>
</div>
<!-- End Project -->
<!-- Start Project -->
<div id="folio9" class="post item spani4 isotope-item">
<div class="profile-photo wft-phi">{folio9:content global="false"}</div>
</div>
<!-- End Project -->
</div>
<!-- portfolio end -->
</div>
</section>
<!-- Contact Footer -->
<footer id="section-five" class="contact relative clearfix">
<div class="row pad-b100 relative wft-ph ph-standard-5">
{contact-one:content}
</div>
<div class="copyright">
<div class="row pad-tb25">
<div class="twelve text-center">
© {copyright:text}
</div>
</div>
</div>
</footer>
<!-- Back to top -->
<div class="back-top-wrap text-center">
<i class="back-top relative text-center typcn typcn-arrow-up-outline"></i>
</div>
</div>
<!-- End Layout --->
<div style='display:none'>{{footer}}</div>
<!-- Javascript -->
<script>
var para_one = jQuery('#wft-para-img1').find('img').attr('src');
jQuery("#parallax1").css('background-image', 'url("' + para_one + '")');
var para_two = jQuery('#wft-para-img2').find('img').attr('src');
jQuery("#parallax2").css('background-image', 'url("' + para_two + '")');
</script>
<script src="/files/theme/jquery.home-custom.js"></script>
<script src="/files/theme/jquery.owl.js"></script>
<script src="/files/theme/jquery.home-main.js"></script>
Technically, this is a Duplicate Question Answered Here
But, since it wasn't explained in the original, let me just point out the issue you are having. {content} can only be used once. For other content areas, you need a custom tag, like {content2:content global="false"} Notice the custom name before the :
So, in other words, each custom content area must have a it's own custom name. Then, global="false" means it will not be duplicated on other pages. See the: Answer Here
I'm using a template that uses and I used it to implement a multi-language select. Problem is: when i switch to mobile view the top-header disappears and only the navbar stays. Does anyone have an idea how i can keep the top-header? Template uses Bootstrap 3
<body>
<div class="box-layout">
<header class="header-style-1">
<div class="bg-header-top">
<div class="container">
<div class="row">
<div class="header-top">
<div class="row">
<div class="col-md-3">
<img src="../assets/images/index/logo.png" alt="logo" class="img-responsive" />
</div>
<div class="col-md-9">
<div class="header-top-right pull-right">
<ul class="header-contact">
<li>
<i class="flaticon-vibrating-phone"></i>
<div class="h-adress-content">
<h6>Telefon</h6>
<p>XXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<i class="flaticon-placeholder"></i>
<div class="h-adress-content">
<h6>Adresse</h6>
<p>XXXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<div class="h-adress-content">
<p><img src="../assets/images/index/de.png"> DE</p>
<p><img src="../assets/images/index/pl.png"> PL</p>
</div>
<!-- .h-adress-content -->
</li> `
I'm trying to make the whole thing clickable so I wrapped the image and paragraph inside an anchor tag. I gave the anchor tag a padding of 40px around and gave the img tag a right margin of around 30. Both of them have a display property of inline-block. The problem is it doesn't show like the one on the image(attached). How do I fix this? I'm not that good at CSS and HTML yet. Thanks.
<div class="col-md-3">
<img src="_assets_/images/icon-meeting.png" alt="meeting minutes and agendas"><p>Meeting Minutes & Agendas</p>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<img src="_assets_/images/icon-bills.png" alt="pay bills online"><p>Pay Bills Online</p>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<img src="_assets_/images/icon-document.png" alt="form & document center"><p>Form & Document Center</p>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<img src="_assets_/images/icon-questions.png" alt="frequently asked questions"><p>Frequently Asked Questions</p>
</div><!-- /.col-md-3 -->
My CSS is:
#panel p {font-family: 'Raleway', sans-serif;color: #fff;font-size: 18px;display: inline-block;margin: 0}
#panel img {width: 45px;margin-right: 25px;display: inline-block}
#panel a {background-color: #1b4952;display: block;border-radius: 10px;text-decoration: none}
What I want
What I have
I guest you use bootstrap :)
About that you can make it using row. I just simple edit your code check and try it i hope it's help you.
<div class="col-md-3">
<div class="row">
<div class="col-md-6">
<a href="./"><img src="_assets_/images/icon-meeting.png" alt="meeting minutes and agendas">
<div class="col-md-6">
<p>Meeting Minutes & Agendas</p></a>
</div>
</div>
</div>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<div class="row">
<div class="col-md-6">
<a href="./">
<img src="_assets_/images/icon-bills.png" alt="pay bills online">
<div class="col-md-6">
<p>Pay Bills Online</p></a>
</div>
</div>
</div>
</div>
<!-- /.col-md-3 -->
<div class="col-md-3">
<div class="row">
<div class="col-md-6">
<a href="./">
<img src="_assets_/images/icon-document.png" alt="form & document center">
<div class="col-md-6">
<p>Form & Document Center</p></a>
</div>
</div>
</div>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<div class="row">
<div class="col-md-6">
<a href="./"><img src="_assets_/images/icon-questions.png" alt="frequently asked questions">
<div class="col-md-6"><p>Frequently Asked Questions</p></a>
</div>
</div>
</div>
</div><!-- /.col-md-3 -->
More informations check this page
Can anybody help me with this problem, I am using bootstrap to develop my website and so far I have two row`s.
<section role="main">
<div class="container">
<div class="row no-space"><!-- Row 1 -->
<div class="span3">
<h2>{ logo here }</h2>
<h3>[ logo here ]</h3>
</div>
<div class="span6">
<h2>Text here, text here <em>text here</em>...</h2>
<h2>text here!</h2>
</div>
<div class="span3">
<img src="img/coffee.png" alt="Coffee and code">
</div>
</div><!-- /Row 1 -->
<div class="row no-space"><!-- Row 2 -->
<div class="span3">
<img src="img/code01.png" alt="Coda2 code">
</div>
<div class="span3">
<img src="img/code01.png" alt="Coda2 code">
</div>
</div><!-- /Row 2-->
</div><!-- Container -->
</section><!-- MAIN -->
The entire website will be built using span3 and 6, with a height of 220 for span3 and 460 for span6. Because span6 has a double height as against span 3, it will be a gap of 240px between the span3 from the first row and the first span3 from the secound row.
How I can remove this gap, I tried nesting but is not really something that I need, because the divs(span3) will be shuffled every time the website will be reloaded.
Thank you for your time and help.
I think what u want to do is think of the spans as columns and add the data inside of the columns
<section role="main">
<div class="container">
<div class="row no-space"><!-- Row 1 -->
<div class="span3">
<h2>{ logo here }</h2>
<h3>[ logo here ]</h3>
<img src="img/code01.png" alt="Coda2 code">
</div>
<div class="span6" data-rowspan="2" data-colspan="2">
<h2>Text here, text here <em>text here</em>...</h2>
<h2>text here!</h2>
</div>
<div class="span3">
<img src="img/coffee.png" alt="Coffee and code">
<img src="img/code01.png" alt="Coda2 code">
</div>
</div><!-- /Row 1 -->
</div><!-- Container -->