#46;.</span><br><span style=>I & | Explore Tumblr posts and blogs

siva3155 · 6 years ago

Text

300+ TOP PSM Objective Questions and Answers

PSM Multiple Choice Questions :-

1.The concept of Social Medicine was first introduced by a) Neuman and Virchow b) Robert Grotjahrr c) John Ryle d)Rene sand Ans:a 2.Following are true about Kerala except a) BR- 29/1000 b) per capita annual income - Rs. 2594 C) Life Expectancy - 66.6 years t d) Female literacy rate-65%. Ans:b 3.Rules of Sanitation in UK is proposed by a) John Snow b) Chadwick c) Winslow d) John Howard Ans:b 4.Human Development Index (UNDP) includes a)Life Expectancy , gross national product and per capita income b)Education ,social status and life expectancy c)Per capita income, education and life expectancy d) Education, life expectancy and purchasing power Ans:c 5.Best method for collecting vital statistics in India a) Active surveillance b) Passive surveillance c) Sentinel surveillance d) Contact tracing Ans:c 6.Surveillance by WHO is not done for a) Polio b) Malaria c) Viral encephalitis d) Relapsing fever Ans:c 7.Which one of the following branches of Sociology studies the relationship between organism and environment? a) Ergonomics b) Social physiology c) Ecology d) Social pathology Ans:c 8.Primordial prevention is the a)Prevention of diseases among-the hill - dwelling and tribal people b)Prolongation of human life span to the maximum extent c)Promotion of health, well-being and efficiency d)Prevention of diseases through modification of their risk factors. Ans:d 9.What is the definition of society a) System of social relationship between individuals b) Social relationship between families c) intervention of individuals and people d) relationship of individual, family and the country Ans:a 10.Which of the following is tertiary level of prevention a) Health promotion b) Specific protection c) early diagnosis and treatment d) disability limitation. Ans:d

