html 个人投资组合

我下面的个人投资组合的免费代码营视频，我坚持与图标类.我需要添加颜色，字体大小的活动图标（我目前正在使用scss），到现在为止，我不能应用任何特定的风格（颜色和字体大小）到'我'我做错了什么？请需要帮助enter image description here

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

:root {
    --color-primary: #191d2b;
    --color-secondary: #27ae60;
    --color-white: #fff;
    --color-black: #000;
    --color-grey-0:#f8f8f8;
    --color-grey-1: #dbe1e8;
    --color-grey-2: #b2becd;
    --color-grey-3: #6c7983;
    --color-grey-4: #454e56;
    --color-grey-5: #2a2e35;
    --color-grey-6: #12181b;
    --br-sm-2: 14px
    --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-primary);
    font-size: 1.1rem;
    color: var(--color-white);
    transition: all .4s ease-in-out;
}

a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
}

header {
    height: 100vh;
    color: var(--color-white);
    overflow: hidden;
}

section {
    min-height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    padding: 3rem 18rem;
}

.section {
    transform: translateY(-100%) scale(0);
    transition: all .4s ease-in-out;
    background-color: var(--color-primary);
}

.sec1 {
    display: none;
    transform: translateY(0) scale(1);
}

.sec2 {
    display: none;
    transform: translateY(0) scale(1);
}

.sec3 {
    display: none;
    transform: translateY(0) scale(1);
}

.sec4 {
    display: none;
    transform: translateY(0) scale(1);
}

.sec5 {
    display: none;
    transform: translateY(0) scale(1);
}

//controls
.controlls {
    position: fixed;
    z-index: 10;
    top: 50%;
    right: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    transform: translateY(-50%);
    
    /*HERE IS THE CODE*/
    .active-btn {
        background-color: var(--color-secondary) !important;
        transition: all .4s ease-in-out;
        i {
            color: var(--color-white) !important;
        }
    } 
    .control {
        padding: 1rem;
        cursor: pointer;
        background-color: var(--color-grey-4);
        width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .7rem 0;
        box-shadow: var(--box-shadow-1);
        
        /*HERE IS THE CODE*/
        i {
            font-size: 1.2rem;
            color: var(--color-grey-2);
            pointer-events: none;
        }
    } 
}

<!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">
    <title>Portfolio</title>
    <link rel="stylesheet" href="../portfolio/css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

</head>

    
<body class="main-content">
    
    <header class="section sec1 header active">
    </header>

    <main>
        <section class="section sec2 about"></section>
        <section class="section sec3 portfolio"></section>
        <section class="section sec4 blogs"></section>
        <section class="section sec5 contact"></section>
    </main>

    <div class="controlls">
        <div class="control control-1 active-btn">
            <i class="fas fa-home"></i>
        </div>
        <div class="control control-2">
            <i class="fas fa-user"></i>
        </div>
        <div class="control control-3">
            <i class="fas fa-briefcase"></i>
        </div>
        <div class="control control-4">
            <i class="fas fa-newspaper"></i>
        </div>
        <div class="control control-5">
            <i class="fas fa-envelope-open"></i>
        </div>
    </div>
</body>
</html>

您使用的是SASS或SCSS，在CSS文件中嵌套类。

body {
      margin: 0;
      background: #F2F2F2;
      font-family: "Montserrat", sans-serif;
      height: 100vh;
    }
    
    #container {
      display: grid;
      grid-template-columns: 70px auto;
      height: 100%;
    }
    #container #content {
      padding: 30px 50px;
    }
    #container #content ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #container #content ul li {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 8px;
    }
    #container #content ul li a {
      font-size: 1.5em;
      text-decoration: none;
      font-weight: bold;
      color: #00A8FF;
    }
    #container #content ul li ul {
      margin-top: 20px;
    }
    #container #content ul li ul li {
      padding: 0;
    }
    #container #content ul li ul li a {
      font-size: 1em;
      font-weight: 300;
    }

html 个人投资组合

1条答案

相关问题

热门标签

最新问答