├── .gitignore ├── .vscode ├── launch.json └── settings.json ├── CSS-Cheat-sheet ├── 1.css ├── 1.html ├── blog.html ├── cssflexbox.html ├── cssgrid.html ├── flexstylesheet.css ├── fourth.html ├── gridstylesheet.css ├── relatives.html ├── second.html ├── selectors.html ├── simpleflex.css ├── simpleflex.html ├── stylesheet.css ├── stylesheet2.css ├── stylesheet3.css ├── stylesheet4.css └── third.html ├── HTML-Cheat-Sheet ├── HTMLSheet.html ├── exam.html └── semantic-tags.txt ├── MyNote.md ├── README.md ├── Students-exam ├── 5 │ ├── Pyhon_exam-code1 │ │ ├── app.py │ │ ├── helper.py │ │ └── person.py │ └── Pyhon_exam-code2 │ │ ├── app.py │ │ ├── helper.py │ │ └── person.py ├── Score.numbers └── Scores.png ├── app.py ├── commerce ├── __init__.py ├── customer │ ├── __init__.py │ └── contact.py └── shopping │ ├── __init__.py │ └── sales.py ├── data.csv ├── html-css-exam.png ├── images ├── .DS_Store ├── HTML-PageStructure.jpg ├── IMG_20231127_202957_863.jpg ├── baracoda.png ├── cloud.jpeg ├── ex.png ├── gandalf.jpg ├── mail.ico ├── simple.png └── zimmer.jpg ├── index.html ├── movies.json ├── p-exam ├── exam.mov ├── participants.csv └── participants.json ├── sounds ├── .DS_Store └── Don't-Wanna-MissA-Thing.mp3 ├── students ├── CSS │ ├── 1.css │ ├── 1.html │ ├── 10.CSS │ ├── 10.HTML │ ├── 2.css │ ├── 2.html │ ├── 3.css │ ├── 3.html │ ├── 4.css │ ├── 4.html │ ├── 5+.css │ ├── 5+.html │ ├── 5.css │ ├── 5.html │ ├── 7.css │ ├── 7.html │ ├── 8.css │ ├── 8.html │ ├── 9.css │ ├── 9.html │ ├── os.css │ └── os.html └── HTML │ ├── 1.html │ ├── 2.html │ ├── 3.html │ ├── 4.html │ ├── 5+.html │ ├── 5.html │ ├── 6.html │ ├── 7.html │ ├── 8.html │ └── 9.html └── videos └── Game-of-Thrones-HBO.mp4 /.gitignore: -------------------------------------------------------------------------------- 1 | # Byte-compiled / optimized / DLL files 2 | __pycache__/ 3 | *.py[cod] 4 | *$py.class 5 | 6 | # C extensions 7 | *.so 8 | 9 | # Distribution / packaging 10 | .Python 11 | .DS_Store 12 | MyNoteImages/ 13 | build/ 14 | develop-eggs/ 15 | dist/ 16 | downloads/ 17 | videos/ 18 | eggs/ 19 | .eggs/ 20 | lib/ 21 | lib64/ 22 | parts/ 23 | sdist/ 24 | var/ 25 | wheels/ 26 | share/python-wheels/ 27 | *.egg-info/ 28 | .installed.cfg 29 | *.egg 30 | MANIFEST 31 | 32 | # PyInstaller 33 | # Usually these files are written by a python script from a template 34 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 35 | *.manifest 36 | *.spec 37 | 38 | # Installer logs 39 | pip-log.txt 40 | pip-delete-this-directory.txt 41 | 42 | # Unit test / coverage reports 43 | htmlcov/ 44 | .tox/ 45 | .nox/ 46 | .coverage 47 | .coverage.* 48 | .cache 49 | nosetests.xml 50 | coverage.xml 51 | *.cover 52 | *.py,cover 53 | .hypothesis/ 54 | .pytest_cache/ 55 | cover/ 56 | 57 | # Translations 58 | *.mo 59 | *.pot 60 | 61 | # Django stuff: 62 | *.log 63 | local_settings.py 64 | db.sqlite3 65 | db.sqlite3-journal 66 | 67 | # Flask stuff: 68 | instance/ 69 | .webassets-cache 70 | 71 | # Scrapy stuff: 72 | .scrapy 73 | 74 | # Sphinx documentation 75 | docs/_build/ 76 | 77 | # PyBuilder 78 | .pybuilder/ 79 | target/ 80 | 81 | # Jupyter Notebook 82 | .ipynb_checkpoints 83 | 84 | # IPython 85 | profile_default/ 86 | ipython_config.py 87 | 88 | # pyenv 89 | # For a library or package, you might want to ignore these files since the code is 90 | # intended to run in multiple environments; otherwise, check them in: 91 | # .python-version 92 | 93 | # pipenv 94 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. 95 | # However, in case of collaboration, if having platform-specific dependencies or dependencies 96 | # having no cross-platform support, pipenv may install dependencies that don't work, or not 97 | # install all needed dependencies. 98 | #Pipfile.lock 99 | 100 | # poetry 101 | # Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control. 102 | # This is especially recommended for binary packages to ensure reproducibility, and is more 103 | # commonly ignored for libraries. 104 | # https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control 105 | #poetry.lock 106 | 107 | # pdm 108 | # Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control. 109 | #pdm.lock 110 | # pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it 111 | # in version control. 112 | # https://pdm.fming.dev/#use-with-ide 113 | .pdm.toml 114 | 115 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm 116 | __pypackages__/ 117 | 118 | # Celery stuff 119 | celerybeat-schedule 120 | celerybeat.pid 121 | 122 | # SageMath parsed files 123 | *.sage.py 124 | 125 | # Environments 126 | .env 127 | .venv 128 | env/ 129 | venv/ 130 | ENV/ 131 | env.bak/ 132 | venv.bak/ 133 | 134 | # Spyder project settings 135 | .spyderproject 136 | .spyproject 137 | 138 | # Rope project settings 139 | .ropeproject 140 | 141 | # mkdocs documentation 142 | /site 143 | 144 | # mypy 145 | .mypy_cache/ 146 | .dmypy.json 147 | dmypy.json 148 | 149 | # Pyre type checker 150 | .pyre/ 151 | 152 | # pytype static type analyzer 153 | .pytype/ 154 | 155 | # Cython debug symbols 156 | cython_debug/ 157 | 158 | # PyCharm 159 | # JetBrains specific template is maintained in a separate JetBrains.gitignore that can 160 | # be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore 161 | # and can be added to the global gitignore or merged into this file. For a more nuclear 162 | # option (not recommended) you can uncomment the following to ignore the entire idea folder. 163 | #.idea/ 164 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Python: Current File", 9 | "type": "python", 10 | "request": "launch", 11 | "program": "${file}", 12 | "console": "integratedTerminal", 13 | "justMyCode": true 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "[python]": { 3 | "editor.defaultFormatter": "ms-python.autopep8" 4 | }, 5 | "python.formatting.provider": "none", 6 | "python.linting.pylintEnabled": true, 7 | "python.linting.enabled": true, 8 | "python.linting.pylintArgs": [ 9 | "--disable=missing-module-docstring", 10 | "--disable=missing-class-docstring", 11 | "--disable=missing-function-docstring" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/1.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: lightgray; 3 | height: 100vh; 4 | font-family: Arial; 5 | color: rgb(102, 101, 101); 6 | } 7 | 8 | .card{ 9 | background-color: white; 10 | margin: 5%; 11 | border-radius: 5px; 12 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(0, 0, 0, 0.5); 13 | padding: 10px 15px 10px 15px; 14 | } 15 | 16 | .stat-item{ 17 | display: flex; 18 | align-items: center; 19 | gap: 1em; 20 | } 21 | 22 | .stat-item p{ 23 | font-weight: bold; 24 | color: black; 25 | } 26 | 27 | .stat-item i{ 28 | color: red; 29 | padding: 10px; 30 | background-color: #ff000020; 31 | border-radius: 5px; 32 | } 33 | 34 | .stats-container{ 35 | display: flex; 36 | gap: 1em; 37 | align-items: center; 38 | justify-content: flex-start; 39 | } 40 | 41 | .gray-container{ 42 | background-color: lightgray; 43 | border-radius: 5px; 44 | display: flex; 45 | justify-content: space-between; 46 | color: black; 47 | margin-bottom: 1em; 48 | padding: 1em; 49 | } 50 | 51 | .left{ 52 | display: flex; 53 | align-items: center; 54 | gap: 5px; 55 | } 56 | 57 | .button{ 58 | background-color: rgb(23, 23, 105); 59 | color: white; 60 | font-size: 20px; 61 | border-radius: 5px; 62 | border-color: transparent; 63 | padding-left: 1em; 64 | padding-right: 1em; 65 | } 66 | 67 | .button:hover{ 68 | background-color: rgb(66, 66, 233); 69 | } 70 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | A Simple Project of CSS 6 | 7 | 11 | 12 | 13 |
14 |

2 - Programming Fundamentals

15 |
16 |
17 | 18 |

17 Hours

19 |
20 |
21 | 22 |

25 Videos

23 |
24 |
25 | 26 |

131 Practices Questions

27 |
28 |
29 |

30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa ratione, 31 | sit at repudiandae totam optio reprehenderit! Nostrum quis, ad animi 32 | tempore, itaque totam provident odio reprehenderit nam libero doloribus 33 | perferendis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. 34 | Soluta alias animi minima iusto voluptas sapiente facere, doloribus 35 | illum rerum aliquam nostrum velit ad vel, commodi itaque aspernatur 36 | similique sit nulla. 37 |

38 |
39 |
40 | 41 |

Lessons

42 |
43 | 44 |
45 |
46 |
47 | 48 |

Assessment

49 |
50 | 51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My Blog 5 | 6 | 7 | 8 | 9 | 10 | 22 | 23 | 24 |
25 |

My Website

26 |
27 | 28 | Go to Index 29 | 30 |
31 |
32 |
33 |

Blog Post One

34 | Posted by Ali 35 |

36 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 37 | Quibusdam asperiores tempora odio magni provident doloremque, sequi quod 38 | mollitia explicabo atque ex. Iure in et placeat quam, facere odit laudantium beatae. 39 |

40 | Read More 41 |
42 |
43 |
44 |
45 |

Blog Post Two

46 | Posted by Borna 47 |

48 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 49 | Quibusdam asperiores tempora odio magni provident doloremque, sequi quod 50 | mollitia explicabo atque ex. Iure in et placeat quam, facere odit laudantium beatae. 51 |

52 | Read More 53 |
54 |
55 |
56 |
57 |

Blog Post Three

58 | Posted by Sara 59 |

60 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 61 | Quibusdam asperiores tempora odio magni provident doloremque, sequi quod 62 | mollitia explicabo atque ex. Iure in et placeat quam, facere odit laudantium beatae. 63 |

64 | Read More 65 |
66 |
67 |
68 | 78 | 79 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/cssflexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS Flex Box 5 | 6 | 7 | 8 | 9 |
10 |
Box 1
11 |
Box 2
12 |
Box 3
13 |
Box 4
14 | 15 |
Box 5
16 |
Box 6
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/cssgrid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS Grid 5 | 6 | 7 | 8 | 9 |
10 |
Section 1
11 |
Section 2
12 |
Section 3
13 |
Section 4
14 |
Section 5
15 |
Section 6
16 |
Section 7
17 |
Section 8
18 |
Section 9
19 |
Section10 20 |
21 | 24 | 25 | 26 | 27 |
28 |
29 |
Section 11
30 | 31 |
Section 12
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/flexstylesheet.css: -------------------------------------------------------------------------------- 1 | .flexcontainer{ 2 | display: flex; 3 | flex-direction: row; 4 | /* justify-content:flex-start; */ 5 | /* align-items: flex-end; */ 6 | /* ====flex-end flex-start space-between center space-evenly ===*/ 7 | 8 | /* flex-wrap: nowrap; */ 9 | /* use justify-content with it */ 10 | } 11 | 12 | .box1{ 13 | background-color: darkgreen; 14 | text-align: center; 15 | color: white; 16 | width: 100px; 17 | height: 100px; 18 | margin: 10px; 19 | padding: 5px; 20 | /* flex-grow: 1; */ 21 | /* align-self: flex-start; */ 22 | /* flex-shrink: 2; */ 23 | /* flex-basis: 400px; */ 24 | } 25 | 26 | .box2{ 27 | background-color: rgb(70, 3, 214); 28 | text-align: center; 29 | color: white; 30 | width: 100px; /* use % for shrink*/ 31 | height: 100px; 32 | margin: 10px; 33 | padding: 5px; 34 | /* flex-grow: 1; */ 35 | } 36 | 37 | .box3{ 38 | background-color: rgb(226, 1, 114); 39 | text-align: center; 40 | color: white; 41 | width: 100px; 42 | height: 100px; 43 | margin: 10px; 44 | padding: 5px; 45 | /* order: -1000; */ 46 | /* flex-grow: 1; */ 47 | } 48 | 49 | .box4{ 50 | background-color: rgb(253, 174, 2); 51 | text-align: center; 52 | color: white; 53 | width: 100px; 54 | height: 100px; 55 | margin: 10px; 56 | padding: 5px; 57 | /* order: -1; */ 58 | /* flex-grow: 2; */ 59 | } 60 | 61 | .box5{ 62 | background-color: rgb(59, 229, 255); 63 | text-align: center; 64 | color: white; 65 | width: 100px; 66 | height: 100px; 67 | margin: 10px; 68 | padding: 5px; 69 | } 70 | 71 | .box6{ 72 | background-color: rgb(144, 253, 2); 73 | text-align: center; 74 | color: white; 75 | width: 100px; 76 | height: 100px; 77 | margin: 10px; 78 | padding: 5px; 79 | } -------------------------------------------------------------------------------- /CSS-Cheat-sheet/fourth.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Fourth Page 5 | 6 | 7 | 8 |

Fill out all information and hit submit button

9 |
10 |

11 |

12 | 13 |

14 |
15 | 16 |
17 | 18 |

19 |
20 | 21 |
22 | 23 |

24 |
25 | 26 |
27 | 28 | 29 |
30 |

31 | 32 |
33 | 34 |
35 |
36 |
37 | 38 |
39 |

Left Content Area

40 |

41 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam veritatis molestiae harum amet nostrum, cumque saepe ipsa reprehenderit similique, voluptas et animi dicta ut pariatur dignissimos a, deleniti accusantium fugit! 42 |

43 |
44 | 45 |
46 |

Center Content Area

47 |

48 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam veritatis molestiae harum amet nostrum, cumque saepe ipsa reprehenderit similique, voluptas et animi dicta ut pariatur dignissimos a, deleniti accusantium fugit! 49 |

50 |
51 | 52 | 58 | 59 |
60 |
61 |
62 | 63 | 64 |
65 |
66 |
67 | 68 |
69 | 70 |
71 | 72 |
73 | 74 |
75 | 76 |
77 |
78 |
79 | 80 |
81 | 82 |
83 | 84 |
85 |
86 |
87 |
88 |
89 |


90 |


91 |


92 |


93 | 94 |

This is some text as paragraph

95 |


96 |

This is some text as paragraph

