"HP IT GROUP MEDİA"
Bootstrap 4.1.1 Snippet by harunpehlivan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU </title> <meta charset="utf-8"> <meta name="description" content="TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU"> <meta name="author" content="HARUN PEHLİVAN"> <meta name="keywords" content="HP IT GROUP MEDİA"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/index.css"> <link href="https://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div id="container"> <header id="header"> <img id="logo" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c46c2a16e5d7.jpg" alt="northern-lights-logo.jpg"> <nav id="navBar"> <button class="navButton" type="button" onclick="location.href='#lights';">HP IT GROUP MEDIA</button> <button class="navButton" type="button" onclick="location.href='#iceland';">PROJECT</button> <button class="navButton" type="button" onclick="location.href='#norway';">CV</button> <button class="navButton" type="button" onclick="location.href='#sweden';">SPARK</button> <button class="navButton" type="button" onclick="location.href='#finland';">VİZYON</button> <button class="navButton" type="button" onclick="location.href='#north';">TEBİM/TEBİTAGEM</button> <button class="navButton" type="button" onclick="location.href='#contact';">CONTACT</button> <select id="sel" name="menu" onchange="location = this.value;"> <option class="opt" value="#">MENU</option> <option class="opt" value="#lights">NORTHERN LIGHTS</option> <option class="opt" value="#iceland">PROJECT</option> <option class="opt" value="#norway">CV</option> <option class="opt" value="#sweden">SPARK</option> <option class="opt" value="#finland">VİZYON</option> <option class="opt" value="#north">TEBİM/TEBİTAGEM</option> <option class="opt" value="#contact">CONTACT</option> </select> </nav> </header> <main id="main"> <div class="sec1" id="lights"> <h1><img src="https://resmim.net/f/Kt4YhO.png" alt="" width="400" height="100"></h1> <p><marquee><img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b53aeec70dad.jpg"> <img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c4a2438188f1.jpg"> <img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5bc409fc313f5.png"> <img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c4a45931246d.jpg"> <img src="https://cdn-cms.f-static.com/uploads/1017556/800_5aca4ec48ebbc.png"> <img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c4f6b8aa4d1d.jpg"> </marquee><br><br> <marquee behavior=alternate>#harunpehlivantebimtebitagem HOŞGELDİNİZ SN DİNLİYİCİLERİM SANAL ALEMİN KRALLIĞINDASINIZ #tebimtebitagem</marquee></p> </div> <div class="sec2" id="northligh"> <p> <iframe class="scribd_iframe_embed" title="IT CV" src="https://www.scribd.com/embeds/400019245/content?start_page=1&view_mode=scroll&show_recommendations=false&access_key=key-1JClzDpo3RZxKizHYwMD" width="100%" height="600" frameborder="0" scrolling="no" data-auto-height="true" data-aspect-ratio="null"></iframe> <q><q></q> </p> </div> <div class="sec1" id="iceland"> <h1>PROJECT</h1> </div> <div class="sec2"> <p><iframe height="954" style="width: 100%;" scrolling="no" title="newtvfm" src="//codepen.io/harunpehlivan/embed/ZVVEeO/?height=954&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/harunpehlivan/pen/ZVVEeO/'>newtvfm</a> by HARUN PEHLİVAN (<a href='https://codepen.io/harunpehlivan'>@harunpehlivan</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe></p> <p>Gündem belirlemek güncel global olmak için yeni fikirlerle yetenek ve beceriyle uzmanlıkla eğitimle bilimle teknikle AR-GE proje ile adımızla markamızla kimliğimizle profilimizle kalitemizle standardımızla konseptimizle ilkemizle etiğimizle ama özümüzden taviz vermeden</p> <p>"Ne olacağıma değil yeteneklerimin, becerilerimin ve ne yapabilirim'in peşinde koşarım"<q></q> "Sonsuz hamd olsun gerçekleştiremediğim ütopyam olmadı"</p> <p></p> </div> <div class="sec1" id="norway"> <h1>CV</h1> </div> <div class="sec2"> <p><iframe class="scribd_iframe_embed" title="IT CV" src="https://www.scribd.com/embeds/400019245/content?start_page=1&view_mode=scroll&show_recommendations=false&access_key=key-1JClzDpo3RZxKizHYwMD" width="100%" height="600" frameborder="0" scrolling="no" data-auto-height="true" data-aspect-ratio="null"></iframe></p> </div> <div class="sec1" id="sweden"> <h1>SPARK</h1> </div> <div class="sec2"> <p><script id="asp-embed-script" data-zindex="1000000" type="text/javascript" charset="utf-8" src="https://spark.adobe.com/page-embed.js"></script><a class="asp-embed-link" href="https://spark.adobe.com/page/r2P7QcZjaIWIN/" target="_blank"><img src="https://spark.adobe.com/page/r2P7QcZjaIWIN/embed.jpg?buster=1551055609350" alt="HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP" style="width:100%" border="0" /></a></p> </div> <div class="sec1" id="finland"> <h1>HARUN PEHLİVAN VİZYON</h1> </div> <div class="sec2"> <p> <p><iframe height='2751' scrolling='no' title='Free Code Camp: Build a Tribute Page' src='//codepen.io/harunpehlivan/embed/BvodLr/?height=2751&theme-id=light&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/harunpehlivan/pen/BvodLr/'>Free Code Camp: Build a Tribute Page</a> by HARUN PEHLİVAN (<a href='https://codepen.io/harunpehlivan'>@harunpehlivan</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </p> </div> <div class="sec1" id="north"> <h1>TERCUMAN INFORMATICS CENTER TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER</h1> </div> <div class="sec2"> <p><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d4874.317899232702!2d35.657568!3d40.829449!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x11196fc28c1118f0!2zVEVSQ1VNQU4gQsSwTMSwxZ7EsE0gTUVSS0VaxLAgVEVSQ1VNQU4gRcSexLBUxLBNIELEsEzEsE0gVEVLTsSwSyBBUkHFnlRJUk1BIEdFTMSwxZ5UxLBSTUUgTUVSS0VaxLA!5e1!3m2!1str!2sus!4v1545775048339" width="800" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </p> <p><iframe src="https://www.google.com/maps/embed?pb=!4v1545775392916!6m8!1m7!1s_35aUW3xmI21YrK9ORdzbA!2m2!1d40.82947259615927!2d35.65739945801781!3f57.57!4f-0.39000000000000057!5f1.3946584482860697" width="800" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </p> <p> <iframe src="https://yandex.com.tr/map-widget/v1/-/CCutFQ-~" width="800" height="300" frameborder="1" allowfullscreen="true"></iframe> </p> <p><iframe src="https://yandex.com.tr/map-widget/v1/-/CCuFQJ7A" width="800" height="300" frameborder="1" allowfullscreen="true"></iframe></p> </div> <div id="contact"> <h1>Contact Us Today</h1> <p><small>WE'D LOVE TO CHAT</small></p> <br> <p><strong>Let's talk northern lights.</strong></p> <br> <form> First name:<br> <input class="inputDesign" type="text" name="firstname" placeholder="Enter your first name here" required> <br> <br> E-mail:<br> <input class="inputDesign" type="email" name="email" placeholder="Enter your e-mail here" required> <br> <br> Message:<br> <textarea class="inputDesign" name="message" rows="3"></textarea> <br> <br> <br> <input id="submitBtn" type="submit" value="Submit"> </form> </div> </main> <footer id="f1"> <a class="fa fa-youtube" href="https://www.youtube.com/user/harunpehlivan1" target="_blank"></a> <a class="fa fa-facebook" href="https://facebook.com/100008152065270" target="_blank"></a> <a class="fa fa-instagram" href="https://www.instagram.com/harunpehlivantebimtebitagem/" target="_blank"></a> </footer> <footer id="f2"> <img id="imgf2" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c46c2a16e5d7.jpg" alt="northern-lights-logo-1.jpg"> <p>© 2023. HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</p> <p>All Rights Reserved.</p> <br> <p id="signature"><small><strong>DESIGNED & DEVELOPED BY TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU </strong></small></p> </footer> </div> </body> </html>
body, #container { padding: 0vw; margin: 0vw; } #container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; background-color: #F5F5F5; color: black; font-family: 'Rokkitt', serif; font-size: 1.7vw; text-align: center; width: 100vw; height: auto; } #header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: sticky; top: 0; width: 100vw; background-color: #F5F5F5; } #logo { height: 7vw; padding-left: 4vw; } #navBar { padding-right: 4vw; } .navButton { background-color: #F5F5F5; font-weight: bold; color: black; font-family: 'Rokkitt', serif; font-size: 1.5vw; text-align: center; border: none; margin-left: 1vw; } .navButton:hover { color: #148F77; } #sel { display: none; } #main { width: 100vw; } .sec1 { background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; font-size: 2.5vw; color: #F5F5F5; padding: 10vw; } .sec2 { padding: 2vw; padding-left: 5vw; padding-right: 5vw; } #lights { background-image: url("https://cdn-cms.f-static.com/uploads/1017556/2000_5b222df15352d.jpg"); } #iceland { background-image: url("https://cdn-cms.f-static.com/uploads/1017556/2000_5b222df1876eb.jpg"); } #norway { background-image: url("https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d7e7857d.jpg"); } #sweden { background-image: url("https://cdn-cms.f-static.com/uploads/1017556/2000_5b2230e1ab99e.jpg"); } #finland { background-image: url("https://cdn-cms.f-static.com/uploads/1017556/2000_5b53ad0bd1e1c.jpg"); } #north { background-image: url("https://cdn-cms.f-static.com/uploads/1017556/2000_5b2242d5b0f25.jpg"); } #contact { background-color: #ECECEC; font-size: 2vw; padding: 5vw; } .inputDesign { width: 25vw; font-family: 'Rokkitt', serif; padding: 0.5vw; font-size: 1.5vw; text-align: center; } #submitBtn { background-color: #3CB371; color: #F5F5F5; border: none; border-radius: 10vw; font-size: 2vw; font-weight: bold; padding: 1.2vw; } #submitBtn:hover { background-color: #90EE90; } #f1, #f2 { width: 100vw; } #f1 { padding-top: 1vw; padding-bottom: 1vw; background-color: #90EE90; font-size: 2vw; } .fa { padding: 1.5vw; text-decoration: none; background-color: #90EE90; color: black; font-weight: bold; } .fa:hover { color: #3CB371; } #f2 { background-color: #3CB371; font-size: 1.5vw; padding-top: 11vw; padding-bottom: 4vw; } #imgf2 { height: 10vw; width: auto; } #signature { color: #90EE90; } @media (max-width: 600px) { #logo { height: 12vw; } .navButton { display: none; } #sel { padding-right: 4vw; font-size: 3vw; display: inline-block; font-family: 'Rokkitt', serif; background-color: #F5F5F5; color: black; font-weight: bold; border: none; } .opt { background-color: #F5F5F5; font-family: 'Rokkitt', serif; font-weight: bold; color: black; } .sec1 { font-size: 6vw; padding: 30vw; } #lights { padding: 15vw; } .sec2 { font-size: 4vw; } #contact { font-size: 4.5vw; padding: 15vw; } .inputDesign { width: 50vw; padding: 1vw; font-size: 3vw; } #submitBtn { font-size: 4.5vw; padding: 2.5vw; } #f1 { padding-top: 2vw; padding-bottom: 2vw; font-size: 5vw; } #f2 { font-size: 3vw; padding-top: 11vw; padding-bottom: 4vw; } #imgf2 { height: 7vw; } }

Related: See More

Paper Bootstrap Wizard
Accordion Multi Level List Group Menu
Alert Group
List Group Horizontal

Questions / Comments: