init + add M0

.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+
+node_modules/*
+
+db/*
+!db/.gitkeep
+
+!nginx
+nginx/*
+!nginx/nginx.conf
+
+!php
+php/*
+!php/php.ini

README.md

@@ -0,0 +1,36 @@
+## Docker-compose LEMP
+### Inkluderar
+- nginx -> localhost:80
+- php   
+- mariadb -> mariadb
+- phpmyadmin -> localhost:8080
+
+### HowTo
+
+##### Webbroten
+    www/public
+##### Starta servern (containern) med
+    docke compose up -d
+##### Stoppa servern (containern) med
+    docker compose down
+##### Serverns url
+    localhost
+##### phpmyadmin
+    localhost:8080
+##### Anslut till MariaDB med php
+
+````php
+<?php
+    // Definierar konstanter med användarinformation.
+    define ('DB_USER', 'userName'); // Användare i MariaDB
+    define ('DB_PASSWORD', '12345');
+    define ('DB_HOST', 'mariadb');
+    define ('DB_NAME', 'dbName');   // Databasen som anslutning skall ske till
+
+    // Skapar en anslutning till MariaDB och databasen dbName
+    $dsn = 'mysql:host=' . DB_HOST . ';dbname=' . DB_NAME . ';charset=utf8';
+    $db = new PDO($dsn, DB_USER, DB_PASSWORD);
+?> // Ej nödvändigt att avslut "ren" php med ?>
+````
+### ToDo
+    

config/mysql/my.cnf

@@ -0,0 +1,208 @@
+# Copyright © 2020 Joel Paulsson, Noah Jarvis
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+# MariaDB database server configuration file.
+#
+# You can copy this file to one of:
+# - "/etc/mysql/my.cnf" to set global options,
+# - "~/.my.cnf" to set user-specific options.
+#
+# One can use all long options that the program supports.
+# Run program with --help to get a list of available options and with
+# --print-defaults to see which it w  ould actually understand and use.
+#
+# For explanations see
+# http://dev.mysql.com/doc/mysql/en/server-system-variables.html
+
+# This will be passed to all mysql clients
+# It has been reported that passwords should be enclosed with ticks/quotes
+# escpecially if they contain "#" chars...
+# Remember to edit /etc/mysql/debian.cnf when changing the socket location.
+[client]
+port            = 3306
+socket          = /var/run/mysqld/mysqld.sock
+default-character-set = utf8mb4
+
+# Here is entries for some specific programs
+# The following values assume you have at least 32M ram
+
+# This was formally known as [safe_mysqld]. Both versions are currently parsed.
+[mysqld_safe]
+socket          = /var/run/mysqld/mysqld.sock
+nice            = 0
+
+[mysqld]
+character-set-client-handshake = FALSE
+character-set-server = utf8mb4
+collation-server = utf8mb4_unicode_ci
+
+#
+# * Basic Settings
+#
+#user           = mysql
+pid-file        = /var/run/mysqld/mysqld.pid
+socket          = /var/run/mysqld/mysqld.sock
+port            = 3306
+basedir         = /usr
+datadir         = /var/lib/mysql
+tmpdir          = /tmp
+lc_messages_dir = /usr/share/mysql
+lc_messages     = en_US
+skip-external-locking
+#
+# Instead of skip-networking the default is now to listen only on
+# localhost which is more compatible and is not less secure.
+#bind-address           = 172.17.0.1
+#
+# * Fine Tuning
+#
+max_connections         = 100
+connect_timeout         = 5
+wait_timeout            = 600
+max_allowed_packet      = 16M
+thread_cache_size       = 128
+sort_buffer_size        = 4M
+bulk_insert_buffer_size = 16M
+tmp_table_size          = 32M
+max_heap_table_size     = 32M
+#
+# * MyISAM
+#
+# This replaces the startup script and checks MyISAM tables if needed
+# the first time they are touched. On error, make copy and try a repair.
+myisam_recover_options = BACKUP
+key_buffer_size         = 128M
+#open-files-limit       = 2000
+table_open_cache        = 400
+myisam_sort_buffer_size = 512M
+concurrent_insert       = 2
+read_buffer_size        = 2M
+read_rnd_buffer_size    = 1M
+#
+# * Query Cache Configuration
+#
+# Cache only tiny result sets, so we can fit more in the query cache.
+query_cache_limit               = 128K
+query_cache_size                = 64M
+# for more write intensive setups, set to DEMAND or OFF
+#query_cache_type               = DEMAND
+#
+# * Logging and Replication
+#
+# Both location gets rotated by the cronjob.
+# Be aware that this log type is a performance killer.
+# As of 5.1 you can enable the log at runtime!
+#general_log_file        = /var/log/mysql/mysql.log
+#general_log             = 1
+#
+# Error logging goes to syslog due to /etc/mysql/conf.d/mysqld_safe_syslog.cnf.
+#
+# we do want to know about network errors and such
+#log_warnings           = 2
+#
+# Enable the slow query log to see queries with especially long duration
+#slow_query_log[={0|1}]
+slow_query_log_file     = /var/log/mysql/mariadb-slow.log
+long_query_time = 10
+#log_slow_rate_limit    = 1000
+#log_slow_verbosity     = query_plan
+
+#log-queries-not-using-indexes
+#log_slow_admin_statements
+#
+# The following can be used as easy to replay backup logs or for replication.
+# note: if you are setting up a replication slave, see README.Debian about
+#       other settings you may need to change.
+#server-id              = 1
+#report_host            = master1
+#auto_increment_increment = 2
+#auto_increment_offset  = 1
+#log_bin                        = /var/log/mysql/mariadb-bin
+#log_bin_index          = /var/log/mysql/mariadb-bin.index
+# not fab for performance, but safer
+#sync_binlog            = 1
+expire_logs_days        = 10
+max_binlog_size         = 100M
+# slaves
+#relay_log              = /var/log/mysql/relay-bin
+#relay_log_index        = /var/log/mysql/relay-bin.index
+#relay_log_info_file    = /var/log/mysql/relay-bin.info
+#log_slave_updates
+#read_only
+#
+# If applications support it, this stricter sql_mode prevents some
+# mistakes like inserting invalid dates etc.
+#sql_mode               = NO_ENGINE_SUBSTITUTION,TRADITIONAL
+#
+# * InnoDB
+#
+# InnoDB is enabled by default with a 10MB datafile in /var/lib/mysql/.
+# Read the manual for more InnoDB related options. There are many!
+default_storage_engine  = InnoDB
+innodb_buffer_pool_size = 256M
+innodb_log_buffer_size  = 8M
+innodb_file_per_table   = 1
+innodb_open_files       = 400
+innodb_io_capacity      = 400
+innodb_flush_method     = O_DIRECT
+#
+# * Security Features
+#
+# Read the manual, too, if you want chroot!
+# chroot = /var/lib/mysql/
+#
+# For generating SSL certificates I recommend the OpenSSL GUI "tinyca".
+#
+# ssl-ca=/etc/mysql/cacert.pem
+# ssl-cert=/etc/mysql/server-cert.pem
+# ssl-key=/etc/mysql/server-key.pem
+
+#
+# * Galera-related settings
+#
+[galera]
+# Mandatory settings
+#wsrep_on=ON
+#wsrep_provider=
+#wsrep_cluster_address=
+#binlog_format=row
+#default_storage_engine=InnoDB
+#innodb_autoinc_lock_mode=2
+#
+# Allow server to accept connections on all interfaces.
+#
+#bind-address=0.0.0.0
+#
+# Optional setting
+#wsrep_slave_threads=1
+#innodb_flush_log_at_trx_commit=0
+
+[mysqldump]
+quick
+quote-names
+max_allowed_packet      = 16M
+
+[mysql]
+default-character-set = utf8mb4
+no-auto-rehash # faster start of mysql but no tab completion
+
+[isamchk]
+key_buffer              = 16M
+
+#
+# * IMPORTANT: Additional settings that can override those from this file!
+#   The files must end with '.cnf', otherwise they'll be ignored.
+#
+!includedir /etc/mysql/conf.d/

config/nginx/nginx.conf

@@ -0,0 +1,57 @@
+events {}
+
+http {
+    server {
+        server_name localhost;
+        root /var/www/public;
+        index index.php index.html index.htm;
+        listen 80;
+
+        include /etc/nginx/mime.types;
+        default_type application/octet-stream;
+
+        location / {
+            try_files $uri $uri/ /index.php?$query_string;
+        }
+
+        # PHP-FPM Configuration Nginx
+        location ~ \.php$ {
+            try_files $uri = 404;
+            fastcgi_split_path_info ^(.+\.php)(/.+)$;
+            fastcgi_pass php:9000;
+            fastcgi_index index.php;
+            include fastcgi_params;
+            fastcgi_param REQUEST_URI $request_uri;
+            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+            fastcgi_param PATH_INFO $fastcgi_path_info;
+        }
+
+        # server {
+        #     server_name localhost;
+
+        #     listen 443 ssl;
+        #     fastcgi_param HTTPS on;
+
+        #     ssl_certificate /etc/ssl/server.pem;
+        #     ssl_certificate_key /etc/ssl/server.key;
+        #     ssl_protocols TLSv1.3;
+
+        #     index index.php index.html;
+        #     error_log  /var/log/nginx/error.log;
+        #     access_log /var/log/nginx/access.log;
+        #     root /var/www/html/public;
+
+        #     location ~ \.php$ {
+        #         try_files $uri =404;
+        #         fastcgi_split_path_info ^(.+\.php)(/.+)$;
+        #         fastcgi_pass php:9000;
+        #         fastcgi_index index.php;
+        #         include fastcgi_params;
+        #         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+        #         fastcgi_param PATH_INFO $fastcgi_path_info;
+        #     }
+
+        error_log /var/log/nginx/error.log;
+        access_log /var/log/nginx/access.log;
+    }
+}

db/.gitkeep

@@ -0,0 +1 @@
+# to keep dir db

docker-compose.yml

@@ -0,0 +1,47 @@
+services:
+
+  nginx:
+    image: nginx:latest
+    container_name: nginx
+    restart: always
+    ports:
+      - 80:80
+      - 443:443
+    volumes:
+      - ./www/public:/var/www/public
+      - ./config/nginx/nginx.conf:/etc/nginx/nginx.conf
+      - ./config/ssl:/etc/ssl
+    depends_on:
+      - php
+
+  php:
+    build: ./docker/php
+    container_name: php
+    volumes:
+      - ./www:/var/www
+      - ./config/php/php.ini:/usr/local/etc/php/php.ini
+
+  mariadb:
+    image: mariadb:latest
+    container_name: mariadb
+    restart: always
+    volumes:
+      - ./db:/var/lib/mysql
+      - ./config/mysql/my.cnf:/etc/mysql/my.cnf
+    environment:
+      - MYSQL_ROOT_PASSWORD=12345
+      - MYSQL_DATABASE=db
+      - MYSQL_USER=pma
+      - MYSQL_PASSWORD=12345
+
+  phpmyadmin:
+    image: phpmyadmin/phpmyadmin:latest
+    container_name: pma
+    restart: always
+    environment:
+      PMA_HOST: mariadb
+      #PMA_ABSOLUTE_URI: http://localhost/pma/
+    ports:
+      - 8080:80
+    depends_on:
+      - mariadb

docker/php/Dockerfile

@@ -0,0 +1,48 @@
+FROM php:fpm
+
+WORKDIR /var/www
+
+RUN apt-get --allow-releaseinfo-change update && apt-get upgrade -y \
+    && apt-get install -y \
+    g++ \
+    libbz2-dev \
+    libc-client-dev \
+    libcurl4-gnutls-dev \
+    libedit-dev \
+    libfreetype6-dev \
+    libicu-dev \
+    libjpeg62-turbo-dev \
+    libkrb5-dev \
+    libmcrypt-dev \
+    libpng-dev \
+    libsqlite3-dev \
+    libzip-dev \
+    wget \
+    unzip \
+    zlib1g-dev \
+    && docker-php-ext-install -j$(nproc) \
+    mysqli \
+    pdo_mysql \
+    sockets \
+    && docker-php-ext-configure gd --with-freetype --with-jpeg \
+    && docker-php-ext-install -j$(nproc) gd \
+    && docker-php-ext-configure zip \
+    && docker-php-ext-install zip \
+    && docker-php-source delete \
+    && apt-get remove -y g++ wget \
+    && apt-get autoremove --purge -y && apt-get autoclean -y && apt-get clean -y \
+    && rm -rf /var/lib/apt/lists/* \
+    && rm -rf /tmp/* /var/tmp/*
+
+# Add user 
+RUN groupadd -g 1000 www
+RUN useradd -u 1000 -ms /bin/bash -g www www
+
+# Copy existing application directory contents
+COPY ./ /var/www
+
+# Copy existing application directory permissions
+COPY --chown=www:www ./ /var/www
+
+# Change current user to www
+USER www

www/public/M0/01/evaluate.php

@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<head lang="sv"></head>
+<body>
+<h1>Matematiktest</h1>
+<h2>Resultat</h2>
+<?php
+     	$ans1 = $_POST['q1'];
+     	$ans2 = $_POST['q2'];
+      $ans3 = $_POST['q3'];
+      $ans4 = $_POST['q4'];
+      $ans5 = $_POST['q5'];
+     	$points = 0;
+     	
+     	if($ans1 == 9)
+           $points++;
+     	if($ans2 == 15)
+           $points++;
+      if($ans3 == -2)
+         $points++;
+      if($ans4 == 5)
+         $points++;
+      if($ans5 == 56)
+         $points++;
+     	
+     	echo("<p>Du fick " . $points . " av 5 möjliga</p>");
+      echo("<p> Ans01: " . $ans1 . "; ans02: " . $ans2);
+
+?>
+<form action="index.html">
+   <input type="submit" value="Go Back">
+</form>
+</body>
+</html>

www/public/M0/01/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head lang="sv"></head>
+<body>
+<h1>Matematik-test</h1>
+<form action="evaluate.php" method="post">
+   <fieldset>
+       <legend>Frågor</legend>
+       <label>4 + 5 = </label>
+       <input type="text" name="q1">
+       <br>
+       <label>3 x 5 = </label>
+       <input type="text" name="q2">
+       <br>
+       <label>3 - 5 = </label>
+       <input type="text" name="q3">
+       <br>
+       <label>15 / 3 = </label>
+       <input type="text" name="q4">
+       <br>
+       <label>7 x 8 = </label>
+       <input type="text" name="q5">
+       <br>
+       <input type="submit" value="Evaluate">
+   </fieldset>
+</form>
+</body>
+</html>

www/public/M0/02/evaluate.php

@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<head lang="sv"></head>
+<body>
+<h1>Matematiktest</h1>
+<h2>Resultat</h2>
+<?php
+      $name = $_POST['name'];
+     	$ans1 = $_POST['q1'];
+     	$ans2 = $_POST['q2'];
+      $ans3 = $_POST['q3'];
+      $ans4 = $_POST['q4'];
+      $ans5 = $_POST['q5'];
+     	$points = 0;
+     	
+     	if($ans1 == 9)
+           $points++;
+     	if($ans2 == 15)
+           $points++;
+      if($ans3 == -2)
+         $points++;
+      if($ans4 == 5)
+         $points++;
+      if($ans5 == 56)
+         $points++;
+     	
+     	echo("<p>" . $name . " fick " . $points . " av 5 möjliga poäng</p>");
+
+?>
+<form action="index.html">
+   <input type="submit" value="Go Back">
+</form>
+</body>
+</html>

www/public/M0/02/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<head lang="sv"></head>
+<body>
+<h1>Matematik-test</h1>
+<form action="evaluate.php" method="post">
+   <fieldset>
+        <legend>Name</legend>
+        <input type="text" name="name">
+       <legend>Frågor</legend>
+       <label>4 + 5 = </label>
+       <input type="text" name="q1">
+       <br>
+       <label>3 x 5 = </label>
+       <input type="text" name="q2">
+       <br>
+       <label>3 - 5 = </label>
+       <input type="text" name="q3">
+       <br>
+       <label>15 / 3 = </label>
+       <input type="text" name="q4">
+       <br>
+       <label>7 x 8 = </label>
+       <input type="text" name="q5">
+       <br>
+       <input type="submit" value="Evaluate">
+   </fieldset>
+</form>
+</body>
+</html>

www/public/M0/03/css/gridCSS.css

@@ -0,0 +1,85 @@
+main{
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-auto-rows: minmax(100px, 1fr);
+    gap: 1rem;
+    grid-auto-flow: dense;
+}
+
+/* MOBILE */
+.col-1 {grid-column: span 1;}
+.col-2 {grid-column: span 2;}
+.col-3 {grid-column: span 3;}
+.col-4 {grid-column: span 4;}
+.col-5 {grid-column: span 5;}
+.col-6 {grid-column: span 6;}
+
+.row-2{grid-row: span 2;}
+.row-3{grid-row: span 3;}
+.row-4{grid-row: span 4;}
+.row-5{grid-row: span 5;} 
+
+
+main section {
+    grid-column: span 6; /* Default för mobil. Upptar hela bredden. */
+    padding: 0.5rem;
+  }
+  
+
+/** Tablets */
+@media (min-width: 768px) {
+    [class*='col-t-'] {      /* Reset av row-span*/
+        grid-row: span 1;
+    }
+    
+    .col-t-1 {grid-column: span 1;}
+    .col-t-2 {grid-column: span 2;}
+    .col-t-3 {grid-column: span 3;}
+    .col-t-4 {grid-column: span 4;}
+    .col-t-5 {grid-column: span 5;}
+    .col-t-6 {grid-column: span 6;}
+    
+    .row-t-2{grid-row: span 2;}
+    .row-t-3{grid-row: span 3;}
+    .row-t-4{grid-row: span 4;}
+    .row-t-5{grid-row: span 5;}
+}
+
+/** desktop */
+@media (min-width: 980px) {
+    [class*='col-d-'] {      /* Reset av row-span*/
+        grid-row: span 1;
+    }
+
+    .col-d-1 {grid-column: span 1;}
+    .col-d-2 {grid-column: span 2;}
+    .col-d-3 {grid-column: span 3;}
+    .col-d-4 {grid-column: span 4;}
+    .col-d-5 {grid-column: span 5;}
+    .col-d-6 {grid-column: span 6;}
+    
+    .row-d-2{grid-row: span 2;}
+    .row-d-3{grid-row: span 3;}
+    .row-d-4{grid-row: span 4;}
+    .row-d-5{grid-row: span 5;}
+}
+
+
+/** Large desktop */
+@media (min-width: 1200px) {
+    [class*='col-w-'] {      /* Reset av row-span*/
+        grid-row: span 1;
+    }
+
+    .col-w-1 {grid-column: span 1;}
+    .col-w-2 {grid-column: span 2;}
+    .col-w-3 {grid-column: span 3;}
+    .col-w-4 {grid-column: span 4;}
+    .col-w-5 {grid-column: span 5;}
+    .col-w-6 {grid-column: span 6;}
+    
+    .row-w-2{grid-row: span 2;}
+    .row-w-3{grid-row: span 3;}
+    .row-w-4{grid-row: span 4;}
+    .row-w-5{grid-row: span 5;}
+}

www/public/M0/03/css/styleSheet.css

@@ -0,0 +1,171 @@
+* {
+   box-sizing: border-box;
+   margin: 0; padding: 0;
+}
+
+html {
+   font-size: 62.5%
+}
+
+body{
+   font-size: 1.4rem;
+   font-family: Arial, Verdana, sans-serif;
+   margin:auto;
+}
+
+header {
+   background-color: black;
+   padding: 1rem;
+   position: relative;
+   margin-bottom: 0.7rem;
+}
+
+header h1 {
+   font-size: 2.6rem;
+   font-weight: normal;
+   margin-bottom: 0.3rem;
+   color: white;
+}
+
+header h2 {
+   font-size: 1.4rem;
+   color: grey;
+   margin-left: 1.4rem;
+   margin-bottom: 0.5rem;
+}
+
+nav {
+   background-color: black;
+   position: absolute;
+   top: 1rem;
+   right: 1rem;
+}
+
+#topMenuButton{
+   float: right;
+   padding: 0.5rem 0.8rem 0.5rem 0.8rem;
+   text-decoration: none;
+   color: white;
+   border: 0.1rem solid grey;
+   border-radius: 0.4rem;
+}
+ 
+a:hover#topMenuButton{
+   background-color: grey;
+}
+
+nav ul, nav:active ul {
+   display: none;
+}
+
+nav:hover ul {
+   display: inline-block;
+}
+
+nav ul li{
+   display: block;
+   list-style-type: none;
+   color: white;
+   padding: 1rem;
+}
+nav ul li a {
+   display: block;
+   color: white;
+   padding: 0.5rem;
+   text-decoration: none;
+}
+nav ul li a:hover {
+   background-color: grey;
+}
+
+
+section h2{
+   font-size: 2rem;
+   font-weight: normal;
+   margin-bottom: 0.5rem;
+
+}
+
+section p{
+   margin-bottom: 0.5rem;
+}
+
+img.right {
+   float:right;
+   margin-right: 2rem;
+   width: 230px;
+}
+
+section.green{
+   background-color: #5cb85c;
+   border: 0.1rem solid green;
+}
+section.red{
+   background-color: #d9534f;
+   border: 0.1rem solid red;
+}
+section.blue{
+   background-color: #428bca;
+   border: 0.1rem solid blue;
+}
+section.yellow{
+   background-color: #f6ec50;
+   border: 0.1rem solid olive;
+}
+
+section.silver{
+   background-color: silver;
+   border: 0.1rem solid grey;
+}
+section.orange{
+   background-color: #f0ad4e;
+   border: 0.1rem solid orange;
+}
+
+footer {
+   background-color: black;
+   padding: 1rem;
+   margin-top: 0.7rem;
+   color: white;
+   min-height: 5rem;
+}
+
+
+/** Tablets */
+@media (min-width: 768px) {
+      #topMenuButton {
+        display: none;
+      }
+
+      nav {
+       position: static;
+      }
+
+      nav ul, nav:active ul {
+         display:block;
+           padding-left: 1rem;
+      }
+   
+      nav ul li {
+         display: inline-block;
+         padding-left: 0;
+      }
+   
+      nav ul li a {
+         border: 0.1rem solid grey;
+      }
+   
+      nav ul li a:hover {
+        background-color: grey
+  }
+}
+
+/** desktop */
+@media (min-width: 980px){
+
+}
+
+/** Large desktop */
+@media (min-width: 1200px){
+
+}

