[CSS] 깃허브 클론코딩 (1)

WEB-Front end/*CSS

by 주초위왕 2023. 5. 13. 23:59

1. 전체적인 틀을 잡고

2. div로 구역 나누기

3. flex로 레이아웃

4. 개발자 도구로 사진 가져오기

5. 버튼 부분은 아직 수정 중

<body>
    <!--컨테이너-->
    <div class="container">
        <!--<img class="backdround-img" src="https://github.githubassets.com/images/modules/site/home-campaign/hero-bg.webp"> -->

        <!--헤더-->
        <div class="headerMenu">

            <!--왼쪽 헤더 메뉴-->
            <div class="header-left">
                <div class="logo">
                    <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32"
                        data-view-component="true" class="octicon octicon-mark-github">
                        <path
                            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
                        </path>
                    </svg>
                </div>

                <!--헤더 PSOP -->
                <div class="header-left-PSOP">
                    <span><button class="hlp">Product</button><svg opacity="0.5" aria-hidden="true" height="16"
                            viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"
                            class="HeaderMenu-icon">
                            <path
                                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z">
                            </path>
                        </svg></span>
                    <span><button class="hls">Solutions</button><svg opacity="0.5" aria-hidden="true" height="16"
                            viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"
                            class="HeaderMenu-icon">
                            <path
                                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z">
                            </path>
                        </svg></span>
                    <span><button class="hlo">Open Source</button><svg opacity="0.5" aria-hidden="true" height="16"
                            viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"
                            class="HeaderMenu-icon">
                            <path
                                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z">
                            </path>
                        </svg></span>
                    <a href="https://github.com/pricing"><button class="hlp">Pricing</button></a>
                </div>
            </div>

            <!--가운데 비어있는 곳-->
            <div></div>


            <!--오른쪽 헤더 메뉴-->
            <div class="header-right">

                <div class="search-bar">
                    <!--입력창-->
                    <input type="text" class="search-bar__input" placeholder="Search GitHub">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true"
                        class="mr-1 header-search-key-slash">
                        <path fill="none" stroke="#979A9C" opacity=".4"
                            d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z">
                        </path>
                        <path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path>
                    </svg>
                </div>
                <a href="https://github.com/login"><button class="fcs-1">Sign in</button></a>
                <a
                    href="https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home"><button
                        class="fcs-2">Sign up</button></a>

            </div>


        </div>

        <!--메인-->
        <div class="content">

            <!--메인 안쪽 내용1, 2, 3, 4-->

            <!--메인 내용1-->
            <div class="article">

                <div class="article-link">
                    <img class="eyebrow-banner-icon d-block width-auto flex-grow-0 flex-shrink-0 mr-3" width="44"
                        height="44" loading="lazy" decoding="async" alt="" aria-hidden="true"
                        src="https://github.githubassets.com/images/modules/site/eyebrow-banner-icon-copilot-x.svg">
                    <a href="https://github.com/features/preview/copilot-x">
                        <div class="article-link-text">
                            <P>Introducing GitHub Copilot X</P>
                            <P>YOUR AI pair programmer is leveling up</P>
                        </div>
                    </a>
                    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
                        viewBox="0 0 16 16" fill="none">
                        <path fill="currentColor"
                            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
                        </path>
                        <path class="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" stroke-width="1.5"
                            stroke-linecap="round"></path>
                    </svg>
                </div>

                <div class="article-text">
                    <div class="text1">
                        <h1 class="text1-1">Let’s build from here</h1>
                    </div>
                </div>

                <div class="article-text2">
                    <div class="text2">
                        <h1 class="text2-1">Harnessed for productivity. Designed for collaboration.
                            <p>Celebrated for built-in security. Welcome to the platform </p>developers love.
                        </h1>
                    </div>
                </div>

                <div class="article-searchbox">
                    <div class="searchbox"><input type="text" class="form-control" placeholder="Email address"></div>

                    <button>Sign up for GitHub</button>

                    <a class="searchbox2"
                        href="https://github.com/organizations/enterprise_plan?ref_cta=Start+a+free+enterprise+trial&ref_loc=Home+campaign+hero&ref_page=%2F">Start
                        a free anterprrise trial</a>
                    <div></div>
                </div>

                <div class="text3">
                    <h1 class="text3-1">Trusted by the world’s leading organizations ↘︎ </h1>

                    <div class="logo123456">
                        <img src="https://github.githubassets.com/images/modules/site/home-campaign/logos/stripe.svg"
                            alt="Stripe logo" height="44" class="my-3">
                        <img src="https://github.githubassets.com/images/modules/site/home-campaign/logos/pinterest.svg"
                            alt="Pinterest logo" height="44" class="my-3">
                        <img src="https://github.githubassets.com/images/modules/site/home-campaign/logos/mercedes.svg"
                            alt="Mercedes-Benz logo" height="44" class="my-3">
                        <img src="https://github.githubassets.com/images/modules/site/home-campaign/logos/mercedes.svg"
                            alt="Mercedes-Benz logo" height="44" class="my-3">
                        <img src="https://github.githubassets.com/images/modules/site/home-campaign/logos/pg.svg"
                            alt="P&amp;G logo" height="32" class="my-3">
                        <img src="https://github.githubassets.com/images/modules/site/home-campaign/logos/telus.svg"
                            alt="Telus logo" height="32" class="my-3">
                    </div>
                </div>
            </div>

            <!-- 이미지 --> -->
            <div class="animation-img1">
                <img class="width-full height-auto d-block js-build-in-item build-in-scale-up" width="1238"
                    height="1404" loading="lazy" decoding="async"
                    alt="Planet earth with visualization of GitHub activity crossing the globe"
                    src="https://github.githubassets.com/images/modules/site/home/globe.jpg">
            </div>
            <div class="animation-img2">
                <img src="https://github.githubassets.com/images/modules/site/codespaces/illo-context-menu.png" alt=""
                    width="600" height="524" loading="lazy" decoding="async" class="width-full d-block height-auto">
                <img src="https://github.githubassets.com/images/modules/site/codespaces/illo-ports.png" loading="lazy"
                    width="746" height="368" alt="" decoding="async" class="width-full d-block height-auto">
            </div>

            <div class="animation-img3">
                <img class="width-full d-block height-auto js-build-in-item build-in-scale-fade build-in-animate"
                    width="1209" height="890" loading="lazy" decoding="async" alt="" aria-hidden="true"
                    src="https://github.githubassets.com/images/modules/site/home-campaign/illu-actions.png">
                <img class="width-full d-block height-auto js-build-in-item build-in-scale-fade build-in-animate"
                    width="1208" height="764" loading="lazy" decoding="async" alt="" aria-hidden="true"
                    src="https://github.githubassets.com/images/modules/site/home-campaign/illu-mobile.png">
            </div>

            <div class="animation-img4">
                <img class="width-full height-auto d-block rounded-3 border box-shadow-card-dark-mktg" width="2500"
                    height="1500" loading="lazy" decoding="async"
                    alt="Illustration of project table view with cards grouped by 'Feature planning' phase."
                    src="https://github.githubassets.com/images/modules/site/issues/illo/issues-plan.png">
            </div>

            <div class="animation-img5">
                <img src="https://github.githubassets.com/images/modules/site/home-campaign/illu-projects.png" alt=""
                    loading="lazy" decoding="async" width="1190" height="1004" class="width-full height-auto d-block">
            </div>

            <div class="animation-img6">
                <img class="width-full d-block height-auto js-build-in-item build-in-scale-up build-in-animate"
                    width="1208" height="764" loading="lazy" decoding="async" alt="" aria-hidden="true"
                    src="https://github.githubassets.com/images/modules/site/home-campaign/illu-discussions.png">
                <img class="width-full d-block height-auto js-build-in-item build-in-scale-up build-in-animate"
                    width="1208" height="764" loading="lazy" decoding="async" alt="" aria-hidden="true"
                    src="https://github.githubassets.com/images/modules/site/home-campaign/illu-pull-requests.png">
            </div>

            <div class="animation-img7">
                <img src="https://github.githubassets.com/images/modules/site/home-campaign/illu-ghas-list.png" alt=""
                    loading="lazy" decoding="async" width="1084" height="600" class="width-full height-auto d-block">
            </div>

            <div class="animation-img8">
                <img class="width-full d-block height-auto js-build-in-item build-in-scale-fade build-in-animate"
                    width="1288" height="992" loading="lazy" decoding="async" alt="" aria-hidden="true"
                    src="https://github.githubassets.com/images/modules/site/home-campaign/illu-secret-scanning.png">
            </div>

            <div class="animation-img9">
                <img class="width-full d-block height-auto js-build-in-item build-in-scale-fade build-in-animate"
                    width="1208" height="764" loading="lazy" decoding="async" alt="" aria-hidden="true"
                    src="https://github.githubassets.com/images/modules/site/home-campaign/illu-dependabot.png">
                <img class="width-full d-block height-auto js-build-in-item build-in-scale-fade build-in-animate"
                    width="1208" height="764" loading="lazy" decoding="async" alt="" aria-hidden="true"
                    src="https://github.githubassets.com/images/modules/site/home-campaign/illu-code-scanning.png">
            </div>

            <div class="animation-img10">
                <img alt="Mona looking at the galaxy" width="801" height="807"
                    class="home-astrocat d-block events-none user-select-none"
                    src="https://github.githubassets.com/images/modules/site/home-campaign/astrocat.png">
            </div>

        </div>

        <div class="buttom-text">
            <p>1 The Total Economic Impact™ Of GitHub Enterprise Cloud and Advanced Security, a commissioned study
                conducted by Forrester<br> Consulting, 2022. Results are for a composite organization based on
                interviewed customers.</p>
            <p>2 GitHub, Octoverse 2022 The state of open source software.</p>
        </div>

        <div class="buttom-github">
            <div class="buttom-github-bgt">
                <h1 class="bgt-1">GitHub</h1>
                <h4 class="bgt-2">Subscribe to our newsletter</h4>
                <h4 class="bgt-3">Get product updates, company news, and more.</h4>
                <h2 class="bgt-4"><button>Subscript</button></h2>
            </div>
            <div></div>

            <div class="buttom-github-list">
                <h3>Product</h3>
                <ul class="list-none">
                    <li>Features</li>
                    <li>Security</li>
                    <li>Team</li>
                    <li>Enterprise</li>
                    <li>Enterprise</li>
                    <li>Customer stories</li>
                    <li>The ReadME Project</li>
                    <li>Pricing</li>
                    <li>Resources</li>
                    <li>Roadmap</li>
                </ul>
            </div>

            <div class="buttom-github-list">
                <h3>Platform</h3>
                <ul class="list-none">
                    <li>Developer API</li>
                    <li>Partners</li>
                    <li>Electron</li>
                    <li>GitHub Desktop</li>
                </ul>
            </div>

            <div class="buttom-github-list">
                <h3>Support</h3>
                <ul class="list-none">
                    <li>Docs</li>
                    <li>Community Forum</li>
                    <li>Professional Services</li>
                    <li>Premium Support</li>
                    <li>Skills</li>
                    <li>Status</li>
                    <li>Contact GitHub</li>
                </ul>
            </div>

            <div class="buttom-github-list">
                <h3>Company</h3>
                <ul class="list-none">
                    <li>About</li>
                    <li>Blog</li>
                    <li>Careers</li>
                    <li>Press</li>
                    <li>Inclusion</li>
                    <li>Social Impact</li>
                    <li>Shop</li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    </div>

    <!--하단-->
    <div class="footer">
        <div class="footer-text">
            <span class="t-footer">© 2023 GitHub, Inc.</span>
            <span class="t-footer">Terms</span>
            <span class="t-footer">Privacy (Updated 08/2022)</span>
            <span class="t-footer">Sitemap</span>
            <span class="t-footer">What is Git?</span>
        </div>

        <div></div>

        <div class="footer-logo">
            <img src="https://github.githubassets.com/images/modules/site/icons/footer/twitter.svg" height="18"
                width="22" class="d-block" loading="lazy" decoding="async" alt="Twitter icon">
            <img src="https://github.githubassets.com/images/modules/site/icons/footer/facebook.svg" width="18"
                height="18" class="d-block" loading="lazy" decoding="async" alt="Facebook icon">
            <img src="https://github.githubassets.com/images/modules/site/icons/footer/linkedin.svg" width="19"
                height="18" class="d-block" loading="lazy" decoding="async" alt="Linkedin icon">
            <img src="https://github.githubassets.com/images/modules/site/icons/footer/youtube.svg" width="23"
                height="16" class="d-block" loading="lazy" decoding="async" alt="YouTube icon">
            <img src="https://github.githubassets.com/images/modules/site/icons/footer/twitch.svg" width="18"
                height="18" class="d-block" loading="lazy" decoding="async" alt="Twitch icon">
            <img src="https://github.githubassets.com/images/modules/site/icons/footer/tiktok.svg" width="18"
                height="18" class="d-block" loading="lazy" decoding="async" alt="TikTok icon">
            <img src="https://github.githubassets.com/images/modules/site/icons/footer/github-mark.svg" width="20"
                height="20" class="d-block" loading="lazy" decoding="async" alt="GitHub mark">
        </div>
    </div>
    </div>

    </div>
</body>

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* 백그라운드 위지 위치 지정
.container .backdround-img {
    right: -1050px;
    max-width: calc(230vw + 1607px);
    width: 4377px;
}
*/


.headerMenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 90px;
    margin-right: 90px;
    margin-top: 20px;
}

.headerMenu .header-left,
.header-left-PSOP {
    display: flex;
    align-items: center;
}

/*왼쪽 헤더메뉴 다중 선택자 다중 선택자*/
.hlp,
.hls,
.hlo,
.hlp {
    font-size: 18px;
    border: none;
    margin-left: 10px;
    background-color: transparent;
}

.hlp:hover,
.hls:hover,
.hlo:hover,
.fcs-1:hover {
    color: gray;
}

.fcs-2:hover {
    color: gray;
}

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

.search-bar__input {
    width: 245px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    border-width: 1px;
    background-color: transparent;
    padding: 5px;
}

.form-control,
.fcs-1,
.fcs-2 {
    margin-left: 10px;
    font-size: 17px;
}


/*오른쪽 헤더메뉴  다중 선택자*/
.fcs-1 {

    background-color: transparent;
    border: none;
}

.fcs-2 {
    padding: 3px;
    background-color: transparent;
    border: solid;
    border-radius: 5px;
    border-width: 1px;
}

.content .article {
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 350px;
}

.content .article .article-link {
    width: 400px;
    display: flex;
    align-items: center;
    border: 1px solid #000000;
    border-radius: 50px;
}

