"3) Welcome Teacher"
Bootstrap 4.1.1 Snippet by musicnwords

<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 ----------> <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 ----------> <div class="container-fluid home-main"> <h2>Welcome Teacher<span class="blinker"></span></h2> <button type="button" class="btn btn-default">Start a Classroom</button> </div> <div class="container-fluid home-content1"> <div class="row"> <div class="col-md-6 content1-left"> <h3>Why you, the teacher, is at the centre of it all<span class="blinker">!</span></h3> <p>Digital literacy has been identified as a life skill and not merely a job skill. It empowers people with increased access to information.</p> <!-- <div class="content1-left"></div> --> </div> <div class="col-md-6 content1-right"> <p>Digital literacy is important for people to be able to access internet enabled facilities in India, as well as to drive demand for the creation of more digital infrastructure and become part of the wheel of the economy.</p> </div> </div> </div> <div class="container-fluid home-content2"> <p><span>News</span> and <span>announcements</span> for all things on <span>Project Ira</span>, including new <span>releases</span> and <span>course themes</span>.</p> </div>
.home-main{ background: #5812c5; color:#fff; padding: 13%; text-align: center; } .blinker{ animation: blinker 1.5s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } .home-main button{ background: #fff; color: #5812c5; border-radius: 0; font-weight: 700; width: 16%; height: 50px; top: 4%; margin-top: 3%; } .home-main button:hover{ transition: 1s ease; color:#5812c5; width: 19%; } .content1-left{ padding:9%; } .content1-right{ padding:9%; background:#e4e4e4; } .home-content2{ background: #adb5bd; padding: 1.4%; text-align: center; } .home-content2 p{ font-size: 18px; line-height: 50px; } .home-content2 p span{ font-weight: 500; }

Related: See More


Questions / Comments: