「青训营 X 码上掘金」制作一个单页变双页效果的个人名片

当青训营遇上码上掘金

介绍

名片（Business card），是一种载有关于公司或个人的联系信息的卡片，常用于商务往来场合之中，作为一种便利和记忆辅助工具的共享。名片通常包括：姓名、单位或商业机构名称（通常带有商标）、以及联系信息（如：街道地址、电话号码、传真号码、电子邮件地址及网站）。

名片是向人展示身份、展现自我的重要工具，同时也是自身的象征，作为一名程序员用代码介绍自己是一件最好不过的事情。用代码制作一张名片且他人易于读出，最直观地介绍给别人的方式就是通过使用 HTML 绘制一个网页来显示了，下面我们就来制作一个单页变双页效果的个人名片。

实现

鉴于之前做过类似的单页面，稍作改动之后就成为了一个酷炫的单页变双页效果的个人名片。 使用了一个极简风格的蓝白配色页面布局，正面是个人信息的详细资料，第二面设置为本人图片，因为没有设置大小却发现意外的好看，就让这个图片遮盖了本身的html页面。

我们通过一个这样的程序来实现

特意挑出其中的js代码展示一下很好的设计思路

 var form_2 = document.getElementById('signUpForm')
                
                //注册监听
                form_2.addEventListener('submit',async function(e){                 
                    //阻止刷新
                    e.preventDefault();
                    let result_2 = serializeForm1(form_2);
                    console.log(result_2)
                    
                    var reg = 0
                    reg = await logIn(result_2)
                    console.log(reg);
                    if(reg == 1){window.location.href='./main.html'}
                })

const container = document.querySelector('#container');
const signInButton = document.querySelector('#signIn');
const signUpButton = document.querySelector('#signUp');

signUpButton.addEventListener('click',() => container.classList.add('right-panel-active'))
signInButton.addEventListener('click',() => container.classList.remove('right-panel-active'))

里面的css并不只有本页面的代码，同时html中也有许多无用段，只是想展示页面的呈现形式，做的太急，直接追求的快速成型，不够认真还请见谅