Main-page-list-construction

Developer
Zoe
Size
8,672 Kb
Views
2,024
  1. Main-page-list-construction Previews
  2. Main-page-list-construction HTML Codes
  3. Main-page-list-construction CSS Codes
  4. Main-page-list-construction JS Codes

How do I make an main-page-list-construction?

What is a main-page-list-construction? How do you make a main-page-list-construction? This script and codes were developed by Zoe on 05 January 2023, Thursday.

Main-page-list-construction Previews
IQ Test

Main-page-list-construction - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>main-page-list-construction</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--nav bar-->
<nav class="navbar navbar-default"> <div class="container-fluid"> <!--login --> <ul> <li class="user"> <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;"><a href="#"><img src="https://s11.postimg.org/agoa4g5kz/account.png" width="25" height="25"></a></button></button> <div id="id01" class="modal"> <form class="modal-content animate" action="action_page.php"> <div class="imgcontainer"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span> </div> <div class="container"> <h5><label><b>Username</b></label></h5> <input type="text" placeholder="Enter Username" name="uname" required> <h6><label><b>Password</b></label></h6> <input type="password" placeholder="Enter Password" name="psw" required> <br><br> <button type="submit" id="login">Login</button> <input type="checkbox" checked="checked"> Remember me </div> </form> </div> </li> <li><a href="https://codepen.io/zoe19971230/full/BQmQaL/">Personalize</a></li> <li><a href="https://codepen.io/zoe19971230/full/jVzojy/">Forum</a></li> <li><a href="#news">News</a></li> <li><a href="#list">Bahavior List</a></li> <li><a href="#sec1">Home</a></li> </ul> </div>
</nav>
<!--home-->
<div class="container-fluid"> <!--banner--> <div id="fullpage" class="row" style="min-height:200px; height:500px;"> <div class="section" id="sec1"> <div class="slide" id="sec1sli1"> <img class="right" id="t-logo" src="https://s11.postimg.org/43abf4rnn/Untitled_1.png" width="100" height="100"> <img class="right" id="light-bulb" src="http://www.hwwe16.org/r1.gif" width="150" height="150"> <h2 style="font-family: verdana;font-weight: bold;"> T-Tips</h2> <p2>This website can help you to handle your problematic students!</p2> </div> <div class="slide" id="sec1sli2"> <h>Tips 1: Apply “rewarding scheme” on students</h> <p>Apply rewarding scheme on students, awards act as an incentive, build up their sense of order, concerning others by praise and rewarding them. Awards could be candies, stickers or short breaks for games.</p> </div> <div class="slide" id="sec1sli3"> <h>Tips 2: calm the students down</h> <p> ‘Low EQ’ students need lots of attention,so they always show off in the lesson.Sometimes they Might feel angry ,sad,or dispirited by the reactions of others.Then they will become out of control and radical.</p> </div> </div> </div> <!--null container or seperation--> <div class="row col-height2"></div> <!--main-nav--> <div id="main-nav" class="row"> <div class="col-md-3 col-height2 btn-nav"> <a href="#list"><img src="https://s17.postimg.org/rdbix7bfz/list.png" width="100" hieght="100"><br>Bahavior List</a> </div> <div class="col-md-3 col-height2 btn-nav"> <a href="#news"><img src="https://s17.postimg.org/wq0dbbzcf/news.png" width="100" hieght="100"><br>News</a> </div> <div class="col-md-3 col-height2 btn-nav"> <a href="https://codepen.io/zoe19971230/full/jVzojy/"><img src="https://s17.postimg.org/fmxlftinj/forum.png" width="100" hieght="100"><br>Forum</a> </div> <div class="col-md-3 col-height2 btn-nav"> <a href="https://codepen.io/zoe19971230/full/BQmQaL/"><img src="https://s11.postimg.org/3rhqofk8z/person_01.png" width="100" hieght="100"><br>Personalize</a> </div> </div> <!--null container for seperation--> <div id="null" class="row col-height2"></div>
</div>
<!--behvior list-->
<div class="container-fluid"> <!--null container for seperation--> <div id="null" class="row col-height2"></div> <div id="list" class="list row"> <div id="header" class="row"> <H1 style="font-family:verdana;">Student Behavior Check List</h1> <H4>Tick the box if the bahavior appear on your students</H4> </div> <div id="container" class="row col-height3"> <div id="content" class="row"> <div class="col-md-6"> <br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="do-hw" type="checkbox" value="1" />Refuse to do homework <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="talkative" type="checkbox" value="2" />Talkative <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="disturb" type="checkbox" value="3" />Disturb Others <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="learn" type="checkbox" value="4" />Find difficult to concentrate <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="late" type="checkbox" value="5" />Often late/absent <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="communicative" type="checkbox" value="6" />Uncommunicative <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="emotional" type="checkbox" value="7" />Emotional <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="tricks" type="checkbox" value="8" />Play tricks on others </div> <div class="col-md-6"> <br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="react" type="checkbox" value="9" />Over react <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="obey" type="checkbox" value="10" />Refuse to obey <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="lie" type="checkbox" value="11" />Tell lie <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="fight" type="checkbox" value="12" />Fight / Argue with others <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="walk-around" type="checkbox" value="13" />Walk around classroom <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="repeat-action" type="checkbox" value="14" />Repeative action <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="communicative" type="checkbox" value="15" />Refuse to solve problem <br><br> <div class="dropdown"> <div class="dropbtn"><img id="add" src="https://s21.postimg.org/au80v94p3/add_button.png" width="20" height="20"></div> <div class="dropdown-content "> <a href="#">Peter Chan</a> <a href="#">Student 2</a> <a href="#">Student 3</a> </div> </div> <input id="stunned" type="checkbox" value="16" />Stunned </div> </div> <div id="bottom" class=" col-height2"> <a href="https://codepen.io/zoe19971230/full/wozgrj/"><button id="btn-save" class="button">Save</button></a> </div> </div> <br><br> <!--news--> <div class="container-fluid"> <!--news content--> <div id="news"> <div class="row" id="content-box"> <div class="content-1"> <div class="content-container" id="content1"> <div class="col-xs-9 col-md-6" id="news-text"> <h style="font-size:100%;font-family: verdana;font-weight: bold;"> More young Hongkongers seek treatment for mental health problems, figures show </h> <p style="font-family:verdana;"> The number of young people seeking treatment for mental health problems at public facilities increased steadily between 2010 and last year, with the biggest jump – 78 per cent – seen in those under 15 years of age. </p> <div class="newslk"> <a href="http://www.scmp.com/news/hong-kong/health-environment/article/1946060/
more-young-hongkongers-seek-treatment-mental" target="_blank"> Read more ></a></div> </div> <div class="col-xs-9 col-md-6" id="pic1"> </div> </div> </div> <div class="content-2"> <div class="content-container" id="content2"> <div class="col-xs-9 col-md-6" id="news-text"> <h style="font-size:100%;font-family: verdana;font-weight: bold;">For young Hongkongers battling mental health issues,support exists but hurdles remain </h> <p style="font-family:verdana;"> Hong Kong’s young people will continue to resort to self-harm and even suicide if teachers, parents and the government do not make urgent interventions, the head of an anxiety support group has said. </p> <div class="newslk"> <a href="http://www.scmp.com/news/hong-kong/education-community/article/2020030/
young-hongkongers-battling-mental-health-issues" target="_blank"> Read more ></a></div> </div> <div class="col-xs-9 col-md-6" id="pic2"> </div> </div> </div> <div class="content-3"> <div class="content-container" id="content3"> <div class=" col-xs-9 col-md-6" id="news-text"> <h style="font-size:100%;font-family: verdana;font-weight: bold;">Focus on Hong Kong students’ mental health–call for more awareness and assistance </h> <p style="font-family:verdana;"> 22 student suicides in the past academic year in Hong Kong have put mental health issues under the spotlight, with calls to coax sufferers out of the shadows and offer them appropriate help </p> <div class="newslk"> <a href="http://www.scmp.com/lifestyle/families/article/1996538/
focus-hong-kong-students-mental-health-call-more-awareness-and" target="_blank"> Read more ></a></div> </div> <div class=" col-xs-9 col-md-6" id="pic3"> </div> </div> </div> <div class="content-4"> <div class="content-container" id="content4"> <div class="col-md-6" id="news-text"> <h style="font-size:100%;font-family: verdana;font-weight: bold;">How a fixed classroom structure can help children navigate the social jungle that is school </h> <p style="font-family:verdana;"> Juli Min says schools could benefit from adopting a hybrid system that encourages young students, particularly the less confident ones, to build lasting bonds with their peers and teachers. </p> <div class="newslk"> <a href="http://www.scmp.com/comment/insight-opinion/article/2024860/
how-fixed-classroom-structure-can-help-children-navigate" target="_blank"> Read more ></a></div> </div> <div class="col-xs-9 col-md-6" id="pic4"> </div> </div> <div class="content-container" id="content5"> <div class="col-md-6" id="news-text"> <h style="font-size:100%;font-family: verdana;font-weight: bold;">Storm offered no respite to students </h> <p style="font-family:verdana;"> With the arrival of Typhoon ­Haima, many ­students, teachers and workers were ­wondering if it would mean they would get an extra day off. For some students, this did not happen and parents complained on social media about their children being given a lot of homework to do on ­Friday when the No 8 storm warning was raised, resulting in schools being shut. </p> <div class="newslk"> <a href="http://www.mingpaocanada.com/realtimenews/VAN/content_hk_new.cfm?aid=228548&m=0" target="_blank"> Read more ></a></div> </div> <div class="col-xs-9 col-md-6" id="pic5"> </div> </div> </div> </div> <!--news show reel--> <div class="row picture-container"> <div class="col btn1"> <img src="http://cdn2.i-scmp.com/sites/default/files/styles/980x551/public/images/methode/2016/05/16/587457be-1b6f-11e6-9777-749fedcc73f5_1280x720.JPG?itok=hFxqvMDA" /> </div> <div class="col btn2"> <img src="http://cdn3.i-scmp.com/sites/default/files/styles/980x551/public/images/methode/2016/09/16/60bcb894-6462-11e6-aefa-e8609c477948_1280x720.JPG?itok=3ErFVOLm" /> </div> <div class="col btn3"> <img src="http://cdn1.i-scmp.com/sites/default/files/styles/980x551/public/images/methode/2016/07/29/d3f046d2-53af-11e6-98ca-49b1c9e3ed10_1280x720.JPG?itok=Z4KkHSVt" /> </div> <div class="col btn4"> <img src="http://cdn1.i-scmp.com/sites/default/files/styles/980x551/public/images/methode/2016/10/04/5d87fbb6-894c-11e6-afd1-1c0f6e75ba2c_1280x720.JPG?itok=7X0WbvUt" /> </div> <div class="col btn5"> <img src="http://static.apple.nextmedia.com/images/e-paper/20161021/large/1477040051_1b4d.jpg" /> </div> </div> </div> <div id="share-heading"> <h>Share our website!</h> <p>If you ilke our website,let's share it to other teachers!</p> </div> <div id="share" class="s-img"> <a href="https://plus.google.com/share?url=https://codepen.io/zoe19971230/pen/vydvoV" target="blank"><img id="google+" src="https://s18.postimg.org/b4pdb7npl/image.png"></a> <a href="https://twitter.com/intent/tweet?text=main-page-list-construction&url=https://codepen.io/zoe19971230/pen/vydvoV&via=CodePen" target="blank"><img id="twitter" src="https://s12.postimg.org/ii6yo70mj/twitter.png"></a> <a href="https://www.pinterest.com" target="blank"><img id="printrest" src="https://s12.postimg.org/gxqp43wh9/printrist.png"></a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://codepen.io/zoe19971230/pen/vydvoV" target="blank"><img id="facebook" src="https://s16.postimg.org/lymf2xgit/facebook.png"></a> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.css'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Main-page-list-construction - Script Codes CSS Codes

