Responsive Web Design Project: Build a Landing Page

HTML-CSS
1

I’m working on a glorious Landing Page in Codepen.

I’m happy with how the page is progressing, but I’m having a problem with container5-6

In container5 the Youtube video isn’t rendering on the page.

And in Container6 I’m really having trouble formatting the Flexboxes I’ve created (It’s my first time using the Flexbox Layout and I must be missing something.). The text is coming out in all the wrong places and I can’t position the images I’m using.

I feel like the video problem should be pretty straight forward; you can just tell me the correct code and I’ll add it in. The layout and flexboxes I would really appreciate information and advice, because I’m having the most difficulty learning how to optimally code position and layouts of elements.

Thanks in advance for any help you can offer. Here’s the code:

<style>
body{
  background: hsl(300, 100%, 93%);
    height: 1000px;
}
#header {
  position: relative;
  background: white;
  height: 110px;
  position: fixed;
  width: 100%;
}
#header-img {
  
}
#nav-bar {
  float: right;
  padding: 35px;

}
.padding1{

  padding: 25px;
 
}
.container1 {
  padding-top: 75px;
  height: 225px;
}

.title {
  font-size: 30px;
  padding: 15px;
}
.container2 {
  height: 135px;
  width: 100%
}
.sub-header {
  padding-left: 210px;
  font-size: 23px;
 z-index: -1;
  position: absolute;
}
.sub-header-img {
 padding-left: 90px;
  position: absolute;
  z-index: -1;
}
.sub-header-text {
  padding-left: 230px;
  padding-top: 60px;
}
.container3 {
  height: 135px;
}
.container4 {
  height: 135px;
}
.container5 {
  height: 400px;
}
.container6 {
  display: flex;
  flex-row: column;
  height:350px;
  padding: 15px;
}
.flexbox {
  flex: 1;
  padding: 40px;
  border: 1px;
  border-color: black;
  margin: 10px;
  background-color: white;
  text-align: center;
}
.flexbox-img {
  height: 190px;
  width: 190px;
  text-align: center;
}
.footer {
  height: 90px;
  background-color: yellowgreen;
}
#nav-bar2 {
padding-left: 875px;
  padding-top: 25px;
  position: absolute;
}
.copyright {

 padding-left: 950px;
  padding-top: 25px;
}
.padding2{

  padding: 10px;
 
}
</style>

<body>
<header id="header"><a href="#"><img src="https://www.ahcafr.com/wp-content/forum/uploads/2017/03/fleshlight-logo.jpg" alt="fleshlight-logo" id="header-img"></a><nav id="nav-bar"><a href="https://www.fleshlight.ca/" class=padding1> Flesh Link 1</a> <a href="https://www.amazon.ca/" class="padding1"> Flesh Link 2</a> <a href="https://www.ebay.ca/" class="padding1">Flesh Link 3</a></nav></header>
  
  <section class="container1"> <><strong><center><p class="title">Fleshlight: The Number One Selling Sex-Toy for Men</center></strong></p><form acion="/action_page.php"><center>
  Email: <input type="email" name="email-address" placeholder="enter your email">
  <br>
  <br>
  <input type="submit" class="button" value="Join Our Mailing List">
 </center> </form></section>

<section class="container2"><img src="https://cdn3.iconfinder.com/data/icons/pixel-perfect-at-24px-volume-5/24/2076-512.png" width=" 90px" height="90px"class="sub-header-img"><p class="sub-header">begin section</p> <p class="sub-header-text">text under sub-header </section>

<section class="container3"><img src="https://cdn3.iconfinder.com/data/icons/interaction-design/512/Form2-512.png" height="90px" width="90px" class="sub-header-img"><p class="sub-header">sub header 2</p>
  <p class="sub-header-text"> sub header text 2</p></section>

<section class="container4"><img src="https://cdn3.iconfinder.com/data/icons/edition/100/hand_curser_rounded-512.png" height= "90px" width="90px" class="sub-header-img"><p class="sub-header"> text goes here</p> <p class="sub-header-text"> text goes here</p></section>

<section class="container5"><center><iframe src="https://www.youtube.com/watch?v=yxe7FbuXNSk" width="420" height="315"></iframe></center>
                                    
  <section class="container6"><p class="flexbox">text text text<img src="http://i1.wp.com/manilalovetoys.com/wp-content/forum/uploads/2015/12/fleshlight-pink-mouth-design-2.jpg?resize=300%2C300" class="flexbox-img"></p>
  <p class="flexbox"> text text <img src="" class="flexbox-img"></p>
    <p class="flexbox"> text text <img src="" class="flexbox-img"></p></section>
  
  <footer class="footer">
    <nav id="nav-bar2"><a href="https://www.fleshlight.ca/" class=padding2> Flesh Link 1</a> <a href="https://www.amazon.ca/" class="padding2"> Flesh Link 2</a> <a href="https://www.ebay.ca/" class="padding2">Flesh Link 3</a></nav><br>
    <p class="copyright">Copyright Mark Sugden Inc.</p>
    </footer>
</body>
2

Can you share your code via codepen?

3

@shimphillip https://codepen.io/MarkSugden88/pen/vzrQPK

4

To embed a youtube video. Take a look at this.

https://support.google.com/youtube/answer/171780?hl=en

Maybe someone else can help out with flexbox :slight_smile:

1 Like
5
  • this should be flex-direction:column.
  • there is no need to wrap image within a paragraph element, write them separately.
<p class="flexbox"> Easy to use! Easy to Clean! Dries quickly after each use. <img src="" class="flexbox-img"></p>

if you want your image and paragraph to be together, contain them in a div

<div>
    <p>paragraph</p>
    <img src="" >
</div>
  • You would need to set media queries for realigning of layout for small viewports.

A little explanation, You have set the display property of your div container with class “container-6” to flex, which means this container is now a flexible box hence all flex properties would be utilized to align its direct children i-e the flex items (in your case these are the <p> paragraph element.) Some flex properties apply on the flex container/ flexible box and some are applied on the flex items. Flex properties would not affect any sub-children.

1 Like
6

@ridafatima15h1 that helps a lot! I feel like I better understand the concept of the flexbox layout. Much appreciated.

@shimphillip thanks for the tip!

1 Like