Как мне сделать так, чтобы моя навигация не перетекла на мой div - PullRequest
0 голосов
/ 31 октября 2019

Я изучаю интерфейсную веб-разработку и застрял в том, как сделать свой сайт отзывчивым. В настоящее время я пытаюсь остановить наложение навигации на следующий контейнер div. Как мне это сделать, пожалуйста, и если у вас есть какие-либо другие советы о том, как сделать мой сайт отзывчивым, это было бы здорово, спасибо.

Правильно ли я использую медиазапросы? Теперь я осознаю, что должен использовать мобильный подход в первую очередь, но сначала я просто копировал макет, который видел в Интернете, поэтому мне пришлось делать это наоборот.

Мой код указан на codepen, здесь: https://codepen.io/wmufunde/pen/vYYWOBy

<html>
<head>
    <title>Best Bakery Company</title>

    <link href="https://fonts.googleapis.com/css?family=Jomolhari|Tangerine|Work+Sans&display=swap" rel="stylesheet">

</head>

<header>
    <nav>
        <ul>
            <li id="logo-top"><a href="#">Best Bakery Company</a></li>
            <li class= "nav"><a href="#">WELCOME</a></li>
            <li class= "nav"><a href="#">MENU</a></li>
            <li class= "nav"><a href="#">RESERVATIONS</a></li>
            <li class= "nav"><a href="#">NEWS</a></li>
            <li class= "nav"><a href="#">CONTACT</a></li>
            <li class= "nav"><i class="fab fa-twitter"></i></li>
            <li class= "nav"><i class="fab fa-facebook-f"></i></li>
            <li><i class="fab fa-instagram"></i></li>
        </ul>
    </nav>

    <div id="headings">
        <h1>Pastry with love</h1>
        <h2>We're bringing you fresh ingredients<br> everyday in ways you can't resist.</h2>
        <button class="btn">Menu</button>
    </div>
</header>

<body>

    <div class="row" id="background1">
        <div class="column">
            <h1>Art of cakes</h1>
            <h2>We create delicious memories</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit pellentesque habitant morbi. Mauris augue neque gravida in fermentum et sollicitudin ac.</p>
            <h3>Chef cook</h3>
            <div = id="chef"><img src="img/chef.jpg" align="middle"></div>
            <p id="cursive">Unique creatives for unique reasons</p>

        </div>

        <div class="column" id="relative">
            <div class ="row-pastry" id="padding">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry1.jpg">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry2.jpg">
            </div>
            <div class="row-pastry">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry3.jpg">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry4.jpg">
            </div>
            <div id="icon"><p>TASTES SO <br>GOOD!</p></div>
        </div>

    </div>

    <div class="row" id="background2">

        <div class="column center"id="white">

            <h1>Tasty Pancakes</h1>
            <h2>Season Favourites</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit pellentesque habitant morbi. Mauris augue neque gravida in fermentum et sollicitudin ac.</p>
            <div class="image-circle">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/blueberry.jpg">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pancake.jpg">
                <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pancake2.jpg">
            </div>
        </div>
    </div>

    <div class="row" id="background3">
        <div class="column breakfast">
            <h1>Breakfast</h1>
            <p>7AM Breakfast? We're Open!</p>

            <h2>Full Breakfast</h2>
            <p>Lorem ipsum dolor sit amet</p>
            <h3>£12.50</h3>

            <h2>Toast and Jam</h2>
            <p>Lorem ipsum dolor sit amet</p>
            <h3>3.50</h3>

            <h2>Muffins</h2>
            <p>Lorem ipsum dolor sit amet</p>
            <h3>£4.99</h3>
        </div>
    </div>

    <div class="row" id="background4">

        <div class="column meal">
            <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/wheat.jpg">
            <h1>Wheat</h1>
            <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/eggs.jpg">
            <h1>Eggs</h1>
            <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/cheese.jpg">
            <h1>Cheese</h1>
        </div>

        <div class="column sandwich">
            <h1>The Jibarito Sandwich</h1>
            <h2>The Best Sandwich you've Ever Tasted!</h2>
            <img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/sandwich.jpg">
        </div>
    </div>
<script src="https://kit.fontawesome.com/5b02610863.js" crossorigin="anonymous"></script>
</body>

<footer>
    <ul>
        <li><a href ="#">Our Menu</a></li>
        <li><a href ="#">Gallery</a></li>
        <li><a href ="#">Culture</a></li>
        <li id="logo-footer"><a href ="#">Best Bakery Company</a></li>
        <li><a href ="#">Events</a></li>
        <li><a href ="#">Catering</a></li>
        <li><a href ="#">Visit Us</a></li>
    </ul>
</footer>

    /* ==========================================
                                            Page 1 & Navigation
============================================ */
header {
    background-image: url("http://wadzanai.co.uk/100daysofcode/Day7/img/header.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}


nav {
    position: fixed;
    top: -20px;
    z-index: 1500;
    width: 100%;
    /* display: block; */

}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    background: rgba(0,0,0, 0.5);
    height: 50px;
}

a {
    text-decoration: none;
    color:white;
}

 nav ul li  {
    list-style: none;
    color: white;
    padding-top: 1%;
    font-family: 'Work Sans', sans-serif;
}

#logo-top {
    font-family: 'Tangerine', cursive;
    font-size: 45px;
    padding-top: 0;
    flex-grow: 5;
}

