Nekit Crutoy

avatar
unknown
html
4 years ago
5.7 kB
13
Indexable
<!DOCTYPE html>
<html lang="ru">

<head>
    <title>Dubai</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap Reboot CSS -->
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- FontAsome -->
    <script src="https://kit.fontawesome.com/87cc034f51.js" defer crossorigin="anonymous"></script>
    <link rel="stylesheet" href="fonts/font-awesome/css/all.css">
    <!-- GoogleFonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
    <!-- Main CSS -->
    <link rel="stylesheet" href="css/main.css">
    <!-- Main JS -->
    <script src="https://kit.fontawesome.com/87cc034f51.js" crossorigin="anonymous"></script>
    <!-- JS -->
    <script src="/js/app.js" defer></script>
  

    <!-- DataPicker -->
    <!-- <script
        type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"
    ></script>
    <link
        rel="stylesheet"
        type="text/css"
        href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"
    /> -->

</head>

<body>
    <header class="header" id="header">
        <div class="container">


            <div class="navigation">
                <div class="row">
                    <div class="col-lg-2 text-left">
                        <div class="logo">
                            <img src="img/logo.svg" alt="logo" class="logo__picture">
                            <span class="logo__text">Logo</span>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <ul class="nav">
                            <li class="nav__block">
                                <div class="nav__text">
                                    <span class="nav__question">
                                    Where are you going? 
                                </span><br>
                                    <span class="nav__option">
                                    Burj Al Arab
                                </span>
                                </div>
                                <div class="nav__block-xmark">
                                    <i class="fa-regular fa-circle-xmark nav__xmark"></i>
                                </div>

                            </li>
                            <li class="nav__block">
                                <div class="nav__text">
                                    <span class="nav__question">
                                    Dates 
                                 </span><br>
                                    <span class="nav__option">
                                    26 May - 4 June
                                </span>
                                </div>
                                <div class="nav__block-xmark">
                                    <i class="fa-regular fa-circle-xmark nav__xmark"></i>
                                </div>
                            </li>
                            <li class="nav__block">
                                <div class="nav__text">
                                    <span class="nav__question">
                                    Guests  
                                </span><br>
                                    <span class="nav__option">
                                    2 guests
                                </span>
                                </div>
                                <div class="nav__block-xmark">
                                    <i class="fa-regular fa-circle-xmark nav__xmark"></i>
                                </div>
                            </li>
                            <li class="nav__button">
                                <a href="#" class="nav__btn">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    <span class="nav__button_text">Search</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-2">
                        <div class="nav__user">
                            <div class="nav__user_name">
                                <span>Yura Karmakov</span>
                            </div>
                            <div class="nav__user_burger">
                                <a href="#">

                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>    
    </header>

    <div style="
        position: absolute !important;
        top: 100px;
        right: 0;
        height: calc(100vh - 100px);
        z-index: -1;
        width: 50%;" id="map">
    </div>

    <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA12E9PdU6N9-yj2_SNmMeXEpSlwcYdrQA&callback=initMap"
            defer
        ></script>

        <script>
            let map;

            function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: -34.397, lng: 150.644 },
                zoom: 8,
            });
            }

            window.initMap = initMap;

        </script>
</body>

</html>
Editor is loading...