This project is for html & css practice. We made this for youtube tutorial purpose.
License: MIT License
Here are some ideas to get you started:
🌐 Website: https://shaifarfan.com
🏦 CifarX : FB - IG - TW - WEBSITE
Hi, The use of color code should be emphasize
the items inside the services section are not appropriately centered.
While going through the website I discovered that the the twitter logo image file located at the footer along with the animation was corrupted so I replaced the file in the source of the image.
The project is currently missing the Code of Conduct which defines standards for how to engage in a community. If you want to add that, then I would like to add a PR with that. Please let me know what do you think about that.
Thank you.
FOR HTML
<title>FLOURISH_SKILLS</title>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum deleniti maiores pariatur assumenda quas
magni et, doloribus quod voluptate quasi molestiae magnam officiis dolorum, dolor provident atque molestias
voluptatum explicabo!</p>
</div>
<div class="service-bottom">
<div class="service-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/code-file.png"/>" /></div>
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
architecto placeat beatae tenetur officia quod</p>
</div>
<div class="service-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/commercial.png" /></div>
<h2>Digital Marketing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
architecto placeat beatae tenetur officia quod</p>
</div>
<div class="service-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/50/000000/omnichannel.png" /></div>
<h2>Affiliate Marketing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
architecto placeat beatae tenetur officia quod</p>
</div>
<div class="service-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/hand-with-pen.png"/></div>
<h2>Content Marketing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
architecto placeat beatae tenetur officia quod</p>
</div>
</div>
</div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt harum? Ipsum repellat animi, fugit architecto voluptatum odit et!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt harum? Ipsum repellat animi, fugit architecto voluptatum odit et!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt harum? Ipsum repellat animi, fugit architecto voluptatum odit et!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt harum? Ipsum repellat animi, fugit architecto voluptatum odit et!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt harum? Ipsum repellat animi, fugit architecto voluptatum odit et!
Hi, My name is Flourish, an expert.
I have worked on several project and I'm here to provide you with the best professional service pertaining to digital marketing,Web design, content writing and Affiliate Marketing
FOR CSS
@import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap';
.cta {
display: inline-block;
padding: 10px 30px;
color: white;
background-color: transparent;
border: 2px solid crimson;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
margin-top: 30px;
transition: 0.3s ease;
transition-property: background-color, color;
}
.cta:hover {
color: white;
background-color: crimson;
}
.brand h1 {
font-size: 3rem;
text-transform: uppercase;
color: white;
}
.brand h1 span {
color: crimson;
}
/* Header section /
#header {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: auto;
}
#header .header {
min-height: 8vh;
background-color: rgba(31, 30, 30, 0.24);
transition: 0.3s ease background-color;
}
#header .nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
max-width: 1300px;
padding: 0 10px;
}
#header .nav-list ul {
list-style: none;
position: absolute;
background-color: rgb(31, 30, 30);
width: 100vw;
height: 100vh;
left: 100%;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
overflow-x: hidden;
transition: 0.5s ease left;
}
#header .nav-list ul.active {
left: 0%;
}
#header .nav-list ul a {
font-size: 2.5rem;
font-weight: 500;
letter-spacing: 0.2rem;
text-decoration: none;
color: white;
text-transform: uppercase;
padding: 20px;
display: block;
}
#header .nav-list ul a::after {
content: attr(data-after);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
color: rgba(240, 248, 255, 0.021);
font-size: 13rem;
letter-spacing: 50px;
z-index: -1;
transition: 0.3s ease letter-spacing;
}
#header .nav-list ul li:hover a::after {
transform: translate(-50%, -50%) scale(1);
letter-spacing: initial;
}
#header .nav-list ul li:hover a {
color: crimson;
}
#header .hamburger {
height: 60px;
width: 60px;
display: inline-block;
border: 3px solid white;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
cursor: pointer;
transform: scale(0.8);
margin-right: 20px;
}
#header .hamburger:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
border-radius: 50%;
border: 3px solid white;
animation: hamburger_puls 1s ease infinite;
}
#header .hamburger .bar {
height: 2px;
width: 30px;
position: relative;
background-color: white;
z-index: -1;
}
#header .hamburger .bar::after,
#header .hamburger .bar::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
background-color: white;
transition: 0.3s ease;
transition-property: top, bottom;
}
#header .hamburger .bar::after {
top: 8px;
}
#header .hamburger .bar::before {
bottom: 8px;
}
#header .hamburger.active .bar::before {
bottom: 0;
}
#header .hamburger.active .bar::after {
top: 0;
}
/ End Header section */
/* Hero Section */
#hero {
background-image: url(./img/hero-bg.png);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
#hero::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.7;
z-index: -1;
}
#hero .hero {
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 4rem;
position: relative;
color: transparent;
animation: text_reveal 0.5s ease forwards;
animation-delay: 1s;
}
#hero h1:nth-child(1) {
animation-delay: 1s;
}
#hero h1:nth-child(2) {
animation-delay: 2s;
}
#hero h1:nth-child(3) {
animation: text_reveal_name 0.5s ease forwards;
animation-delay: 3s;
}
#hero h1 span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: 0.5s;
}
#hero h1:nth-child(1) span {
animation-delay: 0.5s;
}
#hero h1:nth-child(2) span {
animation-delay: 1.5s;
}
#hero h1:nth-child(3) span {
animation-delay: 2.5s;
}
/* End Hero Section */
/* Services Section /
#services .services {
flex-direction: column;
text-align: center;
max-width: 1500px;
margin: 0 auto;
padding: 100px 0;
}
#services .service-top {
max-width: 500px;
margin: 0 auto;
}
#services .service-bottom {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px;
}
#services .service-item {
flex-basis: 80%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 10px;
background-image: url(./img/img-1.png);
background-size: cover;
margin: 10px 5%;
position: relative;
z-index: 1;
overflow: hidden;
}
#services .service-item::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
opacity: 0.9;
z-index: -1;
}
#services .service-bottom .icon {
height: 80px;
width: 80px;
margin-bottom: 20px;
}
#services .service-item h2 {
font-size: 2rem;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
}
#services .service-item p {
color: white;
text-align: left;
}
/ End Services Section */
/* Projects section /
#projects .projects {
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
padding: 100px 0;
}
#projects .projects-header h1 {
margin-bottom: 50px;
}
#projects .all-projects {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#projects .project-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 80%;
margin: 20px auto;
overflow: hidden;
border-radius: 10px;
}
#projects .project-info {
padding: 30px;
flex-basis: 50%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
color: white;
}
#projects .project-info h1 {
font-size: 4rem;
font-weight: 500;
}
#projects .project-info h2 {
font-size: 1.8rem;
font-weight: 500;
margin-top: 10px;
}
#projects .project-info p {
color: white;
}
#projects .project-img {
flex-basis: 50%;
height: 300px;
overflow: hidden;
position: relative;
}
#projects .project-img:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
opacity: 0.7;
}
#projects .project-img img {
transition: 0.3s ease transform;
}
#projects .project-item:hover .project-img img {
transform: scale(1.1);
}
/ End Projects section */
/* About Section /
#about .about {
flex-direction: column-reverse;
text-align: center;
max-width: 1200px;
margin: 0 auto;
padding: 100px 20px;
}
#about .col-left {
width: 250px;
height: 360px;
}
#about .col-right {
width: 100%;
}
#about .col-right h2 {
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.2rem;
margin-bottom: 10px;
}
#about .col-right p {
margin-bottom: 20px;
}
#about .col-right .cta {
color: black;
margin-bottom: 50px;
padding: 10px 20px;
font-size: 2rem;
}
#about .col-left .about-img {
height: 100%;
width: 100%;
position: relative;
border: 10px solid white;
}
#about .col-left .about-img::after {
content: '';
position: absolute;
left: -33px;
top: 19px;
height: 98%;
width: 98%;
border: 7px solid crimson;
z-index: -1;
}
/ End About Section */
/* contact Section /
#contact .contact {
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
width: 90%;
}
#contact .contact-items {
/ max-width: 400px; */
width: 100%;
}
#contact .contact-item {
width: 80%;
padding: 20px;
text-align: center;
border-radius: 10px;
padding: 30px;
margin: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0px 0px 18px 0 #0000002c;
transition: 0.3s ease box-shadow;
}
#contact .contact-item:hover {
box-shadow: 0px 0px 5px 0 #0000002c;
}
#contact .icon {
width: 70px;
margin: 0 auto;
margin-bottom: 10px;
}
#contact .contact-info h1 {
font-size: 2.5rem;
font-weight: 500;
margin-bottom: 5px;
}
#contact .contact-info h2 {
font-size: 1.3rem;
line-height: 2rem;
font-weight: 500;
}
/*End contact Section */
/* Footer /
#footer {
background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
}
#footer .footer {
min-height: 200px;
flex-direction: column;
padding-top: 50px;
padding-bottom: 10px;
}
#footer h2 {
color: white;
font-weight: 500;
font-size: 1.8rem;
letter-spacing: 0.1rem;
margin-top: 10px;
margin-bottom: 10px;
}
#footer .social-icon {
display: flex;
margin-bottom: 30px;
}
#footer .social-item {
height: 50px;
width: 50px;
margin: 0 5px;
}
#footer .social-item img {
filter: grayscale(1);
transition: 0.3s ease filter;
}
#footer .social-item:hover img {
filter: grayscale(0);
}
#footer p {
color: white;
font-size: 1.3rem;
}
/ End Footer */
/* Keyframes /
@Keyframes hamburger_puls {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.4);
}
}
@Keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
@Keyframes text_reveal {
100% {
color: white;
}
}
@Keyframes text_reveal_name {
100% {
color: crimson;
font-weight: 500;
}
}
/ End Keyframes */
/* Media Query For Tablet */
@media only screen and (min-width: 768px) {
.cta {
font-size: 2.5rem;
padding: 20px 60px;
}
h1.section-title {
font-size: 6rem;
}
/* Hero */
#hero h1 {
font-size: 7rem;
}
/* End Hero */
/* Services Section */
#services .service-bottom .service-item {
flex-basis: 45%;
margin: 2.5%;
}
/* End Services Section */
/* Project */
#projects .project-item {
flex-direction: row;
}
#projects .project-item:nth-child(even) {
flex-direction: row-reverse;
}
#projects .project-item {
height: 400px;
margin: 0;
width: 100%;
border-radius: 0;
}
#projects .all-projects .project-info {
height: 100%;
}
#projects .all-projects .project-img {
height: 100%;
}
/* End Project */
/* About */
#about .about {
flex-direction: row;
}
#about .col-left {
width: 600px;
height: 400px;
padding-left: 60px;
}
#about .about .col-left .about-img::after {
left: -45px;
top: 34px;
height: 98%;
width: 98%;
border: 10px solid crimson;
}
#about .col-right {
text-align: left;
padding: 30px;
}
#about .col-right h1 {
text-align: left;
}
/* End About */
/* contact */
#contact .contact {
flex-direction: column;
padding: 100px 0;
align-items: center;
justify-content: center;
min-width: 20vh;
}
#contact .contact-items {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin: 0;
}
#contact .contact-item {
width: 30%;
margin: 0;
flex-direction: row;
}
#contact .contact-item .icon {
height: 100px;
width: 100px;
}
#contact .contact-item .icon img {
object-fit: contain;
}
#contact .contact-item .contact-info {
width: 100%;
text-align: left;
padding-left: 20px;
}
/* End contact */
}
/* End Media Query For Tablet */
/* Media Query For Desktop /
@media only screen and (min-width: 1200px) {
/ header /
#header .hamburger {
display: none;
}
#header .nav-list ul {
position: initial;
display: block;
height: auto;
width: fit-content;
background-color: transparent;
}
#header .nav-list ul li {
display: inline-block;
}
#header .nav-list ul li a {
font-size: 1.8rem;
}
#header .nav-list ul a:after {
display: none;
}
/ End header */
#services .service-bottom .service-item {
flex-basis: 22%;
margin: 1.5%;
}
}
/* End Media Query For Desktop */
/* Media Query For Mobile */
.wrapper{
display: inline-flex;
}
.wrapper .icon{
margin: 0 20px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span{
display: block;
height: 60px;
width: 60px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i{
line-height: 60px;
font-size: 30px;
}
.wrapper .icon .tooltip{
position: absolute;
top: 0;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip{
top: -70px;
opacity: 1;
pointer-events: auto;
}
.icon .tooltip:before{
position: absolute;
content: "";
height: 15px;
width: 15px;
background: #fff;
left: 50%;
bottom: -6px;
transform: translateX(-50%) rotate(45deg);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover span{
color: #fff;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip{
text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before{
background: #3B5999;
}
.wrapper .twitter:hover span,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip:before{
background: #46C1F6;
}
.wrapper .instagram:hover span,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip:before{
background: #e1306c;
}
.wrapper .whatsapp:hover span,
.wrapper .whatsapp:hover .tooltip,
.wrapper .whatsapp:hover .tooltip:before{
background: #07e607;
}
.wrapper .gmail:hover span,
.wrapper .gmail:hover .tooltip,
.wrapper .gmail:hover .tooltip:before{
background: #DE463B;
}
planning 1
The project is currently missing the Issue Templates. If you want them, then I would like to add a PR including some relevant templates.
Thanks.
You are very awesome you really opened my eyes, I was about to give up on coding but today you make me realize nothing is impossible. Thanks professor 🙏🙏🤩
Hello arhan, first of all Thank you for teaching us how to make this insane website, And appriciate your work.
Actually i write every single line of code by watching your youtube video but at the end it's not looking at same as your website, so i came to your github page and copied all style.css code, all thing is working properly but i am getting scrollbar issue in my mobile.
MAIN ISSUE : Scrollbar showing in mobile.
Can you please ative in this repository github pages, Because I wont to see it without fok it or make a download
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.