97 | 98 |
99 |
100 |
101 | 102 |
103 | 104 |
105 | 106 |
107 |
108 | 109 |
110 | 111 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/gridstylesheet.css: -------------------------------------------------------------------------------- 1 | .container-grid{ 2 | display: grid; 3 | /* grid-template-columns: auto auto auto; */ 4 | /* grid-template-rows: 100px 100px 100px 100px 100px; */ 5 | /* grid-gap:10px; */ 6 | /* grid-auto-rows: 100px; */ 7 | /* grid-template-columns: repeat(5, 1fr); */ 8 | } 9 | 10 | .nestedgrid{ 11 | /* display: grid; */ 12 | /* grid-template-columns: repeat(3, 1fr); */ 13 | /* grid-gap:10px; */ 14 | /* grid-auto-rows: 150px; */ 15 | /* padding: 10px; */ 16 | } 17 | 18 | p{ 19 | /* border: 2px solid white; */ 20 | } 21 | 22 | img{ 23 | /* border: 2px solid white; */ 24 | /* width: 100%; */ 25 | /* height: 100%; */ 26 | } 27 | 28 | .section1{ 29 | /* grid-column: 1; */ 30 | /* grid-row: 1; */ 31 | /* background-color: blue; */ 32 | /* color: white; */ 33 | /* text-align: center; */ 34 | /* font-size: 20px; */ 35 | } 36 | .section2{ 37 | /* grid-column: 2; 38 | grid-row: 1; 39 | background-color:darkgreen; 40 | color: white; 41 | text-align: center; 42 | font-size: 20px; */ 43 | } 44 | .section3{ 45 | /* grid-column: 3; 46 | grid-row: 1; 47 | background-color: brown; 48 | color: white; 49 | text-align: center; 50 | font-size: 20px; */ 51 | } 52 | .section4{ 53 | /* grid-column: 1; 54 | grid-row: 2; 55 | background-color: red; 56 | color: white; 57 | text-align: center; 58 | font-size: 20px; */ 59 | } 60 | .section5{ 61 | /* grid-column: 2; 62 | grid-row: 2; 63 | background-color: gray; 64 | color: white; 65 | text-align: center; 66 | font-size: 20px; */ 67 | } 68 | .section6{ 69 | /* grid-column: 3; 70 | grid-row: 2; 71 | background-color: yellow; 72 | color: white; 73 | text-align: center; 74 | font-size: 20px; */ 75 | } 76 | .section7{ 77 | /* grid-column: 1; 78 | grid-row: 3; 79 | background-color: black; 80 | color: white; 81 | text-align: center; 82 | font-size: 20px; */ 83 | } 84 | .section8{ 85 | /* grid-column: 2; 86 | grid-row: 3; 87 | background-color: darkblue; 88 | color: white; 89 | text-align: center; 90 | font-size: 20px; */ 91 | } 92 | .section9{ 93 | /* grid-column: 3; 94 | grid-row: 3; 95 | background-color: violet; 96 | color: white; 97 | text-align: center; 98 | font-size: 20px; */ 99 | } 100 | .section10{ 101 | /* grid-column: 1 / 4; */ 102 | /* grid-row: 4 / 6; */ 103 | /* background-color: orangered; */ 104 | /* color: white; */ 105 | /* text-align: center; */ 106 | /* font-size: 20px; */ 107 | } 108 | .section11{ 109 | /* grid-column: 1 / 4; 110 | grid-row: 6 / 8; 111 | background-color: rgb(238, 255, 0); 112 | color: white; 113 | text-align: center; 114 | font-size: 20px; */ 115 | } 116 | 117 | .section12{ 118 | /* grid-column: 4 / 6; 119 | grid-row: 1 / 8; 120 | background-color: rgb(255, 1, 73); 121 | color: white; 122 | text-align: center; 123 | font-size: 20px; */ 124 | } -------------------------------------------------------------------------------- /CSS-Cheat-sheet/relatives.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Relative 5 | 6 | 7 | 8 |
9 |

A paragraph

10 |

A paragraph

11 |

A paragraph

12 |

A paragraph

13 |
14 | 15 |
16 |

A paragraph

17 |

A paragraph

18 |

A paragraph

19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/second.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Second Page 5 | 6 | 7 | 8 |

Second Page Test.

9 |
10 |

11 | Hans Zimmer 17 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam earum, 18 | asperiores facere accusantium debitis nemo recusandae inventore optio, 19 | eveniet dolore quas expedita quibusdam eaque quod. Quisquam facere eius 20 | repellat quis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. 21 | Dignissimos in inventore incidunt nam minus voluptatum commodi cumque 22 | fuga nisi, aperiam asperiores quo? Quo unde veniam eos voluptatum 23 | expedita quidem debitis! Lorem ipsum dolor sit, amet consectetur 24 | adipisicing elit. Aspernatur nesciunt in culpa aperiam, ducimus sequi. 25 | Corrupti, aliquid. Veniam aliquid recusandae maiores nostrum nemo harum, 26 | libero commodi, a ipsam voluptates odit. Lorem ipsum dolor sit amet 27 | consectetur adipisicing elit. Earum inventore rerum accusamus facere 28 | eius quae blanditiis magnam distinctio, nobis commodi nemo magni. 29 | Eligendi maxime facere perferendis ullam, voluptatem ratione et? 30 |

31 |
32 |
33 | 34 |

35 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam earum, 36 | asperiores facere accusantium debitis nemo recusandae inventore optio, 37 | eveniet dolore quas expedita quibusdam eaque quod. Quisquam facere eius 38 | repellat quis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. 39 | Dignissimos in inventore incidunt nam minus voluptatum commodi cumque fuga 40 | nisi, aperiam asperiores quo? Quo unde veniam eos voluptatum expedita 41 | quidem debitis! 42 |

43 | 44 |
45 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem hic odit 46 | saepe eligendi sapiente est earum soluta incidunt dicta qui obcaecati 47 | fugit deserunt, eaque atque iusto dolores magnam sequi quis? 48 |
49 | 50 | baracoda
51 | 52 | baracoda
53 | 54 | Lorem ipsum dolor sit amet
55 | Lorem ipsum dolor sit amet
56 | Lorem ipsum dolor sit amet
57 |
58 |
59 |
60 | 61 |
this a div for test
62 |
second div for test
63 | 64 |

h1 test for floating

65 | 66 | 67 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/selectors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Selectors 5 | 6 | 7 | 8 | 9 |

This is a h1 Tag

10 |

This is a h2 Tag

11 |

This is a h3 Tag

12 | 13 |
14 |
15 |

This is Paragraph 1


16 |

This is Paragraph 2


17 |

This is Paragraph 3


18 | 19 |
20 |

This is Paragraph in Div

21 |
22 | 23 |
24 |

This is a Paragraph to explain child selector

25 |
26 | 27 |
28 | 29 |
30 | 31 |
32 |

This a heading 2

33 |

Paragraph for sibling test 1

34 |

Paragraph for sibling test 2

35 |
36 | 37 |
38 |
39 | 40 |
41 |

some text

42 |

some more text

43 |

even some more text

44 |
45 | 46 | 47 | 48 |
49 |

Paragraph 1

50 |

Paragraph 2

51 |

Paragraph 3

52 |

Paragraph 4

53 |

Paragraph 5

54 |

Paragraph 6

55 |

Paragraph 7

56 |

Paragraph 8

57 |

Paragraph 9

58 | 59 |
60 | 61 | 62 |
63 | 64 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/simpleflex.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: black; 3 | } 4 | .flexcontainer{ 5 | display: flex; 6 | flex-direction: row; 7 | flex-wrap: wrap; 8 | } 9 | 10 | .lbox{ 11 | text-align: center; 12 | color: white; 13 | margin: 10px; 14 | padding: 5px; 15 | height: 100px; 16 | width: 100px; 17 | flex-grow: 1; 18 | border-radius: 5px; 19 | border: 2px white solid; 20 | } 21 | 22 | .sbox{ 23 | text-align: center; 24 | color: white; 25 | margin: 10px; 26 | padding: 5px; 27 | height: 100px; 28 | width: 100px; 29 | border-radius: 5px; 30 | border: 2px white solid; 31 | } 32 | 33 | 34 | .linebreak{ 35 | background-color: darkgray; 36 | height: 2px; 37 | flex-basis: 100%; 38 | } -------------------------------------------------------------------------------- /CSS-Cheat-sheet/simpleflex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | FlexBox Test 5 | 6 | 7 | 8 |
9 |
Box1
10 |
Box2
11 |
12 |
Box3
13 |
Box4
14 |
Box5
15 |
16 |
Box6
17 |
Box7
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/stylesheet.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Verdana, Geneva, Tahoma, sans-serif; 3 | background-color: #f9f6cf; 4 | font-size: 20px; 5 | } 6 | h1, h2{ 7 | background-color: aqua; 8 | text-align: center; 9 | color: red; 10 | border-bottom: 1px solid black; 11 | font-family:'Times New Roman', Times, serif; 12 | } 13 | h1{ 14 | color: purple; 15 | } 16 | .h1-absolute{ 17 | background-color: blue; 18 | border: solid 3px dashed; 19 | position: fixed; 20 | 21 | top: 90px; 22 | left: 825px; 23 | } 24 | .h1-fixed{ 25 | background-color: blue; 26 | border: solid 3px dashed; 27 | position: absolute; 28 | 29 | top: 90px; 30 | left: 825px; 31 | } 32 | 33 | .blue{ 34 | color:blue; 35 | font-family: Verdana, Geneva, Tahoma, sans-serif; 36 | } 37 | p.green{ 38 | color:green; 39 | font-family: Verdana, Geneva, Tahoma, sans-serif; 40 | } 41 | .underline{ 42 | text-decoration: underline; 43 | } 44 | .fonts{ 45 | font-size: 0.8em; 46 | line-height:2em; 47 | } 48 | .box-model1{ 49 | background-color: antiquewhite; 50 | color: rgb(74, 141, 249); 51 | font-size: 50%; 52 | line-height: 2em; 53 | border: 5px solid black; 54 | padding: 20px; 55 | background-image: url(images/cloud.jpeg); 56 | border-top-left-radius: 20px; 57 | border-bottom-right-radius: 20px; 58 | border-bottom-style: dotted; 59 | border-bottom-color: red; 60 | } 61 | .box-model2{ 62 | background-color: antiquewhite; 63 | color: rgb(74, 141, 249); 64 | font-size: 50%; 65 | line-height: 2em; 66 | border: 5px solid black; 67 | padding: 200px 100px 50px 10px; 68 | margin: 5%; 69 | } 70 | 71 | .imagec{ 72 | height: 300px; 73 | width: 300px; 74 | display: block; 75 | margin-left: auto; 76 | margin-right: auto; 77 | padding: 3px; 78 | background-color: silver; 79 | border-color: black; 80 | border-style: solid; 81 | border-width: 2px; 82 | } 83 | 84 | .main{ 85 | color: blue; 86 | font-size: 15px; 87 | text-align: center; 88 | } 89 | .sub{ 90 | color: rgb(240, 66, 130); 91 | font-size: 10px; 92 | text-align: left; 93 | } 94 | 95 | .highlight{ 96 | background-color: yellow; 97 | } 98 | 99 | /* ============================== */ 100 | a:link{ 101 | color: blue; 102 | } 103 | a:visited{ 104 | color: #8c8c9d; 105 | } 106 | a:hover{ 107 | cursor:crosshair; 108 | color: #f15a51; 109 | } 110 | 111 | .second-h1{ 112 | background-color: #f15a51; 113 | border: black 3px solid; 114 | padding: 20px; 115 | margin: 25px; 116 | } 117 | 118 | .second-p1{ 119 | background-color: #f15a51; 120 | border: black 3px solid; 121 | padding: 20px; 122 | margin: 25px; 123 | text-align: justify; 124 | } 125 | 126 | .second-p2{ 127 | background-color: #adf868; 128 | border: black 3px solid; 129 | padding: 20px; 130 | margin: 25px; 131 | height: 100px; 132 | overflow: scroll; 133 | cursor:url(images/mail.ico), default; 134 | } 135 | .second-span{ 136 | background-color: chartreuse; 137 | border: black 3px solid; 138 | padding: 20px; 139 | margin: 25px; 140 | } 141 | 142 | .second-image{ 143 | background-color: #adf868; 144 | border: black 3px solid; 145 | padding: 5px; 146 | margin: 20px; 147 | /* margin-bottom: 300px; */ 148 | } 149 | 150 | .second-div{ 151 | background-color:aqua; 152 | border: black 3px solid; 153 | padding: 20px; 154 | margin: 25px; 155 | } 156 | 157 | .second-div1{ 158 | background-color:violet; 159 | border: black 3px solid; 160 | width: 300px; 161 | float: left; 162 | padding: 20px; 163 | margin: 25px; 164 | } 165 | .second-div2{ 166 | background-color:violet; 167 | border: black 3px solid; 168 | width: 300px; 169 | float: right; 170 | padding: 20px; 171 | margin: 25px; 172 | } 173 | 174 | 175 | 176 | /*Relatives==========================*/ 177 | 178 | #main1{ 179 | border: 1px dotted black; 180 | background-color: #e5e4d7; 181 | border-radius: 5px; 182 | padding: 10px; 183 | margin: 10px; 184 | } 185 | 186 | #par{ 187 | color: red; 188 | position: relative; 189 | top: 5px; 190 | left: 5px; 191 | } 192 | 193 | #main2{ 194 | border: 1px dotted black; 195 | background-color: #e5e4d7; 196 | border-radius: 5px; 197 | padding: 10px; 198 | margin: 10px; 199 | position: relative; 200 | } 201 | 202 | #square{ 203 | height:25px; 204 | width: 25px; 205 | background-color: red; 206 | position: absolute; 207 | top: 5px; 208 | left: 5px; 209 | } -------------------------------------------------------------------------------- /CSS-Cheat-sheet/stylesheet2.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Verdana, Geneva, Tahoma, sans-serif; 3 | background-color: #f9f6cf; 4 | font-size: 20px; 5 | margin: 0; 6 | } 7 | h1, h2{ 8 | background-color: aqua; 9 | text-align: center; 10 | color: red; 11 | border: 1px solid black; 12 | font-family:'Times New Roman', Times, serif; 13 | margin: 10px; 14 | } 15 | h1{ 16 | color: purple; 17 | } 18 | 19 | /*Third page styles*/ 20 | 21 | /*float property*/ 22 | .floating-div1{ 23 | background-color: aqua; 24 | border: black solid 2px; 25 | width: 300px; 26 | float: left; 27 | } 28 | 29 | .floating-div2{ 30 | background-color: rgb(218, 179, 235); 31 | border: black solid 2px; 32 | width: 50%; 33 | float: right; 34 | } 35 | 36 | /*position property*/ 37 | .absolute-div{ 38 | background-color: brown; 39 | color: azure; 40 | position: absolute; 41 | 42 | top: 350px; 43 | left:250px 44 | } 45 | 46 | /*position property*/ 47 | .overflow-div{ 48 | background-color: rgb(4, 239, 247); 49 | color: rgb(158, 7, 164); 50 | top: 350px; 51 | left:250px; 52 | height: 120px; 53 | overflow: scroll; 54 | cursor: url(images/mail.ico), default; 55 | } 56 | 57 | /* Cursor property*/ 58 | .cursor-button{ 59 | cursor:crosshair 60 | } 61 | 62 | a:hover{ 63 | cursor: pointer; 64 | } 65 | 66 | /* Text and Image*/ 67 | 68 | .imageintext-div{ 69 | background-color: darkkhaki; 70 | border: black dotted 3px; 71 | border-radius: 5px; 72 | padding: 20px; 73 | margin: 10px; 74 | } 75 | 76 | .zimmer-image{ 77 | font: optional; 78 | /* border-radius: 10px; 79 | float: left; 80 | margin-right: 20px; 81 | margin-bottom: 300px; */ 82 | } 83 | 84 | /* Relative Positioning */ 85 | .relative-div1{ 86 | background-color: gray; 87 | border-radius: 5px; 88 | margin: 10px; 89 | padding: 10px; 90 | } 91 | .relative-div2{ 92 | background-color: gray; 93 | border-radius: 5px; 94 | margin: 10px; 95 | padding: 10px; 96 | /* position: relative; */ 97 | } 98 | 99 | #par{ 100 | color: red; 101 | /* position: relative; 102 | top: 5px; 103 | left: 15px; */ 104 | } 105 | 106 | #square{ 107 | background: red; 108 | height: 25px; 109 | width: 25px; 110 | position: static; 111 | 112 | /* position: relative; 113 | top: 5px; 114 | left: 15px; */ 115 | 116 | /* position: absolute; 117 | bottom: 5px; 118 | left: 15px; */ 119 | } 120 | 121 | .simple{ 122 | position: absolute; 123 | } 124 | 125 | /* Navigation bar*/ 126 | 127 | ul{ 128 | list-style: none; 129 | padding: 0; 130 | margin: 0; 131 | } 132 | 133 | ul li a{ 134 | font-family: Georgia, 'Times New Roman', Times, serif; 135 | text-decoration: none; 136 | background-color: darkolivegreen; 137 | color: white; 138 | display: block; 139 | width: 100px; 140 | margin: 5px; 141 | padding: 10px; 142 | border: 1px solid red; 143 | border-radius: 2px; 144 | text-align: center; 145 | height: 25px; 146 | line-height: 25px; 147 | } 148 | ul li a:hover{ 149 | background-color: rgb(211, 253, 169); 150 | color: black; 151 | } 152 | 153 | /* Horizontal nav bar*/ 154 | 155 | /* #nav{ 156 | background-color: darkolivegreen; 157 | height: 35px; 158 | font-size: 25px; 159 | font-weight: bold; 160 | font: Tahoma; 161 | } 162 | 163 | #nav ul{ 164 | padding: 0; 165 | margin: 0; 166 | list-style-type: none; 167 | text-align: center; 168 | } 169 | #nav li{ 170 | padding: 15px; 171 | display: inline; 172 | vertical-align: middle; 173 | } 174 | 175 | #nav a{ 176 | text-decoration: none; 177 | padding: 8px 8px 8px 8px; 178 | color: aliceblue; 179 | vertical-align: middle; 180 | } 181 | 182 | #nav a:hover{ 183 | background-color: white; 184 | color: green; 185 | } */ 186 | 187 | /* Beautiful button */ 188 | 189 | /* .button{ 190 | background: #e7e7e7; 191 | border: 1px solid; 192 | border-radius: 3px; 193 | font: 700 13px; 194 | font-family: Arial, Helvetica, sans-serif; 195 | height: 30px; 196 | line-height: 28px; 197 | padding: 0 20px; 198 | text-align:center; 199 | margin-right: 10px; 200 | box-sizing: border-box; 201 | } 202 | 203 | ul{ 204 | padding: 0; 205 | list-style-type: none; 206 | } 207 | 208 | li{ 209 | display: inline; 210 | } 211 | 212 | a{ 213 | color: #666; 214 | text-decoration: none; 215 | float: left; 216 | } 217 | 218 | a:hover{ 219 | background-color: #dadada; 220 | color: #000; 221 | 222 | } */ -------------------------------------------------------------------------------- /CSS-Cheat-sheet/stylesheet3.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Verdana, Geneva, Tahoma, sans-serif; 3 | background-color: #f9f6cf; 4 | font-size: 20px; 5 | margin: 0; 6 | } 7 | 8 | #theForm{ 9 | color: white; 10 | display: table; 11 | padding: 15px; 12 | background-color: #2c8f77; 13 | border: solid black 2px; 14 | } 15 | 16 | .row{ 17 | display: table-row; 18 | } 19 | 20 | .row label{ 21 | display: table-cell; 22 | padding: 2px; 23 | /* text-align: right; */ 24 | } 25 | 26 | .row input{ 27 | display: table-cell; 28 | padding: 2px; 29 | } 30 | 31 | /* Strategies */ 32 | 33 | #left{ 34 | margin: 15px; 35 | padding: 10px; 36 | border: solid green 2px; 37 | border-radius: 5px; 38 | background-color: aquamarine; 39 | } 40 | 41 | #center{ 42 | margin: 15px; 43 | padding: 10px; 44 | border: solid green 2px; 45 | border-radius: 5px; 46 | background-color: bisque; 47 | } 48 | 49 | #right{ 50 | margin: 15px; 51 | padding: 10px; 52 | border: solid green 2px; 53 | border-radius: 5px; 54 | background-color: cadetblue; 55 | } 56 | 57 | #left, #center, #right{ 58 | width: 100px; 59 | } 60 | 61 | #left, #center, #right{ 62 | width: 300px; 63 | } 64 | 65 | 66 | /* Opacity property*/ 67 | 68 | #box1{ 69 | height: 300px; 70 | width: 300px; 71 | padding: 15px; 72 | margin: 10px; 73 | background-color: blue; 74 | } 75 | 76 | #box2{ 77 | height: 300px; 78 | width: 300px; 79 | padding: 15px; 80 | margin: 10px; 81 | background-color: blue; 82 | /* opacity: 0.4; */ 83 | } 84 | 85 | #box2:hover{ 86 | /* opacity: 1.0; */ 87 | } 88 | 89 | /* linear Gradient */ 90 | #box3{ 91 | width: 800px; 92 | height: 300px; 93 | float: left; 94 | background: blue; 95 | 96 | /* 30deg */ 97 | /* background: linear-gradient( to top right, blue 50%, yellow 50%); */ 98 | 99 | /* background: linear-gradient(to right, rgba(255,0,0,0.3), rgba(0,0,255,1.0)); */ 100 | } 101 | 102 | /* Text shadow */ 103 | #text1{ 104 | text-align: center; 105 | font: bold 60px helvetica; 106 | /* text-shadow: 3px 3px 5px orange, 107 | 6px 6px 10px blue; */ 108 | } 109 | 110 | #text2{ 111 | text-align: center; 112 | font: bold 60px helvetica; 113 | /* text-shadow: 6px 6px 10px rgba(0, 0, 255, 0.7); */ 114 | } 115 | 116 | /* Box shadow */ 117 | #box4{ 118 | width: 800px; 119 | height: 300px; 120 | float: left; 121 | background: yellowgreen; 122 | /* box-shadow: 15px 15px 5px 30px blue; */ 123 | /* box-shadow: inset 0 0 15px black; */ 124 | } -------------------------------------------------------------------------------- /CSS-Cheat-sheet/stylesheet4.css: -------------------------------------------------------------------------------- 1 | /* Type selector */ 2 | h1{ 3 | /* color: blue; */ 4 | } 5 | 6 | /* Id selector */ 7 | #para1{ 8 | /* color: green; */ 9 | } 10 | 11 | /* Class selector */ 12 | .para{ 13 | /* color: orange; */ 14 | } 15 | 16 | /* Combined selector */ 17 | 18 | h2, h3, #para1{ 19 | /* text-decoration: underline; */ 20 | } 21 | 22 | /* The descendant selector */ 23 | div p{ 24 | /* font-style: italic; */ 25 | } 26 | 27 | /* The child selector */ 28 | blockquote.test>p{ 29 | /* color: crimson; */ 30 | } 31 | 32 | /* Sibling selector */ 33 | div h2+p{ 34 | /* color: blueviolet; */ 35 | } 36 | 37 | div h2~p{ 38 | /* color:chartreuse; */ 39 | } 40 | 41 | 42 | /* Wildcard selector */ 43 | * { 44 | /* text-decoration: underline; */ 45 | } 46 | 47 | /* Attribute selector */ 48 | 49 | /* ^ $ * */ 50 | 51 | p[lang^="fr"]{ 52 | /* background-color: cornflowerblue; */ 53 | } 54 | 55 | /* nth Selectors */ 56 | #nth{ 57 | /* border: blue dashed 2px; */ 58 | /* background-color: aquamarine; */ 59 | /* margin: 20px; */ 60 | /* padding: 30px; */ 61 | } 62 | 63 | /* even odd 3 3n 2n+4 */ 64 | #nth p:nth-child(even){ 65 | /* background-color: orangered; */ 66 | } 67 | 68 | /* Not selector (work on selectors) */ 69 | :not(#para1){ 70 | /* color: aqua; */ 71 | 72 | } 73 | 74 | /* First character selector */ 75 | p::first-letter{ 76 | /* font-size: 30px; */ 77 | /* font-weight: bold; */ 78 | } 79 | 80 | /* First line selector */ 81 | p:first-line{ 82 | /* color: red; */ 83 | /* font-family: 'Courier New', Courier, monospace; */ 84 | } 85 | -------------------------------------------------------------------------------- /CSS-Cheat-sheet/third.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Third 5 | 6 | 7 | 8 | 14 | 15 | 23 | 24 | 33 | 34 |

