CSS(구 GitHub 클린코딩, 미디어쿼리(Media Query))

Frontend/CSS

CSS(구 GitHub 클린코딩, 미디어쿼리(Media Query))

code2772 2022. 11. 12. 20:02

728x90

구 GitHub 클린코딩 국비지원 과제로 한 내용이지만 필요없는데 있는 내용이나 이상한 부분이 많습니다. 개인 복습용 저장공간입니다.

✔ HTML 부분

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title@@@@@@@@@@@@@</title>
    <meta name="author" content ="@@@@@@@">
    <meta name="description" content="삶의 질을 개선하는 개발자">
    <link rel="icon" type="image/png" href="./images/hippo-solid.png">
    <script src=@@@@@@@@@@@@></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- Navbar start -->
    <nav id="navbar">
      <div class="navbar__logo">
        <img src="./images/logo.svg" alt="">

      </div>
      <ul class="navbar__menue">
        <li class="navbar__menue__item" >Personal</li>
        <li class="navbar__menue__item">Open Source</li>
        <li class="navbar__menue__item">Businees</li>
        <li class="navbar__menue__item">Explore </li>
        <li class="navbar__menue__item">


          <li class="navbar__menue__item">pricing</li>
          <li class="navbar__menue__item">Blog</li>
          <li class="navbar__menue__item">Support</li>
          <input type="text" name="userid" id="userid"
                 maxlength="20" placeholder=" Search GitHub"  required style="width:120px;  height: 30px "></li>
        <li class="navbar__menue__item"
            style="width: 90px; height: 30px; border: 1px solid gray; background-color: rgb(121, 121, 121);">
          <button style="background-color:rgb(121, 121, 121) ; color: white;">sign in</button></li>
        <li class="navbar__menue__item"
            style="width: 100px; height: 30px; border: 1px solid #5CB335; background-color:#5CB335;">
          <button style="background-color:#5CB335 ; color: white;">sign up</button></li>

      </ul>
      <!-- Button start -->
      <button class="navbar__toggle-btn">
        <i class="fa-solid fa-bars"></i>
      </button>
      <!-- Button end -->
    </nav>
    <!-- Navbar end -->

    <!-- Home start -->
    <section id="home">
      <div class ="home__container">
        <div class="h">
          <h2 class="home__title">How people<br> build software</h1>
            <h3 class="home__description">Millions of developers use GitHub to build<br>
            personal projects, support their businesses,<br>
            and work together on open source technologies.</h2>
        </div>
        <div class="ha">
          <p><input type="text" name="sign" id="sign"
                    maxlength="20" placeholder=" Pick a username"  required style="width:300px;  height: 30px "></p>
          <p></p><input type="text" name="sign" id="sign"
                        maxlength="20" placeholder=" Your email address"  required style="width:300px;  height: 30px "></p>
          <p></p><input type="text" name="sign" id="sign"
                        maxlength="20" placeholder=" Create a password"  required style="width:300px;  height: 30px "></p>
          <p style="color:beige">Use at least one letter, one numeral, and seven characters </p>
          <p><button style="width: 300px; height : 50px; background-color: #6ABF45; color: white">Sign up for GitHub</button></p>
          <p style="color:beige; text-align: center;">By clicking "Sign up for GitHub", you agree to our terms of service and privacy policy. We'll</p>
          <p style="color:beige; text-align: center">occasionally send you account relate emails.</p>
        </div>


      </div>
    </section>
    <!-- Home end -->

    <!-- My Profile start-->
    <section id ="about" class ="section section__container">
      <div class="about__avi">
        <h2 id="first" style="text-align:center ;">Welcom hom, developers</h2>

        <p >
          <!-- <h2 style="margin: 50px;"><i class="fa-solid fa-person-chalkboard"></i> 자기소개</h2> -->
          <p style = "margin-bottom:20px ;color: gray;" >GitHub fosters a fast, and collabprative development process<br>
            that lets you work on your own or with others.</p>
        </p>

        <img class="avi" src="./images/캡처.PNG" alt="">

      </div>

      <hr>


      <div class="about__jobs">



        <div class="jobs">
          <div class="job">
            <img src="./images/feature-tile__build.png" alt="" class="about__jobs__icon">
            <div class="job__description">
              <p class="job__name">
                For evrything you build
              </p>
              <p class="job__story">Host and manage your code on GitHub</p>
              <p class="job__story">you can keep your work private or share</p>
              <p class="job__story">it with the word</p>

            </div>
          </div>
        </div>

        <div class="jobs">
          <div class="job">
            <img src="./images/feature-tile__platform.png" alt=""class="about__jobs__icon">
            <div class="job__description">
              <p class="job__name">
                A better way to work
              </p>
              <p class="job__story">From hobbyists to professionals, GitHub</p>
              <p class="job__story">helps developers simplify the way they </p>
              <p class="job__story">build software </p>

            </div>
          </div>
        </div>

        <!-- <hr> -->

        <div class="jobs">
          <div class="job">
            <img src="./images/feature-tile__projects.png" alt="" class="about__jobs__icon">
            <div class="job__description">
              <p class="job__name">
                Millions of projects
              </p>
              <p class="job__story">GitHub is home to millions of open</p>
              <p class="job__story">source projects, Try one our or get</p>
              <p class="job__story">inspired to create your own</p>
            </div>
          </div>
        </div>

        <div class="jobs">
          <div class="job">
            <img src="./images/feature-tile__work.png" alt=""class="about__jobs__icon">
            <div class="job__description">
              <p class="job__name">
                Open platform, from start to finsish
              </p>
              <p class="job__story">whith hundreds of integrations, GitHub is</p>
              <p class="job__story">flexible enough to be at the center of</p>
              <p class="job__story">your development process.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- </div> -->

      <hr>
      <!-- </section> -->
      <!-- education start -->


    </section>
    <!-- education end -->

    <!-- My Profile end-->

    <!--기술-->
    <section id ="skills" class="section" style="padding: 20px;">
      <div class =section__container>



      <div style="text-align: left;">
        <div style= "margin-bottom: 10px;"><h2>where is GitHub ?</h2></div>
        <p style="color: gray;">GitHub is where people build software. More than 18 million people use Github to</p>
        <p style = "margin-bottom:30px ; color: gray;" >discover, fork, and contribute to over 48 million project</p>
      </div>
      <p >
        <img class="map" src="./images/map.PNG" alt=""></p>
      <hr>
      <div class="about__edus">
        <div class="edus">
          <div class ="edu">
            <button style="width: 130px; height : 40px; 
                            background-color: #6ABF45; color: white;margin: 10px;">Sign up for GitHub</button>
          </div>

        </div>


        <div class ="edus">
          <div class="edu" style="margin-top: 20px;">public projects are always free. Work together
            across unlimited private repsitories for $7/month
          </div>
        </div>
      </div>
      <hr>

    </section>



    <section id="contact" class="section" style="padding: 10px;">
      <!-- <ul class="navbar__menue"> -->

      <!-- </div> -->
      <div class="about__ends" >

        <div class="ends">
          <div class ="end">

            <li style="color: black;">2016 GitHub.inc</li>
            <li>Terms</li>
            <li>privacy</li>
            <li>Security</li>
            <li>Help</li>
          </div>
        </div>

        <div class ="ends">
          <div class="end" >
            <div class="git"><i style="margin: 0 autos; "  class="fa-brands fa-github"></i></div>
          </div>
        </div>

        <div class ="ends">
          <div class="end" >
            <li>Contact Github</li>
            <li>API</li>
            <li>Training</li>
            <li>Shop</li>
            <li>Blog</li>
            <li>About</li>
          </div>
        </div>
      </div>

    </section>
    <!-- contact end-->


  </body>