www/public/M0/03/inc/footer.html

@@ -0,0 +1,3 @@
+<footer>
+         <p>Webbutveckling 11,CSS</p>
+</footer>

www/public/M0/03/inc/header.html

@@ -0,0 +1,16 @@
+<header>
+         <h1>Webbutveckling 11</h1>
+         <h2>- Responsiv Webbdesign</h2>
+         <nav id="topNav">
+            <a id="topMenuButton" href="#">☰</a>
+            <ul>
+               <li><a href="#">Hem</a></li>
+               <li><a href="#">HTML</a></li>
+               <li><a href="#">CSS</a></li>
+               <li><a href="#">Responsiv Webbdesign</a></li>
+               <li><a href="#">Mobile First</a></li>
+               <li><a href="#">Desktop First</a></li>
+               <li><a href="#">Kontakt</a></li>
+            </ul>
+         </nav>
+      </header>

www/public/M0/03/index.php

@@ -0,0 +1,51 @@
+<!DOCTYPE html>   
+<html>
+   <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Responsiv webbdesign</title>
+      <link rel="stylesheet" href="css/styleSheet.css?v=1.0">
+      <link rel="stylesheet" href="css/gridCSS.css">
+   </head>
+   <body>
+      <?php include("inc/header.html");?>
+      <main>
+         <section class="col-6 col-t-3 col-d-4  col-w-4 red">
+            <h2>Lär dig webbutveckling på ett enkelt sätt</h2>
+            <p>Denna webbplats är tänkt som en resurs till kursen Webbutveckling 1.
+               Tanken är att alla bidrar med sina kunskaper och erfarenheter.
+            </p>
+         </section>
+
+         <section class="col-6 col-t-4 row-t-2 col-d-2 row-d-2  col-w-2 row-w-3 silver">
+            <h2>Responsiv Webbdesign</h2>
+            <p>Denna webbplats är tänkt som en resurs till kursen Webbutveckling 1.</p>
+            <p>Tanken är att alla bidrar med sina kunskaper och erfarenheter.</p>
+            <img src="img/htmlcss.png" alt="Logga" class="right">
+         </section>
+
+         <section class="col-6 col-t-3 col-d-4  col-w-2 blue">
+            <h2>HTML</h2>
+            <p>Lär dig grundernai html på endast 55 minuter!</p>
+         </section>
+
+         <section class="col-6 col-t-2 col-d-2  col-w-2 yellow">
+            <h2>CSS</h2>
+            <p>CSS på 2 x 60 minuter!</p>
+            <p>Vi går igenom de vanligaste css-reglerna för att sedan fördjupa oss i animation med css.</p>
+         </section>
+
+         <section class="col-6 col-t-2 col-d-2  col-w-4 green">
+            <h2>Mobile First</h2>
+            <p>Gör din webbplats tillgänglig för alla med fokus på mobilaenheter.</p>
+         </section>
+
+         <section class="col-6 col-t-6 col-d-2  col-w-6 orange">
+            <h2>Desktop First</h2>
+            <p>Gör din webbplats tillgänglig för alla med fokus på stora högupplösta skärmar.</p>
+         </section>
+      </main>
+
+      <?php include("inc/footer.html");?>
+   </body>
+</html>

www/public/M1/index.php

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>M1-test</title>
+</head>
+<body>
+   <?php echo "Hello world"?>
+</body>
+</html>

www/public/index.php

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebServ</title>
+</head>
+<body>
+    <h1>Webbservern fungerar!</h1>
+    <?php
+        echo "<h1>This is index. Try Mx </h1>"
+    ?>    
+</body>
+</html>