Front end development designing web browser landing page #4

#Html, #CSS, #Browser, #Landingpage

Web front-end development: designing a browser landing page #4 

Hello everyone and welcome to my blog post, Watch my series video to learn HTML & CSS

#Css code:

<div>*,*::before,*::after{</div><div>    font-family:'Rubik';</div><div>    font-size: 18px;</div><div>    font-weight: bold;</div><div>    box-sizing: border-box;</div><div>    margin: 0;</div><div>    padding: 0;</div><div>}</div><div>body{</div><div>    display: block;</div><div>    margin: auto;</div><div>    overflow-x: hidden;</div><div>}</div><div>div.toggler{</div><div>    width: 100px;</div><div>    height: 25px;</div><div>    background: transparent;</div><div>    cursor: pointer;</div><div>    display: none;</div><div>    z-index: 998;</div><div>}</div><div>div.toggler div{</div><div>    width: 100%;</div><div>    height: 100%;</div><div>    position: relative;</div><div>}</div><div>div.toggler div span{</div><div>    width: 40px;</div><div>    height: 4px;</div><div>    border-radius: 6px;</div><div>    position: absolute;</div><div>    background-color: black;</div><div>    top: 50%;</div><div>    left: 50%;</div><div>    transform: translate(-50%, -50%);</div><div>}</div><div>div.toggler div span:nth-child(2){</div><div>    top: 25%;</div><div>}</div><div>div.toggler div span:nth-child(3){</div><div>    top: 75%;</div><div>}</div><div><br /></div><div>div#top-nav-contnr{</div><div>    display: flex;</div><div>    flex-direction: row;</div><div>    width: 100%;</div><div>    height: 60px;</div><div>    background-color:#48aad8;</div><div>    opacity: 0.5;</div><div>    position: fixed;</div><div>    top: 0;</div><div>    left:0;</div><div>    z-index: 2;</div><div>}</div><div><br /></div><div>div#top-frst-blck{</div><div>    display: flex;</div><div>    flex-direction: row;</div><div>    align-items: center;</div><div>    width: 100%;</div><div>}</div><div><br /></div><div>div#top-frst-blck a#a-nav-text-bookmrk{</div><div>    text-decoration: none;</div><div>}</div><div>div#top-scnd-blk ul{</div><div>    display: flex;</div><div>    flex-direction: row;</div><div>    justify-content: center;</div><div>    align-items: center;</div><div>    width: 100%;</div><div>    height: 100%;</div><div>}</div><div>div#top-scnd-blk ul li{</div><div>    padding: 5px;</div><div>    width: 100%;</div><div>    list-style:none;</div><div>    padding-right: 20px;</div><div>    text-align: center;</div><div>  </div><div>}</div><div>div#bottom-nav-bar {</div><div>    display: flex;</div><div>    flex-direction: row;</div><div>    justify-content: start;</div><div>    align-items: center;</div><div>    width: 100%;</div><div>    height: auto;</div><div>    padding: 15px;</div><div>    background-color: #242946;</div><div>}</div><div>div#mob-nav1{</div><div>   </div><div>    display: flex;</div><div>    flex-wrap: wrap;</div><div>    flex-direction: row;</div><div>    justify-content: center;</div><div>    align-items: center;</div><div>    width: 20%;</div><div>   margin: auto;</div><div>}</div><div>div#mob-nav2{</div><div>   </div><div>    display: flex;</div><div>    flex-wrap: wrap;</div><div>    width: 30%;</div><div>    flex-direction: row;</div><div>    justify-content: center;</div><div>    align-items: center;</div><div>   margin: auto;</div><div>}</div><div>div#mob-social-icon{</div><div>   </div><div>    display: flex;</div><div>    width: 30%;</div><div>    flex-wrap: wrap;</div><div>    flex-direction: row;</div><div>    justify-content: center;</div><div>    align-items: center;</div><div>   margin: auto;</div><div>}</div><div><br /></div><div>div#bottom-widget{</div><div>    display: block;</div><div>    margin: auto;</div><div>    width: 100%;</div><div>    height: 350px;</div><div><br /></div><div>}</div><div>div#mid-section-blk{</div><div>    display: flex;</div><div>    flex-direction: row;</div><div>    justify-content: center;</div><div>    align-items: center;</div><div>}</div><div><br /></div><div>div#footer-browser{</div><div>    display: flex;</div><div>    flex-direction: row;</div><div>    justify-content: center;</div><div>    align-items: center;</div><div>    width: 100%;</div><div>  </div><div>}</div><div><br /></div><div>div#mid-section{</div><div>    display: flex;</div><div>    flex-direction: column;</div><div>    flex-wrap: wrap;</div><div>    justify-content: center;</div><div>    align-items: center;</div><div>    padding: 20px;</div><div>    width: 100%;</div><div>    height: 400px;</div><div>    </div><div>}</div><div><br /></div><div>div#tab-container{</div><div>    display: flex;</div><div>    flex-direction: row;</div><div>    flex-wrap: wrap;</div><div>    justify-content: center;</div><div>    align-items: center;</div><div>    width: 100%;</div><div>    </div><div>}</div><div>div#tab-container input[type="radio"]{</div><div>    display: none;</div><div>}</div><div>div#label-img-wrapper {</div><div>    display: flex;</div><div>    padding-left: 5px;</div><div>    padding-right: 5px;</div><div>    flex-direction: row;</div><div>    justify-content: start;</div><div>    align-items: center;</div><div>    border-top: solid gray 2px;</div><div><br /></div><div>}</div><div><br /></div><div>div#tab-container input[type="radio"]:checked +label + div#mid-section-tabs{</div><div>    display: flex;</div><div>}</div><div>div#tab-container input[type="radio"]:checked +label {</div><div>    border-bottom: solid #fb5859 4px; </div><div>  </div><div>}</div><div>input#input-email{</div><div>    width: 350px;</div><div>    height: 40px;</div><div>    border-radius: 5px;</div><div>}</div><div>input#btn-submit{</div><div>    color: white;</div><div>    font-size: 18px;</div><div>    font-weight: bold;</div><div>    min-width: 150px;</div><div>    height: 40px;</div><div>    border-style: none;</div><div>    background-color: #fb5859;</div><div>    cursor: pointer;</div><div>    border-radius: 5px;</div><div>}</div><div>input#btn-submit:hover{</div><div>   background-color: white;</div><div>   color: #fb5859;</div><div>   border: solid #fb5859 2px;</div><div>}</div><div>div#tab-container div#mid-section-tabs{</div><div>    display: flex;</div><div>    flex-direction: row;</div><div>    justify-content: center;</div><div>    align-items: center;</div><div>    padding: 20px;</div><div>    width: 100%;</div><div>    height: 400px;</div><div>    order: 1;</div><div>    display: none;</div><div>}</div><div>div#tab-container label{</div><div>    font-weight: bold;</div><div>    color: black;</div><div>    text-decoration: none;</div><div>    padding: 10px;</div><div>    width: 250px;</div><div>}</div><div>div#tab-container label:hover{</div><div>    color: #d3575f;</div><div>}</div><div><br /></div><div>section#mid-section1{</div><div>    display: block;</div><div>    width: 100%;</div><div>    height: 100%;</div><div>}</div><div>section#mid-section2{</div><div>    display: block;</div><div>    width: 100%;</div><div>    height: 100%;</div><div>}</div><div><br /></div><div>section#mid-section3{</div><div>    display: block;</div><div>    width: 100%;</div><div>    height: 100%;</div><div>   </div><div>}</div><div>section#mid-section4{</div><div>    display: block;</div><div>    width: 70%;</div><div>    height: 100%;</div><div>}</div><div><br /></div><div>section#footer-section2{</div><div>    display: block;</div><div>    width: 100%;</div><div>    height: 100vh;</div><div>    margin: auto;</div><div> </div><div>}</div><div>section#bottom-footer-wrapper{</div><div>    width: 100%;</div><div>    background-color:#5266df ;</div><div>}</div><div>div#bottom-nav-bar a#a-bottom-nav-text{</div><div>    color: white;</div><div>    font-weight: bold;</div><div>    text-decoration: none;</div><div>    margin-left: 5%;</div><div>}</div><div>div#bottom-nav-bar a#a-bottom-nav-text:hover{</div><div>    color: #fb5859;</div><div>}</div><div>div#mid-section3{</div><div>    display: block;</div><div>    width: 100%;</div><div>    height: 50%;</div><div>    </div><div>}</div><div>div#faqs-wrapper{</div><div>    display: block;</div><div>    padding: 10px;</div><div>    width: 500px;</div><div>    height: 325px;</div><div>    border-bottom:solid gray 2px ;</div><div>}</div><div>div#faqs-wrapper div#bookmark-faqs{</div><div>    display: block;</div><div>    width: 100%;</div><div>    padding: 5px;</div><div>    height:150px;</div><div>    display: none;</div><div>}</div><div>div#faqs-wrapper input[type="radio"]{</div><div>    display: none;</div><div>}</div><div>div#faqs-wrapper input[type="radio"]:checked +div#label-img-wrapper  +div#bookmark-faqs{</div><div>    display: block;</div><div>    font-weight: bold; </div><div>}</div><div><br /></div><div>div#faqs-wrapper input[type="radio"]:checked +label{</div><div>    color: #fb5859;</div><div>    border-style: none;</div><div>}</div><div><br /></div><div>div#bg-blue{</div><div>    position: absolute;</div><div>    width:450px;</div><div>    margin-top: 10%;</div><div>    margin-left: 10%;</div><div>    background-color: #4b5dcb;</div><div>    height: 250px;</div><div>    border-top-left-radius:  50%;</div><div>    border-bottom-left-radius:  50%;</div><div>    z-index: -1;</div><div>}</div><div><br /></div><div>div#bg-blue1{</div><div>    position: absolute;</div><div>    width:450px;</div><div>    margin-top: -15%;</div><div>    margin-left: -5%;</div><div>    background-color: #4b5dcb;</div><div>    height: 250px;</div><div>    border-top-right-radius:  50%;</div><div>    border-bottom-right-radius:  50%;</div><div>    z-index: -1;</div><div>}</div><div>div#mid-right-img{</div><div>    display: flex;</div><div>    flex-direction: row;</div><div>  </div><div>}</div><div>div#browser-chrome{</div><div>    display: block;</div><div>    width: 250px;</div><div>    height: 300px;</div><div>    margin-left:5%;</div><div>    border-radius: 5px;</div><div>    border-bottom:  solid gray 2px;</div><div>    border-left:  solid gray 2px;</div><div>    border-right:  solid gray 2px;</div><div>}</div><div>div#browser-firefox{</div><div>    display: block;</div><div>    width: 250px;</div><div>    height: 300px;</div><div>    border-radius: 5px;</div><div>    border-bottom:  solid gray 2px;</div><div>    border-left:  solid gray 2px;</div><div>    border-right:  solid gray 2px;</div><div>    margin-left:5%;</div><div>    margin-top: 5%;</div><div><br /></div><div>}</div><div>div#browser-opera{</div><div>    display: block;</div><div>    width: 250px;</div><div>    height: 300px;</div><div>    border-radius: 5px;</div><div>    border-bottom:  solid gray 2px;</div><div>    border-left:  solid gray 2px;</div><div>    border-right:  solid gray 2px;</div><div>    margin-left:5%;</div><div>    margin-top: 10%;</div><div><br /></div><div>}</div><div>div#browser-wrapper{</div><div> height: 10%;</div><div> margin-top: -10%;</div><div> border-top-style:dashed;</div><div> color: gray;</div><div><br /></div><div>}</div><div>img#img-bookmark{</div><div>    margin-left: 10%;</div><div>    margin-right: 2%;</div><div>}</div><div>img#img-bookmark-bottom{</div><div>    margin-left: 10%;</div><div>}</div><div>img#social-icon-fb{</div><div>    margin-left: 35%;</div><div>    cursor: pointer;</div><div><br /></div><div>}</div><div>img#social-icon-fb:hover{</div><div>    background-color: #d3575f;</div><div>    cursor: pointer;</div><div>}</div><div>img#social-icon-twitter{</div><div>    margin-left: 2%;</div><div>    cursor: pointer;</div><div><br /></div><div>}</div><div>img#social-icon-twitter:hover{</div><div>    background-color: #d3575f;</div><div>    cursor: pointer;</div><div>}</div><div><br /></div><div>header#header1{</div><div>    font-size: 30px;</div><div>    font-weight: bold;</div><div>}</div><div>h3#h3-bottom{</div><div>    color: white;</div><div>    font-weight: bold;</div><div>    font-size: 18px;</div><div><br /></div><div>}</div><div>h2#h2-bottom{</div><div>    color: white;</div><div>    font-weight: bold;</div><div>    font-size: 42px;</div><div>}</div><div><br /></div><div>div#top-scnd-blk ul li a#a-nav-text{</div><div>   margin-right: 5%;</div><div>   color: black;</div><div>   text-decoration: none;</div><div>}</div><div><br /></div><div> div#top-scnd-blk ul li a#a-login{</div><div>    padding-top: 15px;</div><div>    padding-bottom: 15px;</div><div>    padding-left: 40px;</div><div>    padding-right: 40px;</div><div>    border-radius: 10px;</div><div>    text-align: center;</div><div>    color: white;</div><div>    border-style: none;</div><div>    background-color: #fb5859;</div><div>    font-weight: bold;</div><div>    text-decoration: none;</div><div>}</div><div>a#a-btn-chrome{</div><div>   </div><div>    padding-top: 15px;</div><div>    padding-bottom: 15px;</div><div>    padding-left: 20px;</div><div>    padding-right: 20px;</div><div>    border-radius: 10px;</div><div>    text-align: center;</div><div>    color: white;</div><div>    background-color: #5267de;</div><div>    font-weight: bold;</div><div>    text-decoration: none;</div><div>}</div><div>a#a-more-info{</div><div>    display: block;</div><div>    padding-top: 15px;</div><div>    padding-bottom: 15px;</div><div>    width: 125px;</div><div>    height: 50px;</div><div>    padding-left: 20px;</div><div>    padding-right: 20px;</div><div>    border-radius: 10px;</div><div>    text-align: center;</div><div>    color: white;</div><div>    background-color: #5267de;</div><div>    font-weight: bold;</div><div>    text-decoration: none;</div><div>    margin-bottom: 5%;</div><div>    </div><div>}</div><div>a#a-more-info:hover{</div><div>    border: solid #606aa5 2px;</div><div>    background-color: white;</div><div>    color: #5267de;</div><div>}</div><div><br /></div><div>a#a-btn-chrome:hover{</div><div>    border: solid #606aa5 2px;</div><div>    background-color: white;</div><div>    color: #5267de;</div><div>}</div><div>a#a-btn-firefox{</div><div>    padding-top: 15px;</div><div>    padding-bottom: 15px;</div><div>    padding-left: 20px;</div><div>    padding-right: 20px;</div><div>    border-radius: 10px;</div><div>    text-align: center;</div><div>    color: black;</div><div>    background-color: #f7f7f7;</div><div>    font-weight: bold;</div><div>    text-decoration: none;</div><div>    border-bottom: solid gray 2px ;</div><div>}</div><div>a#a-btn-firefox:hover{</div><div>    border: solid #5f616d 2px;</div><div>    color: #535260;</div><div>}</div><div>a#a-login:hover{</div><div>    background-color: white;</div><div>    border:solid #d3575f 2px;</div><div>    color: #d3575f;</div><div>}</div><div>a#a-nav-text:hover{</div><div>    color: #d3575f;</div><div>}</div><div>p#p-text{</div><div>    font-size: 16px;</div><div>}</div><div>p#p-faqs-details{</div><div>   margin-top: 5%;</div><div>   font-style: normal;</div><div>   font-weight: normal;</div><div>}</div><div><br /></div><div>label#p-text-faqs{</div><div>    display: block;</div><div>    margin: auto;</div><div>    font-weight: bold;</div><div>    padding: 10px;</div><div>    text-align: left;</div><div>    width: 100%;</div><div>    height: auto;</div><div>    cursor: pointer;</div><div>}</div><div>label#p-text-faqs:hover{</div><div>    color: #fb5859;</div><div>}</div><div>/********************FOR MOBILE DISPLAY*************************************/</div><div>@media screen and ( max-width:960px ) {</div><div>    *,*::before,*::after{</div><div>        font-family:'Rubik';</div><div>        font-size: 14px;</div><div>        box-sizing: border-box;</div><div>        margin: 0;</div><div>        padding: 0;</div><div><br /></div><div>    }</div><div>    div#top-nav-contnr {</div><div>        display:flex;</div><div>        flex-direction: column;</div><div>        flex-wrap: wrap;</div><div>        justify-content: start;</div><div>        align-items: center;</div><div>        padding: 5%;</div><div>        height: fit-content;</div><div>        width: 100vw;</div><div>        margin: auto;</div><div>      </div><div>    }</div><div>    div#top-scnd-blk{</div><div>        display:flex;</div><div>        position: fixed;</div><div>        justify-content: center;</div><div>        align-items: center;</div><div>        margin: auto;</div><div>        width: 100%;</div><div>        height: 100%;</div><div>        right: 0;</div><div>        top: 0;</div><div>        transition: all .5s linear;</div><div>    }</div><div><br /></div><div>    div#top-scnd-blk ul{</div><div>        display: flex;</div><div>        flex-direction: column;</div><div>        justify-content: center;</div><div>        align-items: center;</div><div>        width: 100%;</div><div>        height: 100%;</div><div>        background-color: #2f354f;</div><div>        margin: auto;</div><div>    }</div><div>    </div><div>    div#faqs-wrapper{</div><div>        width: 100vw;</div><div>        height: 100vh;</div><div>    }</div><div>    div#top-scnd-blk a#a-login{</div><div>        display: block;</div><div>        font-size: 12px;</div><div>        font-weight: bold;</div><div>        color: white;</div><div>        margin: auto;</div><div>        width: 80vw;</div><div>    }</div><div>    div#top-scnd-blk a#a-login:hover{</div><div>        background-color: white;</div><div>        border:solid #d3575f 2px;</div><div>        color: #d3575f;</div><div>       </div><div>    }</div><div>   </div><div>    div#top-scnd-blk ul li a#a-nav-text{</div><div>        display: flex;</div><div>        flex-direction: column;</div><div>        justify-content: start;</div><div>        align-items: center;</div><div>        font-size: 12px;</div><div>        padding: 10px;</div><div>        width: 100vw;</div><div>        color: white;</div><div>        font-weight: bold;</div><div>        margin: auto;</div><div>    }</div><div>    div#top-scnd-blk ul li a#a-nav-text:hover{</div><div>        color: #fb5859;</div><div>    }</div><div><br /></div><div>    div.toggler{</div><div>        width: 100%;</div><div>        display: block;</div><div>    }</div><div>    div.toggler div {</div><div>        width: 50px;</div><div>        margin-left: auto;</div><div>    }</div><div>    div.toggler div span{</div><div>        width: 25px;</div><div>        height: 2px;</div><div>    }</div><div><br /></div><div>    div#mobile-nav-wrapper{</div><div>        display: flex;</div><div>        flex-direction: row;</div><div>        justify-content: start;</div><div>        align-items: center;</div><div>        width: 100%;</div><div>        padding: 5px;</div><div>        height: 30px;</div><div>    }</div><div><br /></div><div>    div#mid-section, div#mid-section1{</div><div>        display: flex;</div><div>        flex-direction: column;</div><div>        justify-content: center;</div><div>        align-items: center;</div><div>       </div><div>    }</div><div>    div#mid-section{</div><div>        display: block;</div><div>        text-align: center;</div><div>        width: 100%;</div><div>        height: auto;</div><div>        margin: auto;</div><div>        padding: 10px;</div><div>    }</div><div>    div#mid-right-img img#img-hero{</div><div>        width: 100%;</div><div>        height: 300px;</div><div>        text-align: center;</div><div>        margin: auto;</div><div>    }</div><div>   </div><div>    div#tab-container input[type="radio"]{</div><div>        display: none;</div><div>    }</div><div>    div#tab-container input[type="radio"]:checked +label +div#mid-section-tabs{</div><div>        display: flex;</div><div>        flex-wrap: wrap;</div><div>        flex-direction: row;</div><div>        justify-content: center;</div><div>        align-items: center;</div><div>        text-align: center;</div><div>        margin: auto;</div><div>    }</div><div>    section#mid-section3{</div><div>   </div><div>        display: block;</div><div>        margin: auto;</div><div>        width: 100%;</div><div>    }</div><div>    section#mid-section4{</div><div>        width: 100vw;</div><div>        </div><div>    }</div><div>    section#footer-content-wrapper{</div><div>        margin-top: 50%;</div><div>    }</div><div>   </div><div>    div#mid-left-img img#img-hero{</div><div>        width: 100%;</div><div>        height: 300px;</div><div>        text-align: center;</div><div>        margin: auto;</div><div><br /></div><div>    }</div><div>    div#input-widget{</div><div>        display: flex;</div><div>        flex-direction: column;</div><div>        flex-wrap: wrap;</div><div>        justify-content: center;</div><div>        align-items: center;</div><div>        margin: auto;</div><div>        height: 100px;</div><div>        margin-top: -5%;</div><div>    }</div><div>    div#input-widget input#input-email{</div><div>        width: 300px;</div><div>    }</div><div>    div#input-widget input#btn-submit{</div><div>        width: 300px;</div><div>    }</div><div>    div#bottom-widget h3#h3-bottom{</div><div>        margin-top: -10%;</div><div>    }</div><div>    div#mid-right-img div#bg-blue{</div><div>       </div><div>        width: 70%;</div><div>        height: 200px;</div><div>        margin-top: 25%;</div><div>        margin-left: 25%;</div><div>    }</div><div>    div#mid-left-img div#bg-blue1{</div><div>        </div><div>        width: 70%;</div><div>        height: 200px;</div><div>        margin-top: -40%;</div><div>        margin-left: -20%;</div><div>    }</div><div>    div#browser-btn{</div><div>        display: flex;</div><div>        flex-direction: row;</div><div>        justify-content: center;</div><div>        align-items: center;</div><div>        margin: auto;</div><div>        margin-top: -10%;</div><div>        margin-bottom: 10px;</div><div>    }</div><div>    div#footer-browser{</div><div>        display: block;</div><div>        margin: auto;</div><div>    </div><div>    }</div><div><br /></div><div>    div#bottom-nav-bar{</div><div>        display: block;</div><div>        margin: auto;</div><div><br /></div><div>    }</div><div>    div#bottom-nav-bar div#mob-nav1{</div><div>        display: flex;</div><div>        width: 100%;</div><div>        flex-direction: row;</div><div>        flex-wrap: wrap;</div><div>        justify-content: center;</div><div>        align-items: center;</div><div>        margin: auto;   </div><div><br /></div><div>    }</div><div>    div#bottom-nav-bar div#mob-nav2{</div><div>        display: flex;</div><div>    }</div><div>    div#mob-social-icon{</div><div>        display: flex;</div><div>        margin: auto;</div><div>    }</div><div><br /></div><div>    a#a-bottom-nav-text{</div><div>        padding: 5px;</div><div>        font-size: 14px;</div><div>    }</div><div>   </div><div>    img#img-bookmark-bottom{</div><div>        margin-left: -16%;</div><div>    }</div><div>    img#social-icon-fb{</div><div>        margin-left: -15%;</div><div>    }</div><div>    p#p-faqs-details{</div><div>        width: 100vw;</div><div>        padding: 5px;</div><div>        display: block;</div><div>        font-size: 14px;</div><div>    </div><div>    }</div><div>    header#header1{</div><div>        display: block;</div><div>      font-size: 18px;</div><div>      margin: auto;</div><div>      text-align: center;</div><div>    }</div><div>}</div></div><h3 style="text-align: left;"> </h3>