Third Page

35 |
36 |

37 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis 38 | accusantium facere voluptates, aliquid maxime nihil enim debitis facilis 39 | nobis nesciunt labore consectetur dolores iste molestias nulla harum 40 | atque! Quod, nemo. 41 |

42 |
43 | 44 |
45 |

46 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus iste 47 | harum eveniet magnam quos architecto, illo eius magni, tenetur dolores 48 | impedit fuga nulla molestias ab cumque animi laborum repudiandae maxime! 49 |

50 |
51 |

This is heading for test

52 | 53 |
54 |
55 |
56 |
57 |
Test for absolute position.
58 | 59 | 60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | 71 |
72 |

73 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae sed 74 | quis animi, dignissimos enim explicabo quasi. Sequi, neque commodi, 75 | rerum optio quidem assumenda natus molestias inventore saepe nam 76 | pariatur ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. 77 | Error, asperiores doloremque vero quaerat iure assumenda dolorum 78 | molestiae excepturi repellendus aspernatur adipisci, illo blanditiis 79 | ratione, dolore voluptas numquam quod. Voluptatem, consequatur? Lorem 80 | ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolore 81 | laborum quod sit voluptas optio illo, tempora incidunt non culpa 82 | quibusdam expedita possimus dignissimos itaque autem iure odio iste 83 | nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, 84 | impedit consequatur sunt beatae officia neque corrupti ipsum similique 85 | reiciendis dicta numquam. Eos excepturi et iusto odio quia, dicta 86 | itaque! Voluptatum. 87 |

88 |
89 | 90 | 91 |
92 | okokokk
93 |
94 | 95 |
96 |
97 |
98 |
99 | 100 | 101 |
102 |

103 | Hans Zimmer 109 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam earum, 110 | asperiores facere accusantium debitis nemo recusandae inventore optio, 111 | eveniet dolore quas expedita quibusdam eaque quod. Quisquam facere eius 112 | repellat quis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. 113 | Dignissimos in inventore incidunt nam minus voluptatum commodi cumque 114 | fuga nisi, aperiam asperiores quo? Quo unde veniam eos voluptatum 115 | expedita quidem debitis! Lorem ipsum dolor sit, amet consectetur 116 | adipisicing elit. Aspernatur nesciunt in culpa aperiam, ducimus sequi. 117 | Corrupti, aliquid. Veniam aliquid recusandae maiores nostrum nemo harum, 118 | libero commodi, a ipsam voluptates odit. Lorem ipsum dolor sit amet 119 | consectetur adipisicing elit. Earum inventore rerum accusamus facere 120 | eius quae blanditiis magnam distinctio, nobis commodi nemo magni. 121 | Eligendi maxime facere perferendis ullam, voluptatem ratione et? 122 |

123 |
124 |
125 |
126 |
127 | 128 | 129 |
130 |

A paragraph

131 |

A paragraph

132 |

A paragraph

133 |

A paragraph

134 |
135 | 136 |
137 |

A paragraph

138 |

A paragraph

139 |

A paragraph

140 |

141 |
142 | 143 |
144 | 145 | 146 | -------------------------------------------------------------------------------- /HTML-Cheat-Sheet/HTMLSheet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML5 Cheat Sheet 5 | 6 | 7 | 8 | Go to Blog 9 | 10 | 11 |

Heading one

12 |

Heading two

13 |

Heading three

14 |

Heading four

15 |
Heading five
16 |
Heading six
17 | 18 |

19 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, 20 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 21 | ad minim veniam, quis nostrud exercitation 22 | ullamco laboris nisi ut aliquip ex ea commodo consequat. 23 | Duis aute irure dolor in reprehenderit in voluptate velit esse 24 | cillum dolore eu fugiat nulla 25 | pariatur. Excepteur sint 26 | occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 27 | anim id est laborum. 28 |

29 |

30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, quaerat 31 | ex dolore rem dicta ducimus provident laborum, tempora minima obcaecati 32 | laudantium iste natus? Distinctio, dicta. Voluptatem officiis recusandae 33 | in cupiditate! 34 |

35 | 36 | 37 | 44 |
    45 |
  1. List Item 1
    2. 46 |
  2. List Item 2
    3. 47 |
  3. List Item 3
    4. 48 |
  4. List Item 4
    5. 49 |
  5. List Item 5
    6. 50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
NameEmailAge
Aliali@gmail.com38
SaraSara@gmail.com30
JackJack@gmail.com34
79 | 80 |
81 |
82 |
83 | 84 | 85 |
86 | 87 | Personal information's 88 | 89 |
90 |
91 | 92 | 93 | 94 | 101 |
102 |
103 |
104 | 105 | 111 |
112 |
113 |
114 | 115 | 116 |
117 |
118 |
119 | 120 | 121 | 122 |
123 |
124 |
125 | 126 | 127 | 132 |
133 |
134 |
135 | 136 | 137 | 138 |
139 |
140 |
141 | 142 | 143 | 144 |
145 |
146 | 147 | 148 | Yes: 149 | 150 | No: 151 | 152 | 153 |
154 |
155 | 156 | 157 | Which item are you interested in?
158 | 159 | Apple
160 | Orange
161 | Banana
162 | Lemon
163 | 164 |
165 |
166 | 167 | 168 | 169 |
170 |
171 | 172 |
173 | 174 | 175 | 176 |
177 |
178 |
179 | 180 | 181 | 182 | Gandalf 189 | 190 | 191 |
192 |
193 |
194 | 195 | 204 |
205 | Check Google.com 206 | 207 |
208 |
209 |
210 | 211 | 215 | 216 |
217 |
218 |
219 | 220 | 221 | 229 | 230 |
231 |
232 |
233 |
234 |
235 | 236 | 237 |
238 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem beatae 239 | culpa nulla ut quasi alias suscipit esse repudiandae expedita illum quo ea 240 | assumenda porro doloribus odit, asperiores, maxime sapiente cum! 241 |
242 | 243 |
244 |
245 |
246 | 247 |

248 | 249 | This is the USA Military 250 |

251 | 252 |
253 |
254 |
255 | 256 |

257 | 258 | This is HTML Full Course by Ali Darvishi 259 |

260 | 261 | 262 |   ™ & ⁢ > ? © 263 | ok 264 | ok 265 | 266 |
267 | 268 | 269 | -------------------------------------------------------------------------------- /HTML-Cheat-Sheet/exam.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 |

My Website

8 |
9 | About 10 |

11 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 12 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 13 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni hic. 14 |

15 |
16 |
17 | Websites 18 | 22 |
23 |
24 | Personal Information 25 |
26 | 27 |

33 | 34 |

40 |
41 |
42 | 43 |

44 | Select your Gender:
45 |

49 | Are you Agree?
50 | 51 |
52 | 53 |
54 |

