FreeCodeCamp - Product Landing Page

freecodecamp-product-landing-page.markdown

FreeCodeCamp - Product Landing Page

#freecodecamp Product Landing Page

A Pen by Neel Patel on CodePen.

License.

index.html

<header id="header" class="header-section">
            <nav id="nav-bar" class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
                <div class="container">
                    <a href="#" class="navbar-brand">
                        <img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/header-img.png?raw=true" alt="#logoImg" height="50" width="50" >
                        <h3 class="d-inline align-middle"> Scoops</h3>
                    </a>
                    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item">
                                <a href="#home" class="nav-link">Home</a>
                            </li>
                            <li class="nav-item">
                                <a href="#menu" class="nav-link">Menu</a>
                            </li>
                            <li class="nav-item">
                                <a href="#service" class="nav-link">Services</a>
                            </li>
                            <li class="nav-item">
                                <a href="#home" class="nav-link">Connect</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        
<!-- Landing Page -->
        <section class="landing-page">
               <div class="container text-white main-section-text">
                   <p class="h3 font-weight-light text-center">Scooping Happiness To Life</p>
                   <h2 class="display-2 s-size text-center"><small class="lead display-4">visit </small>- SCOOPS</h2>  
                   
                   <div class="bg-dark mt-5 p-3 text-center">
                      <label for="getupdates">Get Notified For Discounts And New Menu Items !</label>
                       <form id="form">
                          <div class="input-group mb-2 align-center">
                                <div class="input-group-prepend">
                                  <div class="input-group-text">@</div>
                                </div>
                                <input type="email" class="form-control" placeholder="Username">
                                <a href="https://www.freecodecamp.com/email-submit">
                                    <button class="btn btn-outline-light ml-4 mr-auto" id="submit"><i class="far fa-paper-plane"></i> Subscribe</button>
                                </a>
                            </div>
                       </form>
                   </div>
               </div>
               
        </section>
        
        <!-- Menu -->
        <section class="py-2 mt-3"  id="menu">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <p class="h2 font-weight-light s-size text-center p-1">
                            WE SERVE WORLD CLASS
                        </p>
                        <p class="lead text-center">HAVE A LOOK</p><hr class="bg-dark">
                    </div>
                </div>
                <div class="card-columns">
                    <div class="card">
                        <img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/choclatecard.jpg?raw=true" alt="choclate" class="card-img-top">
                        <div class="card-body">
                            <h3 class="h5 card-title">Choclate</h3>
                            <p class="card-text">
                                Crafted by hand, served with Love
                            </p>
                            <button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
                        </div>
                    </div>
                    <div class="card">
                        <img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/candies-2.jpg?raw=true" alt="candies" class="card-img-top">
                        <div class="card-body">
                            <h3 class="h5 card-title">Candies</h3>
                            <p class="card-text">
                                Crafted by hand, served with Love
                            </p>
                            <button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
                        </div>
                    </div>
                    <div class="card">
                        <img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/vanilaChoc.jpg?raw=true" alt="vanilaChoc" class="card-img-top">
                        <div class="card-body">
                            <h3 class="h5 card-title">Vanila -Choclate</h3>
                            <p class="card-text">
                                Crafted by hand, served with Love
                            </p>
                            <button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
                        </div>
                    </div>
                    <div class="card">
                        <img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/fusion.jpg?raw=true" alt="fusion" class="card-img-top">
                        <div class="card-body">
                            <h3 class="h5 card-title">Fusion</h3>
                            <p class="card-text">
                                Crafted by hand, served with Love
                            </p>
                            <button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
                        </div>
                    </div>
                    <div class="card">
                        <img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/shake.jpg?raw=true" alt="shake" class="card-img-top">
                        <div class="card-body">
                            <h3 class="h5 card-title">Shake</h3>
                            <p class="card-text">
                                Crafted by hand, served with Love
                            </p>
                            <button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
                        </div>
                    </div>
                    <div class="card">
                        <img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/fudfeNut.jpg?raw=true" alt="fudgeNut" class="card-img-top">
                        <div class="card-body">
                            <h3 class="h5 card-title">Fudge Nut</h3>
                            <p class="card-text">
                                Crafted by hand, served with Love
                            </p>
                            <button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- services -->
        <section id="service" class="mt-3 py-2 bg-dark text-white">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <p class="h2 font-weight-light s-size text-center p-1">
                            <i class="fas fa-glass-martini"></i> PARTY ORDERS ?
                        </p>
                        <p class="lead text-center">LET US HELP YOU</p><hr class="bg-light">
                    </div>
                </div>
                <div class="row py-1">
                    <div class="col-md-6 mb-2">
                        <form>
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" placeholder="Name">
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" placeholder="Email">
                            </div>
                            <div class="form-group">
                                <label for="number">Contact</label>
                                <input type="text" class="form-control" placeholder="Your Contact Number">
                            </div>
                            <div class="form-group">
                                <label for="details">Message</label>
                                <textarea  id="" cols="30" rows="3" class="form-control" placeholder="Enter Your Message Here"></textarea>
                            </div>
                            <button class="btn btn-outline-light btn-block"><i class="far fa-paper-plane"></i> Submit</button>
                        </form>
                    </div>
                    <div class="col-md-6 mb-2 pt-4 d-none d-md-block">
                        <div class="card">
                            <img src="https://images.pexels.com/photos/587741/pexels-photo-587741.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Footer Section -->
        <section id="connect" class="p-2">
            <div class="container pt-2">
                <div class="row">
                    <div class="col">
                        
                    <p class="s-size text-center">SOCIAL LINK</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col text-center">
                        <a href="" class="text-dark mx-2"><i class="fab fa-instagram"></i></a>
                        <a href="" class="text-dark mx-2"><i class="fab fa-facebook"></i></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col text-center">
                        <p class="h6 font-weight-light">&copy; Neel Patel</p>
                    </div>
                </div>
            </div>
        </section>

style.css

body{
    background: #EBEBEB;
}
.landing-page{
    background: linear-gradient(#eeecec33,rgba(109, 8, 88, 0.51)), url(https://images.unsplash.com/photo-1469533667357-006056eaf780?ixlib=rb-0.3.5&s=37b9a32…&auto=format&fit=crop&w=1050&q=80);
	background-size: cover;
    background-attachment: fixed;
    min-height: 700px;
}
li{
    font-size: 20px;
}
.main-section-text{
    padding-top: 200px;
}
.s-size{
    letter-spacing: 6px;
}
hr{
    width: 50%;
}
.b-left{
    border-left: 1px solid black;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />