Section 13

AWESOMee·2022년 4월 6일

bootstrap udemy web developer

Udemy Web Developer Bootcamp

목록 보기

12/17

Udemy Web Developer Bootcamp Section 13

Museum of Candy Project

Part 1

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="app.css">

    <title>Museum of Candy</title>
  </head>
  
  <body>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  </body>
</html>

Part 2

    <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
      <a href="#" class="navbar-brand">CANDY</a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navLinks">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="" class="nav-link">HOME</a>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link">ABOUT</a>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link">TICKETS</a>
          </li>
        </ul>
      </div>
    </nav>

body {
    background-color: #f5d9df;
    font-family: "Nunito";
}

#mainNavbar {
    font-size: 1.5rem;
    font-weight: 100;
}

#mainNavbar .nav-link {
    color: white;
}

#mainNavbar .nav-link:hover {
    color: #ea1c2c;
}

#mainNavbar .navbar-brand {
    color: #ea1c2c;
  }

py-0

Part 3

<section class="container-fluid px-0">
  <div class="row align-items-center">
    <div class="col-lg-6">
      <div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">
        <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
      </div>
    </div>
    <div class="col-lg-6">
      <img class="img-fluid" src="imgs/hand2.png" alt="">
    </div>
  </div>
</section>

#headingGroup span {
    color: #ea1c2c;
}

#headingGroup h1 {
    font-weight: 100;
    font-size: 4rem;
}

@media (max-width: 1200px) {
    #headingGroup h1 {
        font-weight: 100;
        font-size: 3rem;
    }
}

@media (max-width: 1200px)
d-none d-lg-block

Part 4

<section class="container-fluid px-0">
  <div class="row align-items-center content">
    <div class="col-md-6 order-2 order-md-1">
      <img class="img-fluid" src="imgs/milk.png" alt="">
    </div>
    <div class="col-md-6 text-center order-1 order-md-2">
      <div class="row justify-content-center">
        <div class="col-10 col-lg-8 blurb">
          <h2 class="">MUSEUN OF CANDY</h2>
          <img class="d-none d-lg-inline" src="imgs/lolli_icon.png" alt="">
          <p class="lead">Lorem*2</p>        
        </div>
      </div>
    </div>
  </div>
</section>

.blurb h2 {
    color: #ea1c2c;
    font-weight: 100;
    font-size: 2.5rem;
}

.blurb p {
    color: #f498b8;
    font-weight: 100;
    font-size: 1.125rem;
    line-height: 2;
}

.content {
    margin-top: 100px;
}

lolli-icon:d-none d-lg-inline col-10 col-lg-8
img:order-2 order-md-1 text:order-1 order-md-2

Part 5

(small JavaScript)

<script>
  $(function () {
  $(document).scroll(function() {
  var $nav = $("#mainNavbar");
  $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
  });
  });
</script>

신기하지만 아직은 도통 무슨 말인지 알수가 없음..

.navbar.scrolled {
    background-color: rgb(222,192,222);
    transition: background 500ms;
}

FINAL

https://gist.github.com/awesomekimn/c6369ceb62e8986ea916a8b5f6ce87f3

AWESOMee

개발을 배우는 듯 하면서도

이전 포스트

Section 12

다음 포스트