diff --git a/html/css/reset.css b/html/css/reset.css new file mode 100644 index 0000000..cd5b72b --- /dev/null +++ b/html/css/reset.css @@ -0,0 +1,51 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +* { + box-sizing: border-box; +} + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, button, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/html/css/style.css b/html/css/style.css new file mode 100644 index 0000000..ba97bfd --- /dev/null +++ b/html/css/style.css @@ -0,0 +1,275 @@ +/* From the :root element you can easily change the colors of the design, its size and so on. */ +:root { + + /* You can change the font family in the whole design here. (You need to add the font family to the codes.) */ + --font_family: 'Inter', sans-serif; + + /* You can change the font size here, is proportional to all texts. */ + --font_size: 16px; + + /* You can change the background color by typing the color code. (If you do not enter a background-image image, the background-color will be active.) */ + --background_color: #000; + --background_image: url("../img/wallpaper.jpg"); + + /* You can change the frame thickness and color of the picture by typing the number of pixels and the color code. */ + --image_border_color: #000; + --image_border_px: 3px; + + /* You can change the width and size of the picture by typing the number of pixels. */ + --image_width: 140px; + --image_height: 140px; + + /* You can change the colors of the title and description section by typing the color codes. */ + --title_color: #fff; + --description_color: #f1c40f; + + /* You can change the colors of social media icons by changing the color code. */ + --svg_color: #fff; + + /* You can change the background, text color and active color of the menu by changing the color codes. */ + --menu_background_color: #0e0e0e; + --menu_text_color: #fff; + --menu_active_text_color: #f1c40f; + + /* You can change the button's background, text color and active color by changing the color codes. */ + --button_background_color: #0e0e0e; + --button_text_color: #fff; + --button_text_hover_color: #f1c40f; + + /* You can change the background, text color and active color of the text field by changing the color codes. */ + --textarea_background_color: #0e0e0e; + --textarea_text_color: #fff; + --textarea_link_text_color: #f1c40f; + + /* You can change the background, text color and active color of the footer area by changing the color codes. */ + --footer_background_color: #0e0e0e; + --footer_text_color: #fff; + --footer_link_text_color: #f1c40f; +} + +/* Basic Codes */ + +body { + font: var(--font_size) var(--font_family); + font-weight: 400; + line-height: 1.5; + background: var(--background_color) var(--background_image) no-repeat center; + min-height: 100vh; + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +.flex_column_center { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.flex_row_center { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.flex_no_wrap_row_center { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: center; +} + +/* Logo, Title and Description Codes */ + +.header_img { + padding-top: 1em; +} + +.header_img img { + height: var(--image_height); + width: var(--image_width); + border: var(--image_border_px) solid var(--image_border_color); + border-radius: 50%; + margin-bottom: 0.5em; +} + +.header_text h1 { + color: var(--title_color); + font-size: 2em; +} + +.header_text h2 { + color: var(--description_color); + font-size: 1.5em; +} + +/* Social Media Icons Codes */ + +.header_svg_list { + padding-top: 1em; +} + +.header_svg_item { + width: 2.1em; + height: 2.1em; + cursor: pointer; +} + +.header_svg_item:hover { + transform: scale(1.10); + transition: 0.10s ease; +} + +.header_svg_item + .header_svg_item { + margin-left: 1em; +} + +.header_svg_item svg { + fill: var(--svg_color); +} + +/* Menu Codes */ + +#header_nav_menu_item_1 { + color: var(--menu_active_text_color); +} + +#header_nav_menu_item_2, +#header_nav_menu_item_3 { + color: var(--menu_text_color); +} + + +.header_nav_menu_list { + padding-top: 1em; + margin-left: 1em; + margin-right: 1em; +} + +.header_nav_menu_item { + color: var(--menu_text_color); + background-color: var(--menu_background_color); + text-align: center; + list-style-type: none; + cursor: pointer; + padding: 0.5em; + border-radius: 0.3em; + cursor: pointer; + transition: 0.10s ease; + font-size: 1.1em; +} + +.header_nav_menu_item + .header_nav_menu_item { + margin-left: 0.4em; +} + +/* Menu Container Codes */ + +main { + margin-bottom: auto; +} + +#main_section_container_2, #main_section_container_3 { + display: none; +} + +.main_a_item { + margin-top: 1em; + text-decoration: none; +} + +.main_text_item { + display: flex; + align-items: center; + justify-content: center; + color: var(--button_text_color); + background-color: var(--button_background_color); + width: 41em; + margin-top: 1em; + padding: 0.8em; + border-radius: 0.3em; + min-height: 3.7em; + text-align: center; +} + +.main_button_item { + color: var(--button_text_color); + background-color: var(--button_background_color); + width: 41em; + border-radius: 1em; + min-height: 3.7em; + text-align: center; + cursor: pointer; +} + +.main_small_button_list { + display: flex; + flex-direction: row; +} + +.main_small_a_item { + margin-top: 1em; + text-decoration: none; +} + +.main_small_a_item + .main_small_a_item { + margin-left: 10px; +} + +.main_small_button_item:hover, +.main_button_item:hover { + color: var(--button_text_hover_color); + transform: scale(1.02); + transition: 0.10s ease; +} + +.main_small_button_item { + color: var(--button_text_color); + background-color: var(--button_background_color); + width: calc(41em / 2 - 5px); + border-radius: 1em; + min-height: 3.7em; + text-align: center; + cursor: pointer; +} + +/* Footer Codes */ + +.footer_div_item { + color: var(--footer_text_color); + background: var(--footer_background_color); + padding: 1em; + margin-top: 1.5em; +} + +.footer_a_item { + color: var(--footer_link_text_color); + text-decoration: none; +} + +/* Responsive Codes */ + +@media (max-width: 768px) { + .main_text_item { + width: 92vw; + } + + .main_small_button_item { + width: calc(92vw / 2 - 5px);; + } + + .main_button_item { + width: 92vw; + } + + .header_h_item { + width: 92vw; + text-align: center; + } + +} diff --git a/html/index.html b/html/index.html index 4c64084..200150d 100644 --- a/html/index.html +++ b/html/index.html @@ -1,17 +1,199 @@ - - -Libre Sites - - -Sites for Libre folks. + - - - + + + + + + + Your Description - Your Title + + + + + + + +
+ +
+ Logo +
+
+

Your Title

+

Your Description

+
+ + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+
+ + + + + + +
+
+ +
+ +
+

The project, where you can easily change texts, icons, colours, boxes and images, is live! Download and try it on Github now.

+
+ +
+ + + + + + +
+ +
+ + + + + + +
+ + + + + + + + +
+ + + +
+ +
+

Menu 2 text Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi molestiae nesciunt, exercitationem quaerat maxime non!

+
+ +
+ + + + + + +
+ +
+ + + + + + +
+ + + + + + + + +
+ + + +
+ +
+

Menu 3 text Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi molestiae nesciunt, exercitationem quaerat maxime non!

+
+ +
+ + + + + + +
+ +
+ + + + + + +
+ + + + + + + + +
+ +
+ + + + + diff --git a/html/js/main.js b/html/js/main.js new file mode 100644 index 0000000..2edb346 --- /dev/null +++ b/html/js/main.js @@ -0,0 +1,15 @@ +/* Menu Active Codes */ + +let targets = document.querySelectorAll('[data-target]') +targets.forEach(element => { + element.addEventListener('click', () => { + var target = document.querySelector(element.dataset.target) + targets.forEach(element2 => { + var target2 = document.querySelector(element2.dataset.target) + element2.style.color = 'var(--menu_text_color)' + target2.style.display = 'none' + }); + element.style.color = 'var(--menu_active_text_color)' + target.style.display= 'flex' + }) +})