.container-fluid { font-family: verdana;
}
h2 { font-size: 90px; color: white; text-align: center; position: relative; bottom: 190px; margin-right: 4%;
}
.content-container h { width: 90%; left: 50px;
}
.content-container p { width: 80%; left: 50px; top: 200px;
}
#sec1sli2 h { font-size: 25px; position: relative; top: -80px; margin-right: 10px; color: white; text-align: center;
}
#sec1sli2 p { padding: 10px; color: white; width: 50%; text-align: left; position: relative; top: -50px; left: 320px; font-size: 15px;
}
#sec1sli3 h { font-size: 25px; position: relative; top: -80px; margin-right: 4%; color: white; text-align: center;
}
#sec1sli3 p { padding: 10px; color: white; width: 50%; text-align: left; position: relative; top: -50px; left: 320px; font-size: 15px;
}
p2 { color: white; font-family: verdana; position: relative; bottom: 180px; margin-right: 1%;
}
/*nav-bar*/
.navbar { position: fixed; background-color: #5CBCAC; font-size: 90%; margin: 0 auto; margin-left: 25%; z-index: 10000; max-width: 100%; line-height: 25px; opacity: 0.97;
}
.user { opacity: 1;
}
li { float: right; list-style-type: none;
}
li a { display: block; color: white; text-align: center; padding: 15px 20px; text-decoration: none; font-size: 14px;
}
.navbar li a:hover { background-color: #347f72; color: white; text-decoration: none;
}
/*nav-col*/
.col-height2 { min-height: 40px;
}
/*banner*/
.fp-slidesNav ul li a span { background-color: white;
}
.fp-slidesNav ul li:hover a.active span { height: 12px; width: 12px; margin: -6px 0 0 -6px; border-radius: 100%;
}
#light-bulb { left: 130px; bottom: 45px; position: relative;
}
#t-logo{ position: relative; bottom: 45px; right: 180px;
}
#sec1sli1 { color: #5CBCAC; text-align: center; background-position: center center; background-image: url(https://s13.postimg.org/4ly025oyv/homepage.png);
}
#sec1sli2 { text-align: center; background-position: center center; background-color: #5CBCAC; background-image: url(https://s11.postimg.org/o1vx7zfvn/slide3_01.jpg);
}
#sec1sli3 { text-align: center; background-position: center center; background-color: #5CBCAC; background-image: url(https://s15.postimg.org/3zoay5zsb/slide2_01.jpg);
}
/*home main nav button*/
#null { background-color: white;
}
#main-nav { width: 650px; margin: 0 auto;
}
.btn-nav { color: #5CBCAC; text-decoration: none; display: inline-block; text-align: center;
}
.btn-nav a:link { color: #5CBCAC; text-decoration: none;
}
.btn-nav a:hover { color: #347f72; text-decoration: none;
}
/*news*/
* { box-sizing: border-box;
}
.content-container { /*image directly move to the left instead of shrink in whole with news text*/ width: 100%; height: 500px; background-color: #5cbaac; color: #fff; text-align: left; position: absolute; font-size: 30px;
}
#content-box { height: 500px; background-color: #5cbcac;
}
.picture-container { background-color: #333; display: flex; flex-flow: row wrap; justify-content: flex-start;
}
.col { flex: 1; cursor: pointer;
}
.col img { width: 100%; filter: brightness(50%); transition: all 0.3s;
}
.col img:hover { filter: brightness(80%);
}
.newslk { position: absolute; top: 400px; right: 50px; font-size: 15px; color: white;
}
.newslk a { color: white;
}
#pic1 { background-image: url(http://cdn2.i-scmp.com/sites/default/files/styles/980x551/public/images/methode/2016/05/16/587457be-1b6f-11e6-9777-749fedcc73f5_1280x720.JPG?itok=hFxqvMDA); height: 500px; background-size: cover; background-position: center; background-attachment: absolute;
}
#pic2 { background-image: url(http://cdn3.i-scmp.com/sites/default/files/styles/980x551/public/images/methode/2016/09/16/60bcb894-6462-11e6-aefa-e8609c477948_1280x720.JPG?itok=3ErFVOLm); height: 500px; background-size: cover; background-position: center; background-attachment: absolute;
}
#pic3 { background-image: url(http://cdn1.i-scmp.com/sites/default/files/styles/980x551/public/images/methode/2016/07/29/d3f046d2-53af-11e6-98ca-49b1c9e3ed10_1280x720.JPG?itok=Z4KkHSVt); height: 500px; background-size: cover; background-position: center; background-attachment: absolute;
}
#pic4 { background-image: url(http://cdn1.i-scmp.com/sites/default/files/styles/980x551/public/images/methode/2016/10/04/5d87fbb6-894c-11e6-afd1-1c0f6e75ba2c_1280x720.JPG?itok=7X0WbvUt); height: 500px; background-size: cover; background-position: center; background-attachment: absolute;
}
#pic5 { background-image: url("http://static.apple.nextmedia.com/images/e-paper/20161021/large/1477040051_1b4d.jpg"); height: 500px; background-size: cover; background-position: center; background-attachment: absolute;
}
h1,
h4 { font-family: verdana; text-align: center; margin-right: 40px;
}
h { font-size: 40px; position: absolute; text-align: left; top: 40px;
}
p { font-size: 16px; top: 200px; text-align: left; position: absolute;
}
/*forum*/
#forum { color: #FFF; background: #5CBCAC; width: 95%; margin: 0 auto;
}
/*behavior list*/
.col-height3 { min-height: 600px;
}
.col-height4 { min-height: 200px;
}
#header { min-height: 130px; color: white; text-align: center; background-color: #5CBCAC;
}
#container { background-color: #5CBCAC;
}
#content { width: 960px; height: 600px; margin: 0 auto; background-color: white; color: #2CBCAC; font-size: 150%; padding: 40px;
}
#bottom { min-height: 200px; text-align: center; padding: 50px;
}
.button { background-color: #43a393; border: 2px solid #FFF; border-radius: 15px; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button:hover { background-color: #347f72; /* Green */ color: white; text-decoration: none;
}
/*login*/
input[type=text],
input[type=password] { width: 50%; padding: 5px 5px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box;
}
/* Set a style for all buttons */
button { background-color: #5cbcac; color: white; padding: 0px 0px; margin: 0px 0; border: none; cursor: pointer; width: 10%;
}
#add { position: relative; cursor: pointer;
}
/* Center the image and position the close button */
.imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative;
}
.container { padding: 16px;
}
/* The Modal (background) */
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ background-color: #fff; /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ padding-top: 60px;
}
/* Modal Content/Box */
.modal-content { background-color: #007777; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 1px solid #888; width: 50%; /* Could be more or less, depending on screen size */ min-height: 50%;
}
/* The Close Button (x) */
.close { position: absolute; right: 25px; top: 0; color: #000; font-size: 25px; font-weight: bold;
}
.close:hover,
.close:focus { color: fff; cursor: pointer;
}
/* Add Zoom Animation */
.animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom { from { -webkit-transform: scale(0) } to { -webkit-transform: scale(1) }
}
@keyframes animatezoom { from { transform: scale(0) } to { transform: scale(1) }
}
.dropbtn { border: none; cursor: pointer; z-index: 100;
}
.dropdown { position: relative; display: inline-block;
}
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; font-size: 10px; right: 0; z-index: 10000;
}
.dropdown-content a { color: white; font-size: 8px; padding: 12px 16px; text-decoration: none; display: block; background-color: #347f72;
}
.dropdown-content a:hover { background-color: #f1f1f1; color: #347f72;
}
.dropdown:hover .dropdown-content { display: block;
}
.dropdown:hover .dropbtn {}
#share { height: 200px;
}
#share-heading{ height:40px;
}
#share-heading h{ position:relative; text-align:center; left:500px; font-size:25px; color:#5cbcac;
}
#share-heading p{ position:relative; text-align:center; top:50px; font-size:15px; color:#5cbcac;
}
#share img{ weidth:80px; height:80px; padding:10px; position:realtive;
}
.s-img{ position:realtive; margin-left:450px; margin-top:100px;
}