nav ul li {
    flex-grow: 1;
}

header h1 {
    font-family: 'Jomolhari', serif;
    color: white;
    font-size: 50px;
    letter-spacing: 5px;
}

header h2 {
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    color: white;
    letter-spacing: 5px;
}
#headings {
    display: flex;
    min-height: 80vh;
    width: 100%;
    flex-direction: column;
}

#headings h1,h2, .btn {
    margin: auto;
}

.btn {
    padding: 20px 80px;
    background: rgba(0,0,0, 0.5);
    border-radius: 50px;
    border-color: black;
    color:white;
}

.row {
    display: flex;
    justify-content: flex-start;
    position: relative;
    height: 100vh;
}

/* ==========================================
                                            Page2
============================================ */
#background1 {
    background-color: beige;
}

.column{
    width:50vw;

}

.column h1, h2 {
        font-family: 'Jomolhari', serif;
}

.column h1, h2, h3, p, #chef img {
    text-align: center;
}
.column h1 {
    font-size: 50px;
    color: #330000;

}

.column h2 {
    font-size: 25px;
    color: saddlebrown;

}

.column p {
    font-family: 'Work Sans', sans-serif;

}

#cursive{
    font-family: 'Tangerine', cursive;
    font-size:50px;
}
#chef img{
    border-radius: 50%;
    width: 15vw;
    height: 20vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row-pastry img {
    height: 25vh;
    width: 150%;

}

.row-pastry {
    width: 25%;
    display: flex;
    padding-left: 5vw;
}

#padding {
    padding-top: 15vh;
}

#icon{
    width: 50%;
    position: absolute;
  top: 27%;
  right: 26.5%;
    background-color: white;
    height: 200px;
    display: flex;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);


}

#icon p{
    padding-top: 20%;
    padding-left: 35%;
}

#relative {
    position: relative;
}

/* ==========================================
                                        Page 3
============================================ */
#background2 {
     background-image: url(http://wadzanai.co.uk/100daysofcode/Day7/img/background2.jpg);
    background-repeat: no-repeat;
    background-size: cover;

}

.center {
    margin: auto;
}

#white {
background: white;
    height:60%;
    width:50vw;
    margin: auto;
    padding: 2%;

}

.image-circle { 
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    min-height: 50vh;
}
.image-circle img {
    height: 10vh;
    width: 5vw;
    border-radius: 50%;
}

/* ==========================================
        Page 4 - Breakfast Menu
============================================ */

#background3 {
     background-image: url(http://wadzanai.co.uk/100daysofcode/Day7/img/background3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    min-width: 50vw;
}

.breakfast {
    background:rgba(255, 255, 255, 0.75);
    margin:auto;
    width: 25vw;
    height: 100vh;
}

/* ==========================================
        Page 5 - Sandwich
============================================ */

#background4 {
    background: beige;
    padding: 2%;
}
.meal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 50vw;

}
.meal img {
    width: 10vw;
    border-radius: 50%;
    margin: auto;
}

.meal h1 {
    font-size: 25px;
    text-align: left;
    margin: auto;
}

.sandwich img {
    width: 33vw;

}

/* ==========================================
                                            Footer
============================================ */

footer {
 background-color: saddlebrown;
}
footer ul li {
    list-style: none;
    color:black;
    font-size: 25px;
    font-family: 'Work Sans', sans-serif;
    flex-grow: 1;
}

footer ul {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

#logo-footer {
    font-family: 'Tangerine', cursive;
    font-size: 45px;
    flex-grow: 2;
}

/* ==========================================
                                            Transitions and Transforms
============================================ */

li a:hover {
    color: yellow;
}

 .btn {
    transition-duration: 2s;
    transition-property: scale;
}

.fab {
    transition-duration: 0.5s;
    transition-property: scale;
}

.fab:hover, .btn:hover {
    transform: scale(1.2);
}

/* Page 2 */

.image-circle img {
    transition-duration: 1s;
    transition-property: transform;
}

.image-circle img:hover {
    transform: rotate(30deg);
}

/* ==========================================
                                            Page 1 & Navigation Media Queries
============================================ */

@media screen and (max-width: 850px) {

    nav ul {
    display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: 250px;
        text-align: center;
        }

    footer ul {
        flex-direction: column;
        flex-wrap: nowrap
        }

    .breakfast {
        width: 50vw;
        }

    .center h1 {
        font-size: 30px;
        }

    .center h2 {
        font-size: 20px;
        }

    .center p {
        font-size: 15px;
    }
    }

@media screen and (max-width: 625px) {
    .sandwich h1 {
        font-size: 30px;
    }

    .sandwich h2 {
        font-size: 20px;
    }
}

@media screen and (max-width: 600px) {

    .row-pastry {
        flex-direction: column;

    }

    .row-pastry img {

    height: auto;
    }

    #icon {
        display: none;
    }
} 
...