diff --git a/100. Wikipedia Clone/app.js b/100. Wikipedia Clone/app.js new file mode 100644 index 0000000..73b6662 --- /dev/null +++ b/100. Wikipedia Clone/app.js @@ -0,0 +1,82 @@ +const searchForm = document.getElementById("search-form"); +const searchInput = document.getElementById("search-input"); +const searchResults = document.getElementById("search-results"); + +// Theme toggler elements +const themeToggler = document.getElementById("theme-toggler"); +const body = document.body; + +async function searchWikipeida(query) { + const encodedQuery = encodeURIComponent(query); + const endpoint = `https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=10&srsearch=${encodedQuery}`; + + const reponse = await fetch(endpoint); + + if (!reponse.ok) { + throw new Error("Faild to fetch search results form wikipedia API."); + } + + const json = await reponse.json(); + return json; +} + +function displayResults(results) { + // Remove the loading spinner + searchResults.innerHTML = ""; + + results.forEach((result) => { + const url = `https://en.wikipedia.org/?curid=${results.pageid}`; + const titleLink = `${result.title} `; + const urlLink = `${url}`; + + const resultItme = document.createElement("div"); + resultItme.className = "result-item"; + resultItme.innerHTML = ` +

${titleLink}

+ ${urlLink} +

${result.snippet}

+ `; + + searchResults.appendChild(resultItme); + }); +} + +searchForm.addEventListener("submit", async (e) => { + e.preventDefault(); + + const query = searchInput.value.trim(); + + if (!query) { + searchResults.innerHTML = "

Please enter a valid search term.

"; + return; + } + + searchResults.innerHTML = "
Loading ...
"; + + try { + const results = await searchWikipeida(query); + + if (results.query.searchinfo.totalhits === 0) { + searchResults.innerHTML = "

No results found.

"; + } else { + displayResults(results.query.search); + } + } catch (error) { + console.error(error); + searchResults.innerHTML = `

An error occured while searching. Please try again later.