DOWNLOAD ZIP FILE: #Mirror1,#Mirror2

#Html code:

<!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" type="text/css" href="index.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" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet"> <title>index</title> </head> <body> <!--main-container--> <div id="main-container" align="center"> <div id="top-nav-contnr" align="center"> <!--div-1st blck--> <div id="top-frst-blck" align="center"> <img id="img-bookmark" src="img/logo-bookmark.png" align="center" width="30" height="30"/> <a id="a-nav-text-bookmrk" href="#">BOOKMARKS</a></div> <div class="toggler"> <div> <span></span> <span></span> <span></span> </div> </div> <!--end-of-div-1st blck--> <div id="top-scnd-blk" align="center"><ul> <li><a id="a-nav-text" href="#">FEATURES</a></li> <li><a id="a-nav-text" href="#">PRICING</a></li> <li><a id="a-nav-text" href="#">CONTACT</a></li> <li><a id="a-login" href="#">LOGIN</a></li> </ul> </div> </div></br></br></br></br></br> <!--begin-of-mid-section--> <div id="mid-section" align="left"> </br></br> <header id="header1">A Simple BookMark </br>Manager</header> </br> <p id="p-text">A clean and simple interface to organize your favourite </br>websites. Open a new browser tab and see your sites load </br>instantly. Try it for free.</p></br></br></br></br> <!--begin-div-button--> <div id="browser-btn" align="left"> </br></br> <a id="a-btn-chrome" href="#">Get it on Chrome</a>  <a id="a-btn-firefox" href="#">Get it on Firefox</a> </div> <!--end-div-button--> <!--end-mid-section1--> <!--begin-mid-section2--> <div id="mid-right-img" align="left"> <img id="img-hero" src="img/illustration-hero.png" width="400" height="350" align="center"/> <div id="bg-blue" align="right"></div> </div> </div></br></br> <div id="mid-section3" align="center"> <header id="header1">Features</header> </br> <p id="p-text">Our aim is to make it quick and easy for you to access your </br>favourite websites.Your bookmarks sync between your devices </br>so you can access them on the go.</p> </br></br></div> <!--begin-of-tab-container--> <div id="tab-container" align="center"> <!--begin-tab1--> <input type="radio" id="tab1" name="tab-groups" checked="checked"> <label for="tab1">Simple Bookmarking</label> <div id="mid-section-tabs" align="left"> <section id="mid-section3"> <div id="mid-left-img" align="center"> <img id="img-hero" src="img/illustration-features-tab-1.png" width="400" height="350" align="center"/> <div id="bg-blue1" align="left"></div> </div> </section> <section id="mid-section4"> </br></br> <header id="header1">Bookmark in one click</header> </br> <p id="p-text">Organize your bookmarks however you like. Our </br>simple drag-and-drop interface gives you complete</br> control over how you manage your favourite sites.</p></br></br> <div id="browser-btn" align="left"> <a id="a-btn-chrome" href="#">More Info</a>  </div> </section> </div> </input> <!--end-tab1--> <!--begin-tab2--> <input type="radio" id="tab2" name="tab-groups" > <label for="tab2">Speedy Searching</label> <div id="mid-section-tabs" align="left"> <section id="mid-section3"> <div id="mid-left-img" align="center"> <img id="img-hero" src="img/illustration-features-tab-2.png" width="400" height="350" align="center"/> <div id="bg-blue1" align="left"></div> </div> </section> <section id="mid-section4"> </br></br> <header id="header1">Intelligent search</header> </br> <p id="p-text">Our powerful search feature will help you find saved</br>sites in no time at all. No need to trawl through all of</br> your bookmarks.</p></br></br> <div id="browser-btn" align="left"> <a id="a-btn-chrome" href="#">More Info</a>  </div> </section> </div> </input> <!--end-tab2--> <!--begin-tab3--> <input type="radio" id="tab3" name="tab-groups"> <label for="tab3">Easy Searching</label> <div id="mid-section-tabs" align="left"> <section id="mid-section3"> <div id="mid-left-img" align="center"> <img id="img-hero" src="img/illustration-features-tab-3.png" width="400" height="350" align="center"/> <div id="bg-blue1" align="left"></div> </div> </section> <section id="mid-section4"> </br></br> <header id="header1">Share your bookmarks</header> </br> <p id="p-text">Easily share your bookmarks and collections with </br>others. Create a shareable link that you can send at </br>the click of a button.</p></br></br> <div id="browser-btn" align="left"> <a id="a-btn-chrome" href="#">More Info</a>  </div> </section> </div> </br> </input> <!--end-tab3--> </div> <!--end-of-tabcontainer--> <section id="footer-content-wrapper" align="center"> </br></br></br></br></br> <header id="header1">Download the extension</header> </br> <p id="p-text-footer">We've got more browsers in the pipeline. Please do let us know if </br>you've got a favourite you'd like us to prioritize.</p></br> <div id="footer-browser" align="center"> <div id="browser-chrome" align="center"> </br> <img id="img-browser" src="img/logo-chrome.png" align="center" width="100" height="100" /></br></br> <h3 id="header3">Add to chrome</h3> <p id="p-text-footer">Minimum version 62</p></br></br></br> <div id="browser-wrapper" align="center"></div> <a id="a-btn-chrome" href="#">Add & Install Extension</a> </div> <div id="browser-firefox" align="center"> </br> <img id="img-browser" src="img/logo-firefox.png" align="center" width="100" height="100" /></br></br> <h3 id="header3">Add to firefox</h3> <p id="p-text-footer">Minimum version 55</p></br></br></br> <div id="browser-wrapper" align="center"></div> <a id="a-btn-chrome" href="#">Add & Install Extension</a> </div> <div id="browser-opera" align="center"> </br> <img id="img-browser" src="img/logo-opera.png" align="center" width="100" height="100" /></br></br> <h3 id="header3">Add to opera</h3> <p id="p-text-footer">Minimum version 46</p></br></br></br> <div id="browser-wrapper" align="center"></div> <a id="a-btn-chrome" href="#">Add & Install Extension</a> </div> </div> </section></br></br></br> <header id="header1">Frequently Ask Questions</header> </br> <p id="p-text-footer">Here are some of our FAQs. If you have any other questions </br>you'd like answered please feel free to email us.</p></br> <div id="faqs-wrapper" align="center"> <input type="radio" id="faqs1" name="faqs-group" checked="checked"> <div id="label-img-wrapper" align="center"> <label id="p-text-faqs" for="faqs1">What is Bookmarks? </label><img id="img-dwn-arrow" src="img/icon-arrow.png" width="20" height="20" align="right"/> </div> <div id="bookmark-faqs" align="left"> <p id="p-faqs-details">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt exercitationem repudiandae, autem magnam, cupiditate officia fuga voluptates itaque ducimus nulla magni ullam iure numquam explicabo non quo. Aspernatur, dolorem at?</p></div></input> <input type="radio" id="faqs2" name="faqs-group"> <div id="label-img-wrapper" align="center"> <label id="p-text-faqs" for="faqs2">How can I request a new browser? </label><img id="img-dwn-arrow" src="img/icon-arrow.png" width="20" height="20" align="right"/></div> <div id="bookmark-faqs" align="left"> <p id="p-faqs-details">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt exercitationem repudiandae, autem magnam, cupiditate officia fuga voluptates itaque ducimus nulla magni ullam iure numquam explicabo non quo. Aspernatur, dolorem at?</p></div></input> <input type="radio" id="faqs3" name="faqs-group"> <div id="label-img-wrapper" align="center"><label id="p-text-faqs" for="faqs3">Is there a mobile app? </label><img id="img-dwn-arrow" src="img/icon-arrow.png" width="20" height="20" align="right"/></div> <div id="bookmark-faqs" align="left"> <p id="p-faqs-details">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt exercitationem repudiandae, autem magnam, cupiditate officia fuga voluptates itaque ducimus nulla magni ullam iure numquam explicabo non quo. Aspernatur, dolorem at?</p></div></input> <input type="radio" id="faqs4" name="faqs-group"> <div id="label-img-wrapper" align="center"> <label id="p-text-faqs" for="faqs4">What about other chromium browsers? </label><img id="img-dwn-arrow" src="img/icon-arrow.png" width="20" height="20" align="right"/></div> <div id="bookmark-faqs" align="left"> <p id="p-faqs-details">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt exercitationem repudiandae, autem magnam, cupiditate officia fuga voluptates itaque ducimus nulla magni ullam iure numquam explicabo non quo. Aspernatur, dolorem at?</p></div></input> </div> </br> </br> <!--begin-div-button--> <div id="browser-btn" align="center"> <a id="a-more-info" href="#">More Info</a>  </div> <!--end-div-button--> <section id="bottom-footer-wrapper" align="center"> <div id="bottom-widget" align="center"> </br></br> </br></br> <h3 id="h3-bottom">35,000 + ALREADY JOINED</h3> </br> <h2 id="h2-bottom">Stay up-to-date with what</br> we're doing</h2></br></br> <form id="f1" action="#" method="post" align="center"> <div id="input-widget" align="center"> <input id="input-email" type="email" required value="" placeholder="  Enter your email address" minlength="4" maxlength="64" name="email"/>  <input id="btn-submit" type="Submit" value="Contact Us" /> </div> </form> </div> <div id="bottom-nav-bar" align="center"> <div id="mob-nav1" align="center"> <img id="img-bookmark-bottom" src="img/logo-bookmark.png" align="center" width="30" height="30"/> <a id="a-bottom-nav-text" href="#">BOOKMARKS</a> </div> <div id="mob-nav2" align="center"> <a id="a-bottom-nav-text" href="#">FEATURES</a> <a id="a-bottom-nav-text" href="#">PRICING</a> <a id="a-bottom-nav-text" href="#">CONTACT</a> </div> <div id="mob-social-icon" align="center"> <img id="social-icon-fb" src="img/facebook-avatar.png" width="32" height="32" align="center" /> <img id="social-icon-twitter" src="img/social-avatar-twitter.png" height="32" align="center"/></div> </div> </section> </div> <!--end-main-container--> <script lang="javascript" type="text/javascript" src="index.js"></script> </body> </html>

DOWNLOAD ZIP FILE: #Mirror1,#Mirror2