HTML Code
| <!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>Graphic Designer Website</title> |
| |
| <link rel="stylesheet" href="style.css"> |
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
| |
| </head> |
| <body> |
| <div class="container"> |
| |
| <div class="menu"> |
| |
| <a href="#" class="logo">Logo</a> |
| <nav> |
| <ul> |
| <li><a href="#">Portfolio</a></li> |
| <li><a href="#">My Work</a></li> |
| <li><a href="#">Contact Me</a></li> |
| </ul> |
| </nav> |
| </div> |
| |
| <div class="heading"> |
| <div class="main-text"> |
| <h1>I'm Web UI<span> Graphic Designer</span></h1> |
| <p>I have done more then 100+ Projects for Graphic Designs.</p> |
| <button>See My Work</button> |
| </div> |
| </div> |
| |
| <div class="social"> |
| <i class="fa fa-facebook"></i> |
| <i class="fa fa-twitter"></i> |
| <i class="fa fa-instagram"></i> |
| </div> |
| </div> |
| </body> |
| </html> |
CSS Code
| @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600&display=swap"); |
| * { |
| margin: 0; |
| padding: 0; |
| font-family: "Poppins"; |
| list-style: none; |
| text-decoration: none; |
| } |
| .container { |
| width: 100%; |
| min-height: 100vh; |
| background-image: url("background.png"); |
| background-repeat: no-repeat; |
| background-size: cover; |
| background-position: center; |
| position: relative; |
| } |
| .menu { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 14px 5%; |
| } |
| .menu ul { |
| display: flex; |
| } |
| nav li a { |
| margin: 0px 8px; |
| color: #fff; |
| font-weight: 500; |
| text-transform: uppercase; |
| } |
| |
| nav li a:hover { |
| color: #a52604; |
| } |
| .logo { |
| font-size: 34px; |
| font-weight: 500; |
| color: #fff; |
| text-transform: uppercase; |
| } |
| .heading { |
| margin-top: 15%; |
| margin-left: 8%; |
| } |
| .main-text h1, |
| p { |
| color: #fff; |
| } |
| span { |
| color: #bb2b04; |
| } |
| .main-text h1 { |
| font-size: 45px; |
| font-weight: 600; |
| letter-spacing: 1px; |
| margin-bottom: 6px; |
| } |
| .main-text p { |
| font-weight: 500; |
| font-style: italic; |
| letter-spacing: 1px; |
| margin-bottom: 8px; |
| } |
| button { |
| background-color: #bb2b04; |
| border: none; |
| border-radius: 25px; |
| color: #fff; |
| padding: 10px 32px; |
| margin-top: 12px; |
| font-size: 16px; |
| font-weight: 500; |
| } |
| button:hover { |
| letter-spacing: 2px; |
| } |
| .social i { |
| font-size: 22px; |
| color: #fff; |
| margin-top: 200px; |
| padding: 12px; |
| } |
| .social i:hover { |
| color: #a52604; |
| transition: 0.5s ease-in; |
| } |
| .social { |
| text-align: center; |
| } |
Download Files:
Comments