If you’re a beginner to code and just started learning HTML and CSS, you may be wondering what practice projects you can do to build your portfolio and hone your abilities. You might even ask whether or not you can actually do anything with just these two languages! The good news is that there are many types of projects out there that beginners can use to practice coding, build skills, study, and even start earning money.
HTML
<!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>Digital Marketing</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Poppins:wght@300&display=swap"
rel="stylesheet">
<!-- Icons Linking -->
<script src="https://kit.fontawesome.com/04158e9780.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="contents section-1">
<!-- Navigation Bar -->
<div class="nav-bar">
<div class="left">
<div class="logo"><img src="https://media.sproutsocial.com/uploads/sprout-social-logo-new.png"
alt=""></div>
</div>
<div class="right">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#"><button>Contact</button></a></li>
</ul>
</div>
</div>
<!-- Heading Title -->
<div class="heading-title">
<h1>We Are A <span> Creative Digital Marketing </span>Agency</h1>
<p>We should consider hiring a Digital Marketing Agency in order to reach more customers and see an
increased(ROI)</p>
<button>Get Started</button>
</div>
</div>
<!-- GREEN CARD -->
<div class="section-2">
<div class="contents">
<h1>Don't Reply On Gut Feeling To Make Decision Which Can Be Costly Mistakes.</h1>
<p>In order to maximize profits and stay ahead of the competiton, business need to employ a digital
marketing professional just like Go Big LA.</p>
</div>
</div>
<!-- Benefits Section -->
<div class="contents section-3">
<div class="sub-header">BENEFITS</div>
<div class="header">
<h1>We Can Improve <span>Your Business <br> Performance</span> and Gain More customers</h1>
</div>
<div class="cards">
<div class="card">
<div class="icon"><i class="fa-solid fa-people-group"></i></div>
<div class="text-area">
<h1>Reach More Customers</h1>
<p>We have the ability to reach a large number of people through various platforms</p>
</div>
</div>
<div class="card dark">
<div class="icon"><i class="fa-solid fa-sack-dollar"></i></div>
<div class="text-area">
<h1>Cost Effective</h1>
<p>the most cost effective ways to reach customers</p>
</div>
</div>
</div>
</div>
<!-- stats section -->
<div class="section-4">
<ul>
<li>
<h1>250+</h1>
<p>Happy Customers</p>
</li>
<li>
<h1>100+</h1>
<p>Best Service Provided</p>
</li>
<li>
<h1>12+</h1>
<p>Years of Experience</p>
</li>
<li>
<h1>30+</h1>
<p>Our Business Brands</p>
</li>
</ul>
</div>
<!-- supports section -->
<div class="section-5 contents">
<div class="cols">
<div class="left col">
<div class="text-area">
<h1>Support & Management</h1>
<p>The project may be completed but the product is never finished. We will secure its continuous
quality and support incremental improvements</p>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1544006659-f0b21884ce1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFuJTIwbGFwdG9wfGVufDB8fDB8fA%3D%3D&w=1000&q=80"
alt="">
</div>
<div class="text-area">
<h1>Project Management</h1>
<p>We have a will-laid-out communication scheme and coherent process. Our Project Manager keeps
their fingers on the pulse and makes sure the project is deleivered on time within budget.
</p>
</div>
</div>
<div class="right col">
<div class="image">
<img src="https://c0.wallpaperflare.com/preview/894/169/110/american-colleagues-digital-device-discussion.jpg"
alt="">
</div>
<div class="text-area">
<h1>Quality Assurance</h1>
<p>Quality assurance specialist are the quiet guardians of your project, making sure the project
is released bug-free and that it provides users with a best Experience.
</p>
</div>
</div>
</div>
</div>
<!-- services section -->
<div class="section-6">
<div class="header">
<h1>Our Services</h1>
<p>We are working hard to provide the best quality for you and we never choose easy and faster ways to
quickly break up with your project.</p>
</div>
<div class="cards">
<div class="dark card">
<div class="icon"><i class="fa-solid fa-chart-line"></i></div>
<div class="heading">SEO</div>
<div class="text-area">We invent and create beautiful brands, digital products and other most
relevent digital things.</div>
<a href="#">Learn More</a>
</div>
<div class="light card">
<div class="icon"><i class="fa-solid fa-code"></i></div>
<div class="heading">Web Design & Development</div>
<div class="text-area">Build well-designed and optimized custom mobile applications with a
delightful UX for both iOS and Android</div>
<a href="#">Learn More</a>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="col left"><span>Sprout</span> Social</div>
<div class="col middle">
<div class="logo"><img
src="https://logos.bugcrowdusercontent.com/logos/8d78/324f/ab1b3ec2/ecdd2a2ecc568cf67075d6ae9eea2b33_01-sprout-social-logo-icon-01.png"
alt="">
</div>
<div class="footer-text">2022©Copyright All Rights Reserved</div>
</div>
<div class="col right"><i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-snapchat"></i>
<i class="fa-brands fa-pinterest"></i>
<i class="fa-brands fa-tiktok"></i>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: #FAF9F6;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.container .contents {
width: 80%;
}
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
.nav-bar .left {
width: 30%;
display: flex;
align-items: center;
}
.nav-bar .left .logo {
height: 70px;
width: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.nav-bar .left .logo img {
width: 100%;
}
.nav-bar .right {
width: 70%;
}
.nav-bar .right ul {
width: 100%;
display: flex;
list-style: none;
justify-content: right;
align-items: center;
font-family: poppins;
}
.nav-bar .right ul li {
margin-left: 5%;
}
.nav-bar .right ul a {
text-decoration: none;
color: #0b1f22;
color: grey;
}
.nav-bar .right ul a:hover {
color: #0b1f22;
font-weight: 600;
}
.nav-bar .right ul a:focus {
color: #0b1f22;
font-weight: 600;
}
.nav-bar .right ul a button {
height: 45px;
width: 150px;
font-family: Poppins;
font-weight: bolder;
border-radius: 75px;
background: transparent;
border: 2px solid #35a27e;
color: #35a27e;
cursor: pointer;
}
.nav-bar .right ul a button:hover {
background-color: #35a27e;
color: white;
transition-duration: 0.3s;
}
.heading-title {
margin-top: 2%;
}
.heading-title h1 {
font-size: 6rem;
font-family: Inter;
width: 80%;
}
.heading-title span {
color: #35a27e;
}
.heading-title p {
font-family: Poppins;
font-size: 1.5rem;
width: 60%;
color: grey;
margin-top: 2%;
}
.heading-title button {
height: 55px;
width: 180px;
background-color: #35a27e;
border: none;
border-radius: 75px;
color: white;
font-family: Poppins;
margin-top: 2%;
font-weight: 600;
cursor: pointer;
font-size: 1rem;
}
.section-2 {
background-color: #35a27e;
width: 100%;
margin-top: 10%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
height: 300px;
margin-bottom: 5%;
}
.section-2 .contents {
height: 800px;
width: 800px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 4%;
text-align: center;
background-color: #48aa89;
}
.section-2 .contents h1 {
color: white;
font-family: inter;
}
.section-2 .contents p {
font-family: poppins;
margin-top: 2%;
color: white;
}
.section-3 {
margin-bottom: 10%;
}
.section-3 .sub-header {
font-family: Poppins;
color: #35a27e;
font-size: 1.5rem;
font-weight: 600;
text-align: center;
}
.section-3 .header {
display: flex;
justify-content: center;
}
.section-3 .header h1 {
width: 80%;
font-size: 2.5rem;
font-family: Inter;
text-align: center;
}
.section-3 .header h1 span {
color: #35a27e;
}
.section-3 .cards {
display: flex;
justify-content: space-between;
margin-top: 5%;
}
.section-3 .cards .card {
background-color: white;
padding: 2%;
border-radius: 5px;
width: 450px;
display: flex;
color: #0b1f22;
box-shadow: 0px 0px 13px 0.3px rgb(0, 0, 0, 0.2);
}
.section-3 .cards .card .icon {
width: 30%;
font-size: 3rem;
}
.section-3 .cards .card h1 {
font-family: Inter;
font-size: 1.5rem;
}
.section-3 .cards .card p {
font-family: poppins;
width: 80%;
}
.section-3 .cards .dark {
background-color: #0b1f22;
color: white;
}
.section-4 {
background-color: #0b1f22;
width: 100%;
margin-bottom: 10%;
}
.section-4 ul {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.section-4 ul li {
width: 25%;
color: white;
height: 150px;
flex-direction: column;
border-right: 2px dashed white;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.section-4 ul li:last-child {
border: none;
}
.section-4 ul li h1 {
font-family: Inter;
color: #35a27e;
}
.section-4 ul li p {
font-family: Poppins;
}
.section-5{
margin-bottom:10%;
}
.section-5 .cols {
display: flex;
justify-content: space-between;
color:#0b1f22;
}
.section-5 .cols .col {
width: 47%;
overflow: hidden;
}
.section-5 .cols .col h1 {
font-family: Inter;
}
.section-5 .cols .col p{
font-family:poppins;
width:90%;
}
.section-5 .cols .col .image{
height:300px;
overflow: hidden;
width:100%;
border-radius:2px;
margin-top:5%;
margin-bottom:5%;
}
.section-5 .cols .col .image img{
width:130%;
}
.section-5 .cols .right .image{
height:440px;
margin-top:0%;
}
.section-6{
background-color:white;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom:10%;
}
.section-6 .cards{
width:80%;
}
.section-6 .header{
display: flex;
flex-direction: column;
margin-bottom:5%;
margin-top:5%;
align-items: center;
}
.section-6 .header h1{
font-family:Inter;
font-size:2.5rem;
}
.section-6 .header p{
font-family:Poppins;
width:60%;
text-align: center;
}
.section-6 .cards{
display: flex;
justify-content:space-between;
}
.section-6 .cards .card{
height:400px;
display: flex;
padding:2%;
text-align:center;
width:38%;
flex-direction: column;
border-radius:5px;
box-shadow:0px 0px 10px 0.3px rgb(0,0,0,0.2);
color:white;
align-items: center;
}
.section-6 .cards .card .icon{
font-size:4rem;
}
.section-6 .cards .card .heading{
font-family:Inter;
font-size:2rem;
margin-bottom:5%;
margin-top:5%;
}
.section-6 .cards .card .text-area{
font-family:poppins;
}
.section-6 .cards .card a{
font-family:Poppins;
font-weight:bolder;
color:white;
margin-top:5%;
}
.section-6 .cards .dark{
background-color:#0b1f22;
}
.section-6 .cards .light{
background-color:#FAF9F6;
color:#0b1f22;
}
.section-6 .cards .light a{
color:#0b1f22;
}
.footer{
box-shadow:0px -2px 2px 0.5px rgb(0,0,0,0.1);
width:100%;
display: flex;
justify-content:space-between;
margin-bottom:0%;
}
.footer .col{
width:33.33%;
display: flex;
justify-content: center;
align-items: center;
}
.footer .middle{
display: flex;
flex-direction: column;
}
.footer .middle .footer-text{
font-family:Poppins;
color:#0b1f22;
padding-bottom:2%;
}
.footer .middle .logo{
height:80px;
width:80px;
}
.footer .middle .logo img{
width:100%;
}
.footer .left{
font-family:Inter;
font-size:2rem;
}
.footer .left span{
color:#35a27e;
}
.footer .right i{
height:40px;
border:2px solid #0b1f22;
width:40px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin-left:5%;
color:#0b1f22;
border-radius:50%;
font-size:1.5rem;
}
.footer .right i:hover{
background-color:#0b1f22;
color:white;
transition-duration:0.3s;
}
