HTML CSS Tutorials

Channel created

06:34

HTML CSS Tutorials

111 views06:36

HTML CSS Tutorials

HTML-1

116 views06:37

HTML CSS Tutorials

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins' , sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222327;
}
.navigation{
position: relative;
width: 400px;
height: 60px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.navigation ul{
display: flex;
width: 350px;
}
.navigation ul li{
list-style: none;
position: relative;
width: 70px;
height: 60px;
z-index: 2;
}
.navigation ul li a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
}
.navigation ul li a .icon{
position: relative;
display: block;
line-height: 65px;
font-size: 1.5em;
transition: 0.5s;
color: #222327;
}
.navigation ul li.active a .icon{
transform: translateY(-32px);
color: #2196f3;
}
.navigation ul li a .text{
position: absolute;
background: #2196f3;
color: #fff;
padding: 2px 7px;
border-radius: 12px;
font-weight: 400;
font-size: 0.75em;
letter-spacing: 0.05em;
transition: 0.5s;
opacity: 0;
transform: translateY(15px);
}
.navigation ul li.active a .text{
transform: translateY(-4px);
opacity: 1;
}
.indicator{
position: absolute;
top: -35px;
width: 70px;
height: 70px;
background: #fff;
border-radius: 50%;
z-index: 1;
transition: 0.5s;
}
.indicator::before{
content: '';
position: absolute;
top: 5px;
left: -28px;
width: 30px;
height: 30px;
background: transparent;
border-radius: 50%;
box-shadow: 15px 18px #fff;
}
.indicator::after{
content: '';
position: absolute;
top: 5px;
right: -28px;
width: 30px;
height: 30px;
background: transparent;
border-radius: 50%;
box-shadow: -15px 18px #fff;
}
.navigation ul li:nth-child(1).active ~ .indicator{
transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator{
transform: translateX(calc(70px * 1))
}
.navigation ul li:nth-child(3).active ~ .indicator{
transform: translateX(calc(70px * 2))
}
.navigation ul li:nth-child(4).active ~ .indicator{
transform: translateX(calc(70px * 3))
}
.navigation ul li:nth-child(5).active ~ .indicator{
transform: translateX(calc(70px * 4))
}

113 views06:38

HTML CSS Tutorials

CSS-1

121 views06:38

HTML CSS Tutorials

const list = document.querySelectorAll('.list');
function activeLink(){
list.forEach((item) =>
item.classList.remove('active'));
this.classList.add('active')
}
list.forEach((item) =>
item.addEventListener('click',activeLink))

122 views06:38

HTML CSS Tutorials

const list = document.querySelectorAll('.list'); function activeLink(){ list.forEach((item) => item.classList.remove('active')); this.classList.add('active') } list.forEach((item) => item.addEventListener('click',activeLink))

JS-1

124 views06:39

HTML CSS Tutorials

Lesson__1 "navigatorli navbar"

125 viewsedited 06:42

HTML CSS Tutorials

Lesson__1 "navigatorli navbar"

This media is not supported in your browser

VIEW IN TELEGRAM

128 views06:43

❤1

HTML CSS Tutorials

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yusuf Masharifov</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="home">
<nav>
<h2 class="logo">Portfo<span>lio</span></h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<a href="#" class="btn">Subcribe</a>
</nav>
<div class="content">
<h4>Hello, my name is</h4>
<h1>Yusuf <span>Masharifov</span></h1>
<h3>I am a Web Developer</h3>
<div class="newslatter">
<form>
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Lets start">
</form>
</div>
</div>
</div>
<section class="about">
<div class="main">
<img src="pictures/rasm3.jpg" alt="Kotta">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer <span>& Designer</span></h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, maiores tempora. Illo nisi porro, fugit amet nostrum ullam dolorem voluptatem deleniti quas non atque aspernatur expedita dolores ab. Consequatur numquam ipsam, unde tenetur, reprehenderit quia quis doloremque sed tempora voluptatem esse! Dolore vero sapiente incidunt ea totam eum dolorem nihil?</p>
<button type="button">Let's Talk</button>
</div>
</div>
</section>
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fa-solid fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In eveniet laudantium, fugiat aliquid accusantium amet obcaecati fuga illum exercitationem, dolore.</p>
<p style="text-align:center ;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>

<div class="card">
<i class="fa-solid fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In eveniet laudantium, fugiat aliquid accusantium amet obcaecati fuga illum exercitationem, dolore.</p>
<p style="text-align:center ;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>

143 views06:44

HTML CSS Tutorials

<div class="card">
<i class="fa-solid fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In eveniet laudantium, fugiat aliquid accusantium amet obcaecati fuga illum exercitationem, dolore.</p>
<p style="text-align:center ;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<div class="contact-me">
<p>Let Me Get You A Beautiful Website</p>
<a class="button-two" href="#">Hire Me</a>
</div>
<footer>
<p>Yusuf Masharifov</p>
<p>Lorem ipsum HTML dolor sit amet CSS consectetur adipisicing elit. Ut dicta perferendis porro obcaecati tempore officiis rem, nemo expedita corrupti laudantium a dolorem iure laboriosam sunt assumenda odit repellat labore maiores.</p>
<div class="social">
<a href="https://www.instagram.com/__1gord1y__"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.aka.com/Yusuf_Masharifov"><i class="fa-brands fa-telegram"></i></a>
<a href="https://youtube.com/channel/UCnSe8RDad96g5C8ya-6RDTA"><i class="fa-brands fa-youtube"></i></a>
</div>
<p class="end">CopyRight By Yusuf Masharifov</p>
</footer>

</body>
</html>

148 views06:44

HTML CSS Tutorials

<div class="card"> <i class="fa-solid fa-bell"></i> <h5>Web Development</h5> <div class="pra"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In eveniet laudantium, fugiat aliquid…

HTML-2

149 views06:44

HTML CSS Tutorials

*{
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
box-sizing: border-box;
}
.home{
height: 100vh;
width: 100%;
background-image: url(pictures/rasm3.jpg);
background-size: cover;
background-position: center;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo{
color: white;
font-style: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span{
color: red;
}
nav ul li{
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a{
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover{
color: red;
transition: .4s;
}
.btn{
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform .4s;
}
.btn:hover{
transform: scale(1.2);
}
.content{
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
h1{
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3{
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4{
color: #fcfc;
letter-spacing: 2px;
font-size: 20px;
}
.newslatter form{
width: 380px;
min-width: 100%;
position: relative;
}
.newslatter form input:first-child{
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid red;
outline: none;
border-radius: 30px;
}
.newslatter form input:last-child{
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: red;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
.about{
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img{
height: auto;
width: 430px;
}
.about-text{
width: 550px;
}
.main{
widows: 1130px;
min-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2{
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5{
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p{
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button{
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
button:hover{
background-color: transparent;
border: 2px solid red;
cursor: pointer;
}
.service{
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2{
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.box{
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.card{
height: 365px;
width: 335px;
padding: 20px 35px;
background: #191919;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i{
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: red;
}
h5{
color: white;
font-size: 23px;
margin-bottom: 15px;
}
.pra p{
color: #fcfc;
font-size: 16px;
line-height: 27px;
margin-bottom: 25px;
}
.card .button{
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 9px 22px;
border-radius: 30px;
transition: .4s;
}
.card .button:hover{
background-color: transparent;
border: 2px solid red;
cursor: pointer;
}
.contact-me{
width: 100%;

159 views06:44

HTML CSS Tutorials

height: 290px;
background: #191919;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact-me p{
color: white;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px;
}
.contact-me .button-two{
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
.contact-me .button-two:hover{
background-color: transparent;
border: 2px solid red;
cursor: pointer;
}
footer{
position: relative;
width: 100%;
height: 400px;
background: #101010;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer p:nth-child(1){
font-size: 30px;
color: white;
margin-bottom: 20px;
font-weight: bold;
}
footer p:nth-child(2){
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social{
display: flex;
}
.social a{
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 50%;
margin: 22px 10px;
color: white;
text-decoration: none;
font-size: 20px;
}
.social a:hover{
transform: scale(1.3);
transition: .3s;
}
.end{
position: absolute;
color: red;
bottom: 35px;
font-style: 14px;
}

❤1

198 views06:44

HTML CSS Tutorials

CSS-2

🗿1

239 views06:44

HTML CSS Tutorials

CSS-2

Lesson__2 "Portfolio site"

🗿1

239 views06:49

HTML CSS Tutorials