PSM Objective Questions and Answers 11.All of the following require surveillance according to WHO except a) Chicken Pox b) yellow fever c) malaria d) Rabies Ans:a 12.PQLI includes all except a) Literacy rate b) per capita GNP c) IMR d) life expectancy at 1 yr. Ans:b 13.In a country, socio economic progress is best indicated by a) Gross net production b) IMR C) Annual per capital income of the family d) Death rate Ans:c 14.VftA Prophylaxis in 3-6 yrs children is an example of a) Health promotion b) Specific protection c) Early diagnosis and treatment d) Disability limitation. Ans:b 15.Prophylactic administration of Vitamin A in a child is a) Health promotion b) Treatment c) Specific protection d) Rehabilitation. Ans:c 16.The period of pathogenesis is the period a) Of incubatory processes only b) Which begins with the entry of disease causing agent c) Of subclinical manifestation d) Preliminary to the onset of disease in man Ans:b 17.The current concept of health promotion and the related activities lead to a) Better treatment of a problem b) Critical awareness and life style changes c) Adoption of prophylactic services d) Better health services usage Ans:b 18.Disease rate is a) Risk of susceptibility b) Usually expressed as percentage c) Time period in a calendar year d) disease occurrence in a specified time period Ans:b 19.The measure used to express the global burden of diseasg, i. e. how a healthy life is affected by disease is a) Disability - Adjusted life year b) Case fatality rate c) Life Expectancy d) Age- Specific incidence rate. Ans:a 20.Leprosy and tuberculosis are best prevented by a) Chemoprophylaxis b) Early diagnosis and treatment c) Influenza d) Immunoprophylaxis Ans:b 21.All show iceberg phenomenon except a) Influenza b) Polio c) Hepatitis d) Chicken pox Ans:d 22.Provision of carotene - rich diet in order to prevent xerophthalmia is a measure under a) Health promotion b) Specific protection c) Early diagnosis and treatment d) Rehabilitation Ans:b 23.The concept of Levels of Prevention" aims at a) Ascertaining the prognosis of a disease b) Eradication of a disease c) Preventing epidemics d) Intervening in the natural history of a disease Ans:d 24.The disease which is known as "Father of public health" is a) Small pox b) Rabies ' c) Plague d) Cholera Ans:d 25.A list of comments against the World Health Organization' definition of health given. Which of them is not a critics a) Health is considered a state responsibility b) No satisfactory definition of well being c) It sets standards of 'positive' health to be attained by all people d) Utopic rather than realistic goal Ans:c 26.What is the actual intention of doing sentinel surveillance ? a) To know the total number of cases b) Eor health planning c) To know the natural history of the disease d) To prevent the disease. Ans:a 27.Virulence of a disease is indicated by a) proportional mortality rate b) specific mortality rate c) case fatality ratio d) amount of GDP spent on the disease Ans:c 28.All are true of Crude death rate except a) It is a proportion b) Includes death in all age groups c)Can be used to compare mortality between 2 countries d)No. of deaths in a year/Mid year pop x 1000. Ans:c 29.Provision of free medical care to the people at government expense is known as a) State medicine b) Social therapy c) Social medicine d) Social insurance programme. Ans:c 30.The first country to socialize medicine completely was a) Germany b) Great Britain c) Russia d)U. S. A. Ans:a 31.Man is a secondary host for a) malaria b) Tuberculosis c) filariasis d) relapsing fever Ans:a 32.Living standard of a people is best assessed by a) Infant mortality rate b) Material mortality rate c) Physical quality of life index d) death rate Ans:c 33.Pap smear is an example of a) Primary level of prevention b) Secondary level of prevention c) Tertiary level of prevention d) None of the above. Ans:b 34.The first scientist to observe bacteria and other microscopic organisms was a) Sydenham b) Virchow c) Harvey d) Van Leeuwenhoek Ans:d 35.The following parameter is not included while computing PQLI Index a) Life expectance at 1 year b) Infant mortality rate c) Life expectancy at birth d) Literacy rate Ans:c 36.Prevention of emergence of risk factor is a) Primordial prevention b) primary prevention c) Secondary prevention d) Tertiaiy prevention . Ans:a 37.Notifiable disease is a) Varicella b) cholera c) malaria d) influenza Ans:b 38.Checking for sputum AFB comes under a) primary prevention b) secondary prevention c) tertiary prevention d) quartemary prevention. Ans:b 39. Which of the following is not in WHO surveillance a) Rabies b) Influenza c)TMalaria d) Varicella Ans:d 40.One of the following is not true of International Classification of Disease a) It is revised once in 10 years b) It was devised by UNICEF c)The 10lb revision consists of 21 major chapters. d)It is accepted for National and International use e)It provides the basis for use in other health fields. Ans:b 41.Surveillance is necessary for' alLrecommended bx WHO except a) Relapsing fever b) Malaria c) Plague d) Tuberculosis. Ans:d 42.The method of detecting missing contacts in a disease is a) Screening b) Monitoring c) Active surveillance d) Continuous surveillance Ans:c 43.Which is not under WHO surveillance a) Malaria b) Polio c) Varicella d) Influenza Ans:c 44.The level of prevention practiced by wearing of spectacles is a) Specific protection b) Early diagnosis and prompt treatment c) Disability limitation d) Rehabilitation. Ans:d 45.For searching missing cases used is a) Active surveillance b) Sentinel surveillance c) Passive surveillance d) Monitoring. Ans:b 46. Keeping the frequency of illness within acceptable limits is best described as disease a) Control b) Prevention c) Eradication d) Surveillance Ans:a 47.Object the health services include each of the following except a) Delivery of curative care only b) Health promotion c) Prevention, control or eradication of disease d) Treatment and rehabilitation Ans:b 48.The best method of promoting healthy life style in children a) primordial prevention b) specific protection c) secondary prevention d) high risk strategy Ans:a 49.Kuppuswamy's Socio Economic scale does not include a) Housing b) Education c) Income d) Occupation. Ans:a 50. Following are both Notifiable disease as well as disease under surveillance a) Epidemic typhus b) Relapsing fever c) Plague d) Cholera Ans:d SOCIAL and PREVENTIVE Objective type Questions with Answers 51.The concept of Multifactorial causation of disease was first mooted by a) Pettenkofer b) John Snow c) Lemuel Shattuk d) Edwin Chadwick Ans:a 52.Sullivan's index indicates a) Life free of disability b) Pregnancy rate per HWY c) Hook worm eggs/gm of stool d) Standard of living Ans:a 53."Father of Immunization" was i 4 a) Louis Pasteur b) Edward Jenner c)Salk d) Sabin Ans:a 54. Rheumatic fever prophylaxis is an example of a) Primary prevention b) Primordial prevention c) Secondary prevention d) Tertiary prevention Ans:c 55. Toxoid is prepared from a) Exotoxin b) Endotoxin c) Both d) None. Ans:a 56.accine which must be stored in the freezer compartment of a fridge is/are a)BCG b)OPV c) smallpox d) all of the above Ans: 57.The sterilization temperature of hot air oven is a) 100 C for 1 hour b) 160 C for 30 min c)120C d) 160 C fori hour Ans:d 58.While analyzing data, allocation into similar groups is done to ensure a) comparability b) accuracy c) validity d) sensitivity Ans:a 59.Odd's ratio can be calculated from . a) Relative risk b) Odd's ratio c) Attributable risk d) Incidence rates Ans:a 60.Not included in Expanded programme of Immunization a) Influenza b) Tetanus c) Tuberculosis d) Polio Ans:a 61.Which study method yields relative risk ? a) Case series b) Case control c) Cohort d) Double blind Ans:c 62.The criteria for validity of a screening test are a) accuracy b) predictability c) sensitivity & specificity d) cost effectiveness Ans:c 63. All are true of standardized mortality ratio except a) Expressed as rate per year b) can be adjusted for age c) can be used for events other than death d) ratio of observed deaths to expected deaths. Ans:a 64. All are true of Randomized controlled trial except a)Groups are representative of the population b)Bias may arise during evaluation c)both study and control groups should be comparable. d)in a Single blind trial the doctor does not know of group allocation. Ans:d 65. DPT vaccine is ' a) Toxoid b) Killed vaccine c) Both d) None Ans:a 66. All are morbidity indicators except a) Period of stay in hospital b) Doctor : Population ratio c) attendance of out patient department d) Notification rates. Ans:b 67. Diseases which are imported into a country in which thev do not otherwise ocrirr is a) Exotic b) Epizootic c) Endemic d) None of the above. Ans:a 68.Which is false about cohort study a) incidence can be measured b) used to study chronic diseases, c) expensive d) always prospective Ans:d 69. All of the following can be considered afc Epidemiological variables except b) Incubation period c) Diagnostic tests d) Environmental factors. Ans:c 70.Descriptive Epidemiology is study in relation to a) Time b) Place c) Person d)All Ans:d 71.Live attenuated vaccines are a)OPV b) Hepatitis c) Japanese B encephalitis d) Chicken pox Ans:a 72.The true statement about secular trend is a)Occurs due to naturally occurring variation in herd immunity b)Road side accident is a good example c)Mainly due to environmental factors d)consistent change in a particular direction over a period of time. Ans:d 73.Numerator is not a part of denominator in a) Rate b) Ratio c) Proportion d) All of the above Ans:b 74.Denominator in crude death rate is a)Mid year population b) Mid year females 15-44 years c) Mid year married females 15-44 years d) Mid year males 15-44 years Ans:a 75.Vaccine which is given at earliest a)BCG b)OPV c)MMR d)DPT e)DT Ans:a 76.Longitudinal studies a) Are easy to conduct b) can detect only one risk factor c) can find out incidence of disease. d) Have increased bias. Ans:a 77. Which vaccine is most effective a) Cholera b) Typhoid c) yellow fever d) Chicken pox Ans:c 78. Incidence rate is calculated using a) No. of new cases b) No. of old cases c) Both d) Neither Ans:a 79.Predictability value is a)TP/TP + FPxlOO b)TP/TP + TNxlO0 c)TP/TP + FNxl00 d)FP/TP + FPxl00 Ans:a 80.Transovarian transmission of infection occurs in a) Fleas b) Ticks c) Mosquitoes d) Sandfly Ans:b 81.If the incidence of the disease in females is 3 times as in males, but the prevalence is equal in males and females, what is the inference a) Less duration of the disease in males b) Mortality more in females c) Mortality is less in males d) None of the above. Ans:b 82.In a community of 3000 people, 80% are Hindus, 10% Muslims, 5% Sikh, 4% Christians and y 1% Jains. To select a sample of 300 people to analyze food habits, ideal sample would be a) Sample random b) Stratified random c) Systematic random d)Inverse sampling Ans:b 83. In a population of 10,000 beta carotene was given to 6000; not given to the remainder, 3 out of the first group got lung cancer, 2 out of the other 4000 also got lung cancer conclusion: a)beta carotene and lung cancer have no relation to one another b)the p value is not significant c)the study is not designed properly d)beta carotene is associated with lung cancer Ans:a 84.Active and passive immunity is given simultaneously for all except a) Hepatitis b) Tetanus c) Measles d) Rabies Ans:c 85. Quarantine is for a) Infective period c) Shortest incubation period b) Generation time d) Longest incubation period. Ans:d 86.In the overhead tank of a hostel, cysts of entameba were found. The best method of disinfection is a) Ultraviolet radiation b) Boiling c) Iodination d) Chlorination Ans:d 87.Disease imported to a country not otherwise present a) Exotic b) Enzootic c) Epizootic d) Endemic Ans:a 88. Retrospective study of case sheets (hospital data) and evaluation of medical data is called a) Medical audit b) Medical evaluation c) Performance evaluation d) Progressive screening Ans:a 89. AH are live vaccines except a) 17-D b) Rubella c) Salk d) Measles Ans:c 90.All are true about cohort studies except a) Prospective b) Useful for rare diseases c) necessary for incidence d) costly Ans:b 91.Odds Ratio is derived from a) Case control study b) Cohort study c) Cross sectional study d) Randomized trial Ans:a 92.Scientific-proof of an etiological factor is given by a) Case control study b) Cohort study c) Randomized clinical trial d) Non randomized trial Ans:c 93.Matching is done to minimize which of the following errors a) Sampling bias b) Selection bias c) Confounding bias d)Interviewer bias Ans:c 94.Communicability of a disease is determined by a) Secondary attack rate b) Primary attack rate c) Attributable risk d) Relative risk Ans:a 95.In a cohort study non smokers are found having Calung it indicates a) Smoking does not cause lung cancer b) Multifactorial cause of Ca lung c) Smoking is the only cause of lung cancer d) All of the above Ans:b 96. Diagnostic accuracy of a test is determined by a) Sensitivity b) Specificity c) Predictive value d) None Ans:c 97.t&'h Screening test is not useful when a)Incidence of the disease is high in the community b)Incidence is low in the community c)Early detection leads to favorable outcome d)The disease has a lead time Ans:b 98. Which is most economical and best screening a) Mass Screening b) High risk screening c) Multiphasic screening d) Any of the above Ans:b 99.Vertical transmission is by a) Mosquitoes b) Direct contact c) Droplet d) Placenta Ans:d 100.B. C. G. vaccine is administered to children a) Intradermally b) Subcutaneously c) Intramuscularly d) Orally Ans:a 101. Which of the following is most powerful chemical disinfectant a) Phenol b) Lysol c) Dettol d) Pot. Permanganate Ans:b 102. Sharp instruments may be sterilized with a) Radiation b) Lysol c) Hot air d) Any of the above Ans:d Preventive and Social Medicine Questions and Answers pdf Download Read the full article

