Scribd
Upload
62 views7 pages

Own Project

The document contains HTML and CSS code for a website navigation bar and landing page. The navigation bar includes links to Home, About, Services, Contact, and Feedback. The landing page features a background image, title "Web Design Profile", subtitle "Student Programmer", and buttons to "Learn More" and "Subscribe".

Uploaded by

MYKO DIONGSON
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
62 views7 pages

Own Project

The document contains HTML and CSS code for a website navigation bar and landing page. The navigation bar includes links to Home, About, Services, Contact, and Feedback. The landing page features a background image, title "Web Design Profile", subtitle "Student Programmer", and buttons to "Learn More" and "Subscribe".

Uploaded by

MYKO DIONGSON
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/5.15.2/css/all.min.css"/>

</head>

<body>

<nav>

<div class="menu">

<div class="logo">

<a href="#">Diongson | Myko </a>


</div>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Feedback</a></li>

</ul>

</div>

</nav>

<div class="img"></div>

<div class="center">

<div class="title">Web Design Profile </div>

<div class="sub_title">Student Programmer</div>

<div class="btns">

<button>Learn More</button>

<button>Subscribe</button>

</div>

</div>

</body>

</html>

CSS
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;70
0&display=swap');

*{

margin: 0;

padding: 0;

box-sizing: border-box;
font-family: 'Poppins',sans-serif;

::selection{

color: #000;

background: #fff;

nav{

position: fixed;

background: #1b1b1b;

width: 100%;

padding: 10px 0;

z-index: 12;

nav .menu{

max-width: 1250px;

margin: auto;

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

.menu .logo a{

text-decoration: none;

color: #fff;

font-size: 35px;

font-weight: 600;

.menu ul{

display: inline-flex;
}

.menu ul li{

list-style: none;

margin-left: 7px;

.menu ul li:first-child{

margin-left: 0px;

.menu ul li a{

text-decoration: none;

color: #fff;

font-size: 18px;

font-weight: 500;

padding: 8px 15px;

border-radius: 5px;

transition: all 0.3s ease;

.menu ul li a:hover{

background: #fff;

color: black;

.img{

background: url('img3.jpg')no-repeat;

width: 100%;

height: 100vh;

background-size: cover;

background-position: center;

position: relative;

}
.img::before{

content: '';

position: absolute;

height: 100%;

width: 100%;

background: rgba(0, 0, 0, 0.4);

.center{

position: absolute;

top: 52%;

left: 50%;

transform: translate(-50%, -50%);

width: 100%;

padding: 0 20px;

text-align: center;

.center .title{

color: #fff;

font-size: 55px;

font-weight: 600;

.center .sub_title{

color: #fff;

font-size: 52px;

font-weight: 600;

.center .btns{

margin-top: 20px;

}
.center .btns button{

height: 55px;

width: 170px;

border-radius: 5px;

border: none;

margin: 0 10px;

border: 2px solid white;

font-size: 20px;

font-weight: 500;

padding: 0 10px;

cursor: pointer;

outline: none;

transition: all 0.3s ease;

.center .btns button:first-child{

color: #fff;

background: none;

.btns button:first-child:hover{

background: white;

color: black;

.center .btns button:last-child{

background: white;

color: black;

You might also like