55 | select you birthday:
56 | 57 |
58 |
59 | 60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /HTML-Cheat-Sheet/semantic-tags.txt: -------------------------------------------------------------------------------- 1 | : Every HTML document must begin with a DOCTYPE declaration. 2 | 3 | : HTML (Hyper Text Markup Language) is a language used to define the structure of online pages. Like building blocks with semantic meaning. It represents the root of an HTML page, it is also known as the root element. All other components must be descended from this one. 4 | 5 | : It contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. 6 | 7 | : Specifies the base URL to use for all relative URLs in a document. There can be only one base element. 8 | 9 | : This element is most commonly used to link to CSS, favicons, or icons. Specifies relationships between the current document and an external resource. 10 | 11 | : This HTML element represents metadata that cannot be represented by other HTML meta-related elements, like , , … 12 | 13 | <style>: Contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing this element. 14 | 15 | <title>: The title of the website that will be displayed in the web browser. 16 | 17 | <body>: It represents the content of an HTML document. There can be only one body element. It is always used after <head>. 18 | 19 | <header>: The website’s header usually contains the company logo, a search bar, and titles. 20 | 21 | <nav>: Usually used inside the header element. It contains navigation links. 22 | 23 | <main>: The dominant content of the body of a document. Use only one <main> for each document. 24 | 25 | <article>: It should be used for independent content with a clear topic. Like a magazine or newspaper article, or a blog entry, a forum post, a product card or a user comment. 26 | 27 | <h1>-<h6>: A heading element should always be used to identify each article. Use only one h1 for each document. 28 | 29 | <aside>: An aside is just a sidebar or another section with complementary text indirectly related to the document’s main content. 30 | 31 | <footer>: Footer of the Website: Legal, Info, Address, Copyright… 32 | 33 | <address>: Usually used inside the footer. Contact information may include a physical address, URL, email address, phone number, social media, and so on. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web-developing-class 2 | <img src="https://github.com/al102030/Web-developing-class/blob/main/images/IMG_20231127_202957_863.jpg"> 3 | 4 | All simples and templates 5 | -------------------------------------------------------------------------------- /Students-exam/5/Pyhon_exam-code1/app.py: -------------------------------------------------------------------------------- 1 | import helper 2 | 3 | participants = [] 4 | while True: 5 | user_input = input("insert 'reg' o enroll,'info' to get your information,'admin' enter admin control panel: ").lower() 6 | if user_input == "reg": 7 | while True: 8 | lec_check = input("Are you a lecturer ? (Yes or No)").lower() 9 | if lec_check == "yes": 10 | lec = helper.get_lecturer_info() 11 | participants.append(lec) 12 | break 13 | else: 14 | std = helper.get_student_info() 15 | participants.append(std) 16 | break 17 | 18 | 19 | 20 | elif user_input == "info": 21 | while True: 22 | participant = int(input("Please Enter your code:")) 23 | for participant in participants: 24 | if participant.code: 25 | print(f"Code = {participant.code} , Name = {participant.name} , Family = {participant.family}") 26 | 27 | 28 | 29 | elif user_input == "admin": 30 | check = input("Enter your password : ") 31 | if check == "0000": 32 | helper.creat_json(participants) 33 | 34 | helper.creat_csv(participants) 35 | 36 | 37 | else: 38 | print("Wrong Option!") 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Students-exam/5/Pyhon_exam-code1/helper.py: -------------------------------------------------------------------------------- 1 | 2 | from person import Lecturer, Student 3 | 4 | def get_lecturer_info(): 5 | lecturer = Lecturer() 6 | code = input("Enter your code please: ") 7 | if code != "": 8 | lecturer.code = code 9 | name = input("Enter your name please: ") 10 | if name != "": 11 | lecturer.name = name 12 | family = input("Enter your family please: ") 13 | if family != "": 14 | lecturer.family = family 15 | 16 | lecturer.show_info() 17 | lecturer.greet() 18 | return lecturer 19 | 20 | def get_student_info(): 21 | std = Student() 22 | code = input("Enter your code please: ") 23 | if code != "": 24 | std.code = code 25 | name = input("Enter your name please: ") 26 | if name != "": 27 | std.name = name 28 | family = input("Enter your family please: ") 29 | if family != "": 30 | std.family = family 31 | 32 | std.show_info() 33 | return std 34 | 35 | 36 | def creat_json(): 37 | pass 38 | 39 | def creat_csv(): 40 | pass 41 | 42 | 43 | -------------------------------------------------------------------------------- /Students-exam/5/Pyhon_exam-code1/person.py: -------------------------------------------------------------------------------- 1 | from abc import ABC, abstractmethod 2 | 3 | class Paricipant(ABC): 4 | def __init__(self, code=0, name="No nmae", family="No family"): 5 | self.code = code 6 | self.name = name 7 | self.family = family 8 | super().__init__() 9 | 10 | @abstractmethod 11 | def show_info(self): 12 | pass 13 | 14 | 15 | 16 | 17 | class Lecturer(Paricipant): 18 | def show_info(self): 19 | print(f"Code = {self.code} , Name = {self.name} , Family = {self.family}") 20 | 21 | def greet(self): 22 | print("Welcome dear Professor") 23 | 24 | class Student(Paricipant): 25 | __city = "Rasht" 26 | def show_info(self): 27 | print(f"Code = {self.code} , Name = {self.name} , Family = {self.family} , City = {self.__city}") 28 | 29 | 30 | -------------------------------------------------------------------------------- /Students-exam/5/Pyhon_exam-code2/app.py: -------------------------------------------------------------------------------- 1 | import helper 2 | 3 | 4 | participants = [] 5 | while True: 6 | user_input = input("insert 'reg' o enroll,'info' to get your information,'admin' enter admin control panel: ").lower() 7 | if user_input == "reg": 8 | while True: 9 | lec_check = input("Are you a lecturer ? (Yes or No)").lower() 10 | if lec_check == "yes": 11 | lec = helper.get_lecturer_info() 12 | participants.append(lec) 13 | break 14 | else: 15 | std = helper.get_student_info() 16 | participants.append(std) 17 | break 18 | 19 | 20 | 21 | elif user_input == "info": 22 | while True: 23 | participant = int(input("Please Enter your code:")) 24 | for participant in participants: 25 | if participant.code: 26 | print(f"Code = {participant.code} , Name = {participant.name} , Family = {participant.family}") 27 | 28 | 29 | 30 | elif user_input == "admin": 31 | check = int(input("Enter your password : ")) 32 | if check == 0000: 33 | 34 | helper.creat_json(participants) 35 | 36 | helper.creat_csv(participants) 37 | 38 | 39 | 40 | else: 41 | print("Wrong Option!") 42 | -------------------------------------------------------------------------------- /Students-exam/5/Pyhon_exam-code2/helper.py: -------------------------------------------------------------------------------- 1 | from person import Lecturer, Student 2 | import json 3 | import csv 4 | def get_lecturer_info(): 5 | lecturer = Lecturer() 6 | code = input("Enter your code please: ") 7 | if code != "": 8 | lecturer.code = code 9 | name = input("Enter your name please: ") 10 | if name != "": 11 | lecturer.name = name 12 | family = input("Enter your family please: ") 13 | if family != "": 14 | lecturer.family = family 15 | 16 | lecturer.show_info() 17 | lecturer.greet() 18 | return lecturer 19 | 20 | def get_student_info(): 21 | std = Student() 22 | code = input("Enter your code please: ") 23 | if code != "": 24 | std.code = code 25 | name = input("Enter your name please: ") 26 | if name != "": 27 | std.name = name 28 | family = input("Enter your family please: ") 29 | if family != "": 30 | std.family = family 31 | 32 | std.show_info() 33 | return std 34 | 35 | 36 | def creat_json(participants): 37 | for participant in participants: 38 | participants.append({'Code' :participant.code, 'Name' : participant.name, 'Family': participant.family}) 39 | with open('participants.json' , 'w') as jsonfile: 40 | json.dump(participants, jsonfile, indent = 4) 41 | 42 | def creat_csv(participants): 43 | with open('participates.csv' , 'w') as csvfile: 44 | writer = csv.DictWriter(csvfile,fieldnames=participants) 45 | for participant in participants: 46 | writer.writerow({'Code' :participant.code, 'Name' : participant.name, 'Family': participant.family}) 47 | -------------------------------------------------------------------------------- /Students-exam/5/Pyhon_exam-code2/person.py: -------------------------------------------------------------------------------- 1 | from abc import ABC, abstractmethod 2 | 3 | class Paricipant(ABC): 4 | def __init__(self, code=0, name="No nmae", family="No family"): 5 | self.code = code 6 | self.name = name 7 | self.family = family 8 | super().__init__() 9 | 10 | @abstractmethod 11 | def show_info(self): 12 | pass 13 | 14 | 15 | 16 | 17 | class Lecturer(Paricipant): 18 | def show_info(self): 19 | print(f"Code = {self.code} , Name = {self.name} , Family = {self.family}") 20 | 21 | def greet(self): 22 | print("Welcome dear Professor") 23 | 24 | class Student(Paricipant): 25 | __city = "Rasht" 26 | def show_info(self): 27 | print(f"Code = {self.code} , Name = {self.name} , Family = {self.family} , City = {self.__city}") 28 | 29 | 30 | -------------------------------------------------------------------------------- /Students-exam/Score.numbers: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/Students-exam/Score.numbers -------------------------------------------------------------------------------- /Students-exam/Scores.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/Students-exam/Scores.png -------------------------------------------------------------------------------- /app.py: -------------------------------------------------------------------------------- 1 | # from ecommerc.shopping import sales 2 | # from collections import namedtuple 3 | # from abc import ABC, abstractmethod 4 | # from timeit import timeit 5 | # from pathlib import Path 6 | # from time import ctime 7 | # import shutil 8 | # import csv 9 | import json 10 | import sqlite3 11 | import time 12 | from datetime import datetime 13 | # =========================Question One============================== 14 | # if 10 == "10": 15 | # print("a") 16 | # elif "bag" > "apple" and "bag" > "cat": 17 | # print("b") 18 | # else: 19 | # print("c") 20 | 21 | # =========================Question Two============================== 22 | # n = 10 23 | # spaces = n-1 24 | # for number in range(1, n, 2): 25 | # print((spaces)*" "+number*"*") 26 | # spaces -= 1 27 | 28 | 29 | # =========================Question Three============================== 30 | # command = "" 31 | # while command.lower() != "exit": 32 | # command = input(">>>: ") 33 | # print("Echo", command) 34 | 35 | 36 | # =========================Question Four============================== 37 | # def average(): 38 | # summery, counter = 0, 0 39 | # while True: 40 | # number = int(input("Enter your Number to Calculate New Average :")) 41 | # if number != 0: 42 | # summery += number 43 | # counter += 1 44 | # print(f"The Current Average is: {summery//counter}") 45 | # else: 46 | # print(f"The Last Average is: {summery//counter}") 47 | # break 48 | 49 | 50 | # average() 51 | 52 | 53 | # =========================Question Five============================== 54 | # def greeting(): 55 | # while True: 56 | # name = input("Please enter your name:") 57 | # if name != "" and name.strip() != "" and name.lower() != "exit": 58 | # print(f"Hi {name}. Nice to meet you!") 59 | # elif name.lower() == "exit": 60 | # print("Goodbye!") 61 | # break 62 | # else: 63 | # print("Please Enter a Correct Name!") 64 | 65 | 66 | # greeting() 67 | 68 | 69 | # def multiply(*numbers): 70 | # total = 1 71 | # for number in numbers: 72 | # total *= number 73 | # return total 74 | 75 | 76 | # print("Start") 77 | # print(multiply(1, 2, 3)) 78 | 79 | 80 | # =========================Question six================================ 81 | # def fizz_buzz(number): 82 | # if number % 3 == 0 and number % 5 == 0: 83 | # print("Fizz_Buzz") 84 | # elif number % 3 == 0: 85 | # print("Fizz") 86 | # elif number % 5 == 0: 87 | # print("Buzz") 88 | # else: 89 | # print(number) 90 | 91 | 92 | # fizz_buzz(29) 93 | 94 | 95 | # =========================Question Seven============================== 96 | # def count_vowels(word): 97 | # vowels = "aeiou" 98 | # count = 0 99 | # word = word.lower() 100 | # for char in word: 101 | # if char in vowels: 102 | # count += 1 103 | # return count 104 | 105 | 106 | # def reverse_string(sentence): 107 | # reversed_sentence = "" 108 | # word = "" 109 | # i = len(sentence) - 1 110 | # while i >= 0: 111 | # if sentence[i] == " ": 112 | # reversed_sentence += word[::-1] + " " 113 | # word = "" 114 | # else: 115 | # word += sentence[i] 116 | # i -= 1 117 | # reversed_sentence += word[::-1] 118 | # return reversed_sentence 119 | 120 | 121 | # def main(): 122 | # sentence_input = input("Enter a sentence: ") 123 | # vowels_count = count_vowels(sentence_input) 124 | # print(f"The number of vowels in '{sentence_input }' is: {vowels_count}") 125 | # reversed_sentence = reverse_string(sentence_input) 126 | # print(f"The reversed sentence is: {reversed_sentence}") 127 | 128 | 129 | # main() 130 | 131 | 132 | # =========================Question Eight============================== 133 | 134 | # def remove_duplicates(strings): 135 | # unique_strings = [] 136 | # for string in strings: 137 | # if string not in unique_strings: 138 | # unique_strings.append(string) 139 | # return unique_strings 140 | 141 | 142 | # def find_longest_word(words): 143 | # longest_word = "" 144 | # for word in words: 145 | # if len(word) > len(longest_word): 146 | # longest_word = word 147 | # return longest_word 148 | 149 | 150 | # def main(): 151 | 152 | # strings = ["apple", "banana", "cherry", "apple", "kiwi", "banana"] 153 | # unique_strings = remove_duplicates(strings) 154 | # print("Unique strings:", unique_strings) 155 | 156 | # words = ["cat", "elephant", "tiger", "lion", "giraffe"] 157 | # longest_word = find_longest_word(words) 158 | # print("Longest word:", longest_word) 159 | 160 | 161 | # main() 162 | 163 | # ===============================Data structures===================== 164 | # lst = [ 165 | # ("p1", 10), 166 | # ("p2", 9), 167 | # ("p3", 12) 168 | # ] 169 | 170 | 171 | # def sort_item(item): 172 | # return item[1] 173 | 174 | 175 | # lst.sort(key=sort_item) 176 | # print(lst) 177 | 178 | # prices = [] 179 | # for item in lst: 180 | # prices.append(item[1]) 181 | 182 | # prices = map(lambda item: item[1], lst) 183 | # prices = [item[1] for item in lst] 184 | # print(prices) 185 | 186 | 187 | # filtered = filter(lambda item: item[1] >= 10, lst) 188 | # filtered = [item for item in lst if item[1] >= 10] 189 | # print(filtered) 190 | 191 | # lst1 = ["a", "b", "c"] 192 | # lst2 = [1, 2, 3] 193 | 194 | # x = zip("@#$", lst1, lst2) 195 | # print(list(x)) 196 | 197 | 198 | # =========================Question Nine============================== 199 | # dict1 = {"a": -12, "b": 10, "c": 5, "d": -2, "e": 6, "f": 22, "g": 0} 200 | # print([item if item >= 0 else 0 for item in dict1.values()]) 201 | 202 | 203 | # =========================Question Ten============================== 204 | 205 | # sentence = "This is a common interview question" 206 | 207 | # char_frequency = {} 208 | # for char in sentence: 209 | # if char not in char_frequency: 210 | # char_frequency[char] = 1 211 | # else: 212 | # char_frequency[char] += 1 213 | 214 | # char_frequency_sorted = sorted(char_frequency.items(), 215 | # key=lambda kv: kv[1], 216 | # reverse=True) 217 | # print(char_frequency_sorted[0]) 218 | 219 | 220 | # ================================Exceptions Examples========================== 221 | 222 | # while True: 223 | # try: 224 | # x = int(input("Enter a number: ")) 225 | # print(x) 226 | # except ValueError: 227 | # print("Please Enter a Number!") 228 | 229 | 230 | # code1 = """ 231 | # def calculate_xfactor(age): 232 | # if age <= 0: 233 | # raise ValueError("Age cannot be zero or less!") 234 | # return 10 / age 235 | 236 | 237 | # try: 238 | # calculate_xfactor(-1) 239 | # except ValueError as error: 240 | # #print(error) 241 | # pass 242 | # """ 243 | 244 | # code2 = """ 245 | # def calculate_xfactor(age): 246 | # if age <= 0: 247 | # return None 248 | # return 10 / age 249 | 250 | 251 | # xfactor = calculate_xfactor(-1) 252 | # if xfactor == None: 253 | # pass 254 | # """ 255 | 256 | # print("First code time: ", timeit(code1, number=10000)) 257 | # print("Second code time: ", timeit(code2, number=10000)) 258 | 259 | 260 | # ======================================Question Eleven========================== 261 | 262 | # phone_book = { 263 | # "John Doe": "09111234562", 264 | # "Jane Smith": "09359876543", 265 | # "Alice Johnson": "09114567894", 266 | # "Bob Thompson": "09357891233", 267 | # "Emily Davis": "09112461358", 268 | # "Michael Wilson": "09351352496", 269 | # "Sarah Anderson": "09115793507", 270 | # "David Clark": "09353575789", 271 | # "Olivia Baker": "09118246850", 272 | # "Daniel Green": "09356808244", 273 | # "Sophia King": "09114682436", 274 | # "William Lee": "09352464681", 275 | # "Mia Miller": "09113575799", 276 | # "Joseph Hill": "09355793576", 277 | # "Grace Adams": "09112461357", 278 | # "Andrew Parker": "09351352465", 279 | # "Elizabeth Stewart": "09115793570", 280 | # "Matthew Turner": "09353575749", 281 | # "Ava Bennett": "09116808234", 282 | # "Anthony Morgan": "09358246820", 283 | # "Chloe Cook": "09112464628", 284 | # "Christopher Reed": "09354682426", 285 | # "Victoria Scott": "09115793574", 286 | # "Ryan Phillips": "09353575795", 287 | # "Ella Young": "09111352466", 288 | # "Benjamin Hall": "09352461359", 289 | # } 290 | 291 | # while True: 292 | # option = input( 293 | # "Please Choose an option (add to add a new number / src to search a number) :").lower() 294 | # if option == "add": 295 | # while True: 296 | # name_to_add = input("Please enter a name: ") 297 | # number_to_add = input("Please enter a number: ") 298 | # if name_to_add != "" and number_to_add.isnumeric(): 299 | # phone_book[name_to_add] = number_to_add 300 | # print("Your Contact number successfully Saved!") 301 | # break 302 | # else: 303 | # print("Wrong name or phone number. Please retry!") 304 | # retry = input("Type 'c' to continue or 'e' to exit: ") 305 | # if retry == "e": 306 | # break 307 | # else: 308 | # pass 309 | # elif option == "src": 310 | # while True: 311 | # print("You can 'exit' by typing exit") 312 | # name_to_search = input("Please enter a Name to search: ") 313 | # if name_to_search != "" and name_to_search.lower() != "exit": 314 | # result = [f"{key} : {value}" for key, 315 | # value in phone_book.items() if name_to_search in key] 316 | # for num in result: 317 | # print(num) 318 | # elif name_to_search.lower() == "exit": 319 | # break 320 | # else: 321 | # print("Not Found! Try again.") 322 | # else: 323 | # print("Firstly, select an option (add or src)") 324 | 325 | # class Point: 326 | 327 | # default_color = "red" 328 | 329 | # def __init__(self, x, y): 330 | # self.x = x 331 | # self.y = y 332 | 333 | # def __str__(self): 334 | # return f"({self.x}, {self.y})" 335 | 336 | # def __eq__(self, other): 337 | # return self.x == other.x and self.y == other.y 338 | 339 | # def __gt__(self, other): 340 | # return self.x > other.x and self.y > other.y 341 | 342 | # def __add__(self, other): 343 | # return Point(self.x + other.x, self.y + other.y) 344 | 345 | # @classmethod 346 | # def zero(cls): 347 | # return cls(0, 0) 348 | 349 | # def draw(self): 350 | # print(f"Point ({self.x}, {self.y})") 351 | 352 | 353 | # point = Point(1, 2) 354 | # point = Point.zero() 355 | # point.draw() 356 | 357 | 358 | # point = Point(2, 3) 359 | # other = Point(1, 2) 360 | 361 | # print(point + other) 362 | 363 | # print(point.__dict__) 364 | 365 | # class Product: 366 | # def __init__(self, price): 367 | # # self.__price = price 368 | # self.set_price(price) 369 | 370 | # def get_price(self): 371 | # return self.__price 372 | 373 | # def set_price(self, value): 374 | # if value < 0: 375 | # raise ValueError("Price cannot be negative.") 376 | # self.__price = value 377 | # price = property(get_price, set_price) 378 | 379 | 380 | # product = Product(-50) 381 | # product. 382 | 383 | 384 | # class Product: 385 | # def __init__(self, price): 386 | # self.price = price 387 | 388 | # @property 389 | # def price(self): 390 | # return self.__price 391 | 392 | # @price.setter 393 | # def price(self, value): 394 | # if value < 0: 395 | # raise ValueError("Price cannot be negative.") 396 | # self.__price = value 397 | 398 | 399 | # product = Product(-50) 400 | 401 | 402 | # ======================================Question Twelve========================== 403 | 404 | # Class name = bank account 405 | # attributes = account_number, balance, currency 406 | # Methods = deposit, withdraw, get_balance 407 | 408 | # class BankAccount: 409 | # def __init__(self, account_number, balance, currency): 410 | # self.account_number = account_number 411 | # self.balance = balance 412 | # self.currency = currency 413 | 414 | # def deposit(self, amount): 415 | # self.balance += amount 416 | 417 | # def withdraw(self, amount): 418 | # if self.balance >= amount: 419 | # self.balance -= amount 420 | # else: 421 | # print("Insufficient funds!") 422 | 423 | # def get_balance(self): 424 | # return self.balance 425 | 426 | 427 | # # Create an instance of the BankAccount class 428 | # account = BankAccount("12345", 1000, "USD") 429 | 430 | # # Perform a deposit of 500 431 | # account.deposit(500) 432 | 433 | # # Perform a withdrawal of 200 434 | # account.withdraw(200) 435 | 436 | # # Print the final balance 437 | # print("Final balance:", account.get_balance()) 438 | 439 | 440 | # class Animal(object): 441 | # def __init__(self): 442 | # print("Animal Constructor") 443 | # self.age = 1 444 | 445 | # def eat(self): 446 | # print("eat") 447 | 448 | # Animal: Parent, Base 449 | # Mammal: Child, Sub 450 | 451 | 452 | # class Mammal(Animal): 453 | # def __init__(self): 454 | # super().__init__() 455 | # print("Mammal Constructor") 456 | # self.weight = 2 457 | # def eat(self): 458 | # print("eat") 459 | 460 | # def walk(self): 461 | # print("walk") 462 | 463 | 464 | # class Fish(Animal): 465 | # def eat(self): 466 | # print("eat") 467 | # def swim(self): 468 | # print("swim") 469 | 470 | 471 | # m = Mammal() 472 | # m. 473 | # print(isinstance(m, object)) 474 | 475 | # o = object() 476 | # o. 477 | 478 | # print(issubclass(Mammal, Animal)) 479 | 480 | 481 | # print(m.age) 482 | # print(m.weight) 483 | 484 | # ================================Multi-level Inheritance===================== 485 | 486 | 487 | # class Animals(): 488 | 489 | # def eat(self): 490 | # print("eat") 491 | 492 | 493 | # class Birds(Animals): 494 | # def fly(self): 495 | # print("fly") 496 | 497 | 498 | # class Chickens(Birds): 499 | # pass 500 | 501 | # Employee -> Person -> LivingCreature -> Thing 502 | 503 | # ======================multiple Inheritance======================== 504 | 505 | 506 | # class Employee: 507 | # def greet(self): 508 | # print("Employee Greet") 509 | 510 | 511 | # class Person: 512 | # def greet(self): 513 | # print("Person Greet") 514 | 515 | 516 | # class Manager(Employee, Person): 517 | # pass 518 | 519 | 520 | # manager = Manager() 521 | # manager.greet() 522 | 523 | # =====================A Good Example Of Inheritance=============== 524 | 525 | 526 | # class InvalidOperationError(Exception): 527 | # pass 528 | 529 | 530 | # class Stream(ABC): 531 | # def __init__(self): 532 | # self.opened = False 533 | 534 | # def open(self): 535 | # if self.opened: 536 | # raise InvalidOperationError("Stream is already open.") 537 | # self.opened = True 538 | 539 | # def close(self): 540 | # if not self.opened: 541 | # raise InvalidOperationError("Stream is already closed.") 542 | # self.opened = False 543 | 544 | # @abstractmethod 545 | # def read(self): 546 | # pass 547 | 548 | 549 | # class FileStream(Stream): 550 | # def read(self): 551 | # print("Reading data from a file.") 552 | 553 | 554 | # class NetworkStream(Stream): 555 | # def read(self): 556 | # print("Reading data from a Network.") 557 | 558 | 559 | # class MemoryStream(Stream): 560 | # def read(self): 561 | # print("Reading data from a Memory.") 562 | 563 | 564 | # stream = MemoryStream() 565 | # stream.open() 566 | 567 | 568 | # =========================Polymorphism======================== 569 | # class UIControl(ABC): 570 | # @abstractmethod 571 | # def draw(self): 572 | # pass 573 | 574 | 575 | # class TextBox(UIControl): 576 | # def draw(self): 577 | # print("TextBox") 578 | 579 | 580 | # class DropDownList(UIControl): 581 | # def draw(self): 582 | # print("DropDownList") 583 | 584 | 585 | # def draw(control): 586 | # # for control in controls: 587 | # # control.draw() 588 | # control.draw() 589 | 590 | 591 | # ddl = DropDownList() 592 | # tb = TextBox() 593 | # draw(tb) 594 | # # draw([tb, ddl]) 595 | 596 | # ===============================Data Classes===================== 597 | # Point = namedtuple("Point", ["x", "y"]) 598 | 599 | # p1 = Point(x=1, y=2) 600 | # p2 = Point(x=1, y=2) 601 | 602 | # print(p1 == p2) 603 | 604 | 605 | # =============================================Modules====================================== 606 | 607 | # sales.clac_shipping() 608 | # sales.calc_tax() 609 | 610 | # =======================================Python Standard Libraries=========================== 611 | # path = Path("commerce") 612 | 613 | # print(path.exists()) 614 | # print(path.absolute()) 615 | 616 | # for item in path.iterdir(): 617 | # print(item) 618 | 619 | # lst = [p for p in path.iterdir() if p.is_dir()] 620 | # py_files = [p for p in path.rglob("*.py")] 621 | # print(py_files) 622 | 623 | # path = Path("commerce/__init__.py") 624 | # print(path.stat()) 625 | # print(ctime(path.stat().st_ctime)) 626 | # print(path.read_text()) 627 | 628 | 629 | # source = Path("commerce/__init__.py") 630 | # target = Path() / "__init__.py" 631 | 632 | # shutil.copy(source, target) 633 | # target.write_text(source.read_text()) 634 | 635 | # with open("data.csv", "w") as file: 636 | # writer = csv.writer(file) 637 | # writer.writerow(["trns_id", "pro_id", "price"]) 638 | # writer.writerow([1000, 1, 10]) 639 | # writer.writerow([2000, 2, 15]) 640 | 641 | # with open("data.csv", "r") as file: 642 | # reader = csv.reader(file) 643 | # # print(list(reader)) 644 | # for row in reader: 645 | # print(row) 646 | 647 | 648 | # movies = [ 649 | # {"id": 1, "title": "Terminator", "year": 1989}, 650 | # {"id": 2, "title": "GodFather", "year": 1976} 651 | # ] 652 | 653 | # data = json.dumps(movies) 654 | # print(data) 655 | # Path("movies.json").write_text(data) 656 | 657 | # data = Path("movies.json").read_text(encoding="utf-8") 658 | # movies = json.loads(data) 659 | # print(movies[0]["title"]) 660 | 661 | # movies = json.loads(Path("movies.json").read_text(encoding="utf-8")) 662 | 663 | 664 | # connection = sqlite3.connect("db.sqlite3") 665 | # with sqlite3.connect("db.sqlite3") as conn: 666 | # command = "INSERT INTO Movies VALUES(?, ?, ?)" 667 | # for movie in movies: 668 | # conn.execute(command, tuple(movie.values())) 669 | # conn.commit() 670 | 671 | # with sqlite3.connect("db.sqlite3") as conn: 672 | # command = "SELECT * from Movies" 673 | # cursor = conn.execute(command) 674 | # # for item in cursor: 675 | # # print(item) 676 | # movies = cursor.fetchall() 677 | # print(movies) 678 | 679 | 680 | # print(time.time()) 681 | 682 | 683 | # dt1 = datetime(2018, 1, 1) 684 | # dt2 = datetime.now() 685 | # dt = datetime.strptime("2018/01/01", "%Y/%m/%d") 686 | dt = datetime.fromtimestamp(time.time()) 687 | # print(dt) 688 | 689 | # print(f"{dt.year}/{dt.month}") 690 | print(dt.strftime("%Y/%m")) 691 | 692 | 693 | # print(dt1 > dt2) 694 | -------------------------------------------------------------------------------- /commerce/__init__.py: -------------------------------------------------------------------------------- 1 | print("Ecommerce Initialized") 2 | -------------------------------------------------------------------------------- /commerce/customer/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/commerce/customer/__init__.py -------------------------------------------------------------------------------- /commerce/customer/contact.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/commerce/customer/contact.py -------------------------------------------------------------------------------- /commerce/shopping/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/commerce/shopping/__init__.py -------------------------------------------------------------------------------- /commerce/shopping/sales.py: -------------------------------------------------------------------------------- 1 | print("Sales Initialized", __name__) 2 | 3 | 4 | def calc_tax(): 5 | pass 6 | 7 | 8 | def clac_shipping(): 9 | pass 10 | 11 | 12 | if __name__ == "__main__": 13 | print("Sales Started!") 14 | calc_tax() 15 | -------------------------------------------------------------------------------- /data.csv: -------------------------------------------------------------------------------- 1 | trns_id,pro_id,price 2 | 1000,1,10 3 | 2000,2,15 4 | -------------------------------------------------------------------------------- /html-css-exam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/html-css-exam.png -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/images/.DS_Store -------------------------------------------------------------------------------- /images/HTML-PageStructure.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/images/HTML-PageStructure.jpg -------------------------------------------------------------------------------- /images/IMG_20231127_202957_863.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/images/IMG_20231127_202957_863.jpg -------------------------------------------------------------------------------- /images/baracoda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/images/baracoda.png -------------------------------------------------------------------------------- /images/cloud.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/images/cloud.jpeg -------------------------------------------------------------------------------- /images/ex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/images/ex.png -------------------------------------------------------------------------------- /images/gandalf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/images/gandalf.jpg -------------------------------------------------------------------------------- /images/mail.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/images/mail.ico -------------------------------------------------------------------------------- /images/simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/images/simple.png -------------------------------------------------------------------------------- /images/zimmer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/images/zimmer.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html> 3 | <head> 4 | <title>Exam 5 | 6 | 7 |

