A test site for Responsive Webdesign

A demo webpage....

This page is for testing layout an design - not at least my css and some Jquery scripting.

One problem is to make the design looks reasonable on different devices. Now a day this is not just about desktop screen and mobile phones, but everything in between as tablets , Ipad etc.

Please give respons if this page looks terrible on your particular device ..

GRID

<section class=grid-container> + div

Test pages :

demo/a-flex-box-demo-page.asp

Animate .css

se https://daneden.github.io/animate.css/

a-html-bootstrap-template.html

Animation CSS

Jquery test

a-jquery-testpage.asp

Navigation flex

flex-navigation.asp | flex-navigation-1.asp

12 grid layout

grid test 1

12 grid layout

New 2 dimensional grid layout

Basis style

sitename

Headings ....

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

paragraf p gives this text format

new line after P

Links

www-link iconmonstr-globe-5.svg

youtube-link youtube.svg

PDF - dont use class pdf-24.svg

DOCX - dont use class word.svg

PPTX - dont use class PowerPoint.svg

REDIGER

Unordered list

  • first paragraph
  • second paragraph
  • third paragraph
  • not using any class

Ordered list

  1. first paragraph
  2. second paragraph
  3. third paragraph
  4. using the class=text

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

Font-types

Raleway 1.0em

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

RobotoLight

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

candara 1.0em

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Database integration

db-news-display.asp

No news at the moment - show you a picture insteadupload/grafik/homer-2.jpg

Add News

Database info:

conn_string_database.asp

DB : database.mdb

table: news

FILER:

  1. db-news-display.asp
  2. db-news-add.asp
  3. db-news-add-ac.asp
  4. db-news-update.asp
  5. db-news-update-ac.asp
  6. db-news-del.asp /ol>

    OPdate og delete vikrer men siderne skal opdateres efterfølgende ..? SÆT Response.Expires = 0 DET VIRKER VIST

Text from database

Page 2

This text can be edited from administration module .

Click 'admin' in the button of the page - password is 'otto'.
Check out all the possibilities for editing , uploading photos etc

Page 3


Articel 3 - can be edited from admin-module

Formular

db-contact-form.asp

Your contact info:

db-contact-display.asp

Anvender div class=scroll-data

og span class .db-data-show

Der er   0 kontaktpersoner i telefonlisten.

Sorter efter: Nyeste |Navn |

Pic & video

Picture + figcaption

some picture
Figcaption goes here
css img: width: 100%; max-width: 100%;

YouTube player clas i P tag

Qu viser hvordan man spiser en fisk - med hoved og hale og det hele !
Koden placeres i footer
/* Light YouTube Embeds by @labnol */ /* Web: http://labnol.org/?p=27941 */

CSS style: youtube-player

Fontawesome

Fra Fontawesome

i HEADER linkes til script https://kit.fontawesome.com/7c5c335092.js

i styles´heet formateres

h3 rolldown class

Rolldown - answer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ACCORDION - HUSK SCRIPT i FOOT + LINK til FONTAWESOME i HEADER

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Folder-slide-3

Using ul id='slider3'
  • Pictures from Greece by otto leholt
    Blue-sky- sea and-orange-greece.jpg    | 167 Kb
  • Pictures from Greece by otto leholt
    Full moon at sunset in Paleochora.jp    | 176 Kb
  • Pictures from Greece by otto leholt
    Greek fruit salad.jpg    | 560 Kb
  • Pictures from Greece by otto leholt
    Hania harbour 1-juli-2018.jpg    | 235 Kb
  • Pictures from Greece by otto leholt
    IMG_3331.jpg    | 109 Kb
  • Pictures from Greece by otto leholt
    Juleaftensdag 2018 -1.jpg    | 509 Kb
  • Pictures from Greece by otto leholt
    Morning fog on Amager Fælled.jpg    | 170 Kb

The image slider shows any pictures you upload to the specific folder include file= billeder-folder-slide-3.asp
CSS: ul id='slider3'
In footer
<script src="js/jquery-3.2.1.min.js"> og
<script src="js/jquery.cycle.all.js">

Screen width

CSS Arrows

Right arrow:

Left arrow:

Up arrow:

Down arrow: