diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..dfcfd56 --- /dev/null +++ b/.gitignore @@ -0,0 +1,350 @@ +## Ignore Visual Studio temporary files, build results, and +## files generated by popular Visual Studio add-ons. +## +## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore + +# User-specific files +*.rsuser +*.suo +*.user +*.userosscache +*.sln.docstates + +# User-specific files (MonoDevelop/Xamarin Studio) +*.userprefs + +# Mono auto generated files +mono_crash.* + +# Build results +[Dd]ebug/ +[Dd]ebugPublic/ +[Rr]elease/ +[Rr]eleases/ +x64/ +x86/ +[Aa][Rr][Mm]/ +[Aa][Rr][Mm]64/ +bld/ +[Bb]in/ +[Oo]bj/ +[Ll]og/ +[Ll]ogs/ + +# Visual Studio 2015/2017 cache/options directory +.vs/ +# Uncomment if you have tasks that create the project's static files in wwwroot +#wwwroot/ + +# Visual Studio 2017 auto generated files +Generated\ Files/ + +# MSTest test Results +[Tt]est[Rr]esult*/ +[Bb]uild[Ll]og.* + +# NUnit +*.VisualState.xml +TestResult.xml +nunit-*.xml + +# Build Results of an ATL Project +[Dd]ebugPS/ +[Rr]eleasePS/ +dlldata.c + +# Benchmark Results +BenchmarkDotNet.Artifacts/ + +# .NET Core +project.lock.json +project.fragment.lock.json +artifacts/ + +# StyleCop +StyleCopReport.xml + +# Files built by Visual Studio +*_i.c +*_p.c +*_h.h +*.ilk +*.meta +*.obj +*.iobj +*.pch +*.pdb +*.ipdb +*.pgc +*.pgd +*.rsp +*.sbr +*.tlb +*.tli +*.tlh +*.tmp +*.tmp_proj +*_wpftmp.csproj +*.log +*.vspscc +*.vssscc +.builds +*.pidb +*.svclog +*.scc + +# Chutzpah Test files +_Chutzpah* + +# Visual C++ cache files +ipch/ +*.aps +*.ncb +*.opendb +*.opensdf +*.sdf +*.cachefile +*.VC.db +*.VC.VC.opendb + +# Visual Studio profiler +*.psess +*.vsp +*.vspx +*.sap + +# Visual Studio Trace Files +*.e2e + +# TFS 2012 Local Workspace +$tf/ + +# Guidance Automation Toolkit +*.gpState + +# ReSharper is a .NET coding add-in +_ReSharper*/ +*.[Rr]e[Ss]harper +*.DotSettings.user + +# TeamCity is a build add-in +_TeamCity* + +# DotCover is a Code Coverage Tool +*.dotCover + +# AxoCover is a Code Coverage Tool +.axoCover/* +!.axoCover/settings.json + +# Visual Studio code coverage results +*.coverage +*.coveragexml + +# NCrunch +_NCrunch_* +.*crunch*.local.xml +nCrunchTemp_* + +# MightyMoose +*.mm.* +AutoTest.Net/ + +# Web workbench (sass) +.sass-cache/ + +# Installshield output folder +[Ee]xpress/ + +# DocProject is a documentation generator add-in +DocProject/buildhelp/ +DocProject/Help/*.HxT +DocProject/Help/*.HxC +DocProject/Help/*.hhc +DocProject/Help/*.hhk +DocProject/Help/*.hhp +DocProject/Help/Html2 +DocProject/Help/html + +# Click-Once directory +publish/ + +# Publish Web Output +*.[Pp]ublish.xml +*.azurePubxml +# Note: Comment the next line if you want to checkin your web deploy settings, +# but database connection strings (with potential passwords) will be unencrypted +*.pubxml +*.publishproj + +# Microsoft Azure Web App publish settings. Comment the next line if you want to +# checkin your Azure Web App publish settings, but sensitive information contained +# in these scripts will be unencrypted +PublishScripts/ + +# NuGet Packages +*.nupkg +# NuGet Symbol Packages +*.snupkg +# The packages folder can be ignored because of Package Restore +**/[Pp]ackages/* +# except build/, which is used as an MSBuild target. +!**/[Pp]ackages/build/ +# Uncomment if necessary however generally it will be regenerated when needed +#!**/[Pp]ackages/repositories.config +# NuGet v3's project.json files produces more ignorable files +*.nuget.props +*.nuget.targets + +# Microsoft Azure Build Output +csx/ +*.build.csdef + +# Microsoft Azure Emulator +ecf/ +rcf/ + +# Windows Store app package directories and files +AppPackages/ +BundleArtifacts/ +Package.StoreAssociation.xml +_pkginfo.txt +*.appx +*.appxbundle +*.appxupload + +# Visual Studio cache files +# files ending in .cache can be ignored +*.[Cc]ache +# but keep track of directories ending in .cache +!?*.[Cc]ache/ + +# Others +ClientBin/ +~$* +*~ +*.dbmdl +*.dbproj.schemaview +*.jfm +*.pfx +*.publishsettings +orleans.codegen.cs + +# Including strong name files can present a security risk +# (https://github.com/github/gitignore/pull/2483#issue-259490424) +#*.snk + +# Since there are multiple workflows, uncomment next line to ignore bower_components +# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) +#bower_components/ + +# RIA/Silverlight projects +Generated_Code/ + +# Backup & report files from converting an old project file +# to a newer Visual Studio version. Backup files are not needed, +# because we have git ;-) +_UpgradeReport_Files/ +Backup*/ +UpgradeLog*.XML +UpgradeLog*.htm +ServiceFabricBackup/ +*.rptproj.bak + +# SQL Server files +*.mdf +*.ldf +*.ndf + +# Business Intelligence projects +*.rdl.data +*.bim.layout +*.bim_*.settings +*.rptproj.rsuser +*- [Bb]ackup.rdl +*- [Bb]ackup ([0-9]).rdl +*- [Bb]ackup ([0-9][0-9]).rdl + +# Microsoft Fakes +FakesAssemblies/ + +# GhostDoc plugin setting file +*.GhostDoc.xml + +# Node.js Tools for Visual Studio +.ntvs_analysis.dat +node_modules/ + +# Visual Studio 6 build log +*.plg + +# Visual Studio 6 workspace options file +*.opt + +# Visual Studio 6 auto-generated workspace file (contains which files were open etc.) +*.vbw + +# Visual Studio LightSwitch build output +**/*.HTMLClient/GeneratedArtifacts +**/*.DesktopClient/GeneratedArtifacts +**/*.DesktopClient/ModelManifest.xml +**/*.Server/GeneratedArtifacts +**/*.Server/ModelManifest.xml +_Pvt_Extensions + +# Paket dependency manager +.paket/paket.exe +paket-files/ + +# FAKE - F# Make +.fake/ + +# CodeRush personal settings +.cr/personal + +# Python Tools for Visual Studio (PTVS) +__pycache__/ +*.pyc + +# Cake - Uncomment if you are using it +# tools/** +# !tools/packages.config + +# Tabs Studio +*.tss + +# Telerik's JustMock configuration file +*.jmconfig + +# BizTalk build output +*.btp.cs +*.btm.cs +*.odx.cs +*.xsd.cs + +# OpenCover UI analysis results +OpenCover/ + +# Azure Stream Analytics local run output +ASALocalRun/ + +# MSBuild Binary and Structured Log +*.binlog + +# NVidia Nsight GPU debugger configuration file +*.nvuser + +# MFractors (Xamarin productivity tool) working folder +.mfractor/ + +# Local History for Visual Studio +.localhistory/ + +# BeatPulse healthcheck temp database +healthchecksdb + +# Backup folder for Package Reference Convert tool in Visual Studio 2017 +MigrationBackup/ + +# Ionide (cross platform F# VS Code tools) working folder +.ionide/ diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..61b7f8c --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Arda Acar + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..8d31c1a --- /dev/null +++ b/README.md @@ -0,0 +1,23 @@ +# Demo + +[![Demo](https://ardacarofficial-links-website.pages.dev/readme.png 'Demo')](https://ardacarofficial-links-website.pages.dev/) + + +# Install + +First, clone the file with the following command. Then apply the [component](https://github.com/ardacarofficial/links-website/wiki/Component-Settings "component") and [design](https://github.com/ardacarofficial/links-website/wiki/Design-Settings "design") settings. You can check the [wiki](https://github.com/ardacarofficial/links-website/wiki "wiki") for help. + +```sh +git clone https://github.com/ardacarofficial/links-website.git +``` + +You can then upload your files to any hosting. + +# Note + +Contributions are what make the open source community a great place to learn, inspire and create. Your contributions are greatly appreciated. + +If you have a suggestion to make this better, please fork the repository and create a pull request. You can also open an issue with the "Development" tag. If you want, you can also share it in the [discussions](https://github.com/ardacarofficial/links-website/discussions/ "discussions") section. Don't forget to give stars to the project! + +# License +Distributed under the MIT license. See [LICENSE](https://github.com/ardacarofficial/links-website/blob/main/LICENSE "LICENSE") file for more information. diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..cd5b72b --- /dev/null +++ b/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/css/style.css b/css/style.css new file mode 100644 index 0000000..ba97bfd --- /dev/null +++ b/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/img/logo.png b/img/logo.png new file mode 100644 index 0000000..0813d3b Binary files /dev/null and b/img/logo.png differ diff --git a/img/wallpaper.jpg b/img/wallpaper.jpg new file mode 100644 index 0000000..a97ab01 Binary files /dev/null and b/img/wallpaper.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..200150d --- /dev/null +++ b/index.html @@ -0,0 +1,199 @@ + + + + + + + + + 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/js/main.js b/js/main.js new file mode 100644 index 0000000..2edb346 --- /dev/null +++ b/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' + }) +}) diff --git a/readme.png b/readme.png new file mode 100644 index 0000000..a748a8f Binary files /dev/null and b/readme.png differ