My Website

8 | 9 |
10 | About 11 |

12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 13 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 14 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus nam vitae modi harum consectetur iste? Laudantium recusandae velit optio ut dolore et facere exercitationem blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, asperiores aliquid fugit quasi modi voluptates natus quaerat exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo quod! Natus debitis blanditiis provident ea ducimus expedita tenetur illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. Quae praesentium totam fugit est consectetur porro! Nisi adipisci ullam architecto veniam odio, quam nemo voluptatem facilis. 15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur reiciendis rerum voluptate! Vitae minus possimus molestias inventore, hic a dolor dolore ducimus aut animi necessitatibus! In facilis voluptatum incidunt? 16 |

17 |
18 |
19 | Websites 20 | 24 |
25 | 26 |
27 | Personal Information 28 |
29 | 30 | 31 |

32 | 33 | 34 |

35 | 36 |
37 |

38 | 39 | 40 |

43 | 44 | 45 |

46 | 47 | 48 | 49 |
50 |
51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /movies.json: -------------------------------------------------------------------------------- 1 | [{"id": 1, "title": "Terminator", "year": 1989}, {"id": 2, "title": "GodFather", "year": 1976}] -------------------------------------------------------------------------------- /p-exam/exam.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/p-exam/exam.mov -------------------------------------------------------------------------------- /p-exam/participants.csv: -------------------------------------------------------------------------------- 1 | Code,Name,Family 2 | 11,ali,darvishi 3 | 22,mohammad,hamidi 4 | -------------------------------------------------------------------------------- /p-exam/participants.json: -------------------------------------------------------------------------------- 1 | [{"code": "11", "name": "ali", "family": "darvishi"}, {"code": "22", "name": "mohammad", "family": "hamidi"}] -------------------------------------------------------------------------------- /sounds/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/sounds/.DS_Store -------------------------------------------------------------------------------- /sounds/Don't-Wanna-MissA-Thing.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/sounds/Don't-Wanna-MissA-Thing.mp3 -------------------------------------------------------------------------------- /students/CSS/1.css: -------------------------------------------------------------------------------- 1 | /* Not acceptable 2 | Your score (in CSS exam): 50 (of 100) 3 | You have lost 50 marks on the exam(-50). 4 | You have not achieved any score in class */ 5 | 6 | body{ 7 | background-color: rgb(129, 202, 32); 8 | } 9 | 10 | h1{ 11 | 12 | } 13 | .flexcontainer{ 14 | display: flex; 15 | flex-direction: row; 16 | flex-wrap: wrap; 17 | } 18 | 19 | .imageintext-div{ 20 | text-align: center; 21 | color: rgb(38, 115, 148); 22 | margin: 10px; 23 | padding: 20px; 24 | border-radius: 50px; 25 | border: 2px rgb(118, 12, 12) solid; 26 | } 27 | -------------------------------------------------------------------------------- /students/CSS/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 | 8 |

My Website

9 |
10 |
11 |
12 | About 13 |

14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 15 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 16 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 17 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 18 | Doloribus nam vitae modi harum consectetur iste? Laudantium 19 | recusandae velit optio ut dolore et facere exercitationem 20 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 21 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 22 | asperiores aliquid fugit quasi modi voluptates natus quaerat 23 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 24 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 25 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 26 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 27 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 28 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 29 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 30 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 31 | ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur 32 | reiciendis rerum voluptate! Vitae minus possimus molestias 33 | inventore, hic a dolor dolore ducimus aut animi necessitatibus! In 34 | facilis voluptatum incidunt? 35 |

36 |
37 |
38 |
39 |
40 | Websites 41 | 47 |
48 |
49 |
50 |
51 | Personal Information 52 |
53 | 54 |

60 | 61 | 62 |

68 | 69 |
70 |

72 | 73 | 74 |

78 | 79 | 80 |

81 | 82 | 83 |
84 |
85 |
86 |
87 | 88 | 89 | -------------------------------------------------------------------------------- /students/CSS/10.CSS: -------------------------------------------------------------------------------- 1 | /* Very Good! 2 | Your score (in CSS exam): 100 (of 100) */ 3 | 4 | body{ 5 | background-color: pink; 6 | border: black dotted 3px; 7 | margin: 20px; 8 | padding: 20px; 9 | border-top-left-radius: 15px; 10 | border-top-right-radius: 15px; 11 | } 12 | 13 | h1{ 14 | color: red; 15 | border: blue solid; 16 | border-top-left-radius: 10px; 17 | border-top-right-radius: 10px; 18 | text-align: center; 19 | font-size: 50px; 20 | font-family: cursive; 21 | margin: 20px; 22 | padding: 40px; 23 | background: linear-gradient(to left, rgba(41, 236, 57, 0.993), rgb(255, 139, 201)); 24 | } 25 | 26 | #gridcontainer{ 27 | display: grid; 28 | grid-template-columns: 50% auto; 29 | grid-auto-rows: 250px; 30 | } 31 | 32 | .fildset1{ 33 | background-color: greenyellow; 34 | overflow: scroll; 35 | cursor: move; 36 | height: 200px; 37 | width: 550px; 38 | margin: 15px; 39 | padding: 20px; 40 | } 41 | 42 | .Section1{ 43 | float: right; 44 | grid-column: 2; 45 | grid-row: 1; 46 | } 47 | 48 | 49 | .fildset2{ 50 | background-color: white; 51 | height: 100px; 52 | width: 550px; 53 | margin: 25px; 54 | padding: 20px; 55 | } 56 | 57 | .Section2{ 58 | float: right; 59 | grid-column: 2; 60 | grid-row: 2; 61 | } 62 | 63 | a:link{ 64 | font-size: xx-large; 65 | } 66 | 67 | a:hover{ 68 | color: yellow; 69 | cursor: hand; 70 | } 71 | 72 | .fildset3{ 73 | background-color:darkorchid; 74 | margin: 30px; 75 | padding: 20px; 76 | height: 400px; 77 | width: 500px; 78 | } 79 | 80 | .Section3{ 81 | float: left; 82 | grid-column: 1 / 2; 83 | grid-row: 1 / 2; 84 | } 85 | 86 | #Form{ 87 | display: table; 88 | } 89 | 90 | .row{ 91 | display: table-row; 92 | } 93 | 94 | .row label{ 95 | display: table-cell; 96 | padding: 3px; 97 | text-align: right; 98 | } 99 | 100 | .row input{ 101 | display: table-cell; 102 | padding: 3px; 103 | } 104 | 105 | .bottom:hover{ 106 | color: rgb(255, 242, 66); 107 | transform: scale(1.4); 108 | border: black solid 12px; 109 | border-radius: 10px; 110 | display: inline; 111 | } 112 | 113 | legend{ 114 | font-style: italic; 115 | font-weight: bolder; 116 | font-size: x-large; 117 | } 118 | 119 | .fildset1 , .fildset2 , .fildset3{ 120 | border: black solid 2px; 121 | border-radius: 8px; 122 | } 123 | -------------------------------------------------------------------------------- /students/CSS/10.HTML: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS 5 | 6 | 7 | 8 |

