├── .gitattributes
├── Profile image style
├── images
│ └── OUSSEMA.jpeg
├── index.html
└── style.css
├── README.md
├── LICENSE
└── CODE_OF_CONDUCT.md
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/Profile image style/images/OUSSEMA.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oussemamansouri/My-CSS-Style-Collection/HEAD/Profile image style/images/OUSSEMA.jpeg
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🎨 My CSS Style Collection
2 |
3 | Welcome to my **CSS Style Collection** – a curated set of custom **CSS styles** that I've created to enhance and beautify web elements.
4 |
5 | This collection includes a variety of styles for:
6 |
7 | - Buttons
8 | - Layouts
9 | - Text effects
10 | - Animations
11 | - And much more!
12 |
13 | Each style is crafted with attention to detail, aiming to provide reusable and visually appealing components for modern web development.
14 |
15 | Feel free to explore, customize, and integrate them into your own projects!
16 |
--------------------------------------------------------------------------------
/Profile image style/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | profile style image
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
Oussama Mansouri
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 Mansouri Oussema
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/Profile image style/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body{
8 | background-color: #0070cb;
9 | height: 100vh;
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 |
16 | /* profile image style start here */
17 |
18 | .profile-container{
19 | position: relative;
20 | width: 300px;
21 | overflow: hidden;
22 | border-radius: 5%;
23 | border: 7px solid #ffffff;
24 | }
25 |
26 | .image{
27 | display: block;
28 | width: 100%;
29 | height: auto;
30 | transition: .5s ease;
31 | }
32 |
33 | .overlayer{
34 | position: absolute;
35 | bottom: 0;
36 | left: 0;
37 | right: 0;
38 | overflow: hidden;
39 | width: 100%;
40 | height: 0;
41 | transition: .5s ease;
42 | background-image: linear-gradient(to top,#008CBA,#008CBA00);
43 | }
44 |
45 | .profile-container:hover .overlayer{
46 | height: 100%;
47 | }
48 |
49 | .profile-container:hover .image{
50 | transform: scale(1.2,1.2);
51 | }
52 |
53 | .text{
54 | font-family: "Brush Script MT";
55 | font-size: 30px;
56 | white-space: nowrap;
57 | color: white;
58 | position: absolute;
59 | top:50%;
60 | left: 50%;
61 | transform: translate(-50%,-50%);
62 | }
63 |
64 | /* profile image style end here */
65 |
66 |
67 | /* star style start here */
68 |
69 | .container{
70 | display: flex;
71 | justify-content: center;
72 | align-items: center;
73 | }
74 |
75 | [class*="star"] {
76 | z-index: -1;
77 | position: absolute;
78 | margin: 1em auto;
79 | width: 1em;
80 | font-size: 1em;
81 | transition: .5s;
82 | }
83 |
84 | [class*="star"]::before {
85 | content: "";
86 | position: absolute;
87 | background: rgb(255, 255, 255);
88 | width: 1em;
89 | height: 1.15em;
90 | transform: rotate(-45deg) skewX(22.5deg) skewY(22.5deg);
91 | }
92 |
93 | [class*="star"]::after {
94 | content: "";
95 | position: absolute;
96 | background: rgb(255, 255, 255);
97 | width: 1em;
98 | height: 1.15em;
99 | transform: rotate(45deg) skewX(22.5deg) skewY(22.5deg);
100 | }
101 |
102 | .container:hover .star1 {
103 | transform: translate(60px,-180px);
104 | }
105 | .container:hover .star2 {
106 | transform: translate(-60px,-180px);
107 | }
108 | .container:hover .star3 {
109 | transform: translate(0px,-210px);
110 | }
111 |
112 |
113 | /* star style start here */
114 |
115 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | Email.
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
19 |
22 |