`; + } +}); + +// Event listener for the theme toggler +themeToggler.addEventListener("click", () => { + body.classList.toggle("dark-theme"); + if (body.classList.contains("dark-theme")) { + themeToggler.textContent = "Dark"; + themeToggler.style.background = "#fff"; + themeToggler.style.color = "#333"; + } else { + themeToggler.textContent = "Light"; + themeToggler.style.border = "2px solid #ccc"; + themeToggler.style.color = "#333"; + } +}); diff --git a/100. Wikipedia Clone/index.html b/100. Wikipedia Clone/index.html new file mode 100644 index 0000000..c65e204 --- /dev/null +++ b/100. Wikipedia Clone/index.html @@ -0,0 +1,25 @@ + + + + + Wiki Clone + + + +
+
+

Search Wikipedia

+ Light +
+ +
+ + +
+ +
+
+ + + + diff --git a/100. Wikipedia Clone/style.css b/100. Wikipedia Clone/style.css new file mode 100644 index 0000000..4b378d1 --- /dev/null +++ b/100. Wikipedia Clone/style.css @@ -0,0 +1,131 @@ +* { + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 2rem; +} + +h1 { + font-size: 3rem; + margin-bottom: 2rem; +} + +#search-form { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 2rem; +} + +#search-input { + font-size: 1.2rem; + padding: 0.5rem 1rem; + margin-right: 1rem; + border: 2px solid #ccc; + border-radius: 0.25rem; + flex-grow: 1; +} + +#search-input:focus { + outline: none; + border-color: #0074d9; +} + +button[type="submit"] { + font-size: 1.2rem; + padding: 0.5rem 1rem; + background-color: #0074d9; + color: #fff; + border: none; + border-radius: 0.25rem; + cursor: pointer; +} + +button[type="submit"]:hover { + background-color: #0063ad; +} + +#search-results { + margin-bottom: 2rem; +} + +.result-item { + margin-bottom: 1rem; +} + +.result-title { + font-size: 1.5rem; + margin-top: 0; +} + +.result-link { + display: block; + font-size: 1.2rem; + margin-bottom: 0.5rem; + color: #0074d9; +} + +.result-link:hover { + text-decoration: underline; +} + +.result-snippet { + margin-top: 0; +} + +.spinner { + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; + height: 10rem; +} + +/* Dark theme */ +.header-container { + display: flex; + justify-content: space-between; + align-items: center; +} + +#theme-toggler { + border: none; + background: transparent; + cursor: pointer; + background: #e2e2e2; + padding: 10px 20px; + border-radius: 100px; +} + +.dark-theme { + background-color: #282c34; + color: #fff; +} + +.dark-theme #search-input { + background-color: #454545; + color: #fff; + border-color: #fff; +} + +.dark-theme #search-input:focus { + border-color: #0074d9; +} + +.dark-theme button[type="submit"] { + background-color: #0074d9; +} + +.dark-theme .result-link, +.dark-theme .result-link:hover { + color: #90caf9; +} diff --git a/084. BookList Project/app.js b/84. BookList Project/app.js similarity index 100% rename from 084. BookList Project/app.js rename to 84. BookList Project/app.js diff --git a/084. BookList Project/index.html b/84. BookList Project/index.html similarity index 100% rename from 084. BookList Project/index.html rename to 84. BookList Project/index.html diff --git a/084. BookList Project/style.css b/84. BookList Project/style.css similarity index 100% rename from 084. BookList Project/style.css rename to 84. BookList Project/style.css diff --git a/96. The Art/index.html b/96. The Art/index.html new file mode 100644 index 0000000..5aa4bcb --- /dev/null +++ b/96. The Art/index.html @@ -0,0 +1,154 @@ + + + + + + theArt + + + + + + + +
+

+ WHAT
+ IS CALLED ART? +

+

+ Art, also called (to distinguish it from other art forms) visual art, a + visual object or experience consciously + created through an expression of skill or imagination. +

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

7 TYPES OF ART

+

+ The seven different art forms are + + Painting, Sculpture, Literature, Architecture, Theater, Film, and + Music + + . However, back in the day, the seven different art forms were called + the Liberal Arts, consisting of Grammar, Logic, Rhetoric, Arithmetic, + Geometry, Astronomy, and Music. +

+ +
+
+

PAINTING

+ +
+
+

SCULPTURE

+ +
+
+

LITERATURE

+ +
+
+

ARCHITECTURE

+ +
+
+

CINEMA

+ +
+
+

MUSIC

+ +
+
+

THEATER

+ +
+
+
+ + + + diff --git a/96. The Art/style.css b/96. The Art/style.css new file mode 100644 index 0000000..950a5b0 --- /dev/null +++ b/96. The Art/style.css @@ -0,0 +1,186 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Fonts */ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap"); + +/* Basic */ +body { + background-color: #ebeae9; +} + +html { + font-family: "Open Sans", sans-serif; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + color: #fff; + padding: 20px; + margin-bottom: 5rem; +} + +nav ul { + margin-left: 5rem; + list-style: none; +} + +li a { + text-decoration: none; + color: #000; +} + +nav .burger { + margin-right: 5rem; + cursor: pointer; +} + +nav .burger span { + height: 4px; + border: 2px solid black; + margin: 4px; + background: #000; +} + +header { + margin: 6rem; +} + +.main-headings { + width: 50%; + font-size: 3rem; +} + +.primary-headings { + width: 50%; + margin-top: 3rem; + font-size: 1.5rem; + line-height: 30px; +} + +.bg-gray { + background: rgb(53, 53, 53); + color: #fff; + padding: 2px 10px; + font-weight: bold; +} +/* Header End */ + +/* Main Start */ +main { + margin: 0 4rem; + display: flex; + flex-wrap: wrap; + margin: 40px; +} + +main .img { + width: 50%; +} + +/* SECTION THREE START */ +.section-three { + margin-left: 5rem; +} + +.section-three .primary-headings { + margin-bottom: 10rem; +} + +.list { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.section-three .item h1 { + font-size: 2rem; + color: rgb(53, 53, 53); + margin-left: 1rem; +} + +.section-three img { + width: 400px; + height: 500px; + margin: 50px; +} +/* SECTION THREE END */ + +/* FOOTER START */ +footer { + background: var(--primary-color); + margin-top: 10rem; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + height: 100vh; + color: #fff; +} + +footer .logo-container h1 { + font-size: 4rem; + font-family: var(--main-font); + margin-bottom: 20px; +} + +footer .logo-container p { + max-width: 400px; + font-family: sans-serif; + line-height: 25px; +} + +footer .about-company { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +footer .about-company .container { + margin-right: 40px; + margin-top: 20px; +} + +.about-company .container h1 { + margin-bottom: 50px; +} + +.about-company .container p { + font-family: sans-serif; + margin-bottom: 20px; +} + +footer { + height: 100vh; + background: rgb(43, 43, 43); +} + +@media screen and (max-width: 740px) { + header .main-headings { + width: 100%; + } + header .primary-headings { + width: 100%; + font-size: 1.5rem; + } + + .section-three .main-headings { + width: 100%; + } + .section-three .primary-headings { + width: 100%; + font-size: 1.5rem; + } + + .section-three img { + margin: 0; + } +} diff --git a/97. Form Validation/index.html b/97. Form Validation/index.html new file mode 100644 index 0000000..8548e81 --- /dev/null +++ b/97. Form Validation/index.html @@ -0,0 +1,69 @@ + + + + + + + + Form Validator + + + +
+
+
+ +

error message

+
+ +
+ + +
+
+ +

error message

+
+
+ +

error message

+
+ +

Already have an account? Login

+
+ +
+ +

+ Shoe
+ Palace +

+
+
+ + + + + diff --git a/97. Form Validation/script.js b/97. Form Validation/script.js new file mode 100644 index 0000000..6b951d4 --- /dev/null +++ b/97. Form Validation/script.js @@ -0,0 +1,52 @@ +const username = document.querySelector(".username"); +const email = document.querySelector(".email"); +const password1 = document.querySelector(".password1"); +const password2 = document.querySelector(".password2"); +const submit = document.querySelector(".submit"); + +// MESSAGES +const usernameMessage = document.querySelector(".user-msg"); +const emailMessage = document.querySelector(".email-msg"); +const password1Message = document.querySelector(".password1-msg"); +const password2Message = document.querySelector(".password2-msg"); + +submit.addEventListener("click", (e) => { + e.preventDefault(); + + if (username === "" && email === "" && password1 === "" && password2 === "") { + alert("Please fill all input fields"); + } + + if (username.value === "") { + showMessage(usernameMessage, "Please Provide Your Name", "#FF0000"); + } else { + showMessage(usernameMessage, "Great Name", "#4BB543"); + } + + if (email.value === "") { + showMessage(emailMessage, "Please Provide Your Email", "#FF0000"); + } else { + showMessage(emailMessage, "Got your email", "#4BB543"); + } + + if (password1.value === "") { + showMessage(password1Message, "Please Provide Your Password", "#FF0000"); + } else { + showMessage(password1Message, "Valid password", "#4BB543"); + } + + if (password2.value === "") { + showMessage(password2Message, "Confirm Your Password", "#FF0000"); + } else if (password1.value !== password2.value) { + showMessage(password2Message, "Passwords do not match", "#FF0000"); + } else { + showMessage(password2Message, "Valid password", "#4BB543"); + } +}); + +function showMessage(element, msg, color) { + element.style.visibility = "visible"; + element.textContent = msg; + element.style.color = color; + element.previousElementSibling.style.border = `2px solid ${color}`; +} diff --git a/97. Form Validation/style.css b/97. Form Validation/style.css new file mode 100644 index 0000000..ea2a065 --- /dev/null +++ b/97. Form Validation/style.css @@ -0,0 +1,87 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +:root { + --main-color: #161a1d; + --primary-color: #7289da; + --gray-color: #4f4f4f; +} + +body { + background-color: var(--main-color); +} + +/* Form */ +form { + border: 2px solid rgba(255, 255, 255, 0.224); + border-radius: 5px; + width: 30%; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + opacity: 1.2; + margin-left: 60px; + margin-top: 50px; +} + +form input { + padding: 6px; + width: 230px; + outline: none; +} + +input[type="submit"] { + width: 230px; + background: var(--primary-color); + border: none; + padding: 10px 20px; + cursor: pointer; +} + +.already { + margin-top: 20px; +} + +form p { + font-family: sans-serif; + font-size: 14px; + color: #fff; +} + +.input-container p.msg { + visibility: hidden; + margin-bottom: 10px; + margin-top: 5px; +} + +.input-container.error p.msg { + visibility: visible; +} + +img { + width: 51%; + position: absolute; + top: 60px; + right: 10%; +} + +.content h1 { + position: absolute; + top: 45%; + right: 38%; + font-size: 5rem; + color: #fff; +} + +.input-container.error input { + border-color: red; +} + +.input-container.success input { + border-color: rgb(97, 249, 97); +} diff --git a/98. Meal Finder/app.js b/98. Meal Finder/app.js new file mode 100644 index 0000000..75e04f2 --- /dev/null +++ b/98. Meal Finder/app.js @@ -0,0 +1,73 @@ +const searchMeal = async (e) => { + e.preventDefault(); + + // Select Elements + const input = document.querySelector(".input"); + const title = document.querySelector(".title"); + const info = document.querySelector(".info"); + const img = document.querySelector(".img"); + const ingredientsOutput = document.querySelector(".ingredients"); + + const showMealInfo = (meal) => { + const { strMeal, strMealThumb, strInstructions } = meal; + title.textContent = strMeal; + img.style.backgroundImage = `url(${strMealThumb})`; + info.textContent = strInstructions; + + const ingredients = []; + + for (let i = 1; i <= 20; i++) { + if (meal[`strIngredient${i}`]) { + ingredients.push( + `${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}` + ); + } else { + break; + } + } + + const html = ` + ${ingredients + .map((ing) => `
  • ${ing}
  • `) + .join("")}
    + `; + + ingredientsOutput.innerHTML = html; + }; + + const showAlert = () => { + alert("Meal not found :("); + }; + + // Fetch Data + const fetchMealData = async (val) => { + const res = await fetch( + `https://www.themealdb.com/api/json/v1/1/search.php?s=${val}` + ); + + const { meals } = await res.json(); + return meals; + }; + + // Get the user value + const val = input.value.trim(); + + if (val) { + const meals = await fetchMealData(val); + + if (!meals) { + showAlert(); + return; + } + + meals.forEach(showMealInfo); + } else { + alert("Please try searching for meal :)"); + } +}; + +const form = document.querySelector("form"); +form.addEventListener("submit", searchMeal); + +const magnifier = document.querySelector(".magnifier"); +magnifier.addEventListener("click", searchMeal); diff --git a/98. Meal Finder/index.html b/98. Meal Finder/index.html new file mode 100644 index 0000000..2511c6c --- /dev/null +++ b/98. Meal Finder/index.html @@ -0,0 +1,49 @@ + + + + + Meal Finder + + + + + + +
    +
    +
    + +
    +

    Food Name

    +

    + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde + nostrum consequatur, nulla explicabo vero nesciunt architecto + officiis eius ullam alias. +

    + +
    +
    +
    + +
    + + + + diff --git a/98. Meal Finder/style.css b/98. Meal Finder/style.css new file mode 100644 index 0000000..1b6f210 --- /dev/null +++ b/98. Meal Finder/style.css @@ -0,0 +1,121 @@ +* { + box-sizing: border-box; +} + +nav { + display: flex; + justify-content: space-around; + align-items: center; + margin: 20px; +} + +.input-container { + display: flex; + align-items: center; + border: 1px solid #ff6e00; + padding: 5px; + width: 300px; + height: 50px; + border-radius: 50px; + margin: 10px; + position: relative; + transition: width 1.5s; +} + +.input { + margin: 10px 50px; + margin-left: 20px; + width: 100%; + color: #ff6e00; + border: none; + background: transparent; + outline: none; + transition-delay: 0.5s; +} + +.magnifier { + position: absolute; + right: 15px; + width: 25px; + text-align: center; + margin: 0 auto; + cursor: pointer; + color: #ffa31a; +} + +ul li { + display: inline; + margin-left: 40px; + font-family: sans-serif; +} + +main { + display: flex; + justify-content: center; + align-items: center; +} + +.container { + width: 60%; + padding: 3rem; + box-shadow: 10px 10px 40px 5px #e0e0e0; + margin-top: 5rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.content-container h1 { + font-family: sans-serif; + font-size: 2rem; + color: #2c2c2c; +} + +.content-container p { + font-family: sans-serif; + line-height: 1.4; + margin-bottom: 2rem; + color: #444444; + width: 26rem; +} + +.img { + transform: translateX(-120px); + margin-top: 1rem; + width: 350px; + height: 350px; + border-radius: 300px; + background: url("https://images.unsplash.com/photo-1600289031464-74d374b64991?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1075&q=80"); + background-repeat: no-repeat; + background-position: center; + background-size: conver; +} + +.ingredients { + width: 80%; + margin: 0 auto; + margin-top: 5rem; + padding: 50px; +} + +.ingredients span { + display: flex; + flex-wrap: wrap; + list-style: none; +} + +.ing { + padding: 10px 20px; + border: 2px solid #ff6e00; + color: #ff6e00; + font-family: sans-serif; + border-radius: 100px; +} + +.main-btn { + background: transparent; + border: none; + border: 2px solid #ffa31a; + padding: 10px; + color: #ffa31a; +} diff --git a/99. Github Profile Clone/app.js b/99. Github Profile Clone/app.js new file mode 100644 index 0000000..1ff7976 --- /dev/null +++ b/99. Github Profile Clone/app.js @@ -0,0 +1,131 @@ +const form = document.querySelector("form"); +const input = document.querySelector("input"); +const reposContainer = document.querySelector(".repos"); +const mainContainer = document.querySelector(".main-container"); + +const API = "https://api.github.com/users/"; + +async function fetchData(username) { + try { + const response = await fetch(`${API}${username}`); + if (!response.ok) throw new Error(response.statusText); + + const { + avatar_url, + bio, + blog, + company, + followers, + following, + location, + login, + twitter_username, + } = await response.json(); + + const html = ` +
    +

    ${login}

    + +

    ${bio}

    +
    + + + ${followers} follower + + + + ${following} following + + +
    + + ${company} +
    +
    + + ${location} +
    +
    + + ${blog} +
    +
    + + +
    +
    + `; + + const section = document.createElement("section"); + section.classList.add("about-user"); + section.innerHTML = html; + mainContainer.insertAdjacentElement("afterbegin", section); + } catch (error) { + console.error(error); + } +} + +async function fetchRepos(username) { + try { + const response = await fetch(`${API}${username}/subscriptions`); + if (!response.ok) throw new Error(response.statusText); + const data = await response.json(); + + data.forEach( + ({ + name, + description, + forks_count, + language, + watchers_count, + git_url, + }) => { + const modifiedUrl = git_url + .replace(/^git:/, "http:") + .replace(/\.git$/, ""); + + const singleElement = document.createElement("div"); + singleElement.classList.add("repo-card"); + const html = ` + ${name} +

    ${description}

    +
    +

    ${language}

    +

    ${watchers_count}

    + Fork SVG + ${forks_count} +
    + +

    Public

    + `; + singleElement.innerHTML = html; + reposContainer.append(singleElement); + } + ); + } catch (error) { + console.error(error); + } +} + +form.addEventListener("submit", async (e) => { + e.preventDefault(); + const val = input.value; + + if (val) { + try { + await fetchData(val); + await fetchRepos(val); + } catch (error) { + console.log(error); + } finally { + input.value = ""; + } + } + + document + .querySelector("input") + .addEventListener("click", () => location.reload()); +}); diff --git a/99. Github Profile Clone/git-fork_1.svg b/99. Github Profile Clone/git-fork_1.svg new file mode 100644 index 0000000..5caf333 --- /dev/null +++ b/99. Github Profile Clone/git-fork_1.svg @@ -0,0 +1,39 @@ + + + + + + + + + \ No newline at end of file diff --git a/99. Github Profile Clone/index.html b/99. Github Profile Clone/index.html new file mode 100644 index 0000000..d313fbd --- /dev/null +++ b/99. Github Profile Clone/index.html @@ -0,0 +1,289 @@ + + + + + Github Profile Clone + + + + + + +
    + +
    + +
    +
    +

    Popular Repositories

    +
    + +
    +
    +
    + + + + diff --git a/99. Github Profile Clone/style.css b/99. Github Profile Clone/style.css new file mode 100644 index 0000000..2c628ed --- /dev/null +++ b/99. Github Profile Clone/style.css @@ -0,0 +1,260 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +a { + text-decoration: none; +} + +:root { + --primary-color: #161b22; + --secondary-color: #0d1117; +} + +body { + background: var(--secondary-color); + font-family: Hubot-Sans, sans-serif; + font-weight: normal; +} + +/* ************************** Navigation ************************** */ +nav { + background: var(--primary-color); + padding: 15px; + display: flex; + justify-content: center; + align-items: center; +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +nav ul li { + display: inline; + margin: 10px; +} + +ul li a { + text-decoration: none; + color: #fff; + font-size: 14px; +} + +nav form { + width: 20%; +} + +nav form input { + background: var(--secondary-color); + padding: 7px; + border: none; + border-radius: 5px; + width: 100%; + border: 1px solid #4a515d; + color: #fff; +} + +nav form input::placeholder { + color: #fff; +} + +/* ************************** Header ************************** */ +header { + border-bottom: 0.6px solid #242424; +} + +.active { + border-bottom: 2px solid rgb(255, 102, 0); + padding-bottom: 20px; +} + +header ul { + display: flex; + justify-content: center; + align-items: center; +} + +header ul li { + list-style: none; + margin: 20px; +} + +.btns-container { + display: flex; + justify-content: center; + align-items: center; + width: 210px; + margin-left: 20px; +} + +.btns-container a { + color: #fff; +} + +.btns-container button { + background: transparent; + border: none; + margin-left: 20px; + border: 1px solid #585d63; + padding: 6px 20px; + color: #fff; + border-radius: 5px; + cursor: pointer; +} + +.main-container { + display: flex; +} + +/* ************************** Header ************************** */ +.about-user { + width: 30%; + margin-left: 30px; + color: #fff; +} + +.about-user .user-avatar { + background-image: url("https://avatars.githubusercontent.com/u/85052811?v=4"); + background-repeat: no-repeat; + background-size: cover; + width: 300px; + height: 300px; + transform: translateY(-20px); + border-radius: 100%; +} + +.user-name { + color: #585d63; + font-size: 20px; + margin: 10px 0; + font-weight: normal; +} + +button.follow { + width: 70%; + background: #21262d; + color: #fff; + cursor: pointer; + border: none; + border-radius: 4px; + padding: 6px 5px; + margin-bottom: 20px; +} + +.followers-info { + margin: 15px 0; +} + +.followers-info a { + text-decoration: none; + color: #fff; +} + +.followers-info span { + color: #545c66; +} + +.company, +.location, +.blog, +.twitter_username { + margin: 10px 0; + color: #dce9f7; + font-size: 13px; +} + +/* ************************** REPOSITORIES ************************** */ +main { + color: #fff; + margin-top: 20px; + margin-left: 1rem; +} + +main p { + margin-bottom: 20px; +} + +.repo-card { + border: 1px solid #4a515d; + border-radius: 5px; + width: 43%; + padding: 10px; + margin: 10px; + position: relative; + padding-top: 1.3rem; +} + +.repo-title { + text-decoration: non; + color: #549ef3; + font-weight: 500; + margin-top: 3rem; + font-size: 13px; +} + +.repo-subtitle { + font-size: 11px; + margin-top: 15px; + color: #868686; +} + +.popularity { + display: flex; + color: #585c5e; +} + +.stars { + margin-right: 20px; + color: #585c5e; +} + +.repos { + display: flex; + flex-wrap: wrap; +} + +.pill { + border: 1px solid #4a515d; + color: #a3acbc; + width: 50px; + padding: 3px 10px; + border-radius: 100px; + font-size: 10px; + text-align: center; + position: absolute; + top: 10px; + right: 10px; +} + +/* ************************** STYLING ICONS ************************** */ +.icon-container { + margin: 5px 0; +} + +i { + color: #4a515d; + margin-right: 5px; +} + +.fa-github { + font-size: 2rem; + color: #fff; + margin-right: 1rem; +} + +section.fork { + display: flex; + align-items: center; +} + +.fork-svg { + width: 14px; + margin-bottom: 20px; + margin-right: 6px; +} diff --git a/README.md b/README.md index 55922fc..ec08191 100644 --- a/README.md +++ b/README.md @@ -1 +1,5 @@ -# HTML-CSS-JavaScript-100-Projects +# HTML, CSS & JAVASCRIPT 100+ PROJECTS 👇 + +# [Watch me build 100 Projects](https://www.youtube.com/playlist?list=PLSDeUiTMfxW7lm7P7GZ8qtNFffHAR5d_w) 🤘🥂. + +![Course Thumbnail](/thumb.png) diff --git a/thumb.png b/thumb.png new file mode 100644 index 0000000..d9d79d9 Binary files /dev/null and b/thumb.png differ