0 notes

deverodesign · 8 years ago

Link

Reading Time: 11 minutes

Have you ever wanted to build simple coming soon page? And, what coming soon page with working countdown? This short and easy tutorial will help you achieve both. We will start with outlining simple HTML structure. Then, we will add custom CSS to add some style and sparkle to our coming soon page. Finally, we will add a few lines of JavaScript to make the countdown work. Now, it is time to build your coming soon page!

Table of Contents:

Briefing

HTML

CSS

Styles for the main parts and header

Styling the content

Styling the countdown

Finishing with footer

JavaScript

Demo is available on Codepen.

Briefing

As mentioned, the subject of this tutorial will be building simple coming soon page with working countdown. This project will require only minimum amount of resources. In the terms of CSS and fonts, I used two assets. The first one is font Montserrat provided by Google Fonts for body copy. The second is Font Awesome for icons used in the footer. And, when it comes to JavaScript, I used two, Autoprefixer plugin and Babel compiler. That’s all. We are ready to go.

HTML

The whole coming soon page will be composed of three main parts. These parts will be header, main content and footer. Inside the header will be simple SVG image. It will be a placeholder for a logo you may want to use on your coming soon page. The main content will contain h1 heading, countdown, paragraph of text and simple form that will allow people to subscribe for notifications. Finally, footer will contain list with five links to social media, Github and Dribbble.