My Website

9 | 10 |
11 |
12 |
13 | About 14 |

15 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 16 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 17 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 18 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 19 | Doloribus nam vitae modi harum consectetur iste? Laudantium 20 | recusandae velit optio ut dolore et facere exercitationem 21 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 22 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 23 | asperiores aliquid fugit quasi modi voluptates natus quaerat 24 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 25 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 26 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 27 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 28 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 29 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 30 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 31 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 32 | ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur 33 | reiciendis rerum voluptate! Vitae minus possimus molestias 34 | inventore, hic a dolor dolore ducimus aut animi necessitatibus! In 35 | facilis voluptatum incidunt? 36 |

37 |
38 |
39 | 40 |
41 |
42 | Websites 43 | 49 |
50 |
51 | 52 |
53 |
54 | Personal Information 55 |
56 |
57 | 58 |

59 |
60 | 61 |
62 | 63 |

64 |
65 | 66 |
67 |
68 |

69 |
70 | 71 |
72 | 73 |

76 |
77 | 78 |
79 | 80 |

81 |
82 | 83 |
84 | 85 |
86 |
87 |
88 |
89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /students/CSS/2.css: -------------------------------------------------------------------------------- 1 | /* Very Good! 2 | Your score (in CSS exam): 100 (of 100) 3 | You have lost 5 marks on the exam(-5). 4 | You have achieved 5 marks in class(+5) */ 5 | 6 | body { 7 | background-color:bisque; 8 | border: 2px dotted black; 9 | border-radius: 15px; 10 | margin: 20px; 11 | padding: 30px; 12 | } 13 | 14 | .my { 15 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 16 | font-size: 25px; 17 | text-align: center; 18 | padding: 20px; 19 | margin-bottom: 30px; 20 | border: 5px solid blue; 21 | align-items: center; 22 | border-top-right-radius: 20px; 23 | border-top-left-radius: 20px; 24 | color: rgb(250, 22, 117); 25 | background: linear-gradient(to top right,rgb(85, 255, 136) 5%, rgb(255, 100, 221) 85%) ; 26 | } 27 | 28 | /* ----Grid Section---- */ 29 | 30 | /* 31 | Section1 = Personal Information 32 | Section2 = About 33 | Section3 = Website 34 | */ 35 | .container { 36 | display: grid; 37 | gap:30px; 38 | grid-template-columns: repeat(2, 25%); 39 | } 40 | .container .section1 { 41 | display: grid; 42 | 43 | } 44 | .container .section2 fieldset{ 45 | display: grid; 46 | padding-top: -100px; 47 | } 48 | 49 | .section1{ 50 | grid-column: 1 / 3; 51 | grid-row: 1 / 4; 52 | } 53 | 54 | 55 | .section2{ 56 | grid-column: 3 / 3; 57 | grid-row: 1 ; 58 | } 59 | 60 | 61 | .section3 { 62 | grid-column: 3; 63 | grid-row: span 2; 64 | } 65 | 66 | 67 | /* ----Style Section---- */ 68 | .section2 fieldset{ 69 | border-style: dashed; 70 | border-color: black; 71 | border-radius: 10px; 72 | overflow: scroll; 73 | height: 200px; 74 | background-color: rgb(168, 250, 113); 75 | cursor:col-resize; 76 | } 77 | .section2 legend { 78 | font-family: Arial, Helvetica, sans-serif; 79 | font-weight: bold; 80 | font-size: 25px; 81 | } 82 | 83 | 84 | .section3 fieldset{ 85 | border-style: dashed; 86 | border-color: black; 87 | border-radius: 10px; 88 | padding-bottom: 80px; 89 | padding-top: 60px; 90 | background-color: aqua; 91 | } 92 | .section3 ul li a { 93 | cursor: cell; 94 | font-size: 25px; 95 | color: red; 96 | } 97 | .section3 ul li a.apple { 98 | color: blue; 99 | } 100 | .section3 legend { 101 | font-family: Arial, Helvetica, sans-serif; 102 | font-weight: bold; 103 | font-size: 25px; 104 | } 105 | 106 | .section1 fieldset{ 107 | display: grid; 108 | /* text-align: center; */ 109 | padding-top: 40px; 110 | padding-bottom: 40px; 111 | border-style: dashed; 112 | border-color: rgb(0, 0, 0); 113 | border-radius: 10px; 114 | background-color: #a2b9f7; 115 | } 116 | 117 | .section1 form { 118 | /* text-align: center; */ 119 | } 120 | .section1 legend { 121 | font-family: Arial, Helvetica, sans-serif; 122 | font-weight: bold; 123 | color: black; 124 | font-size: 25px; 125 | } 126 | 127 | /* ----Form Section---- */ 128 | .personalForm{ 129 | display: table; 130 | } 131 | .row{ 132 | display: table-row; 133 | } 134 | .row label{ 135 | display: table-cell; 136 | text-align: right; 137 | } 138 | .row input{ 139 | display: table-cell; 140 | padding: 2px; 141 | } 142 | 143 | 144 | 145 | #save_btn input{ 146 | padding: 6px; 147 | box-shadow: 0 0 5px pink; 148 | background-color: white; 149 | border-color: pink; 150 | border-radius: 5px; 151 | font-weight: bold; 152 | font-family: system-ui; 153 | transition: 0.2s; 154 | } 155 | #save_btn input:hover { 156 | box-shadow: 0 0 50px pink; 157 | cursor: pointer; 158 | background-color: pink; 159 | color: white; 160 | transform: scale(1.5); 161 | transition: 0.2s; 162 | } 163 | -------------------------------------------------------------------------------- /students/CSS/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 | 8 |
9 |

My Website

10 |
11 |
12 |
13 |
14 | Personal Information 15 |
16 |
17 | 18 |

24 |
25 |
26 | 27 |

33 |
34 |
35 |
36 |

43 |
44 |
45 | 46 |

50 |
51 |
52 | 53 |

54 |
55 |
56 | 57 |
58 |
59 |
60 |
61 | 62 |
63 |
64 | About 65 |

66 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 67 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 68 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 69 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 70 | Doloribus nam vitae modi harum consectetur iste? Laudantium 71 | recusandae velit optio ut dolore et facere exercitationem 72 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 73 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 74 | asperiores aliquid fugit quasi modi voluptates natus quaerat 75 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 76 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 77 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 78 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 79 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 80 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 81 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 82 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 83 | ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur 84 | reiciendis rerum voluptate! Vitae minus possimus molestias 85 | inventore, hic a dolor dolore ducimus aut animi necessitatibus! In 86 | facilis voluptatum incidunt? 87 |

88 |
89 |
90 |
91 |
92 | Websites 93 | 103 |
104 |
105 |
106 | 107 | 108 | -------------------------------------------------------------------------------- /students/CSS/3.css: -------------------------------------------------------------------------------- 1 | /* Good! 2 | Your score (in CSS exam): 90 (of 100) 3 | You have lost 10 marks on the exam(-10). */ 4 | 5 | body{ 6 | background-color:rgb(207, 207, 207) ; 7 | border: 2px dotted black; 8 | border-radius: 15px; 9 | margin: 20px; 10 | padding: 20px; 11 | } 12 | 13 | .container-grid{ 14 | display:grid; 15 | grid-template-columns: 45% auto; 16 | grid-auto-rows: 280px; 17 | 18 | } 19 | .main-header{ 20 | margin: 1px; 21 | padding: 20px; 22 | padding: 50px; 23 | border: 5px solid rgb(31, 1, 41); 24 | border-top-left-radius: 20px; 25 | border-top-right-radius: 20px; 26 | background: linear-gradient(to top right, rgb(140, 85, 145), rgb(30, 2, 41)); 27 | height: 100px; 28 | text-align: center; 29 | font-size: 60px; 30 | font-family: Cambria, Cochin, Times, 'Times New Roman', serif; 31 | color: rgb(204, 174, 216); 32 | } 33 | fieldset{ 34 | border:1px dashed black ; 35 | border-radius: 15px; 36 | padding: 20px; 37 | background-color: rgb(197, 167, 218); 38 | margin: 15x; 39 | } 40 | .section1{ 41 | margin: 20px; 42 | grid-column: 2; 43 | grid-row: 1; 44 | } 45 | .section2{ 46 | grid-column: 2; 47 | grid-row: 2; 48 | } 49 | 50 | .section3{ 51 | grid-column: 1/2; 52 | grid-row: 1/2; 53 | } 54 | .section1 p{ 55 | text-align: justify; 56 | height: 150px; 57 | overflow: scroll; 58 | cursor: move; 59 | } 60 | legend{ 61 | font-size: 20px; 62 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 63 | font-style: italic; 64 | } 65 | 66 | ul li a:hover{ 67 | color: rgb(251, 0, 0); 68 | font-weight: bold; 69 | cursor: progress; 70 | } 71 | 72 | #theform{ 73 | display: table; 74 | } 75 | .row{ 76 | display: table-row; 77 | } 78 | .row table{ 79 | display: table-cell; 80 | padding: 2px; 81 | text-align: right; 82 | } 83 | 84 | .row input{ 85 | display: table-cell; 86 | padding: 2px; 87 | } 88 | -------------------------------------------------------------------------------- /students/CSS/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 | 8 |

My Website

9 | 10 |
11 |
12 |
13 | About 14 |

15 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 16 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 17 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 18 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 19 | Doloribus nam vitae modi harum consectetur iste? Laudantium 20 | recusandae velit optio ut dolore et facere exercitationem 21 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 22 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 23 | asperiores aliquid fugit quasi modi voluptates natus quaerat 24 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 25 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 26 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 27 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 28 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 29 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 30 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 31 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 32 | ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur 33 | reiciendis rerum voluptate! Vitae minus possimus molestias 34 | inventore, hic a dolor dolore ducimus aut animi necessitatibus! In 35 | facilis voluptatum incidunt? 36 |

37 |
38 |
39 | 40 |
41 |
42 | Websites 43 | 49 |
50 |
51 | 52 |
53 |
54 | Personal Information 55 |
56 |
57 | 58 | 59 |

60 |
61 | 62 |
63 | 64 |

70 |
71 | 72 |
73 |
74 | 80 |

81 |
82 | 83 |
84 | 85 |

89 |
90 | 91 |
92 | 93 |

94 |
95 | 96 | 97 |
98 |
99 |
100 |
101 | 102 | 103 | -------------------------------------------------------------------------------- /students/CSS/4.css: -------------------------------------------------------------------------------- 1 | /* Not Good! Do your best please! 2 | Your score (in CSS exam): 70 (of 100) 3 | You have lost 30 marks on the exam(-30). */ 4 | 5 | body{ 6 | font-family: Verdana, Geneva, Tahoma, sans-serif; 7 | background-color: rgb(235, 214, 241); 8 | border: dotted 2px; 9 | margin: 10px; 10 | padding: 10px; 11 | border-radius: 10px; 12 | } 13 | .continer-grid{ 14 | display:grid ; 15 | grid-template-columns: auto auto auto; 16 | grid-template-rows: auto auto auto; 17 | } 18 | .section1{ 19 | grid-column: 1/6; 20 | grid-row: 1; 21 | background-color: rgb(37, 186, 37); 22 | text-align: center; 23 | border: dashed black 2px; 24 | font-family:'Times New Roman', Times, serif; 25 | text-align: center; 26 | margin: 25px; 27 | padding: 25px; 28 | border:5px solid blue; 29 | border-radius: 10px 10px 0 0 ; 30 | background: linear-gradient(to right, rgba(168, 44, 44, 0.3), rgba(43, 43, 139, 0.3)); 31 | color: rgb(243, 69, 69); 32 | font-size: 25px; 33 | cursor:crosshair 34 | 35 | } 36 | 37 | .section2{ 38 | display: grid; 39 | grid-column: 4; 40 | grid-row: 2; 41 | background-color: rgb(37, 186, 37); 42 | color: white; 43 | text-align: center; 44 | font-size: 20px; 45 | overflow: scroll; 46 | cursor: all-scroll; 47 | justify-content: end; 48 | border-radius: 12px; 49 | 50 | } 51 | .section2 a:hover{ 52 | font-size: 25px; 53 | } 54 | .section3{ 55 | display: grid; 56 | grid-column: 4; 57 | grid-row: 4; 58 | background-color: rgb(118, 201, 233); 59 | color: white; 60 | text-align: center; 61 | font-size: 20px; 62 | margin: 25px; 63 | cursor: pointer; 64 | justify-content: end; 65 | border-radius: 12px; 66 | 67 | } 68 | .section4{ 69 | display: grid; 70 | grid-column: 1; 71 | grid-row: 2; 72 | background-color: rgb(130, 144, 225); 73 | color: white; 74 | text-align: center; 75 | font-size: 20px; 76 | margin: 30px; 77 | cursor: grab; 78 | border-radius: 12px; 79 | 80 | } 81 | #theForm{ 82 | color: white; 83 | display: table; 84 | padding: 15px; 85 | background-color: #2c8f77; 86 | border: solid black 2px; 87 | } 88 | #theform{ 89 | display: table; 90 | } 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /students/CSS/4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 | 8 |
9 |
10 |

My Website

11 |
12 |
13 |
14 | About 15 |

16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 17 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 18 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 19 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 20 | Doloribus nam vitae modi harum consectetur iste? Laudantium 21 | recusandae velit optio ut dolore et facere exercitationem 22 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 23 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 24 | asperiores aliquid fugit quasi modi voluptates natus quaerat 25 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 26 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 27 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 28 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 29 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 30 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 31 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 32 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 33 | ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur 34 | reiciendis rerum voluptate! Vitae minus possimus molestias 35 | inventore, hic a dolor dolore ducimus aut animi necessitatibus! In 36 | facilis voluptatum incidunt? 37 |

38 |
39 |
40 |
41 |
42 |
43 | Websites 44 | 52 |
53 |
54 |
55 |
56 |
57 | Personal Information 58 |
59 | 60 |

66 | 67 | 68 |

74 | 75 |
76 |

78 | 79 | 80 |

84 | 85 | 86 |

87 | 88 | 89 |
90 |
91 |
92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /students/CSS/5+.css: -------------------------------------------------------------------------------- 1 | /* Not bad! 2 | Your score (in CSS exam): 80 (of 100) 3 | You have lost 20 marks on the exam(-20). */ 4 | 5 | body{ 6 | border-radius: 15px; 7 | background-color:rgb(151, 106, 136); 8 | 9 | 10 | } 11 | 12 | 13 | 14 | h1{ 15 | color: rgb(252, 8, 130); 16 | border: rgb(116, 5, 60) 5px solid; 17 | border-top-left-radius: 20px; 18 | border-top-right-radius: 20px; 19 | text-align: center; 20 | font-weight: 200px; 21 | background:linear-gradient(to top right,rgb(63, 1, 22) 10%, white); 22 | height: 100px; 23 | 24 | } 25 | .container{ 26 | display: grid; 27 | grid-template-rows: 100px 100px 100px; 28 | grid-template-columns: auto auto auto; 29 | grid-gap: 10px; 30 | grid-template-columns: repeat(5); 31 | 32 | } 33 | 34 | legend{ 35 | font-style: italic; 36 | font-size: 25px; 37 | color:rgb(208, 159, 236); 38 | 39 | } 40 | 41 | fieldset{ 42 | border: black 2px solid; 43 | border-radius: 20px; 44 | background-color:rgb(238, 6, 149); 45 | border-style:dotted; 46 | 47 | } 48 | 49 | .fieldset1{ 50 | background-color: rgb(100, 7, 7) ; 51 | 52 | } 53 | 54 | .fieldset2{ 55 | background-color: rgb(233, 19, 90); 56 | 57 | } 58 | 59 | 60 | 61 | a:hover{ 62 | color: rgb(207, 204, 30); 63 | cursor:help; 64 | } 65 | 66 | #Theform{ 67 | display: table; 68 | 69 | } 70 | 71 | .table{ 72 | display: table-row; 73 | } 74 | 75 | .section1{ 76 | 77 | 78 | 79 | grid-column: 3; 80 | grid-row: 1; 81 | 82 | color: white; 83 | text-align: center; 84 | font-size: 20px; 85 | } 86 | .section2{ 87 | 88 | grid-column: 3; 89 | grid-row: 3; 90 | color: white; 91 | text-align: center; 92 | font-size: 20px; 93 | padding: 40px; 94 | 95 | } 96 | .section3{ 97 | grid-column: 1; 98 | grid-row: 1; 99 | color: rgb(245, 200, 226); 100 | text-align: center; 101 | font-size: 20px; 102 | 103 | } 104 | 105 | .row{ 106 | display: table-row; 107 | } 108 | 109 | .row label{ 110 | display: table-cell; 111 | padding : 2px; 112 | } 113 | 114 | .row input{ 115 | display: table-cell; 116 | padding : 2px; 117 | } 118 | 119 | .submit:hover{ 120 | color: rgb(238, 13, 88); 121 | background-color: rgb(145, 18, 79); 122 | } 123 | 124 | .paragragh{ 125 | overflow: scroll; 126 | height: 150px; 127 | } 128 | 129 | .paragragh:hover{ 130 | cursor: move; 131 | } 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /students/CSS/5+.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 | 8 |

My Website

9 |
10 |
11 |
12 | About 13 |

14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 15 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 16 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 17 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 18 | Doloribus nam vitae modi harum consectetur iste? Laudantium 19 | recusandae velit optio ut dolore et facere exercitationem 20 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 21 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 22 | asperiores aliquid fugit quasi modi voluptates natus quaerat 23 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 24 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 25 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 26 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 27 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 28 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 29 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 30 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 31 | ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur 32 | reiciendis rerum voluptate! Vitae minus possimus molestias 33 | inventore, hic a dolor dolore ducimus aut animi necessitatibus! In 34 | facilis voluptatum incidunt? 35 |

36 |
37 |
38 |
39 |
40 | Websites 41 | 47 |
48 |
49 |
50 |
51 | Personal Information 52 |
53 | 54 |

60 | 61 | 62 |

68 | 69 |
70 |

72 | 73 | 74 |

78 | 79 | 80 |

81 | 82 | 83 |
84 |
85 |
86 |
87 | 88 | 89 | -------------------------------------------------------------------------------- /students/CSS/5.css: -------------------------------------------------------------------------------- 1 | /* Good! 2 | Your score (in CSS exam): 90 (of 100) 3 | You have lost 15 marks on the exam(-15). 4 | You have achieved 5 marks in class(+5) */ 5 | 6 | body{ 7 | border-radius: 15px; 8 | background-color:bisque; 9 | 10 | 11 | } 12 | 13 | 14 | 15 | h1{ 16 | color: crimson; 17 | border: blue 5px solid; 18 | border-top-left-radius: 20px; 19 | border-top-right-radius: 20px; 20 | text-align: center; 21 | font-weight: 200px; 22 | background: linear-gradient(to top right , blue , yellow); 23 | height: 100px; 24 | 25 | } 26 | .container{ 27 | display: grid; 28 | grid-template-rows: 100px 100px 100px; 29 | grid-template-columns: auto auto auto; 30 | grid-gap: 10px; 31 | grid-template-columns: repeat(5); 32 | 33 | } 34 | 35 | legend{ 36 | font-style: italic; 37 | font-size: 25px; 38 | color:blue; 39 | 40 | } 41 | 42 | fieldset{ 43 | border: black 2px solid; 44 | border-radius: 20px; 45 | background-color:brown; 46 | border-style:dotted; 47 | 48 | } 49 | 50 | .fieldset1{ 51 | background-color:burlywood; 52 | 53 | } 54 | 55 | .fieldset2{ 56 | background-color:chocolate; 57 | 58 | } 59 | 60 | 61 | 62 | a:hover{ 63 | color: red; 64 | cursor:help; 65 | } 66 | 67 | #Theform{ 68 | display: table; 69 | 70 | } 71 | 72 | .table{ 73 | display: table-row; 74 | } 75 | 76 | .section1{ 77 | 78 | 79 | 80 | grid-column: 3; 81 | grid-row: 1; 82 | 83 | color: white; 84 | text-align: center; 85 | font-size: 20px; 86 | } 87 | .section2{ 88 | 89 | grid-column: 3; 90 | grid-row: 3; 91 | color: white; 92 | text-align: center; 93 | font-size: 20px; 94 | padding: 40px; 95 | 96 | } 97 | .section3{ 98 | grid-column: 1; 99 | grid-row: 1; 100 | color: white; 101 | text-align: center; 102 | font-size: 20px; 103 | 104 | } 105 | 106 | .row{ 107 | display: table-row; 108 | } 109 | 110 | .row label{ 111 | display: table-cell; 112 | padding : 2px; 113 | } 114 | 115 | .row input{ 116 | display: table-cell; 117 | padding : 2px; 118 | } 119 | 120 | .submit:hover{ 121 | color: blue; 122 | background-color: cadetblue; 123 | } 124 | 125 | .paragragh{ 126 | overflow: scroll; 127 | height: 150px; 128 | } 129 | 130 | .paragragh:hover{ 131 | cursor: move; 132 | } 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /students/CSS/5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 | 8 |

My Website

9 |
10 |
11 |
12 | About 13 |

14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 15 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 16 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 17 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 18 | Doloribus nam vitae modi harum consectetur iste? Laudantium 19 | recusandae velit optio ut dolore et facere exercitationem 20 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 21 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 22 | asperiores aliquid fugit quasi modi voluptates natus quaerat 23 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 24 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 25 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 26 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 27 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 28 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 29 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 30 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 31 | ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur 32 | reiciendis rerum voluptate! Vitae minus possimus molestias 33 | inventore, hic a dolor dolore ducimus aut animi necessitatibus! In 34 | facilis voluptatum incidunt? 35 |

36 |
37 |
38 |
39 |
40 | Websites 41 | 47 |
48 |
49 |
50 |
51 | Personal Information 52 |
53 |
54 |
55 | 56 |

62 |
63 |
64 | 65 |

71 |
72 |
73 |
74 |

81 |
82 |
83 | 84 |

88 |
89 |
90 | 91 |

92 |
93 |
94 | 100 |
101 |
102 |
103 |
104 |
105 |
106 | 107 | 108 | -------------------------------------------------------------------------------- /students/CSS/7.css: -------------------------------------------------------------------------------- 1 | /* Very Good! 2 | Your score (in CSS exam): 100 (of 100) 3 | You have lost 5 marks on the exam(-5). 4 | You have achieved 5 marks because of your self-reliance(+5) */ 5 | 6 | body{ 7 | background-color:antiquewhite; 8 | border: 3px dotted black; 9 | border-radius: 20px; 10 | padding: 10px; 11 | margin: 15px; 12 | } 13 | h1{ 14 | text-align: center; 15 | font-size: 40px; 16 | padding: 20px; 17 | margin-bottom: 25px; 18 | border: 2px solid black; 19 | border-top-right-radius: 20px; 20 | border-top-left-radius: 20px; 21 | color: rgb(255, 0, 0); 22 | background: linear-gradient(to top right,rgb(237, 19, 45), rgb(116, 30, 244)) ; 23 | } 24 | .container-grid{ 25 | display: grid; 26 | grid-template-columns: auto auto auto ; 27 | grid-template-rows: 100px 100px 100px; 28 | grid-gap: 10px; 29 | grid-template-columns: repeat(5); 30 | } 31 | .section1{ 32 | grid-column: 3; 33 | grid-row: 1; 34 | margin-bottom: 30px; 35 | } 36 | .section1 fieldset{ 37 | border-style: dashed; 38 | border-color: rgb(0, 0, 0); 39 | border-radius: 15px; 40 | overflow: scroll; 41 | height: 260px; 42 | background-color: rgb(0, 242, 255); 43 | cursor:col-resize; 44 | } 45 | .section2{ 46 | grid-column: 2 / 6; 47 | grid-row: 3 / 5; 48 | padding: 80px; 49 | } 50 | .section2 legend{ 51 | font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 52 | } 53 | .section2 ul li a { 54 | color: red; 55 | } 56 | .section2 ul li a.a2 { 57 | color: blue; 58 | } 59 | .section2 a:hover{ 60 | font-size: 20px; 61 | cursor:progress; 62 | } 63 | .section2 fieldset{ 64 | border: 2px; 65 | border-radius: 15px; 66 | border-style: dashed ; 67 | border-color: black; 68 | background-color: rgba(255, 222, 11, 0.859); 69 | cursor:help; 70 | } 71 | #theform{ 72 | display: table; 73 | } 74 | .tabale{ 75 | display: table-row; 76 | } 77 | .section3{ 78 | display: table-cell; 79 | grid-column: 1; 80 | grid-row: 1; 81 | } 82 | 83 | .section3 legend{ 84 | font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 85 | } 86 | 87 | .section3 fieldset{ 88 | grid-column: 1; 89 | grid-row: 1; 90 | border-style: dashed; 91 | border-color: black; 92 | border-radius: 30px; 93 | background-color: rgb(38, 250, 187); 94 | } 95 | .row{ 96 | display: table; 97 | } 98 | #save input{ 99 | padding-right: 8px; 100 | padding-bottom: 3px; 101 | background-color: white; 102 | border-color: pink; 103 | border-radius: 5px; 104 | font-weight: bold; 105 | transition: 0.2s; 106 | } 107 | #save input:hover{ 108 | background-color: rgb(226, 43, 43); 109 | color: rgb(255, 255, 255); 110 | transform: scale(1.8); 111 | transition: 0.4s; 112 | } 113 | -------------------------------------------------------------------------------- /students/CSS/7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 | 8 |

My Website

9 | 10 |
11 |
12 |
13 | About 14 |

15 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 16 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 17 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 18 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 19 | Doloribus nam vitae modi harum consectetur iste? Laudantium 20 | recusandae velit optio ut dolore et facere exercitationem 21 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 22 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 23 | asperiores aliquid fugit quasi modi voluptates natus quaerat 24 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 25 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 26 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 27 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 28 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 29 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 30 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 31 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 32 | ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur 33 | reiciendis rerum voluptate! Vitae minus possimus molestias 34 | inventore, hic a dolor dolore ducimus aut animi necessitatibus! In 35 | facilis voluptatum incidunt?Lorem ipsum dolor sit amet consectetur 36 | adipisicing elit. Dignissimos atque aut provident inventore 37 | aspernatur sunt molestiae ratione iste fuga, numquam eum ab! Minus 38 | accusamus nemo totam voluptatibus dolores expedita saepe. Lorem, 39 | ipsum dolor sit amet consectetur adipisicing elit. At officia non 40 | quis ea quisquam, iusto, fugiat libero incidunt odio enim ex 41 | excepturi? Repellendus facilis voluptatum cum sunt earum, rem 42 | deserunt. Lorem, ipsum dolor sit amet consectetur adipisicing elit. 43 | Totam saepe illo accusamus exercitationem aliquid officiis iusto 44 | quos dicta aut similique. Quasi quaerat quo aut. Ut laboriosam sunt 45 | ea rem quam! 46 |

47 |
48 |
49 | 50 |
51 |
52 | Websites 53 | 63 |
64 |
65 | 66 |
67 |
68 | Personal Information 69 | 70 |
71 |
72 |
73 |
74 |

80 |
81 | 82 |
83 |
84 |

90 |
91 | 92 |
93 |
94 |

101 |
102 | 103 |
104 |
105 |

109 |
110 | 111 |
112 |
113 |

114 |
115 | 116 |
117 | 118 |
119 |
120 |
121 |
122 |
123 |
124 | 125 | 126 | -------------------------------------------------------------------------------- /students/CSS/8.css: -------------------------------------------------------------------------------- 1 | /* Good! 2 | Your score (in CSS exam): 90 (of 100) 3 | You have lost -10 marks on the exam(-10). */ 4 | 5 | body{ 6 | background-color: cadetblue; 7 | margin: 40px; 8 | padding: 40px; 9 | border: 2px dashed rgb(0, 0, 0); 10 | border-radius: 10px; 11 | } 12 | 13 | h1{ 14 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 15 | background: linear-gradient(to top right, rgb(248, 0, 0), rgb(132, 84, 244) ); 16 | color: chartreuse; 17 | border: 3px solid red; 18 | margin-bottom : 25px; 19 | padding: 20px; 20 | border-top-left-radius: 20px; 21 | border-top-right-radius: 20px; 22 | text-align: center; 23 | font-size: 55px; 24 | } 25 | 26 | .container-grid{ 27 | display: grid; 28 | grid-template-columns: 50% auto; 29 | grid-auto-rows: 290px; 30 | } 31 | .fieldset1{ 32 | grid-column: 2; 33 | grid-row: 1; 34 | } 35 | .link{ 36 | grid-column: 2; 37 | grid-row: 2; 38 | } 39 | 40 | .fieldset2{ 41 | grid-column: 1 / 2; 42 | grid-row: 1 / 2; 43 | } 44 | 45 | 46 | 47 | .fieldset1 fieldset{ 48 | background-color: chocolate; 49 | overflow: scroll; 50 | height: 200px; 51 | margin: 5px; 52 | padding: 5px; 53 | border: 2px; 54 | border-radius: 5px; 55 | border-style :dashed ; 56 | cursor: col-resize; 57 | } 58 | .link fieldset{ 59 | border: 2px dashed rgb(175, 63, 63); 60 | border-radius: 10px; 61 | background-color: aqua; 62 | border-color: black; 63 | cursor: auto; 64 | } 65 | 66 | .link fieldset ul a { 67 | cursor: progress; 68 | } 69 | 70 | .link fieldset ul a:hover { 71 | color: red; 72 | } 73 | 74 | .fieldset2 fieldset{ 75 | background-color: rgb(176, 81, 81); 76 | border-style: dashed; 77 | border-radius:10px ; 78 | border-color: black; 79 | padding: 40px; 80 | } 81 | #theForm{ 82 | display: table; 83 | } 84 | 85 | .fieldset1 legend{ 86 | font-size: 20px; 87 | font-style: italic; 88 | } 89 | .link legend{ 90 | font-size: 20px; 91 | font-style: italic; 92 | 93 | } 94 | .fieldset2 legend{ 95 | font-size: 20px; 96 | font-style: italic; 97 | 98 | } 99 | .row{ 100 | display: table-row; 101 | } 102 | #save input{ 103 | padding-right: 8px; 104 | padding-bottom: 3px; 105 | background-color: aquamarine; 106 | border-color: purple; 107 | border-radius: 5px; 108 | font-weight: bold; 109 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 110 | transition: 0.2s; 111 | } 112 | #save input:hover{ 113 | background-color: rgb(224, 217, 20); 114 | color: black; 115 | transform: scale(1.8); 116 | transition: 0.4s; 117 | } 118 | -------------------------------------------------------------------------------- /students/CSS/8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 | 8 |

My Website

9 |
10 |
11 |
12 | About 13 |

14 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 15 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 16 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 17 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 18 | Doloribus nam vitae modi harum consectetur iste? Laudantium 19 | recusandae velit optio ut dolore et facere exercitationem 20 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 21 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 22 | asperiores aliquid fugit quasi modi voluptates natus quaerat 23 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 24 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 25 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 26 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 27 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 28 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 29 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 30 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 31 | ipsum dolor sit amet consectetur, adipisicing elit. Assumenda 32 | corporis quos accusantium molestias, sunt illum cum temporibus omnis 33 | alias provident labore non debitis dolore facere itaque, at ipsam! 34 | Quaerat, cupiditate. Lorem ipsum dolor sit, amet consectetur 35 | adipisicing elit. Soluta omnis similique ipsam quibusdam nobis 36 | assumenda deleniti necessitatibus eveniet. Molestias, praesentium 37 | beatae. Nulla asperiores nisi at eius dicta autem dolorem unde? 38 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi 39 | consequatur reiciendis rerum voluptate! Vitae minus possimus 40 | molestias inventore, hic a dolor dolore ducimus aut animi 41 | necessitatibus! In facilis voluptatum incidunt? Lorem ipsum dolor 42 | sit, amet consectetur adipisicing elit. Voluptatibus laudantium 43 | excepturi tenetur cum error perferendis minima nemo culpa magnam 44 | odit, pariatur architecto fugiat sed eius temporibus similique, 45 | nihil, ipsum perspiciatis? Lorem ipsum dolor sit, amet consectetur 46 | adipisicing elit. Repellendus aspernatur error fugiat, eos 47 | perspiciatis consectetur natus, aliquam, vero illum voluptas 48 | dolorem. Eius voluptas, aperiam quia sit natus quaerat expedita 49 | cupiditate! 50 |

51 |
52 |
53 |
54 |
55 | Website 56 | 66 |
67 |
68 |
69 |
70 | Personal Information 71 |
72 |
73 | 74 |

80 |
81 |
82 | 83 |

89 |
90 |
91 |
92 |

99 |
100 |
101 | 102 |

106 |
107 |
108 | 109 |

110 |
111 |
112 | 113 |
114 |
115 |
116 |
117 |
118 | 119 | 120 | -------------------------------------------------------------------------------- /students/CSS/9.css: -------------------------------------------------------------------------------- 1 | /* Very Good! 2 | Your score (in CSS exam): 100 (of 100) 3 | You have lost 5 marks on the exam(-5). 4 | You have achieved 5 marks in class(+5) */ 5 | 6 | body{ 7 | background-color: pink; 8 | border: black dotted 2px; 9 | margin: 25px; 10 | padding: 20px; 11 | } 12 | 13 | h1{ 14 | color: red; 15 | border: blue solid; 16 | border-top-left-radius: 10px; 17 | border-top-right-radius: 10px; 18 | text-align: center; 19 | margin: 15px; 20 | padding: 40px; 21 | background: linear-gradient(to right, rgba(41, 236, 58, 0.3), rgb(235, 82, 163)); 22 | } 23 | 24 | #gridcontainer{ 25 | display: grid; 26 | grid-template-columns: 45% auto; 27 | grid-auto-rows: 280px; 28 | } 29 | 30 | .c1{ 31 | background-color: rgb(68, 222, 68); 32 | overflow: scroll; 33 | cursor: move; 34 | height: 200px; 35 | width: 550px; 36 | margin: 25px; 37 | padding: 20px; 38 | } 39 | 40 | .Section1{ 41 | float: right; 42 | grid-column: 2; 43 | grid-row: 1; 44 | } 45 | 46 | 47 | .c2{ 48 | background-color: aqua; 49 | height: 100px; 50 | width: 550px; 51 | margin: 25px; 52 | padding: 20px; 53 | } 54 | 55 | .Section2{ 56 | float: right; 57 | grid-column: 2; 58 | grid-row: 2; 59 | } 60 | 61 | a:link{ 62 | font-size: larger; 63 | } 64 | 65 | a:hover{ 66 | color: red; 67 | cursor: crosshair; 68 | } 69 | 70 | .c3{ 71 | background-color: rgb(78, 78, 228); 72 | margin: 25px; 73 | padding: 20px; 74 | height: 400px; 75 | width: 500px; 76 | } 77 | 78 | .Section3{ 79 | float: left; 80 | grid-column: 1 / 2; 81 | grid-row: 1 / 2; 82 | } 83 | 84 | #theForm{ 85 | display: table; 86 | } 87 | 88 | .row{ 89 | display: table-row; 90 | } 91 | 92 | .row label{ 93 | display: table-cell; 94 | padding: 2px; 95 | text-align: right; 96 | } 97 | 98 | .row input{ 99 | display: table-cell; 100 | padding: 2px; 101 | } 102 | 103 | .button:hover{ 104 | color: blue; 105 | transform: scale(1.2); 106 | } 107 | 108 | legend{ 109 | font-style: italic; 110 | font-weight: bolder; 111 | font-size: larger; 112 | } 113 | 114 | .c1 , .c2 , .c3{ 115 | border: black dashed 2px; 116 | border-radius: 5px; 117 | } 118 | -------------------------------------------------------------------------------- /students/CSS/9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 | 8 |

My Website

9 | 10 |
11 |
12 |
13 | About 14 |

15 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 16 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 17 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 18 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 19 | Doloribus nam vitae modi harum consectetur iste? Laudantium 20 | recusandae velit optio ut dolore et facere exercitationem 21 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 22 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 23 | asperiores aliquid fugit quasi modi voluptates natus quaerat 24 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 25 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 26 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 27 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 28 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 29 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 30 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 31 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 32 | ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur 33 | reiciendis rerum voluptate! Vitae minus possimus molestias 34 | inventore, hic a dolor dolore ducimus aut animi necessitatibus! In 35 | facilis voluptatum incidunt? 36 |

37 |
38 |
39 | 40 |
41 |
42 | Websites 43 | 49 |
50 |
51 | 52 |
53 |
54 | Personal Information 55 |
56 |
57 | 58 |

64 |
65 | 66 |
67 | 68 |

74 |
75 | 76 |
77 |
78 |

85 |
86 | 87 |
88 | 89 |

93 |
94 | 95 |
96 | 97 |

98 |
99 | 100 |
101 | 102 |
103 |
104 |
105 |
106 |
107 | 108 | 109 | -------------------------------------------------------------------------------- /students/CSS/os.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(255, 230, 227); 3 | margin: 30px; 4 | padding: 30px; 5 | border: 2px dotted black; 6 | border-radius: 20px; 7 | } 8 | .main-header{ 9 | margin: 1px; 10 | padding: 20px; 11 | padding-top: 50px; 12 | border: 5px solid rgb(25, 0, 255); 13 | border-top-left-radius: 20px; 14 | border-top-right-radius: 20px; 15 | background: linear-gradient(to top right, rgb(104, 255, 104), rgb(240, 79, 213)); 16 | height: 100px; 17 | text-align: center; 18 | color: rgb(255, 62, 101); 19 | font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 20 | font-size: 70px; 21 | } 22 | .container-grid{ 23 | display: grid; 24 | grid-template-columns: 45% auto; 25 | grid-auto-rows: 280px; 26 | } 27 | .section1{ 28 | grid-column: 2; 29 | grid-row: 1; 30 | } 31 | .section2{ 32 | grid-column: 2; 33 | grid-row: 2; 34 | } 35 | .section3{ 36 | grid-column: 1 / 2; 37 | grid-row: 1 / 2; 38 | } 39 | .section1 p{ 40 | text-align: justify; 41 | height: 100px; 42 | overflow: scroll; 43 | cursor: move; 44 | } 45 | legend{ 46 | font-size: 20px; 47 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 48 | font-style: italic; 49 | font-weight: bolder; 50 | } 51 | fieldset{ 52 | margin: 15px; 53 | padding: 20px; 54 | border: 3px dashed rgb(31, 0, 69); 55 | border-radius: 15px; 56 | } 57 | .section1 fieldset{ 58 | background-color: rgb(180, 255, 127); 59 | } 60 | .section2 fieldset{ 61 | background-color: aquamarine; 62 | } 63 | .section3 fieldset{ 64 | background-color: rgb(165, 183, 250); 65 | } 66 | .section2 a{ 67 | font-size: 25px; 68 | cursor:progress; 69 | } 70 | .section2 a:hover{ 71 | color: rgb(255, 0, 0); 72 | } 73 | #theForm{ 74 | display: table; 75 | } 76 | .row{ 77 | display: table-row; 78 | } 79 | .row label{ 80 | display: table-cell; 81 | padding: 2px; 82 | text-align: right; 83 | } 84 | .row input{ 85 | display: table-cell; 86 | padding: 2px; 87 | } 88 | input[type="submit"]{ 89 | font-size: 20px; 90 | background-color: rgb(245, 245, 245); 91 | color: gray; 92 | border-radius: 5px; 93 | } 94 | input[type="submit"]:hover{ 95 | font-size: 20px; 96 | background-color: rgb(255, 255, 255); 97 | color: rgb(11, 75, 248); 98 | border-radius: 5px; 99 | transform: scale(1.2); 100 | } 101 | 102 | -------------------------------------------------------------------------------- /students/CSS/os.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exam 5 | 6 | 7 | 8 |

