问个人投资组合(freeCodeCamp响应网络设计项目)
EN

Code Review用户

提问于 2019-09-13 11:34:38

回答 1查看 605关注 0票数 2

我很感谢你对我虚构的投资组合的反馈。我正在做freeCodeCamp课程，个人投资组合是一个仅使用HTML/CSS的响应式网页设计项目。

我特别感兴趣的是关于最佳实践、命名约定和高效代码的反馈。

代码也是论GitHub。

HTML文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link rel="stylesheet" href="css/style.css" />
        <script src="https://kit.fontawesome.com/4dd9b52bee.js"></script>
        <title>FunkzWeb</title>
    </head>
    <body>          
        <nav id="navbar">
            <div class="container">
                <div class="logo">
                    <p><strong>Funkz</strong>Web</p>
                </div>
                <ul class="flex-row">
                    <li><a href="#welcome-section">Home</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </nav>

        <section id="welcome-section">
            <div class="container">
                <div class="header-text">
                    <p class="sub-heading">Hello!</p>
                    <h1><strong>I am Funkz</strong>Web</h1>
                    <p>Creative Digital Powerhouse</p>
                </div>
                <div class="center">
                    <a href="#" class="btn">Hire me now</a>
                </div>
            </div>
        </section>

        <section id="projects">
            <div class="container">
                <h2>Projects</h2>
            </div>
            <div class="project-container">
                <div class="project-tile center">
                    <a
                        href="https://oyvindsen84.github.io/fcc-technical-document-page/"
                        target="_blank"
                    >
                        <div class="project-text center">
                            <h3>Technical Documentation Page</h3>
                        </div>
                        <img
                            src="img/project-01.jpg"
                            alt="Technical Documentation Page"
                        />
                    </a>
                </div>

                <div class="project-tile center">
                    <a
                        href="https://oyvindsen84.github.io/fcc-product-landing-page/"
                        target="_blank"
                    >
                        <div class="project-text center">
                            <h3>Product Landing Page</h3>
                        </div>
                        <img
                            src="img/project-02.jpg"
                            alt="Product Landing Page"
                        />
                    </a>
                </div>

                <div class="project-tile center">
                    <a
                        href="https://oyvindsen84.github.io/fcc-survey-form/"
                        target="_blank"
                    >
                        <div class="project-text center">
                            <h3>Survey Form</h3>
                        </div>
                        <img src="img/project-03.jpg" alt="Survey Form" />
                    </a>
                </div>

                <div class="project-tile center">
                    <a href="#" target="_blank">
                        <div class="project-text center">
                            <h3>Personal Portfolio</h3>
                        </div>
                        <img
                            src="img/project-04.jpg"
                            alt="Personal Portfolio"
                        />
                    </a>
                </div>
            </div>
        </section>

        <section id="contact">
            <div class="container center">
                <h2>Interested in working with us?</h2>
                <p>Let's Talk Now!</p>
                <a href="#" class="btn">Hire me now</a>
                <div class="icons flex-row">
                    <a
                        id="profile-link"
                        href="https://github.com/Oyvindsen84"
                        target="_blank"
                        ><span class="fab fa-github"></span>
                    </a>
                    <a href="#"><span class="fab fa-facebook"></span></a>
                    <a href="#"><span class="fab fa-twitter"></span></a>
                    <a href="#"><span class="fab fa-linkedin-in"></span></a>
                    <a href="#"><span class="fab fa-instagram"></span></a>
                </div>
            </div>
        </section>

        <footer>
            <div class="container center">
                <div class="brand">
                    <div class="logo">
                        <p><strong>Funkz</strong>Web</p>
                    </div>
                    <p>Creative Digital Powerhouse</p>
                </div>              
                <p>
                    <small>© 2019 FunkzWeb all rights reserved</small>
                </p>
            </div>
        </footer>
    </body>
</html>

CSS文件：

/* Color Schemes */
:root {
    --bg-light: #ffffff;
    --bg-dark: #222222;
    --text-dark-strong: #000000;
    --text-dark-normal: #8d8d8d;
    --text-light-strong: #ffffff;
    --text-light-normal: #aaaaaa;
    --text-weak: #888888;
    --style-dark: #333333;
    --style-dark-grey: #5c5c5c;
    --style-grey: #777777;
    --style-light-grey: #afafaf;
    --style-light: #dadada;
}

/* Basic Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Basic setup */
body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height: 1.5;

    color: var(--text-dark-normal);
    background-color: var(--bg-light);
}

h1 {
    font-size: 5rem;
    line-height: 1;

    text-transform: uppercase;
}

h2 {
    font-size: 2.5rem;

    padding-bottom: 2rem;

    text-transform: uppercase;

    color: var(--text-dark-strong);
}

h3 {
    font-size: 1.8rem;

    color: var(--text-dark-strong);
}

li {
    display: block;

    list-style: none;
}

a {
    text-decoration: none;

    color: var(--text-dark-normal);
}

strong {
    color: var(--text-dark-strong);
}

img {
    width: 100%;
}

/* Utility Classes */
.container {
    max-width: 1200px;
    height: 100%;
    margin: auto;
    padding: 0 4rem;
}

.flex-row {
    display: flex;
}


.center {
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.header-text {
    font-size: 1.5rem;
    font-weight: 700;

    letter-spacing: 0.3em;
}

/* Buttons */
.btn {
    display: block;

    padding: 0.5rem 1.5rem;

    text-transform: uppercase;

    color: var(--text-light-strong);
    border-radius: 40px;
    background-color: var(--bg-dark);
}

/* Navbar */
#navbar {
    font-weight: 700;

    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;

    width: 100%;

    text-transform: uppercase;

    border-color: var(--style-light);
    border-bottom: 3px solid;
    background-color: var(--bg-light);
}

#navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#navbar a {
    display: block;

    padding: 1rem 1rem;
}

#navbar a:hover {
    color: var(--text-light-strong);
    background-color: var(--bg-dark);
}

.logo {
    font-size: 2rem;
}

/* Welcome Section */
#welcome-section {
    height: 100vh;
    padding: 25vh 0 25vh 0;

    background: no-repeat url("../img/showcase-img.jpg") center / cover;
}

#welcome-section .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sub-heading {
    font-size: 2rem;
    line-height: 1;
;

    text-transform: uppercase;
}

/* Projects Section*/
#projects {
    padding: 3rem 0;
}

.project-container {
    display: -ms-grid;
    display: grid;
    grid-auto-rows: 350px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(4, 1fr);
}

.project-tile {
    position: relative;

    overflow: hidden;
}

.project-tile .project-text {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;

    width: 100%;
    height: 100%;
    padding: 2rem;

    transition: all 0.5s;

    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.project-tile .project-text h3 {
    transition: all 0.5s;
    transform: scale(0);

    color: var(--text-light-strong);
}

.project-tile a:hover .project-text {
    transform: scale(1);

    opacity: 1;
}

.project-tile a:hover .project-text h3 {
    transform: scale(1);
}

/* Contact Section */
#contact {
    padding: 3rem 0;
}

#contact h2 {
    padding: 0;

    text-transform: initial;
}

#contact p {
    font-size: 1.5rem;
}

#contact .btn {
    margin: 2rem 0;
}

#contact .container {
    flex-direction: column;
}

.icons {
    font-size: 1.5rem;
}

.icons a {
    margin-right: 2rem;
}

.icons a:last-of-type {
    margin-right: 0;
}


/* Footer */
footer {
    padding: 3rem 0;

    color: var(--text-light-normal);
    background-color: var(--bg-dark);
}

footer .container {
    flex-direction: column;
}

footer strong {
    color: var(--text-light-strong);
}

footer .brand {
    line-height: 1.2;

    margin-bottom: 2rem;
} 

footer .brand > p {
    letter-spacing: 0.3em;
}




/* Media queries desktop first */

/* Desktop 1800px */
@media only screen and (max-width: 1800px) {
    .project-container {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop 1200px */
@media only screen and (max-width: 1200px) {
    .project-container {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet 768px */
@media only screen and (max-width: 768px) {
    .project-container {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
    h1 {
        font-size: 4rem;
    }
    .header-text {
        font-size: 1.5rem;

        letter-spacing: 0.2em;
    }
    .sub-heading {
        font-size: 2rem;
    }
}

/* Phone 568px */
@media only screen and (max-width: 568px) {
    body {
        line-height: 1.2;
    }
    #navbar ul {
        display: none;
    }
    .container {
        padding: 0 1rem;
    }
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2rem;

        padding-bottom: 1rem;
    }
    #contact h2 {
        padding-bottom: 0.5rem;
    }
    .header-text {
        font-size: 1.2rem;

        letter-spacing: 0.1em;
    }
    .sub-heading {
        font-size: 1.5rem;
    }
    #projects,
    #contact {
        padding: 1.5rem 0;
    }
    footer {
        padding: 1rem 0;
    }
    footer .brand {
        margin-bottom: 1rem;
    }
    .project-container {
        grid-auto-rows: 275px;
    }
}

@media (hover: none) {
    .project-tile .project-text {
        top: 100%;
        left: 0;

        display: block;

        height: auto;
        padding: 0.5rem 1rem;

        transform: translateY(-100%);

        opacity: 1;
    }
    .project-tile .project-text h3 {
        font-size: 1.3rem;

        transform: scale(1);
    }
}

html

css

回答 1

Code Review用户

发布于 2020-06-01 17:17:23

如果我们想要为一个更复杂的属性值创建一个快捷方式，那么CSS vars很适合使用，这样我们就不必记住它了。CSS属性，如box-shadow、media查询、transform、font和其他具有多个参数的CSS规则都是很好的例子。我们可以将属性放置在一个变量中，这样我们就可以通过一种更具人类可读性的格式重用它。

因此，我认为您可以在使用media查询时定义这些变量。因为我看到您在代码中使用@media查询，所以如果您愿意的话，使用变量会更好。

:root {
    --bg-light: #ffffff;
    --bg-dark: #222222;
    --text-dark-strong: #000000;
    --text-dark-normal: #8d8d8d;
    --text-light-strong: #ffffff;
    --text-light-normal: #aaaaaa;
    --text-weak: #888888;
    --style-dark: #333333;
    --style-dark-grey: #5c5c5c;
    --style-grey: #777777;
    --style-light-grey: #afafaf;
    --style-light: #dadada;
    --bp-lg-desktop: 'only screen and (max-width: 1800px)';
    --bp-desktop: 'only screen and (max-width: 1200px)';
    --bp-tablet: 'only screen and (max-width: 768px)';
    --bp-mobile: 'only screen and (max-width: 568px)';
}

/*for example change this block
 Desktop 1200px */
@media var(--bp-desktop) {
    .project-container {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }
}

票数 1

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

原文链接：

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

复制

相似问题

问个人投资组合(freeCodeCamp响应网络设计项目)
EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问个人投资组合(freeCodeCamp响应网络设计项目)EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问个人投资组合(freeCodeCamp响应网络设计项目)
EN