文章/答案/技术大牛

发布

社区首页 >问答首页 >投资组合网站响应设计

问投资组合网站响应设计
EN

Code Review用户

提问于 2021-08-08 16:50:52

回答 2查看 77关注 0票数 0

我是一个刚开始学习HTML5、CSS3和JavaScript的新开发人员。下面是我建立一个投资组合网站的尝试。

我发现很难让我的网站作出更好的反应时，调整屏幕大小。当调整浏览器窗口的大小或在移动设备上查看时，文本和图像就到处都是。

任何建议或批评都会受到欢迎。我还链接了我的GitHub和下面的页面。谢谢

GitHub 投资组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./resources/css/index.css">
    <title>Jack Defroand | Web Developer</title>
</head>
<body>
    <div id="wrapper">
        <div class="container">
            <header class="main-page" id="main-page">
                        <nav class="navbar">
                            <a href="#main-page" class="nav-item">HOME</a>
                            <a href="#about-me" class="nav-item">ABOUT</a>
                            <a href="#projects" class="nav-item">PROJECTS</a>
                            <a href="#skills" class="nav-item">SKILLS</a>
                            <a href="#contact" class="nav-item">CONTACT</a>
                        </nav>
                        <div class="title-containter">
                        <div class="main-title">
                            <h1>JACK DEFROAND</h1><span id="text2"><span id="web-text">FRONT END</span> DEVELOPER</span>
                            <a href="#contact"><p>CONTACT ME</p></a>
                        </div>
                        </div>
                        <div class="socials">
                            <a href="https://github.com/JackDef10">
                                <img src="resources/images/GitHub-Logos/GitHub_Logo_White.png" alt="GitHub logo" id="github">
                            </a>
                            <a href="https://www.linkedin.com/in/jack-defroand/">
                                <img src="resources/images/LinkedIn-Logos/LI-In-Bug.png" alt="LinkedIn logo" id="linkedIn">
                            </a>
                        </div>
            </header>
            <main class="content">
                <section class="section-style" id="about-me">
                    <div class="about-me">
                        <article>
                            <h1><span class="section-title">ABOUT ME</span></h1>
                            <aside id="about-text">
                                <p>In October I began my journey in to full stack development through an award winning training 
                                    provider and recruiter "IT Career Switch". Teaching the fundamentals of Software Development 
                                    through hundreds of hours of coding and course materials on the web such as Code academy and 
                                    w3schools.</p>
                                <p>Over 40 weeks, I learned how to create full-stack web applications from scratch using various 
                                    languages, libraries and frameworks including JavaScript, React, Java, Node.js, Python, HTML, 
                                    CSS, Bootstrap & SQL.</p>
                                <p>Please feel free to contact me if you have any questions by sending a message bellow or email at 
                                    Jackdefroand@gmail.com.</p>
                            </aside>
                            <div class="profile-img">
                                <img src="./resources/svg/Coding.svg" alt="My name is Jack Defroand">
                            </div>
                        </article>
                    </div>
                </section>
                <section class="section-style" id="projects">
                    <div class="projects">
                            <h1><span class="section-title">PROJECTS</span></h1>
                            <div class="container-pro">
                                <div id="gallery"></div>
                            </div>
                    </div>
                    <div id="popup">
                        <img src="" alt="" id="selectedImage">
                    </div>
                </section>
                <section class="section-style" id="skills">
                    <div class="skills">
                        <h1><span class="section-title">SKILLS</span></h1>
                        <div class="skills-svg">
                            <img src="resources/svg/Skills svg.svg" alt="My skills diagram">
                        </div>
                    </div>
                </section>
                <section class="section-style" id="contact">
                    <div class="contact">
                        <h1><span class="section-title">CONTACT</span></h1>
                        <p>Have a question or want to work together?</p>
                        <div class="email-form">
                            <div id="input-name">
                                 <label for="name"></label>
                                 <input type="text" id="name" name="name" placeholder="Name" required class="inputBox">
                            </div>
                            <div id="input-email">
                                 <label for="email"></label>
                                 <input type="email" id="email" name="email" placeholder="Email" required class="inputBox">
                            </div>
                            <div id="input-subject">
                                 <label for="subject"></label>
                                 <input type="text" id="subject" name="subject" placeholder="Subject" required class="inputBox">
                            </div>
                            <div id="input-message">
                                 <textarea id="message" rows="10" cols="50" name="message" placeholder="Message" class="inputBox">
                                 </textarea>
                            </div>
                            <input id="submit" type="submit" value="Send Message">
                        </div>
                        <div class="contact-svg">
                            <img src="resources/svg/Email svg.svg">
                        </div>
                    </div>
                </section>
            </main>
        </div>
    </div>
    <script src="./resources/javascript/Navbar.js"></script>
    <script src="./resources/javascript/Image-gallery.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
    

}

