Hi.
I’m a 67 y.o. nerd, trying to complete this course to a) exercise my brain and b) to keep in touch with the ‘real world’.
Right now, I’m on Project 3 Landing Page.
I’m currently struggling with Flex.
I’ve got all the user stories in my code (not pretty, admittedly, but I plan to make it prettier later).
However, to my chagrin:
If my Flex definitions aren’t placed as the very first item in my <style>, it doesn’t work! Anything I place beforehand (besides the one line you’ll see) results in my flex-container being ignored.
And when I get a ‘working’ version going and subsequently split the code into CSS and HTML for the codepen.io – low and behold, it’s screwed again!!
Just can’t figure out, why not? It’s driving my nuts.
I’m sure you’ll see the error quickly. Please explain the principle behind it.
My thanks in advance.
Here’s the (ugly) code:
<style>
body {
background: url(https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png);
} /*This line before the container doesn't affect the flex display. Everything else does*/
#box-container {
background: #DCDCDC;
display: flex;
height: 200px;
align-items: center;
justify-content: space-around;
}
#hotels {
background-color: #1E90FF;
width: 200px;
font-size: 24px;
}
#museums {
background-color: #FF4500;
width: 200px;
font-size: 24px;
}
#restaraunts {
background-color: #F4A460;
width: 200px;
font-size: 24px;
}
#nav-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #48D1CC;
}
.nav-link {
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin-right: 20px;
h1 {
color: #FFFF00;
font-size: 30px;
font-family: sans-serif, monospace;
background: #800080;
padding: 20px;
}
p {
color: #000;
font-size: 18px;
font-family: sans-serif, monospace;
padding:50px;
}
@media (max-height: 800px){
p {
font-size: 10px;
} /*Just included to forfill the project criteria. Not exactly useful but all that's been taught until now. Sensible suggestions welcomed */
video {
object:position: 50% 50%;
object-fit: contain;
}
</style>
<body>
>br><br><br>
<header id="header">
<h1 id="titel"> Visting Munich </h1>
<img src="https://app.muenchen.de/img/logos/2020-muenchen-de-logo-150.png" width="150" height="30" border="0" alt="Munich City Portal"><br>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#hotels">Hotels</a></li>
<li><a class="nav-link" href="#museums">Museums</a></li>
<li><a class="nav-link" href="#restaraunts">Restaraunts</a></li>
<li><a class="nav-link" href="#email">Receive our Newsletter</a></li>
<li><a class="nav-link" href="#video">Watch a video</a></li>
</header>
<br><br><br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label id="email" for="email">Newsletter:</label><br>
<input type="email" id="email" name="email" size="50" placeholder="Please enter your eMail address">
<button id="submit" type="submit" >Submit to subscribe </button>
</form><br><br><br>
<p>Watch a video of Munich by sunset</p>
<video id=“video“ width="320" height="240" controls>
<source src="https://ak.picdn.net/shutterstock/videos/1015647550/preview/stock-footage-aerial-view-of-munich-city-germany-at-sunrise-cathedral-church-of-our-lady-frauenkirche-in.webm" type="video/mp4">Your browser does not support the video format.
</video>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="box-container">
<div id="hotels"><p>Hotels</p></div>
<div id="museums"><p>Museums</p></div>
<div id="restaraunts"><p>Restaraunts</p></div>
</div>
<br><br>
<footer>
<div id="about us">About us</div>
</footer>
</body>
