Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Vertical side tabs 7.1


cwilk180

Question

13 answers to this question

Recommended Posts

  • 0

Squarestylist has a course on this. $197. https://www.squarestylist.com/shop/vertical-tabs

or Will-Myers plugin ($10) https://www.will-myers.com/products/p/accordion-dropdown-plugin-for-squarespace

@WillMyers I wonder if it is possible to use CSS Flex to invert the bars from horizontal to vertical, to achieve the above effect?

Or you can also add a Code Block >> Paste this CodePen code

<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->

<ul class="main-box">
    <li class="box active"><span>Slide One</span>

        <div class="detail active">
			<p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Two</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Three</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Four</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
    </div>
</li>

    <li class="box"><span>Slide Five</span>
        <div class="detail">
           <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
</ul>

<style>
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');


body 

.main-box
{
    display: flex;
    background: #000;
    margin: 70px auto 70px auto;
    padding:0;
    width: 991px;
}

.box
{

height: 322px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: white;
    color:black;
    opacity: 0;
    padding:30px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.box.active
{
    width: 70% !important;
}

.box.active .detail
{
    opacity: 1;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    transform: none;
}

.box span {
    writing-mode: vertical-rl;
    font-size: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

.box.active span 
{
	left:25px;
	right:auto;
	margin:0;
  font-weight:600
}

.box p 
{
	line-height: 23px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var getslide = $('.main-box li').length - 1;

    var slidecal = 30/getslide+'%';

    $('.box').css({"width": slidecal});

    $('.box').click(function(){
        $('.box').removeClass('active');
       $(this).addClass('active');
    });
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

hey @tuanphan, thanks for the recommendation. It's not possible invert mine, that would require a different HTML setup, but that's pretty cool and a good idea for a future plugin!

@cwilk180, if your end up getting my plugin and have any questions let me know!

Hey-o, my name is Will and I help Squarespace designers and developers with technical things.

I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life  - although I'm only an expert in 2 of these. 

Check out my plugin store or sign up for my newsletter

Link to comment
  • 0
On 7/13/2021 at 9:45 AM, cwilk180 said:

@WillMyers Thanks! I did get it! such a great plugin. Would love to style each tab different - is that possible?

I think this is possible with CSS.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/2/2021 at 3:21 AM, tuanphan said:

add a Code Block >> Paste this CodePen code

Thanks @tuanphan, I adapted this for a more complex usage and it looks really great! I tried at first to put the html in the code block, the css in Custom CSS, and the script in Code Injections, but it only worked if I put all three within the code block the way you have it here.

Link to comment
  • 0
On 7/12/2021 at 10:45 PM, cwilk180 said:

@WillMyers Thanks! I did get it! such a great plugin. Would love to style each tab different - is that possible?

@cwilk180 Yup! @tuanphan is right, this can be styled through CSS.

Edited by WillMyers

Hey-o, my name is Will and I help Squarespace designers and developers with technical things.

I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life  - although I'm only an expert in 2 of these. 

Check out my plugin store or sign up for my newsletter

Link to comment
  • 0

Thanks. This is super helpful. If I wanted to add images inside the vertical tabs using this CodePen code where would I insert it? (attached image for reference)

On 7/2/2021 at 2:21 AM, tuanphan said:

 

<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->

<ul class="main-box">
    <li class="box active"><span>Slide One</span>

        <div class="detail active">
			<p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Two</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Three</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Four</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
    </div>
</li>

    <li class="box"><span>Slide Five</span>
        <div class="detail">
           <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
</ul>

<style>
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');


body 

.main-box
{
    display: flex;
    background: #000;
    margin: 70px auto 70px auto;
    padding:0;
    width: 991px;
}

.box
{

height: 322px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: white;
    color:black;
    opacity: 0;
    padding:30px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.box.active
{
    width: 70% !important;
}

.box.active .detail
{
    opacity: 1;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    transform: none;
}

.box span {
    writing-mode: vertical-rl;
    font-size: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

.box.active span 
{
	left:25px;
	right:auto;
	margin:0;
  font-weight:600
}

.box p 
{
	line-height: 23px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var getslide = $('.main-box li').length - 1;

    var slidecal = 30/getslide+'%';

    $('.box').css({"width": slidecal});

    $('.box').click(function(){
        $('.box').removeClass('active');
       $(this).addClass('active');
    });
</script>

 

 

vertical tab image.jpeg

Link to comment
  • 0
On 7/21/2021 at 12:22 AM, LisaBennett said:

Thanks. This is super helpful. If I wanted to add images inside the vertical tabs using this CodePen code where would I insert it? (attached image for reference)

 

vertical tab image.jpeg

Try contacting via mail on his site.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/2/2021 at 10:21 AM, tuanphan said:

Squarestylist has a course on this. $197. https://www.squarestylist.com/shop/vertical-tabs

or Will-Myers plugin ($10) https://www.will-myers.com/products/p/accordion-dropdown-plugin-for-squarespace

@WillMyers I wonder if it is possible to use CSS Flex to invert the bars from horizontal to vertical, to achieve the above effect?

Or you can also add a Code Block >> Paste this CodePen code

<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->

<ul class="main-box">
    <li class="box active"><span>Slide One</span>

        <div class="detail active">
			<p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Two</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Three</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Four</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
    </div>
</li>

    <li class="box"><span>Slide Five</span>
        <div class="detail">
           <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
</ul>

<style>
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');


body 

.main-box
{
    display: flex;
    background: #000;
    margin: 70px auto 70px auto;
    padding:0;
    width: 991px;
}

.box
{

height: 322px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: white;
    color:black;
    opacity: 0;
    padding:30px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.box.active
{
    width: 70% !important;
}

.box.active .detail
{
    opacity: 1;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    transform: none;
}

.box span {
    writing-mode: vertical-rl;
    font-size: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

.box.active span 
{
	left:25px;
	right:auto;
	margin:0;
  font-weight:600
}

.box p 
{
	line-height: 23px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var getslide = $('.main-box li').length - 1;

    var slidecal = 30/getslide+'%';

    $('.box').css({"width": slidecal});

    $('.box').click(function(){
        $('.box').removeClass('active');
       $(this).addClass('active');
    });
</script>

 

Any insights how this could be appropriated for mobile view (that would go horizontal instead of vertical?)

Link to comment
  • 0
On 7/25/2021 at 6:08 PM, ievavi said:

Any insights how this could be appropriated for mobile view (that would go horizontal instead of vertical?)

Which code did you use?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
3 minutes ago, tuanphan said:

Which code did you use?

Hey, @tuanphan! I used the code from https://codepen.io/skkhan/pen/MWWdXbb

So the code below is:

 

<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->

<ul class="main-box">
    <li class="box active"><span>Slide One</span>

        <div class="detail active">
			<p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Two</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Three</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Four</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
    </div>
</li>

    <li class="box"><span>Slide Five</span>
        <div class="detail">
           <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
</ul>

<style>
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');


body 

.main-box
{
    display: flex;
    background: #000;
    margin: 70px auto 70px auto;
    padding:0;
    width: 991px;
}

.box
{

height: 322px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: white;
    color:black;
    opacity: 0;
    padding:30px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.box.active
{
    width: 70% !important;
}

.box.active .detail
{
    opacity: 1;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    transform: none;
}

.box span {
    writing-mode: vertical-rl;
    font-size: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

.box.active span 
{
	left:25px;
	right:auto;
	margin:0;
  font-weight:600
}

.box p 
{
	line-height: 23px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var getslide = $('.main-box li').length - 1;

    var slidecal = 30/getslide+'%';

    $('.box').css({"width": slidecal});

    $('.box').click(function(){
        $('.box').removeClass('active');
       $(this).addClass('active');
    });
</script>

 

Link to comment
  • 0
On 7/1/2021 at 12:00 PM, cwilk180 said:

Site URL: https://www.mahacreative.co.nz/

Hi,

 

I'm trying to have a tab like style side nav similar to this - would anyone know how to do this?

 

I found this Code pen for something similar but I'm not sure how or where to add it https://codepen.io/skkhan/pen/MWWdXbb

Do you need fix these?

Site URL: https://www.mahacreative.co.nz/

1. (Tablet – Homepage) Word break

mahacreative.co_.nz-01-min.png

2. (Tablet/Mobile – Homepage > About)

mahacreative.co_.nz-02-min.png

3. (Tablet – Homepage > Web design) Button is cut off

mahacreative.co_.nz-03-min.png

4. (Tablet – Homepage  > Brand strategy) The same here

mahacreative.co_.nz-04-min.png

5. (Tablet/Mobile – Homepage  > Contact) Email break

mahacreative.co_.nz-05-min.png

6. (Tablet) White bar on the right of screen

mahacreative.co_.nz-06-min.png

7. (Tablet – Overlay menu) Text is so close

https://www.mahacreative.co.nz/about

mahacreative.co_.nz-07-min.png

8. (Mobile – Branding) Align left content (As on desktop, tablet)

https://www.mahacreative.co.nz/branding

mahacreative.co_.nz-08-min.png

9. (Mobile – Web design)  The same here

https://www.mahacreative.co.nz/web-design

mahacreative.co_.nz-09-min.png

10. (Mobile – Web design)  Equal all lines

https://www.mahacreative.co.nz/web-design

mahacreative.co_.nz-10-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...