html{
    font-size:16px;
}

body {
    margin: 0 auto;
    width:100%;
    height:100%;
}

#wrapper{
    width: 100%;
    height: 100%;
}

.container{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
    width: 100%;
}

/* Different page sections*/ 

section{
    height: 100vh;
    display: flex;
    align-items: center;
    width:100%;
    scroll-snap-align: start;
}

.main-page{
    background-image: url("../images/main-background.jpg");
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    display:flex;
    position:relative;
    height: 100vh;
    justify-content: center;
    align-items: flex-start;
    scroll-snap-align: start;
}


.about-me{
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    margin: 0 auto;
    position:relative;
    display: block;
    height: 85%;
    width:85%;
    
}

.projects{
    background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);
    margin: 0 auto;
    position:relative;
    display: block;
    height: 85%;
    width:85%;
    
}

.skills{
    background-color: #FA8BFF;
    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
    margin: 0 auto;
    position:relative;
    display: block;
    height: 85%;
    width:85%;
}

.contact{
    background-color: #FF3CAC;
    background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
    margin: 0 auto;
    position:relative;
    display: block;
    height: 85%;
    width:85%;
}

.section-title{
    color:whitesmoke;
    font-size: 4.5em;
    font-weight:600;
    border: 3px solid white;
    position: relative;
    top: 100px;
    padding: 20px;
    margin: 0 auto;
    width: 700px;
    display:block;
    text-align: center;
}

.section-style{
    background-color: seashell;
    width:100%;
    position: relative;
}


.main-title a p {
    font-size: 0.35em;
    position: relative;
    text-align: center;
    padding: 20px;
    letter-spacing: 0.2em;
    width: 250px;
    margin: 20px auto;
    border: 2px solid white;
    color: white;
    text-decoration: none;
}

.main-title a p:hover {
    border: 2px solid tomato;
    color: tomato;
    transition: 0.6s;
}


.main-title h1{
    
    width: 100%;
    font-size: 1.5em;
    letter-spacing: 0.3em;
    text-align: center;
    padding: 10px 0;
}

.title-containter{
    background-color: rgba(39, 39, 39, 0.55);
    width:50%;
    top:300px;
    position: relative;
    margin: 0 auto;
    display: inline;
    padding: 30px;
    font-size: 3.5em;
    color:whitesmoke;
}

#text2{
    color:tomato;
    font-size: 1.2em;
    text-align: center;
    display: block;
    position: relative;
    letter-spacing: 0.5em;
    padding-bottom: 20px;

}

#web-text{
    text-align: center;
    position: relative;
    font-size:0.8em;
    color:turquoise;
    display:block;
    letter-spacing: 0.5em;
    padding: 30px 0;
}

.socials{
    position: absolute;
    top: 800px;
}

.socials img{
    width: 125px;
    height: auto; 
    margin: 40px;
    
}

#linkedIn{
    width:50px;
    height:auto;
    align-items: baseline;
}

#linkedIn:hover{
    content: url("../images/LinkedIn-Logos/LI-In-Bug-tomato.png");
}

#github:hover{
    content: url("../images/GitHub-Logos/GitHub_Logo_tomato.png");
}


.navbar {
    display: inline;
    overflow: hidden;
    background-color: #fff;
    padding: 40px 90px;
    border-radius: 60px;
    box-shadow: 0 10px 40px rgba(159, 162, 177, .8);
    position: fixed;
    margin-top: 2em;
    z-index: 1;
    transition: 0.7s;
    
   
}

.nav-item {
    color: #83818c;
    padding: 20px;
    text-decoration: none;
    transition: 0.3s;
    margin: 0 6px;
    z-index: 1;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 600S;
    position: relative;
    font-size: 1.5em;
}
.nav-item:before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color:tomato;
    border-radius: 8px 8px 0 0;
    opacity: 0;
    transition: 0.3s;
}
.nav-item:not(.is-active):hover:before {
    opacity: 1;
    bottom: 0;
}
.nav-item:not(.is-active):hover {
    color: tomato;
}

/* About Me Section */

#about-text{
    color: white;
    font-size: 1.3em;
    line-height: 1.5em;
    max-width: 65%;
    float: left;
    margin: 5rem;
    display: grid;
    grid-auto-flow: row;
    gap:2em;
    position: relative;
    top: 100px;
    border-right: 2px solid white;

}

#about-text p{
    padding-right: 30px;
    letter-spacing: 0.2em;
}

.profile-img img{
    width: 417px;
    height: 625px;
    position: relative;
    display: inline;
    object-fit: cover;
    border: 10px solid white;
    box-shadow: 3px 3px 20px black;
}


/* projects */

.container-pro{
    margin: 0 auto;
    width: 90%;
    height: 40%;
    padding: 50px 20px;
    position: relative;
    top: 150px;
}

.galleryImg {
    max-width: 100%;
    height: 300px;
    width: 300px;
    position: relative;
    transition: transform 250ms;
    cursor: pointer;
    object-fit: cover;

}


#gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
}

.galleryImg:hover{
    transform: translateY(-2px);
    box-shadow: 3px 3px 10px black;
    transform: scale(1.2);

}

#popup{
    position:fixed;
    top: 0;
    left:0;
    right: 0;
    bottom:0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-100%);
    transition: 200ms transform;
    padding: 50px;
}

#selectedImage{
    max-height:100%;
}


/* projects */

.skills-svg{
    position: relative;
    top: 200px;
    float: right;
}

/* contact form */



.email-form{
    position:relative;
    top: 200px;
    left: 100px;
    

}

.inputBox{
    background-color: seashell;
    color: black;
    font-family:Arial, Helvetica, sans-serif;
    border: 0px;
    box-shadow: 0 0 15px 4px rgba(159, 162, 177, .5);
    margin: 10px;
    padding: 20px;
    border-radius: 2em;
    font-size:1;
    font-weight: bold;
}

#name{
    position:relative;
    float: left;

}

#email {
    position:relative;
    display:inline-block;
}

#subject{
    width: 625px;
}

#message{
    max-width: 625px;
    min-width: 625px;
    width: 625px;
    max-height: 800px;
}

#submit{
    padding: 15px;
    width: 250px;
    background-color:seashell;
    color: rgb(89, 93, 110);
    border-width: 2px;
    border-color:seashell;
    font-size: 1em;
    border-radius: 2em;
    border-style: solid;
    font-weight: 700;
    position: relative;
    margin: 10px;
    left:375px;
    
}

#submit:hover{
    color: seashell;
    background-color: rgba(159, 162, 177, .1);
    border-color: seashell;
    padding: 1em;
    transition: 0.3s;
}

.contact-svg img{
    display: inline;
    position: relative;
    width: 40%;
    height: 20%;
    object-fit: cover;
    float: right;
    bottom: 250px;
    right: 100px;
    
}

.contact p {
    color: white;
    letter-spacing: 0.3em;
    display: inline;
    position: relative;
    top: 160px;
    margin-left: 7em;

}

@media only screen and (max-width: 1200px) and (min-width: 320px){
    #about-text{
        font-size: 1.2em;
    }
}


/* Tablets */
@media only screen and (max-width: 800px) and (min-width: 300px){
    .navbar{
        width: 370px;
        font-size: 0.6em;
        margin: 0 auto;
        display:flex;
        padding:10px;
        top: 20px;
    }
    .nav-item{
        padding: 0px;
        
    }

    .nav-item:before {
        height:2px;
    }

    .title-containter{
        top: 150px;
        font-size: 0.95em;
        width: 350px;
    }
    .socials{
        top:500px;
    }

    .main-title a p{
        font-size: 0.85em;
    }

    .section-title{
        font-size:1em;
        width: 200px;
    }

    #about-text{
        font-size: 0.8em;
    }

}

@media only screen and (max-width: 1300px) and (min-width: 900px){
    
    .title-containter{
        top: 400px;
        font-size: 3em;
        width: 800px;
    }
    .socials{
        top:1000px;
    }


    .main-title a p{
        font-size: 0.5em;
    }

    .section-title{
        font-size:4em;
        width: 500px; 
    }

    .nav-item:before {
        height:8px;
    }
}

javascript

beginner

html

css

mobile

回答 2

Code Review用户

发布于 2021-08-09 01:54:58

病态的投资组合杰克。因此，与其给img一个固定的大小，不如给它一个相对值(即百分比)。例如：

.socials img{
    width: 125px; => 75%
    height: auto; 
    margin: 40px;
}

为了使您的站点响应，下次您可能会考虑添加引导程序到它。

票数 2

Code Review用户

发布于 2021-08-11 11:03:43

section{
    /**/
}

不要按标签名称分配样式，而是使用类。页面上可能是多重sections。

.main-title a p {

一样的。

#text2{

这意味着什么？text1在哪里？

#web-text{

现在我知道了，它的网站.(讽刺)。

.container-pro{

专业的？

.galleryImg {

为什么不是.gallery-img？

<img src="resources/svg/Email svg.svg">

文件名中的空格是一种不好的做法。

票数 1

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/265856

复制

相似问题

问投资组合网站响应设计
EN

CSS

回答 2

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问投资组合网站响应设计EN

CSS

回答 2

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问投资组合网站响应设计
EN