I’ve been facing an issue with 2 test suites that I’m sure should pass. My product landing page has flexbox and media queries, yet I can’t pass these two tests. kindly guide me is there a technical issue with the compiler.
It is impossible for us to see what is wrong without your code. Please post your code. Thanks
1 Like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Product Landing page</title>
</head>
<body>
<!---Navbar------>
<header id="header">
<nav id="nav-bar"class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container px-1">
<a class="navbar-brand" href="#">
<img id="header-img" src="https://w7.pngwing.com/pngs/915/781/png-transparent-crochet-thread-handicraft-aran-jumper-pattern-others-miscellaneous-hat-logo.png"
alt="" width="80" height="70" class="d-inline-block align-text-top">
</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#intr">Introduction</a>
<a class="nav-link" href="#tut">Tutorials</a>
<a class="nav-link" href="#ppr">Pricing</a>
<a class="nav-link" href="#cnt">Contacts</a>
</div>
</div>
</div>
</nav>
</header>
<!---------Main Image section-------->
<section class="main-img">
</section>
<!------join our news leetter section----->
<section class="news-letter">
<div class="container d-flex justify-content-between align-items-center p-4">
<div>
<h3 class="price-heading">Subscribe our news letter</h3>
</div>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<div class="d-flex justify-content-between align-items-center">
<input id="email" type="email" name="email" class="form-control" placeholder="Enter your email" id="exampleInputEmail1"
aria-describedby="emailHelp">
<input id="submit" type="submit" class="btn btn-primary">
</div>
</form>
</div>
</section>
<!------------about us------------>
<section>
<div class="mt-5 container d-flex justify-content-center align-items-center ">
<h2 id="intr"class="aboutus price-heading">About crochet</h2>
</div>
<div class="mt-2 container d-flex justify-content-center align-items-center">
<p>Crochet is a process of creating textiles by using a crochet hook to interlock loops of yarn, thread, or
strands of other materials. The name is derived from the French term crochet, meaning 'small hook'.
Hooks can be made from a variety of materials, such as metal, wood, bamboo, or plastic. Learn more about
it on wikipedia.</p>
</div>
</section>
<!------------tutorial------------>
<section>
<div class="mt-5 container d-flex justify-content-center align-items-center ">
<h2 class="aboutus price-heading clearfix" id="tut">Here's a tutorial of how to crotchet for absolute beginners:</h2>
</div>
<div class="container mt-3">
<iframe id="video" src="https://www.youtube.com/embed/aAxGTnVNJiE" title="YouTube video player"
frameborder="0" allowfullscreen width="100%" height="450"></iframe>
</div>
</section>
<!------Pricing-->
<div id="generic_price_table">
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<!--PRICE HEADING START-->
<div class="price-heading clearfix">
<h1 class="mt-3" id="ppr">Get your tools right away</h1>
</div>
<!--//PRICE HEADING END-->
</div>
</div>
</div>
<div class="container">
<!--BLOCK ROW START-->
<div class="row">
<div class="col-md-4">
<!--PRICE CONTENT START-->
<div class="generic_content clearfix">
<!--HEAD PRICE DETAIL START-->
<div class="generic_head_price clearfix">
<!--HEAD CONTENT START-->
<div class="generic_head_content clearfix">
<!--HEAD START-->
<div class="head_bg"></div>
<div class="head">
<span>Standard</span>
</div>
<!--//HEAD END-->
</div>
<!--//HEAD CONTENT END-->
<!--PRICE START-->
<div class="generic_price_tag clearfix">
<span class="price">
<span class="sign">$</span>
<span class="currency">49</span>
<span class="cent">.99</span>
<span class="month">/MON</span>
</span>
</div>
<!--//PRICE END-->
</div>
<!--//HEAD PRICE DETAIL END-->
<!--FEATURE LIST START-->
<div class="generic_feature_list">
<ul>
<li><span>1</span> loreum ipsum</li>
<li><span>2</span> loreum ipsum</li>
<li><span>3</span> loreum ipsum</li>
<li><span>4</span>loreum ipsum</li>
<li><span>5</span> loreum ipsum</li>
</ul>
</div>
<!--//FEATURE LIST END-->
<!--BUTTON START-->
<div class="generic_price_btn clearfix">
<a class="" href="">Buy Now</a>
</div>
<!--//BUTTON END-->
</div>
<!--//PRICE CONTENT END-->
</div>
<div class="col-md-4">
<!--PRICE CONTENT START-->
<div class="generic_content active clearfix">
<!--HEAD PRICE DETAIL START-->
<div class="generic_head_price clearfix">
<!--HEAD CONTENT START-->
<div class="generic_head_content clearfix">
<!--HEAD START-->
<div class="head_bg"></div>
<div class="head">
<span>Premium</span>
</div>
<!--//HEAD END-->
</div>
<!--//HEAD CONTENT END-->
<!--PRICE START-->
<div class="generic_price_tag clearfix">
<span class="price">
<span class="sign">$</span>
<span class="currency">99</span>
<span class="cent">.99</span>
<span class="month">/MON</span>
</span>
</div>
<!--//PRICE END-->
</div>
<!--//HEAD PRICE DETAIL END-->
<!--FEATURE LIST START-->
<div class="generic_feature_list">
<ul>
<li><span>1</span> loreum ipsum</li>
<li><span>2</span> loreum ipsum</li>
<li><span>3</span> loreum ipsum</li>
<li><span>4</span>loreum ipsum</li>
<li><span>5</span> loreum ipsum</li>
</ul>
</div>
<!--//FEATURE LIST END-->
<!--BUTTON START-->
<div class="generic_price_btn clearfix">
<a class="" href="">Buy Now</a>
</div>
<!--//BUTTON END-->
</div>
<!--//PRICE CONTENT END-->
</div>
<div class="col-md-4">
<!--PRICE CONTENT START-->
<div class="generic_content clearfix">
<!--HEAD PRICE DETAIL START-->
<div class="generic_head_price clearfix">
<!--HEAD CONTENT START-->
<div class="generic_head_content clearfix">
<!--HEAD START-->
<div class="head_bg"></div>
<div class="head">
<span>Custom Legend</span>
</div>
<!--//HEAD END-->
</div>
<!--//HEAD CONTENT END-->
<!--PRICE START-->
<div class="generic_price_tag clearfix">
<span class="price">
<span class="sign">$</span>
<span class="currency">149</span>
<span class="cent">.99</span>
<span class="month">/MON</span>
</span>
</div>
<!--//PRICE END-->
</div>
<!--//HEAD PRICE DETAIL END-->
<!--FEATURE LIST START-->
<div class="generic_feature_list">
<ul>
<li><span>1</span> loreum ipsum</li>
<li><span>2</span> loreum ipsum</li>
<li><span>3</span> loreum ipsum</li>
<li><span>4</span>loreum ipsum</li>
<li><span>5</span> loreum ipsum</li>
</ul>
</div>
<!--//FEATURE LIST END-->
<!--BUTTON START-->
<div class="generic_price_btn clearfix">
<a class="" href="">Buy Now</a>
</div>
<!--//BUTTON END-->
</div>
<!--//PRICE CONTENT END-->
</div>
</div>
<!--//BLOCK ROW END-->
</div>
</section>
</div>
<!--------Contact-->
<section class="contact p-3" id="cnt">
<div class="mt-5 container d-flex justify-content-center align-items-center ">
<h2 class="aboutus price-heading clearfix">Please let us know about your feedback:</h2>
</div>
<div class="mt-2 container d-flex justify-content-between align-items-center ">
<p> <b class="bold"><i class="fa-solid fa-phone"></i> Tel:</b> +1 657 2534 90
</p>
<p> <b class="bold"><i class="fa-solid fa-envelope"></i> Email:</b> falanitamkani@gmail.com</p>
<p><b class="bold"><i class="fa-solid fa-location-dot"></i> P.O. Box:</b> St. Luisenberg, Block C-3,
Frankfurt, Germanyack</p>
</div>
</section>
<footer>
<div class="container">
<span class="copyrights">Copyrights© reserved 2022 | Crochet For All</span>
</div>
</footer>
<div class="flex">
<div class="item">
</div>
</div>
</body>
</html>
*{
padding: 0%;
margin: 0%;
font-family: "Raleway",sans-serif;
}
.flex{
height: 0;
width: 0;
display: flex;
flex-direction: row;
align-items:center;
}
.item{
align-self:auto;
}
.main-img{
height: 450px;
background-image: url(https://d2gt5azlc10ehh.cloudfront.net/news/wp-content/uploads/2019/12/CROCHETED-WORKS.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.news-letter{
height: 80px;
background-color: #f0eded;
}
.pricing{
background-color: rgb(249, 237, 223);
}
.contact{
background-color: #f0eded;
}
footer{
background-color: #000000;
}
.copyrights{
color: white;
}
#generic_price_table{
background-color: #f0eded;
}
/*PRICE COLOR CODE START*/
#generic_price_table .generic_content{
background-color: #fff;
}
#generic_price_table .generic_content .generic_head_price{
background-color: #f6f6f6;
}
#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4;
}
#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
color: #525252;
}
#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{
color: #414141;
}
#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{
color: #414141;
}
#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{
color: #414141;
}
#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
color: #414141;
}
#generic_price_table .generic_content .generic_feature_list ul li{
color: #a7a7a7;
}
#generic_price_table .generic_content .generic_feature_list ul li span{
color: #414141;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
background-color: #E4E4E4;
border-left: 5px solid rgb(249, 237, 223);
}
#generic_price_table .generic_content .generic_price_btn a{
border: 1px solid rgb(249, 237, 223);
color: rgb(249, 237, 223);
}
#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{
border-color: rgb(249, 237, 223), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgb(249, 237, 223);
color: rgb(0, 0, 0);
}
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span,
#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{
color: rgb(0, 0, 0);
}
#generic_price_table .generic_content:hover .generic_price_btn a,
#generic_price_table .generic_content.active .generic_price_btn a{
background-color: rgb(249, 237, 223);
color: rgb(3, 3, 3);
}
#generic_price_table{
margin: 50px 0 50px 0;
font-family: 'Raleway', sans-serif;
}
.row .table{
padding: 28px 0;
}
/*PRICE BODY CODE START*/
#generic_price_table .generic_content{
overflow: hidden;
position: relative;
text-align: center;
}
#generic_price_table .generic_content .generic_head_price {
margin: 0 0 20px 0;
}
#generic_price_table .generic_content .generic_head_price .generic_head_content{
margin: 0 0 50px 0;
}
#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
border-style: solid;
border-width: 90px 1411px 23px 399px;
position: absolute;
}
#generic_price_table .generic_content .generic_head_price .generic_head_content .head{
padding-top: 40px;
position: relative;
z-index: 1;
}
#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
font-family: "Raleway",sans-serif;
font-size: 28px;
font-weight: 400;
letter-spacing: 2px;
margin: 0;
padding: 0;
text-transform: uppercase;
}
#generic_price_table .generic_content .generic_head_price .generic_price_tag{
padding: 0 0 20px;
}
#generic_price_table .generic_content .generic_head_price .generic_price_tag .price{
display: block;
}
#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{
display: inline-block;
font-family: "Lato",sans-serif;
font-size: 28px;
font-weight: 400;
vertical-align: middle;
}
#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{
font-family: "Lato",sans-serif;
font-size: 60px;
font-weight: 300;
letter-spacing: -2px;
line-height: 60px;
padding: 0;
vertical-align: middle;
}
#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{
display: inline-block;
font-family: "Lato",sans-serif;
font-size: 24px;
font-weight: 400;
vertical-align: bottom;
}
#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
font-family: "Lato",sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 3px;
vertical-align: bottom;
}
#generic_price_table .generic_content .generic_feature_list ul{
list-style: none;
padding: 0;
margin: 0;
}
#generic_price_table .generic_content .generic_feature_list ul li{
font-family: "Lato",sans-serif;
font-size: 18px;
padding: 15px 0;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
}
#generic_price_table .generic_content .generic_feature_list ul li .fa{
padding: 0 10px;
}
#generic_price_table .generic_content .generic_price_btn{
margin: 20px 0 32px;
}
#generic_price_table .generic_content .generic_price_btn a{
border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
-webkit-border-radius: 50px;
display: inline-block;
font-family: "Lato",sans-serif;
font-size: 18px;
outline: medium none;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase;
}
#generic_price_table .generic_content,
#generic_price_table .generic_content:hover,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content .price,
#generic_price_table .generic_content:hover .price,
#generic_price_table .generic_content .generic_price_btn a,
#generic_price_table .generic_content:hover .generic_price_btn a{
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home{
font-family: 'Raleway', sans-serif;
}
.text-center h1,
.text-center h1 a{
color: #7885CB;
font-size: 30px;
font-weight: 300;
text-decoration: none;
}
.demo-pic{
margin: 0 auto;
}
.demo-pic:hover{
opacity: 0.7;
}
#generic_price_table_home ul{
margin: 0 auto;
padding: 0;
list-style: none;
display: table;
}
#generic_price_table_home li{
float: left;
}
#generic_price_table_home li + li{
margin-left: 10px;
padding-bottom: 10px;
}
#generic_price_table_home li a{
display: block;
width: 50px;
height: 50px;
font-size: 0px;
}
#generic_price_table_home .blue{
background: #3498DB;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .emerald{
background: rgb(249, 237, 223);
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .grey{
background: #7F8C8D;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .midnight{
background: #34495E;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .orange{
background: #E67E22;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .purple{
background: #9B59B6;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .red{
background: #E74C3C;
transition:all 0.3s ease-in-out 0s;
}
#generic_price_table_home .turquoise{
background: #1ABC9C;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .blue:hover,
#generic_price_table_home .emerald:hover,
#generic_price_table_home .grey:hover,
#generic_price_table_home .midnight:hover,
#generic_price_table_home .orange:hover,
#generic_price_table_home .purple:hover,
#generic_price_table_home .red:hover,
#generic_price_table_home .turquoise:hover{
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .divider{
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
}
#generic_price_table_home .divider span{
width: 100%;
display: table;
height: 2px;
background: #ddd;
margin: 50px auto;
line-height: 2px;
}
#generic_price_table_home .itemname{
text-align: center;
font-size: 50px ;
padding: 50px 0 20px ;
border-bottom: 1px solid #ddd;
margin-bottom: 40px;
text-decoration: none;
font-weight: 300;
}
#generic_price_table_home .itemnametext{
text-align: center;
font-size: 20px;
padding-top: 5px;
text-transform: uppercase;
display: inline-block;
}
#generic_price_table_home .footer{
padding:40px 0;
}
.price-heading{
text-align: center;
}
.price-heading h1{
color: #666;
margin: 0;
padding: 0 0 50px 0;
}
.demo-button {
background-color: #333333;
color: #ffffff;
display: table;
font-size: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 50px;
outline-color: -moz-use-text-color;
outline-style: none;
outline-width: medium ;
padding: 10px;
text-align: center;
text-transform: uppercase;
}
.bottom_btn{
background-color: #333333;
color: #ffffff;
display: table;
font-size: 28px;
margin: 60px auto 20px;
padding: 10px 25px;
text-align: center;
text-transform: uppercase;
}
.demo-button:hover{
background-color: #666;
color: #FFF;
text-decoration:none;
}
.bottom_btn:hover{
background-color: #666;
color: #FFF;
text-decoration:none;
}
@media (max-width: 320px) {
}
@media (max-width: 767px) {
#generic_price_table .generic_content{
margin-bottom:75px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#generic_price_table .col-md-3{
float:left;
width:50%;
}
#generic_price_table .col-md-4{
float:left;
width:50%;
}
#generic_price_table .generic_content{
margin-bottom:75px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 1200px) {
}
nav{
position:fixed;
}
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.