My Website

9 | 10 |
11 |
12 |
13 | About 14 |

15 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem 16 | laborum, aut alias nisi dolor, cupiditate atque odio corrupti libero 17 | culpa commodi, assumenda quibusdam? Sed vel dolorem nemo ut magni 18 | hic. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 19 | Doloribus nam vitae modi harum consectetur iste? Laudantium 20 | recusandae velit optio ut dolore et facere exercitationem 21 | blanditiis, explicabo numquam quam fugit omnis. Lorem ipsum dolor 22 | sit amet consectetur adipisicing elit. Ipsam blanditiis itaque eos, 23 | asperiores aliquid fugit quasi modi voluptates natus quaerat 24 | exercitationem quia sequi obcaecati non, eum corrupti! Ex, error. 25 | Adipisci? Lorem ipsum dolor sit amet consectetur adipisicing elit. 26 | Accusantium officiis ipsa aut. Voluptatum, nisi. Molestias, quo 27 | quod! Natus debitis blanditiis provident ea ducimus expedita tenetur 28 | illo similique, sapiente ullam ipsa. Lorem, ipsum dolor sit amet 29 | consectetur adipisicing elit. Sed, suscipit aliquam. Saepe, officia. 30 | Quae praesentium totam fugit est consectetur porro! Nisi adipisci 31 | ullam architecto veniam odio, quam nemo voluptatem facilis. Lorem 32 | ipsum dolor sit amet consectetur adipisicing elit. Sequi consequatur 33 | reiciendis rerum voluptate! Vitae minus possimus molestias 34 | inventore, hic a dolor dolore ducimus aut animi necessitatibus! In 35 | facilis voluptatum incidunt? 36 |