</html>

✔ CSS 부분

/* html{
        font-size: 10px;
        } */

        @font-face {
        font-family: 'twayair';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_tway@1.0/twayair.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        }

        :root{
        --color-white : #ffffff;
        --color-black : #000000;
        --color-backg : #383838;
        --color-asd : gray;
        --color-orange :#feb546;

        --font-large : 48px;
        --font-medium : 2px;
        --font-regular:18px;
        --font-small:16px;
        --font-micro:14px;

        --size-border-radius :4px;
        --animation-duration:300ms;
        }

        *{box-sizing: border-box;}

        body{
        font-family: 'twayair', sans-serif;
        margin:0;
        }

        a{
        text-decoration: none;
        color: var(--color-white);
        }

        ul{
        padding-left: 0;
        }

        li{
        list-style: none;
        }

        button {
        background-color: var(--color-white);
        cursor: pointer;
        border: none;
        outline: none;
        border-radius: 5%;
        }

        h1 {
        font-size: 4rem;
        /* font-weight: bold; */
        color: var(--color-white);
        margin: 16px 0px;

        }
        h2 {
        font-size: 2.5rem;
        color: var(--color-black);
        margin: 8px 0px;

        }
        #first{
        padding-left: 40px;
        }
        h3 {
        font-size:1,8rem;
        font-weight: bold;
        color: var(--color-black);
        margin: 8px 0px;
        }

        p{
        font-size: 1,8rem;
        color: var(--color-black);
        margin: 4px 0;
        }

        .ends{
        padding-left: 20px;
        padding-right: 20px;
        }
        .end{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: var(--color-white);

        }
        .end > li{
        margin: 8px;
        color: blue;
        }

        .about__ends{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: var(--color-white);
        }

        .job__story{
        color: gray;
        font-size: 14px;
        }

        /* Navbar */

        #navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 16px 6px 16px;
        background-color: var(--color-white);
        }

        .navbar__logo {
        font-size: var(--font-medium);
        font-weight: bold;
        color: var(--color-white);
        padding-left: 200px;
        }

        .navbar__menue {
        padding-right: 200px;
        display: flex;
        text-align: center;
        }

        .navbar__menue__item {
        padding: 8px 12px;
        margin: 0 4px;
        color: var(--color-black);
        cursor: pointer;
        }

        .navbar__menue__item.active {
        /* border: 1px solid black; */
        border-radius: var(--size-border-radius) ;
        }



        .navbar__toggle-btn {
        position: absolute;
        top: 24px;
        right: 32px;
        font-size: 24px;
        color: gray;
        display: none;
        }

        /* home */
        #home {
        background: url(./images/bg.jpg) center/cover no-repeat;
        padding: 40px;
        text-align: center;
        height:500px;
        width: auto;
        padding-top: 100px;
        margin: 20px;
        }


        .home__title, .home__description {

        color : var(--color-white)
        }
        /* .home__description{
        text-shadow: 3px 3px 1px var(--color-black);
        } */

        .home__contact {
        color: var(--color-black);
        font-size: var(--font-regular);
        font-weight: bold;
        margin: 24px;
        padding: 8px 12px;
        border: 2px solid var(--color-white);
        border-radius: var(--size-border-radius);

        }
        .home__container{

        text-align: left;
        /* padding-left: 100px;} */}

        .section {
        padding: 50px;
        text-align: center;
        margin: auto;
        }

        .section__container {
        max-width: 1200px;

        margin: auto;
        }



        .about__jobs{
        display: flex;
        justify-content: center;
        margin:  0;

        }

        .home__container{
        display: flex;
        justify-content: center;
        margin:  0;

        }

        .job > img {
        border: 1px solid ;
        width: 200px;
        height: 100%;
        font-size: 60px;
        margin: auto;
        color: white;
        margin: 70px;

        }

        .about__edus{
        display: flex;
        justify-content: center;
        margin:  0;


        }

        .about__ends{
        display: flex;
        justify-content: center;
        margin:  0;
        }



        .about__majors{
        display: flex;
        justify-content: space-between;
        margin: 80px 0;
        }

        .major__icon {
        width: 170px;
        height: 170px;
        line-height: 170px;
        font-size: 70px;
        margin: auto;
        color: gray;
        border: 1px solid ;
        border-radius: 50%;
        margin-bottom: 16px;
        }

        .major__icon i {
        transform: all var(--animation-duration) ease ;
        }

        .major__icon:hover i {
        color: black;
        transform: rotate(-30deg) scale(1.1);
        }

        .major__title, .major__description{
        color: var(--color-black);
        }
        .major__description{font-size: var(--font-small);}

        .logos{
        display: flex;
        justify-content: space-between;
        }
        .logo{
        margin: 10px;
        margin-top: 50px;
        width: 80px;
        border-radius: 50%;
        border: solid var(--color-asd);
        }


        .job__name{font-size: var(--font-small);}
        .job_period{
        font-size: var(--font-micro);
        }

        .about__jobs__icon {
        width: 150px;
        height: 60px;
        } */

        /*기술*/
        #skills{
        background-color: beige;
        }

        .skillset{
        display: flex;
        background-color: var(--color-asd);
        color: var(--color-white);
        margin: 20px 0;
        }

        .skillset__title {
        color: var(--color-white);
        }

        .skillset__left {
        flex-basis: 60%;
        background-color: var(--color-black);
        padding: 20px 40px;
        }

        .skill {
        margin-bottom: 32px;
        }

        .skill__description{
        display: flex;
        justify-content: space-between;
        }

        .skill__bar {
        width: 100%;
        height: 3px;
        background-color: var(--color-asd);
        }

        .skill__value {
        height: 3px;
        background-color: var(--color-orange);
        }

        .skillset__right{
        flex-basis: 40%;
        }
        .tool{
        padding: 20px;
        background-color: var(--color-asd);
        }

        .etc {
        padding: 20px;
        }

        /* 내 작업실 */

        .work__categories{
        margin: 40px;
        }

        .category__btn{
        border: 1px solid var(--color-asd);
        border-radius: var(--size-border-radius);
        font-size: var(--font-regular);
        padding: 8px 48px;
        }

        .category__btn.active, .category__btn:hover{
        background-color: var(--color-orange);
        color: var(--color-white);
        }

        .category__btn.active .category__count,
        .category__btn:hover .category__count{
        opacity: 1;
        top: 0;
        }

        .category__count {
        background-color: var(--color-orange);
        border-radius: 50%;
        color: var(--color-white);
        width: 24px;
        height: 24px;
        line-height: 24px;
        display: inline-block;
        position: relative;
        top: -20px;
        left: 4px;
        opacity: 0;
        transition: all var(--animation-duration) ease-in;
        }

        div.ha{
        width: 300px;
        font-size: 5px;
        }

        div.h{
        width: 500px;
        }

        .project:hover .project__description {
        opacity: 0.8;
        transform: translateY(0px);
        }
        .project__description h3 {
        color: var(--color-white);
        }

        .project__description h3:after {
        content: '';
        display: block;
        position: relative;
        left: 50%;
        width: 25px;
        height: 2px;
        margin-left: -12px;
        margin-top: 8px;
        background-color: peru;
        }

        /* 추천서 */

        #skill{
        background-color: blanchedalmond;
        }
        #testimonials{
        background-color: var(--color-asd);
        }

        .testimonials {
        margin: 40px;
        }
        .testimonial {
        display: flex;
        margin: 32px 0;
        }
        .testimonial__avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        }

        .testimonial__avatar:nth-child(odd){
        margin-right: 40px;
        }

        .testimonial__avatar:nth-child(even){
        margin-left: 40px;
        }

        .testimonial__speech-bubble {
        padding: 18px;
        background-color: var(--color-white);
        border-radius: var(--size-border-radius);
        }

        .testimonial__speech-bubble p {
        color: var(--color-black);
        }

        .testimonial__speech-bubble a{
        color: var(--color-orange);
        }

        #contact {
        background-color: var(--color-white);
        }



        .about__avi{width: 100%;}
        @media screen and (max-width : 768px) {
        .navbar__toggle-btn {
        display: block;
        }
        .git {
        display: block;
        }
        #navbar {
        flex-direction: column;
        align-items: flex-start;
        }

        .navbar__logo{
        position: relative;
        right:200px ;
        }

        .navbar__menue{
        flex-direction: column;
        text-align: center;
        width: 100%;
        display: none;
        }
        #home{
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-align: center;
        width: 100%;
        height: 100%;
        }
        h2.home__title{
        font-size: 2rem;
        }
        h3.home__description {
        font-size: 1rem;
        text-align: center;
        /* width: 300px; */

        }

        .about__majors {
        flex-direction: column;
        }
        div.h{
        width: 300px;
        margin: 0 auto;
        }
        .home__container{

        text-align: center;
        width: 100%;
        flex-direction: column;
        }

        .major{
        margin-bottom: 38px;
        }
        .avi{
        width: 100%;
        display: flex;
        flex-wrap : wrap;
        }
        .ha{
        margin: 0 auto;
        }
        .map{
        width: 100%;
        display: flex;
        flex-wrap : wrap;
        }


        .about__jobs{
        margin: 0 auto;
        flex-direction: column;
        }

        .about__edus{
        margin: 0 auto;
        flex-direction: column;
        }

        .about__ends{
        margin: 0 auto;
        flex-direction: column;
        }
        .ends{
        font-size: 0.6em;
        }

        .git{
        display: none;
        }

        .img{width: 100%;}

        .skillset {
        flex-direction: column;
        }


        .project{
        flex-grow: 1;
        }
        .testimonial__avatar{
        width: 80px;
        height: 80px;
        }
        #home{
        margin: 0 auto;
        text-align: center;
        width: 100%;


        }
        }

저작자표시 비영리 변경금지

'Frontend > CSS' 카테고리의 다른 글

CSS 홈페이지 틀 만들기(휴대폰, 태블릿, 컴퓨터) (0)	2022.11.01
CSS (transform, animation, transition) (0)	2022.10.31
CSS( 미디어쿼리, em, rem) (0)	2022.10.31
CSS (레이아웃 종류, flex 종류) (0)	2022.10.31
CSS (box-model, padding, margin, border, display, form) (0)	2022.10.31

현재글CSS(구 GitHub 클린코딩, 미디어쿼리(Media Query))

저장소 복습용 블로그

저장소

복습용 블로그

ChatGPT, CSS, 리눅스, javascript, java, 프로젝트, 자바스크립트, html, jsp, 자료구조, 백준, 코딩테스트, 알고리즘, 국비지원, 기본, 파이썬, 오블완, 자바, Spring, 티스토리챌린지,

Today :
Yesterday :

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

저장소

CSS(구 GitHub 클린코딩, 미디어쿼리(Media Query))

✔ HTML 부분

✔ CSS 부분

'Frontend > CSS' 카테고리의 다른 글

'Frontend/CSS'의 다른글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

2025. 04
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

CSS(구 GitHub 클린코딩, 미디어쿼리(Media Query))

✔ HTML 부분

✔ CSS 부분

'Frontend > CSS' 카테고리의 다른 글

'Frontend/CSS'의 다른글

관련글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역