createCo rebuilt using Tailwind CSS
It should:
- Card flip
- Loader
- Built with tailwind CSS
code_createCo.mp4
- Solution URL: [https://github.com/f-lajoc/createCo-rebuilt]
- Live Site URL: [https://createco-rebuilt.netlify.app/]
- Tailwind CSS
- In terminal
npm init -y
- In terminal
npm install -D tailwindcss
- In terminal
npx tailwindcss init
- In tailwind.config.js file, paste this in
content["./**/*.{html,js}"]
- Create CSS file and paste the following inside
@tailwind base;
@tailwind components;
@tailwind utilities;
- Go to package.json file, in scripts, clear and input this
"build": "tailwindcss -i ./css/style.css -o ./dist/main.css",
"watch": "tailwindcss -i ./css/style.css -o ./dist/main.css --watch"
- In terminal
npm run build
- Add to html
<link href="/dist/main.css" rel="stylesheet">
- Testrun by adding a style and preview
If style is not reflecting
go to package.json and click debug for both build and watch, one after the other
OR
npm run build
npm run watch
run the two one after the other
- [giphy.com] - i downoaded the space animated image here having (.gif extension), then add it as background image in my CSS
- [1001font.com] -i downloaded the font i wanted having (.ttf extension)
- Put at top of CSS
@font-face {
font-family: venusta;
src: url("../venusta.regular.ttf");
}
edit the above to your special font
background: linear-gradient(
to bottom,
var(--bg1) 0%,
var(--bg2) 90%,
var(--bg1) 90%,
var(--bg1) 100%);
**Bold**
---linebreak
1. ordered list item
`2 backtics for inline code` and ```6 backtics``` for block of codes
- I was build getting build error on both netlify and vercel, when i hosted it after including all json package file excluding node_modules.
- I was stuck for like a day and there was no solution still. I ended up using the tailwind cdn to host it
- I wanted to make the page have two colors taking 60%/40% of the page, but i decided to try out using animated image gotten from [giphy.com] and color
- i used a special font called venusta for the logo gotten from [1001font.com]
- Tailwind CSS
- Git Version Control
- [https://medium.com/@mignunez/html-css-how-to-split-a-background-into-2-colors-1cdc394deb3d]- split background color
- [giphy.com]- animated images
- [1001font.com]- special font
- [https://v2.tailwindcss.com/docs]- tailwind documentation
- [https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet]- markdown cheatsheet
- Twitter - @lajoc__
- Instagram - @lajoc_devs
- Codepen - @lajoc__
- Github - f-lajoc
- LinkedIn - bolaji funmilola