37 |
38 |
39 |
40 |
41 | Websites 42 | 48 |
49 |
50 | 51 |
52 |
53 | Personal Information 54 |
55 |
56 | 57 |

63 |
64 | 65 |
66 | 67 |

73 |
74 | 75 |
76 |
77 |

84 |
85 | 86 |
87 | 88 |

92 |
93 | 94 |
95 | 96 |

97 |
98 | 99 |
100 | 101 |
102 |
103 |
104 |
105 |
106 | 107 |
108 | 109 | 110 | -------------------------------------------------------------------------------- /students/HTML/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | yazdipoor 7 | 8 | 9 |
10 | About 11 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In placeat consequuntur blanditiis, soluta similique voluptates aut obcaecati praesentium nostrum quas corrupti necessitatibus tempora? Dolores consequuntur ipsa illum, iusto ad minima.

12 |
13 |
14 | Websites 15 | 20 |
21 | 22 | 23 | 24 |
25 |
26 |
27 | 28 | 29 | 30 |
31 | 32 | Personal information's 33 | 34 |
35 | 36 | 37 |
38 |
39 | 40 | 41 |
42 |
43 |
44 | 45 | 46 |
47 |
48 |
49 | 50 | 51 | 52 |
53 |
54 |
55 | 56 | 57 | 62 |
63 |
64 | 65 |
66 | 67 | 68 | 69 |
70 | 71 | 72 | Yes: 73 | 74 | No: 75 | 76 | 77 |
78 |
79 | 80 | 81 | -------------------------------------------------------------------------------- /students/HTML/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Website 7 | 8 | 9 |
10 | about 11 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum consequuntur, quia repellat quis harum sunt ducimus tenetur nisi, facere aperiam non ipsam rerum tempore voluptatem animi ipsum cupiditate unde autem! Amet natus tempora ut quibusdam totam architecto iure, impedit veritatis! Maxime quidem perspiciatis nisi accusantium velit itaque! Optio architecto tempore nihil sed quas, saepe, sint cumque aperiam et, hic assumenda! Hic velit ea enim voluptatibus fuga nemo adipisci repellat delectus ratione non pariatur, a tempora cum ducimus sequi placeat, incidunt laborum nulla tempore possimus? Dicta dolorum nesciunt alias numquam sapiente sed sunt dolore earum debitis beatae accusantium perferendis reiciendis veritatis id, porro deserunt culpa rerum consectetur eos, voluptatibus saepe at delectus. Facere, maiores fugit veniam tenetur laudantium enim. Reprehenderit in vel architecto rerum quisquam inventore? Impedit et accusantium totam vero doloremque non inventore veniam ipsum rem minus natus alias omnis a fuga unde nostrum quia ad ipsa, cumque, eius itaque animi repudiandae iste. Delectus nostrum earum sit id adipisci, quidem ut accusantium voluptates, dolorem natus iure animi, quae soluta tenetur. Temporibus fuga voluptatem ea placeat, magnam accusantium quos odio quas voluptatibus quidem non inventore eaque, hic repudiandae sunt id omnis sapiente? Cum aspernatur at reiciendis obcaecati explicabo ipsa ex dignissimos!

12 |
13 |
14 | Website 15 | 19 |
20 |
21 | Personal information 22 | 23 |
24 | 25 | 26 |

27 |
28 | 29 | 30 |


31 |
32 | 33 |

34 |
35 | 39 |
40 |
41 |
42 |
43 |
44 | 45 |
46 | 47 | 48 |

49 |
50 |
51 | 52 |

53 |
54 | 55 |
56 | 57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /students/HTML/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | about 11 | 12 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas eligendi blanditiis vel nam vitae 13 | quas possimus impedit ratione. 14 | Dignissimos beatae qui amet magnam accusamus iusto aspernatur ut repellat doloremque voluptate! 15 |

16 |
17 |
18 | 19 | web site 20 | 24 | 25 |
26 |
27 | 28 | personal Information 29 | 30 |
31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 |
39 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /students/HTML/4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | about 12 |

13 | Lorem ipsum dolor, sit amet consectetu, soluta quo? 14 |

15 |

16 |
17 | 18 |
19 | websits 20 | 24 |

25 |
26 |
27 | personal information 28 | 29 | 30 |

31 | 32 | 33 |
34 |
35 | 36 | 37 |
38 |
39 | 40 |

44 | 45 | Are You Agree?
46 | 47 | YES: 48 |
49 | NO: 50 |

51 | 52 | 53 | 54 |

55 | 56 | 57 |
58 | 59 |
60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /students/HTML/5+.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AH website 7 | 8 | 9 |
about 10 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima delectus doloremque impedit, pariatur harum veritatis dolore nulla eum dolorem repudiandae atque possimus nam qui, nemo provident animi, laudantium illo repellendus?

11 |
12 |
13 |
websites 14 | 18 | 19 |
20 |
21 |
Personal information 22 |
23 | 24 | 25 |

26 | 27 | 28 |

29 |
30 | 31 |

32 | 33 | 38 |

39 | Are you agree? 40 |
41 | 42 | 43 |
44 | 45 | 46 |

47 |
48 | 49 |

50 | 51 |
52 |
53 | 54 | -------------------------------------------------------------------------------- /students/HTML/5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | computer sciens 8 | 9 | 10 |
11 | about 12 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia saepe magni labore omnis dicta! Ad, est molestias magni, quasi saepe natus minus quia eum optio ab molestiae eligendi qui. Fugit.

13 | 14 |
15 |
16 |
website 17 | 23 | 24 |
25 |
26 |
personal information 27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 |
39 |
40 | for="gender">your gender 41 | 46 |
47 |
48 | 49 | are you agree? 50 |
51 | 52 | 53 |
54 | 55 | 56 |
57 |
58 |
59 | 60 |
61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /students/HTML/6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 |
13 | about 14 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, voluptates? 15 |
16 |


17 | 18 |
19 |
20 | web site 21 | Google
22 | apple
23 |
24 |


25 | 26 |
27 |
28 | personal informaion 29 | 30 | 31 |
32 | 33 | 34 |
35 | 36 | 37 |
38 | 39 | your gender
40 |
44 | are u agree?
45 | 46 |
47 | 48 |
49 | 50 | 51 |

52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /students/HTML/7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My website 7 | 8 | 9 | 10 | 11 |
12 | About 13 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. 14 | Necessitatibus incidunt id sed voluptate. Tenetur, ut. Ducimus debitis sit ipsa 15 | iste totam eius impedit corporis, nihil sequi vero tempore, labore qui.

16 |

17 |
18 | website 19 | Googl
20 | Aplle 21 |
22 | 23 |
24 | personal information 25 |
26 | 27 | 28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 | 37 | 38 |
39 |
40 | 41 | 46 |
47 |
48 |
49 | 50 | 51 |
52 |
53 |
54 |

are you agree?

55 | Yes: 56 | 57 | No: 58 | 59 | 60 | 61 |
62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /students/HTML/8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | exam 7 | 8 | 9 |
10 | aboat 11 |

12 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis eius 13 | distinctio accusamus quod ullam blanditiis debitis hic optio maiores! 14 | Tempora reprehenderit, quo ipsum veritatis voluptate consectetur. Esse, 15 | quaerat. Dignissimos, fugit? 16 |

17 |
18 | 19 |
20 | website 21 | website 22 | 26 |
27 |
28 | personal info 29 |
30 | 31 | 39 |
40 |
41 | 42 | 43 | 51 |
52 |
53 | 54 | 57 |
58 |
59 | 64 |
65 |
66 | 67 | 68 | 69 |
70 |
71 | 73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /students/HTML/9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | About 9 | 10 |

11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam nam natus 12 | culpa, dolore maiores autem. Et similique asperiores, necessitatibus 13 | ipsa sit nihil? Soluta quis iure a, debitis velit porro? Vero! 14 |

15 |
16 | 17 |
18 | Web Site 19 | 20 | 24 |
25 | 26 |
27 | Personal Information 28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 | 36 | 37 | 38 | 39 |
40 |
41 | 42 | 43 | 44 | 45 |
46 |
47 | 48 | 49 | 54 | 55 |
56 |
57 | 58 | 59 | Yes: 60 | 61 | No: 62 | 63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 |
71 |
72 | 73 | 74 | 75 |
76 | 77 | 78 | -------------------------------------------------------------------------------- /videos/Game-of-Thrones-HBO.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/al102030/Web-developing-class/0c74f7a3a67ea1ce6b57220d208de987d025c93f/videos/Game-of-Thrones-HBO.mp4 --------------------------------------------------------------------------------