.article-link-text {
    margin: 20px;
}

.text1-1 {
    margin-top: 45px;
    font-size: 80px;
}

.text2-1 {
    margin-top: 30px;
    font-size: 35px;
    color: rgb(136, 125, 155)
}

.text3-1 {
    margin-top: 100px;
    font-size: 5px;
    color: rgb(136, 125, 155)
}

.logo123456 {
    margin: 50px;
}

.my-3 {
    margin-left: 20px;
}

.section .article .article-searchbox {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.buttom-github {
    display: flex;
    height: 300px;
    margin: 50px;
}

.buttom-github, .buttom-github-list {
    gap: 80px;
}

.buttom-github, .buttom-github-list > .list-none {
    list-style-type: none;
}



/*하단 꾸미기*/
.footer {
    display: flex;
    justify-content: space-evenly;
    margin: 20px;
}

/*
.footer .footer-logo, .d-block {
    display: flex;
    gap: 20px;
    align-items: center;
    
}*/

'WEB-Front end > *CSS' 카테고리의 다른 글

[CSS] Google 앞 페이지 따라만들기 (0)	2023.05.24
[CSS] CSS 박스모델 (0)	2023.04.22
[CSS] Padding(패딩) 속성 (0)	2023.04.22
[CSS] 여백(margin)속성 (0)	2023.04.21
[CSS] CSS font-size에 대해서 알아보자. (0)	2023.04.20