Main-page-list-construction - Script Codes JS Codes

$(document).ready(function() { $('#fullpage').fullpage({ navigation: false, navigationPosition: 'right', navigationTooltips: ['home', 'news', 'forum', 'list'], slidesNavigation: true, slidesNavPosition: 'bottom', controlArrows: false, autoScrolling: false, fitToSection: false });
});
/*news*/
$('.btn1').click(function() { $('.content-container').css('z-index', '1'); $('.col img').css('filter', "brightness\(50%\)"); $('.btn1 img').css('filter', "brightness\(100%\)"); $('#content1').css('z-index', '9999');
});
$('.btn2').click(function() { $('.content-container').css('z-index', '1'); $('.col img').css('filter', "brightness\(50%\)"); $('.btn2 img').css('filter', "brightness\(100%\)"); $('#content2').css('z-index', '9999');
});
$('.btn3').click(function() { $('.content-container').css('z-index', '1'); $('.col img').css('filter', 'brightness\(50%\)'); $('.btn3 img').css('filter', "brightness\(100%\)"); $('#content3').css('z-index', '9999');
});
$('.btn4').click(function() { $('.content-container').css('z-index', '1'); $('.col img').css('filter', "brightness\(50%\)"); $('.btn4 img').css('filter', "brightness\(100%\)"); $('#content4').css('z-index', '9999');
});
$('.btn5').click(function() { $('.content-container').css('z-index', '1'); $('.col img').css('filter', "brightness\(50%\)"); $('.btn5 img').css('filter', "brightness\(100%\)"); $('#content5').css('z-index', '9999');
});
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }
}
$('#btn-save').click(function() { if ($('#option1').prop('checked')) { //window.location.href='https://www.apple.com'; $(location).attr('href', 'https://www.apple.com'); } if ($('#option2').prop('checked')) { window.location.href = "http://www.polyu.edu.hk"; }
});
$('.social-toggle').on('click', function() { $(this).next().toggleClass('open-menu');
});
Main-page-list-construction - Script Codes
Main-page-list-construction - Script Codes
Home Page Home
Developer Zoe
Username zoe19971230
Uploaded January 05, 2023
Rating 3
Size 8,672 Kb
Views 2,024
Do you need developer help for Main-page-list-construction?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zoe (zoe19971230) Script Codes
Name
Conclusion
A Pen by Zoe
Personalize
Assignment 3 15072257D
Reminder
Fullpage 1
Forum2
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!