The majority of the HTML will be quite simple and short. Even the countdown component will have very simple structure. We will use one container with class “countdown”. This container will contain four boxes. One for days, one for hours, one for minutes and one for seconds. Each of these boxes will contain div inside which we will render the numbers. We will give this div class “number”. Then, there will be span with text to specify what time unit the number is.

As I mentioned, footer will contain list with five links. So, we will use five list items with anchor tag in each. And, each of these anchor tags will also contain span. We will use this span as a placeholder for icons provided by Font Awesome. A lot of people use i tag for these icons. I think that spans are a better choice. i tag defines text in an alternate voice or mood. And, it is also usually displayed in italic. Icons don’t have alternate voice or mood. And, they don’t need italics. Spans are neutral, just like icons. Let’s create the HTML structure for our coming soon page.

Code:

<div class="wrapper"> <header> <svg class="header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 318.5 100 125" enable-background="new 0 318.5 100 100"><path d="M88.888 349.937c-.109-.298-.405-.481-.718-.463-5.109.383-11.558.865-18.163 1.358l9.538-12.475c.182-.237.195-.563.033-.814-.162-.25-.46-.376-.756-.307-6.694 1.549-38.692 8.971-43.12 10.304l-6.457-5.539c-.108-.093-.241-.15-.382-.166l-6.908-.774-.053.006-.167.018-.126.032-.044.012-10.098 4.926c-.244.119-.398.366-.398.638 0 .271.155.518.399.637l10.442 5.075.226 3.224.007.024-.001.026 2.333 16.271.012.042.02.066.079.17.033.052.184.169.008.007.019.005.141.066 19.376 5.903 5.754 3.548 1.262 2.943-2.657 14.021c-.04.212.019.431.159.594.135.157.332.247.538.247l.025-.001c.154-.006 15.421-.557 16.007-.572.221-.006.45-.129.579-.308.243-.335.609-.843-4.467-17.763l-.05-.094-.026-.075c-.375-.606-3.278-5.282-4.554-7.092l31.722-23.125c.257-.187.358-.52.249-.816zm-20.773 1.036c-14.051 1.048-28.297 2.104-31.539 2.321l-.293-4.463c3.457-1.007 25.228-6.127 40.94-9.77l-9.108 11.912zm-17.659 29.556l-4.189-2.583 7.808-2.803-3.619 5.386zm-26.808-24.333l10.913-1.279-8.965 14.862-1.948-13.583zm12.112-.522l7.724 21.011-17.23-5.25 9.506-15.761zm-7.272-12.455l6.365 5.46.312 4.74-11.666 1.368-.856-12.224 5.845.656zm-15.092 3.47l7.845-3.827.554 7.909-8.399-4.082zm36.868 51.644l2.459-12.979 7.688-3.065c1.93 6.464 3.891 13.442 4.275 15.528-2.614.09-11.537.412-14.422.516zm2.215-14.407l-1.011-2.36 4.459-6.637c.893 1.301 2.583 3.965 3.894 6.069l-7.342 2.928zm3.106-10.83l-10.522 3.777-8.154-22.182c6.186-.423 39.375-2.906 48.886-3.618l-30.21 22.023z"/></svg> </header> <main class="content"> <h1>COMING SOON!</h1> <div class="countdown"> <div class="countdown__days"> <div class="number"></div> <span class>Days</span> </div> <div class="countdown__hours"> <div class="number"></div> <span class>Hours</span> </div> <div class="countdown__minutes"> <div class="number"></div> <span class>Minutes</span> </div> <div class="countdown__seconds"> <div class="number"></div> <span class>Seconds</span> </div> </div> <p>Our website is under construction. We`ll be here soon<br />with our new awesome site. Subscribe to be notified.</p> <form action=""> <input id="form-email" name="form-email" type="email" placeholder="Your email address" /> <input type="submit" value="Notify me" /> </form> </main> <footer> <ul class="footer__links"> <li><a href="#"><span class="fa fa-twitter"></span></a></li> <li><a href="#"><span class="fa fa-facebook"></span></a></li> <li><a href="#"><span class="fa fa-google-plus"></span></a></li> <li><a href="#"><span class="fa fa-github"></span></a></li> <li><a href="#"><span class="fa fa-dribbble"></span></a></li> </ul> </footer> </div>

CSS (Sass)

HTML part is complete. Now, we have to add some style to spice up our coming soon page. First, we will take care about the outermost elements such as html, body and wrapper div. We want the coming soon page to be full-height. So, we will need to select all these three elements and set their height to “100%”. Then, we will remove any default padding and margin from html and body elements. We can also change the font-size and font-family.

Finally, we can add some nice background to the wrapper div, along with subtle dark overlay. I chose photo from Unsplash, made by Anders Jildén. How to create the dark overlay? We will use :before pseudo-element to create a full-width and full-height layer which we will lay over the wrapper. In order to render this layer, we will need to set content to “”. Then, we will need to set its position to “absolute” and top and left to “0”. Finally, we will add a semi-transparent background.

Code:

html, body, .wrapper { height: 100%; } html, body { padding: 0; margin: 0; } body { font: 1rem / 1.516 'Montserrat', Arial, sans-serif; } .wrapper { position: relative; background: url(https://source.unsplash.com/vZlTg_McCDo/1920x1080) no-repeat center center / cover; // Dark overlay &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(33, 33, 33, .25); } }

Styles for the main parts and header

It is time to get to the meat of our coming soon page–header, content and footer. All these components will have one thing in common. They all will be positioned “absolutely”. This will give us a lot of flexibility without the need to use flexbox. Don’t get me wrong. There is nothing bad with flexbox. It is great to solve some of the biggest pains in web design very quickly. I love to use it whenever I can. However, I want this coming soon page to work in older browsers, even IE8 and 9.

Flexbox is not supported in these old browsers. So, I decided to stick to “old school” techniques and use position property set to “absolute”. When you set position of some block element to “absolute”, it’s width collapse to the width of the content. We want the header and footer to be full-width. So, we have to set the width to “100%”. Next, we will push the header to the top and center its content (logo). Lastly, we can change the fill color of logo and make it smaller.

Code:

header, .content, footer { position: absolute; } header, footer { width: 100%; } header { top: 0; text-align: center; } .header__logo { max-width: 65px; fill: #fff; }

Styling the content

After finishing the header, next part of our coming soon page is main content. We will center the content horizontally and vertically using top, left and transform combo. Let’s also center the text and use white color to make it more visible on dark background of the overlay. We should also remove default top margin of the heading. Otherwise, the content will not be precisely in the middle of our coming soon page.

Next on the list is styling the form. I decided to use email and submit inputs sitting next to each other without any space between them. To achieve this, we will use float and set it to “left”. The downside is that it will cause the form to collapse. One way to avoid this is by setting form’s display property to “table”. We should also center the form with margin set to “auto” to align it correctly. For inputs, let’s make sure the font-size is “16px”. We can also use more contrasting border.

For the email input, I decided to use white background. The background of button will be transparent–ghost button. Both input elements will have slightly rounded borders, 4 pixels will be enough. And, we should also use some padding to add a bit of inner white space. When someone hover over the button, it will change its background to white and color to black. We can make this change smoother with transition.

Code:

.content { top: 50%; left: 50%; text-align: center; color: #fff; transform: translate(-50%, -50%); h1 { margin-top: 0; } form { margin: auto; display: table; } input { float: left; font-size: 16px; border: 1px solid #fff; } input[type=email] { padding: 12px; background: #fff; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } input[type=submit] { padding: 12px 24px; color: #fff; background: transparent; border-top-right-radius: 4px; border-bottom-right-radius: 4px; cursor: pointer; transition: all .235s ease-in-out; &:hover { color: #212121; background: #fff; } } }

Styling the countdown

The last piece of the main content of our coming soon page is the countdown. Styling it will be relatively easy job. First, we need to float boxes for time data to make sure all boxes are on a single line. We will need to use the trick with display set to “table” we used on form. Otherwise, countdown would collapse. We should also center the countdown so it is aligned with the rest of the content. To make it more dominant, let’s increase the font-size and font-weight of the content.

Now, we are free to float the divs for time data. These divs will contain the numbers. And, we should use some min-width to make the size of each box the same. The last piece of this countdown component are span elements with legend for the countdown. These span elements will be under the numbers (divs). This means we will need to change the display property to “block”. Next, let’s make the legend more subtle by decreasing its font-size. Also, let’s center it.

We can make the countdown more aesthetically pleasing by adding subtle divider between the numbers and legend. This can be achieved using :before pseudo-element of the spans. First, we need to set the position of spans to “relative”. In order to render the :before pseudo-element, we need to again use content set to “”. Then, we will create flat rectangle using width and height and set its background to white. Finally, let’s play a bit with top, right, left and margin to position it.

Code:

.countdown { margin: auto; display: table; font-size: 28px; font-weight: 500; > div { float: left; min-width: 80px; } span { position: relative; display: block; font-size: 16px; text-align: center; &:before { content: ''; position: absolute; top: -2px; right: 0; left: 0; margin-right: auto; margin-left: auto; width: 20px; height: 1px; background: #fff; } } }

Finishing with footer

The last part or component of our coming soon page is footer. This will be also very quick and easy job since footer contain only small amount of content. First, let’s push the footer to the bottom of the page by using bottom property set to “0”. Well, some space below the footer could be better. So, let’s add some slight padding. Next, let’s center the links in the list and remove the default bullets. And, we should set display to “inline-block” to put all list items on a single line.

This can be also achieved by using floats or flexbox. However, we already used floats a lot through this tutorial. Also, floats would require adding the “display fix”. And, for flexbox? We discussed this already. So, display set to “inline-block” is the simplest solution. We should also add some space between individual list items with margin. Next are links inside list items. We will create circular icons with the same width. Combo of display, padding, width and border-radius will do the job.

I came up with the values for padding by trying different values and seeing which one will fit the width–create perfect circle. One thing. We should center the text inside the links. After that, we can add slight white border around the icons and change their color to white. For hover effect, let’s decrease the opacity of links to “.5”. And, we can make this effect smoother with transition.

Finally, we can increase the size of icons, by changing font-size of icons, and align them to the middle vertically. This is all when it comes to styles.

Code:

footer { padding-bottom: 12px; bottom: 0; } .footer__links { text-align: center; list-style-type: none; li { display: inline-block; &:nth-of-type(n+2) { margin-left: 12px; } } a { padding: 8px 0; display: block; width: 41px; text-align: center; color: #fff; border: 1px solid; border-radius: 50%; transition: opacity .235s ease-in-out; &:hover { opacity: .5; } } .fa { vertical-align: middle; font-size: 21px; } }

JavaScript

The last piece of the puzzle, or our coming soon page, is making the countdown work. To do so, we will use setInterval() method with Date object. A relatively high number of web designers don’t like math. Well, this is going beyond web design. So, in order to make this tutorial easier and faster I will not dive into the math necessary for the countdown. Instead, I will simply give you the equations. However, we will need to add some code before that.

First, lets specify the deadline date and store it inside a const. Then, we can cache all the placeholder countdown boxes into consts as well. Next, we create new interval, using setInterval() method, that will repeat every one second. Inside this interval, we will always want to find out what is current date and time. Then, we will use this data and deadline date to find the distance between these two numbers. We will subtract these numbers.

After this comes the time for our magical equations to calculate the data for remaining days, hours, minutes and seconds. Finally, we will use our consts from the beginning and innerHTML to insert the data into the HTML. And, since this interval should repeat every second, we will set the delay parameter to “1000” (1000 milliseconds).

Code:

(() => { // Specify the deadline date const deadlineDate = new Date('December 31, 2017 23:59:59').getTime(); // Cache all countdown boxes into consts const countdownDays = document.querySelector('.countdown__days .number'); const countdownHours= document.querySelector('.countdown__hours .number'); const countdownMinutes= document.querySelector('.countdown__minutes .number'); const countdownSeconds= document.querySelector('.countdown__seconds .number'); // Update the count down every 1 second (1000 milliseconds) setInterval(() => { // Get current date and time const currentDate = new Date().getTime(); // Calculate the distance between current date and time and the deadline date and time const distance = deadlineDate - currentDate; // Calculations the data for remaining days, hours, minutes and seconds const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); // Insert the result data into individual countdown boxes countdownDays.innerHTML = days; countdownHours.innerHTML = hours; countdownMinutes.innerHTML = minutes; countdownSeconds.innerHTML = seconds; }, 1000); })();

Closing thoughts on building simple coming soon page

Great job! You’ve just built simple coming soon page with working countdown! I hope you enjoyed this tutorial. I also hope that you have learned something new, something you will be able to use in your next project. In the end, it wasn’t that hard. Well, maybe the math, but I’m sure you handled it with ease. Again, congrats to great job, and, until the next week, have a great time!

Thank you very much for your time.

Want more?

If you liked this article, please subscribe or follow me on Twitter.

The post Learn How to Build Simple Coming Soon Page with Countdown appeared first on Alex Devero Blog.

#CSS WebDesign #Design Development #content #css #css3 #design #development #experimenting #html #htm

0 notes

testthissimyo · 8 years ago

Text

<table align='center' style="padding: 10px; background-color: #d0d0d0; background-image: url('http://www.madtakes.com/images/Gray-Wind.jpg'); border: ridge; border-color:#B3BBF2; width: 425px; font-size: 12pt;"><tr><td align='center'><a href='http://www.madtakes.com' title='Mad:)Takes - free online ad-Lib word game similar to Mad Libs™'><img border=0 src='http://www.madtakes.com/images/madGlibs.gif' alt='Mad:)Takes - free online ad-Lib word game similar to Mad Libs™'></a></td></tr><tr><td colspan=3 align='center'><form action='http://www.madtakes.com/doglib.php' method='POST'><input type='hidden' name='offsite' value='true'><input type='hidden' name='title' value='Mad:)Take'><center><span style='font-size: 18pt; text-align: center; font-weight: bold; font-variant: small-caps;'>Mad:)Take</span></center><input type='hidden' name='text' value='<-> was so excited to be on TV. He had been selected to be on a game show! It was good timing too. He needed money after blowing all his savings on <->. He wore his best outfit, a <-> and <-> <->s, too filming.<br><br>"Hello and welcome to Jeopardy! I`m your host, <->. Let`s meet our contestants tonight. What`s your name?"<br><br>"My name is <->. I`m from a <-> place ruled by my <-> father. I`m going to show him I`m not a <-> tonight by winning the show! Also I need money. A lot."<br><br>"Great," said <-> <->. "And you?"<br><br>"I`m <->. I`m a <-> from <->. My hobbies are <-> <-> and having casual sex with <->."<br><br>"Okay." said <-> with <->. "And finally, you are?"<br><br>"I`m <->," said <->, who was wearing <-> <-> and <-> sunglasses. "I`m an up-and-coming porn star and I`m NOT ashamed. My specialty is <->. I`m also good at <-> dudes until they see stars and shout `<->.` Basically I`m the baddest <-> you`ve ever seen."<br><br>"Remarkable," said <-> <->. "Now, let`s begin. <->?"<br><br>"I`ll take `Famous Films` for $50 please," said <->, so nervous even his <-> was sweating. <br><br>"<-> <-> <-> in THIS famous film about the destruction of <->," said <->, adjusting their <-> <-> suit jacket. "Thirty seconds on the clock."<br><br><-> buzzed first. "What is `<->.`"<br><br>"Correct," said <->. "<-> in the lead. Select your category."<br><br>"I`ll take `Current Events` for $100."<br><br>"Very well. <->, despot of <->, was recently deposed in what way?"<br><br><-> buzzed. "What is `<->.`"<br><br>"Correct!"<br><br><-> was sweating a lot now. A lot. His suit was starting to smell like <->. With horror, he had realized his dad was in the third row of the audience and was watching him with a <-> expression.<br><br>"I`ll take `Current Events` for $150 please," said <->.<br><br>"Very well. This person recently committed the crime of the century when they stole a $<-> <-> from <->."<br><br><-> knew that! If he could just buzz in time--<br><br><-> beat him. "Who is <->?"<br><br>"Correct! <->, choose another category."<br><br>"Right. History of Science for $200."<br><br>"This famous scientist discovered a cure for <-> by <-> rats for <-> years."<br><br>"Who is <->?" <-> buzzed.<br><br>"Correct again!"<br><br>The game went on and on. <-> had zero dollars. He was losing.<br><br>At the halfway point <-> asked everyone what they would spend their winnings on.<br><br>"A <-> in <->," said <->. "I hear it`s very <-> there and I could finally convince my old flame <-> to give up being a <-> and come back to me."<br><br>"Right," said <->. <br><br>"I would use it to fund more adult pictures," said <->, massaging their <->. "<->."<br><br>"Maybe later," said <->. "<->?"<br><br>"I would use it to... get my life on track. <->."<br><br>"Interesting. Let`s continue."<br><br><-> simply couldn`t compete. He missed every question and got a couple wrong. But finally it was time for DOUBLE JEOPARDY.<br><br>"Contestants," said <->, "answer this question: What famous historical figure freed the slaves?"<br><br>Thirty seconds ticked away. It was time for them all to show their answers.<br><br><-> had written WHO IS ABRAHAM LINCOLN.<br><br><-> had written WHO IS ABE <-> LINCOLN.<br><br><-> had written <->.<br><br>"I`m sorry, <-> and <->," said <-> with <->, "you lose. <->, you win!"<br><br>"I`m happy," said <-> <->, not taking off their sunglasses.<br><br><-> saw his father frowning in the crowd. He felt ashamed. When his father mouthed "<->" at him, he turned around, left the studio, walked to <->`s Taphouse and ordered a <->, hooked up with <-> <-> in the bathroom, and called it a night.<br><br><br><br><br>'><table border='0' style='font-size: 10pt;'><tr><td align='right'>MALE NAME</td><td align='left'><input type='text' name='1'></td></tr><tr><td align='right'>PLURAL NOUN</td><td align='left'><input type='text' name='2'></td></tr><tr><td align='right'>ARTICLE OF CLOTHING</td><td align='left'><input type='text' name='3'></td></tr><tr><td align='right'>NUMBER</td><td align='left'><input type='text' name='4'></td></tr><tr><td align='right'>TYPE OF JEWELLERY</td><td align='left'><input type='text' name='5'></td></tr><tr><td align='right'>NAME</td><td align='left'><input type='text' name='6'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='7' value='{!1}'></td></tr><tr><td align='right'>ADJECTIVE</td><td align='left'><input type='text' name='8'></td></tr><tr><td align='right'>ADJECTIVE</td><td align='left'><input type='text' name='9'></td></tr><tr><td align='right'>MEAN NAME</td><td align='left'><input type='text' name='10'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='11' value='{!6}'></td></tr><tr><td align='right'>ADVERB</td><td align='left'><input type='text' name='12'></td></tr><tr><td align='right'>NAME</td><td align='left'><input type='text' name='13'></td></tr><tr><td align='right'>PROFESSION</td><td align='left'><input type='text' name='14'></td></tr><tr><td align='right'>PLACE</td><td align='left'><input type='text' name='15'></td></tr><tr><td align='right'>VERBING</td><td align='left'><input type='text' name='16'></td></tr><tr><td align='right'>PLURAL NOUN</td><td align='left'><input type='text' name='17'></td></tr><tr><td align='right'>ETHNICITY PLURAL</td><td align='left'><input type='text' name='18'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='19' value='{!6}'></td></tr><tr><td align='right'>EMOTION</td><td align='left'><input type='text' name='20'></td></tr><tr><td align='right'>NAME</td><td align='left'><input type='text' name='21'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='22' value='{!21}'></td></tr><tr><td align='right'>COLOR</td><td align='left'><input type='text' name='23'></td></tr><tr><td align='right'>ARTICLE OF CLOTHING</td><td align='left'><input type='text' name='24'></td></tr><tr><td align='right'>ADJECTIVE</td><td align='left'><input type='text' name='25'></td></tr><tr><td align='right'>UNUSUAL SEX ACT</td><td align='left'><input type='text' name='26'></td></tr><tr><td align='right'>VERBING</td><td align='left'><input type='text' name='27'></td></tr><tr><td align='right'>PHRASE</td><td align='left'><input type='text' name='28'></td></tr><tr><td align='right'>FLIRTY NAME</td><td align='left'><input type='text' name='29'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='30' value='{!6}'></td></tr><tr><td align='right'>ADVERB</td><td align='left'><input type='text' name='31'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='32' value='{!1}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='33' value='{!1}'></td></tr><tr><td align='right'>BODY PART</td><td align='left'><input type='text' name='34'></td></tr><tr><td align='right'>CELEBRITY</td><td align='left'><input type='text' name='35'></td></tr><tr><td align='right'>VERBED</td><td align='left'><input type='text' name='36'></td></tr><tr><td align='right'>CELEBRITY</td><td align='left'><input type='text' name='37'></td></tr><tr><td align='right'>CITY</td><td align='left'><input type='text' name='38'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='39' value='{!6}'></td></tr><tr><td align='right'>COLOR</td><td align='left'><input type='text' name='40'></td></tr><tr><td align='right'>MATERIAL</td><td align='left'><input type='text' name='41'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='42' value='{!21}'></td></tr><tr><td align='right'>PHRASE</td><td align='left'><input type='text' name='43'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='44' value='{!6}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='45' value='{!21}'></td></tr><tr><td align='right'>NAME</td><td align='left'><input type='text' name='46'></td></tr><tr><td align='right'>NATION</td><td align='left'><input type='text' name='47'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='48' value='{!13}'></td></tr><tr><td align='right'>VERBING</td><td align='left'><input type='text' name='49'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='50' value='{!1}'></td></tr><tr><td align='right'>FOOD</td><td align='left'><input type='text' name='51'></td></tr><tr><td align='right'>EMOTION</td><td align='left'><input type='text' name='52'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='53' value='{!13}'></td></tr><tr><td align='right'>NUMBER</td><td align='left'><input type='text' name='54'></td></tr><tr><td align='right'>NOUN</td><td align='left'><input type='text' name='55'></td></tr><tr><td align='right'>FAMOUS PERSON</td><td align='left'><input type='text' name='56'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='57' value='{!1}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='58' value='{!21}'></td></tr><tr><td align='right'>NAME</td><td align='left'><input type='text' name='59'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='60' value='{!21}'></td></tr><tr><td align='right'>DISEASE</td><td align='left'><input type='text' name='61'></td></tr><tr><td align='right'>VERBING</td><td align='left'><input type='text' name='62'></td></tr><tr><td align='right'>NUMBER</td><td align='left'><input type='text' name='63'></td></tr><tr><td align='right'>NAME</td><td align='left'><input type='text' name='64'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='65' value='{!21}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='66' value='{!1}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='67' value='{!6}'></td></tr><tr><td align='right'>TYPE OF BUILDING</td><td align='left'><input type='text' name='68'></td></tr><tr><td align='right'>COUNTRY</td><td align='left'><input type='text' name='69'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='70' value='{!13}'></td></tr><tr><td align='right'>ADJECTIVE</td><td align='left'><input type='text' name='71'></td></tr><tr><td align='right'>NAME</td><td align='left'><input type='text' name='72'></td></tr><tr><td align='right'>PROFESSION</td><td align='left'><input type='text' name='73'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='74' value='{!6}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='75' value='{!21}'></td></tr><tr><td align='right'>BODY PART</td><td align='left'><input type='text' name='76'></td></tr><tr><td align='right'>FLIRTY PHRASE</td><td align='left'><input type='text' name='77'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='78' value='{!6}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='79' value='{!1}'></td></tr><tr><td align='right'>PHRASE</td><td align='left'><input type='text' name='80'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='81' value='{!1}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='82' value='{!6}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='83' value='{!13}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='84' value='{!21}'></td></tr><tr><td align='right'>FLIRTY NAME</td><td align='left'><input type='text' name='85'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='86' value='{!1}'></td></tr><tr><td align='right'>CELEBRITY NAME IN ALL CAPS</td><td align='left'><input type='text' name='87'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='88' value='{!13}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='89' value='{!1}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='90' value='{!6}'></td></tr><tr><td align='right'>EMOTION</td><td align='left'><input type='text' name='91'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='92' value='{!21}'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='93' value='{!21}'></td></tr><tr><td align='right'>ADVERB</td><td align='left'><input type='text' name='94'></td></tr><tr><td align='right'></td><td align='left'><input type='hidden' name='95' value='{!1}'></td></tr><tr><td align='right'>MEAN PHRASE</td><td align='left'><input type='text' name='96'></td></tr><tr><td align='right'>SURNAME</td><td align='left'><input type='text' name='97'></td></tr><tr><td align='right'>DRINK</td><td align='left'><input type='text' name='98'></td></tr><tr><td align='right'>ADJECTIVE</td><td align='left'><input type='text' name='99'></td></tr><tr><td align='right'>NAME</td><td align='left'><input type='text' name='100'></td></tr><tr><td align='center' colspan=2><input type='submit' style='font-weight:bold; color:#f5f5f5; background-color:#444F9F; border-style:outset; border-color:#B3BBF2;' value='Go Mad!'></td></tr></table><input type='hidden' name='wCount' value='100'></form></td></tr></table>

0 notes