<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs
/font-awesome/6.1.2/css/all.min.css"
/>
<div class="hero">
<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">Subscribe</a>
</nav>
<div class="content">
<h4>Hello, my name is</h4>
<h1>Uzor <span>Victor</span></h1>
<h3>I'm a Web Developer.</h3>
<div class="newsletter">
<form>
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let's Start">
</form>
</div>
</div>
</div>
<!------About section start------>
<section class="about">
<div class="main">
<img src="jiren.jpg" alt="">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer <span>& Designer</span></h5>
<p>
Iam a frontend developer, I can provide clean code and pixel
perfect deign. Ialso make website more & more interactive with wed animations.
I can provide clean code and pixel perfect design. I also make the website
more & more interactive wih animations. A responsive design makes your website accessible
to all user, regardless of their device.
</p>
<button class="button">Let's Talk</button>
</div>
</section>
<!-----service section start----------->
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fas fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all
devices. Secondly, it needs to be fast as possible.
</p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fas fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all
devices. Secondly, it needs to be fast as possible.
</p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fas fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all
devices. Secondly, it needs to be fast as possible.
</p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
Let Me Get You A Beautiful Website
Hire MeUzor Victor
For more HTML, CSS and coding projects - please click on the link below to subscribe to my channel:
CopyRight By Uzor Victor
<title>Portfolio website</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs
/font-awesome/6.1.2/css/all.min.css"
/>
<div class="hero">
<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">Subscribe</a>
</nav>
<div class="content">
<h4>Hello, my name is</h4>
<h1>Uzor <span>Victor</span></h1>
<h3>I'm a Web Developer.</h3>
<div class="newsletter">
<form>
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let's Start">
</form>
</div>
</div>
</div>
<!------About section start------>
<section class="about">
<div class="main">
<img src="jiren.jpg" alt="">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer <span>& Designer</span></h5>
<p>
Iam a frontend developer, I can provide clean code and pixel
perfect deign. Ialso make website more & more interactive with wed animations.
I can provide clean code and pixel perfect design. I also make the website
more & more interactive wih animations. A responsive design makes your website accessible
to all user, regardless of their device.
</p>
<button class="button">Let's Talk</button>
</div>
</section>
<!-----service section start----------->
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fas fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all
devices. Secondly, it needs to be fast as possible.
</p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fas fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all
devices. Secondly, it needs to be fast as possible.
</p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fas fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all
devices. Secondly, it needs to be fast as possible.
</p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
Let Me Get You A Beautiful Website
Hire MeUzor Victor
For more HTML, CSS and coding projects - please click on the link below to subscribe to my channel:
CopyRight By Uzor Victor
- { padding: 0; margin: 0; font-family: 'Josefin Sans', sans-serif; box-sizing: border-box; }
.hero { height: 100vh; width: 100%; background-image: url(../goku.jpg); background-size: cover; background-position: left; background-color: black; }
nav { display: flex; align-items: center; justify-content: space-between; padding-top: 45px; padding-left: 8%; padding-right: 8%; }
.logo { color: white; font-size: 35px; letter-spacing: 1px; cursor: pointer; }
span { color: #f9004d; }
nav ul li { list-style-type: none; display: inline-block; padding: 10px 25px; }
nav ul li a { color: #f9004d; text-decoration: none; font-weight: bold; text-transform: capitalize; }
nav ul li a:hover { color: #f9004d; transition: .4s; }
.btn { background-color: #f9004d; 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 0 20px; font-size: 75px; }
h3 { color: white; font-size: 25px; margin-bottom: 50px; }
h4 { color: #fcfc; letter-spacing: 2px; font-size: 20px; }
.newsletter form { width: 380px; max-width: 100%; position: relative; }
.newsletter form input:first-child { display: inline-block; width: 100%; padding: 14px 130px 14px 15px; border: 2px solid #f9004d; outline: none; border-radius: 30px; }
.newsletter form input:last-child { position: absolute; display: inline-block; outline: none; border: none; padding: 10px 30px; border-radius: 30px; background-color: #f9004d; 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 { width: 1130px; max-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: #f9004d; 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 #f9004d; cursor: pointer; }
.service { background: #101010; width: 100%; padding: 100px 0; }
.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: #f9004d; }
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: #f9004d; 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 #f9004d; cursor: pointer; }
.contact-me { width: 100%; 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: #f9004d; 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 #f9004d; 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: 500x; text-align: center; line-height: 26px; }
.social { display: flex; }
.social a { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: #f9004d; 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: #f9004d; bottom: 35px; font-size: 14px; }* { padding: 0; margin: 0; font-family: 'Josefin Sans', sans-serif; box-sizing: border-box; }
.hero { height: 100vh; width: 100%; background-image: url(../goku.jpg); background-size: cover; background-position: left; background-color: black; }
nav { display: flex; align-items: center; justify-content: space-between; padding-top: 45px; padding-left: 8%; padding-right: 8%; }
.logo { color: white; font-size: 35px; letter-spacing: 1px; cursor: pointer; }
span { color: #f9004d; }
nav ul li { list-style-type: none; display: inline-block; padding: 10px 25px; }
nav ul li a { color: #f9004d; text-decoration: none; font-weight: bold; text-transform: capitalize; }
nav ul li a:hover { color: #f9004d; transition: .4s; }
.btn { background-color: #f9004d; 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 0 20px; font-size: 75px; }
h3 { color: white; font-size: 25px; margin-bottom: 50px; }
h4 { color: #fcfc; letter-spacing: 2px; font-size: 20px; }
.newsletter form { width: 380px; max-width: 100%; position: relative; }
.newsletter form input:first-child { display: inline-block; width: 100%; padding: 14px 130px 14px 15px; border: 2px solid #f9004d; outline: none; border-radius: 30px; }
.newsletter form input:last-child { position: absolute; display: inline-block; outline: none; border: none; padding: 10px 30px; border-radius: 30px; background-color: #f9004d; 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 { width: 1130px; max-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: #f9004d; 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 #f9004d; cursor: pointer; }
.service { background: #101010; width: 100%; padding: 100px 0; }
.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: #f9004d; }
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: #f9004d; 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 #f9004d; cursor: pointer; }
.contact-me { width: 100%; 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: #f9004d; 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 #f9004d; 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: 500x; text-align: center; line-height: 26px; }
.social { display: flex; }
.social a { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: #f9004d; 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: #f9004d; bottom: 35px; font-size: 14px; }