How To Make Graphic Designer Website Using HTML And CSS

byPosted at
How To Make Graphic Designer Website Using HTML And CSS

Graphic Designer Website

Learn How To Make A Graphic Designing Website Using HTML And CSS. Easy To Make A Graphic Designing Website Template Using HTML For Beginners.
In This Tutorial, You Will Learn How To Make a Graphic Designing Using HTML. It is a Very Easy To Create This Awesome Website Template Using HTML And CSS. If You Want To Make a Graphic Designing Website Like This, Follow These Steps Which I Given Below.

HostGator Web Hosting

How To Build Login Form In HTML And CSS.

  1. 0.0 - 1.30 min : Intro
  2. 1.30 - 51.0 min: Responsive Graphic Designer Website Using HTML CSS and Javascript


About This Tutorial

In This Video Tutorial I Will Teach You How To Make a Graphic Designing Website Template Using HTML CSS And JavaScript. It Is Very Easy To Make This Graphic Designing Website Using HTML And CSS. In the First 60s, I Will Show You, Which Website Design I Create In This Tutorial. Then I Will Create HTML, CSS, And Javascript Files And Put This Files In The Project Folder. After, I Linked The CSS And Js File With HTML Using "Link Href=" Location" And "Script src=" location" Tags. After Linking The Files I Make Structure Of The Graphic Designing Website Using HTML And Design This Structure Using CSS Style Sheet. After Designing, I Will Make This page responsive using Media Query. I Hope You Like This Tutorial And Article.

Follow These Steps:-

1) Open Your Text Editor Like Notepad++, Sublime, etc.
2) Create HTML, CSS, And Javascript Files And Put In Your Project Folder Which You Create. I Recommended You To Create Separate Folders For CSS And JS Files.
3) Link The CSS File With HTML File Using "Link href="Location" " Tag.
4) Link The Js File With HTML Using "Script src="Location" " Tag.
5) Copy Graphic Designing Website HTML Code And Past In Your HTML File.

HTML 

<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Graphic Website</title>
<link href="css/swiper.min.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--using FontAwesome---------------->
<script crossorigin="anonymous" src="https://kit.fontawesome.com/c8e4d183c2.js"></script>
</head>

<body>
 <!--navigation------------------------>
 
 <nav class="navigation">
 <!--bars-icon-->
 <div class="toggle"></div>
 <!--logo----------->
 <a class="logo" href="#">
 Going<font color="#1b1d29">Internet</font>
 </a>
 <!--menu---------------------------->
 <ul class="menu">
 <li><a class="active" href="#">Home</a></li> 
 <li><a href="#">About</a></li> 
 <li><a href="#">Contact Us</a></li> 
 <li><a href="#">Team</a></li> 
 
 
 </ul>
<!--search---------------------->
 <a class="search-icon" href="#"><i class="fas fa-search"></i></a>
  
  
 </nav>
 
   <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
 <!--1--------------------------------->
      <div class="swiper-slide">
 <!--main-section--------------------------->
 <section class="slider-box">
 <!--top------------------------>
 <div class="top-section">
 <!--name------------------------------------>
 <div class="name">
 <h1>I'm Olivia</h1>
 <!--category---------->
 <p>Freelancing Graphic Designer</p>
 </div>
 <!--details-------------------------------> 
 <div class="details">
 <p>Graphic designers create visual concepts, using computer software or by hand.</p> 
 <p> They develop the overall layout and production design for applications.
 </p>
 </div>
 <!--model--------------------------->
 <a class="model" href="#"><img src="images/cut 1.png" /></a>
  
 </div>
 <!--bottom------------------------>
 <div class="bottom-section">
 
 <!--left-side---------------------------->
 <div class="left-side">
 <!--follow me----------------------------->
 <div class="follow">
 <h1>Follow Me</h1> 
 <div class="social">
 <a href="#"><i class="fab fa-facebook-f"></i></a> 
 <a href="#"><i class="fab fa-twitter"></i></a>
 <a href="#"><i class="fab fa-instagram"></i></a>
 <a href="#"><i class="fab fa-youtube"></i></a>
 </div>
 </div>
 <!--instagram----------------->
 <div class="instagram">
 <h1>Instagram</h1>
 <p>5K</p>
  
 </div>
 <!--Youtube----------------->
 <div class="youtube">
 <h1>Youtube</h1>
 <p>4K</p>
  
 </div>
 </div>
 <!--right-side---------------------------->
 <div class="right-side">
 <div class="portfolio">
  <!--1----------------------->
  <div class="p-img"><img src="images/1.jpeg" /></div> 
  <!--2----------------------->
  <div class="p-img"><img src="images/2.jpeg" /></div> 
  <!--3----------------------->
  <div class="p-img"><img src="images/3.jpeg" /></div> 
  <!--more----------------------->
  <div class="p-more"><a href="#">+</a></div> 
  
 </div> 
 <!--background-box------------->
 <div class="back-box"></div>
  
 </div>
  
 </div>
 
 
 </section> 
 </div>
 <!--2--------------------------------->
      <div class="swiper-slide">
 <!--main-section--------------------------->
 <section class="slider-box">
 <!--top------------------------>
 <div class="top-section">
 <!--name------------------------------------>
 <div class="name">
 <h1>I'm Lilly</h1>
 <!--category---------->
 <p>Freelancing Graphic Designer</p>
 </div>
 <!--details-------------------------------> 
 <div class="details">
 <p>The Graphic Designer job description includes the entire process of defining requirements.</p> 
 <p>Visualizing and creating graphics including illustrations, logos, layouts and photos.
</p> 
 
 </div>
 <!--model--------------------------->
 <a class="model" href="#"><img src="images/cut 2.png" /></a>
  
 </div>
 <!--bottom------------------------>
 <div class="bottom-section">
 
 <!--left-side---------------------------->
 <div class="left-side">
 <!--follow me----------------------------->
 <div class="follow">
 <h1>Follow Me</h1> 
 <div class="social">
 <a href="#"><i class="fab fa-facebook-f"></i></a> 
 <a href="#"><i class="fab fa-twitter"></i></a>
 <a href="#"><i class="fab fa-instagram"></i></a>
 <a href="#"><i class="fab fa-youtube"></i></a>
 </div>
 </div>
 <!--instagram----------------->
 <div class="instagram">
 <h1>Instagram</h1>
 <p>200K</p>
  
 </div>
 <!--Youtube----------------->
 <div class="youtube">
 <h1>Youtube</h1>
 <p>100K</p>
  
 </div>
 </div>
 <!--right-side---------------------------->
 <div class="right-side">
 <div class="portfolio">
  <!--1----------------------->
  <div class="p-img"><img src="images/4.jpg" /></div> 
  <!--2----------------------->
  <div class="p-img"><img src="images/5.jpg" /></div> 
  <!--3----------------------->
  <div class="p-img"><img src="images/6.jpg" /></div> 
  <!--more----------------------->
  <div class="p-more"><a href="#">+</a></div> 
  
 </div> 
 <!--background-box------------->
 <div class="back-box"></div>
  
 </div>
  
 </div>
 
 
 </section> 
 </div>
 <!--3--------------------------------->
      <div class="swiper-slide">
 <!--main-section--------------------------->
 <section class="slider-box">
 <!--top------------------------>
 <div class="top-section">
 <!--name------------------------------------>
 <div class="name">
 <h1>I'm Emma</h1>
 <!--category---------->
 <p>Freelancing Graphic Designer</p>
 </div>
 <!--details-------------------------------> 
 <div class="details">
 <p>our graphics should capture the attention of those who see them .</p> 
 <p>you need to have a creative flair and a strong ability to translate requirements into design.
</p> 
 
 </div>
 <!--model--------------------------->
 <a class="model" href="#"><img src="images/cut 3.png" /></a>
  
 </div>
 <!--bottom------------------------>
 <div class="bottom-section">
 
 <!--left-side---------------------------->
 <div class="left-side">
 <!--follow me----------------------------->
 <div class="follow">
 <h1>Follow Me</h1> 
 <div class="social">
 <a href="#"><i class="fab fa-facebook-f"></i></a> 
 <a href="#"><i class="fab fa-twitter"></i></a>
 <a href="#"><i class="fab fa-instagram"></i></a>
 <a href="#"><i class="fab fa-youtube"></i></a>
 </div>
 </div>
 <!--instagram----------------->
 <div class="instagram">
 <h1>Instagram</h1>
 <p>10K</p>
  
 </div>
 <!--Youtube----------------->
 <div class="youtube">
 <h1>Youtube</h1>
 <p>6K</p>
  
 </div>
 </div>
 <!--right-side---------------------------->
 <div class="right-side">
 <div class="portfolio">
  <!--1----------------------->
  <div class="p-img"><img src="images/7.jpg" /></div> 
  <!--2----------------------->
  <div class="p-img"><img src="images/8.jpg" /></div> 
  <!--3----------------------->
  <div class="p-img"><img src="images/9.jpg" /></div> 
  <!--more----------------------->
  <div class="p-more"><a href="#">+</a></div> 
  
 </div> 
 <!--background-box------------->
 <div class="back-box"></div>
  
 </div>
  
 </div>
 
 
 </section> 
 </div>
  
 
     
    </div>
     <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-black"></div>
    <!-- Add Arrows -->
  <div class="button">
    <div class="circule"><div class="swiper-button-next  swiper-button-white"></div></div>
    <div class="circule"><div class="swiper-button-prev  swiper-button-white"></div></div>
  </div>
  </div>
 
 <script src="js/swiper.min.js" type="text/javascript"></script>
 <script src="js/JQuery3.3.1.js" type="text/javascript"></script>
 
</body>
</html>

6) Copy Graphic Designing Website CSS Code And Past In Your CSS File.

CSS 
@charset "utf-8";
/* CSS Document */
body{
 margin:0px;
 padding: 0px;
 background-color:#FFFFFF;
}
ul{
 list-style:none;
}

a{
 text-decoration:none;
}
.toggle{
 display:none;
}
.logo{
 font-family: RoadTest;
 color:#423E7E;
 font-size: 21px;
 }

.menu{
 display: flex;
}
.menu  li a{
 padding:10px 16px;
 font-family: calibri;
 color:#c7c7c7;
 font-size: 16px;
 font-weight: 400;
 letter-spacing: 1px;
}
.menu  .active,
.menu li a:hover{
 color:#1b1d29;
 font-weight: bold;
 transition: all ease 0.2s;
}
.navigation{
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: fixed;
 left:15%;
 top: 5%;
 transform: translate(-15%,-5%);
 width: 58%;
 z-index: 2 !important;
 }
.swiper-container{
z-index: 1 !important; 
 }
.search-icon i{
 color:#464193;
}
.slider-box{
 position: relative;
 width: 100%;
 height: 100vh;
 display: grid;
 grid-auto-columns:1fr ;
 grid-auto-rows:1fr 170px;
}
.bottom-section{
 background-color:#3b367c;
 box-shadow: 2px 2px 12px rgba(0,0,0,0.3);
 display: flex;
}
.top-section{
 display: flex;
 box-sizing: border-box;
 justify-content:space-between;
 align-items: center;
 padding: 0px 6%;
 background-color: #FFFFFF;
}
.name h1{
 font-family: calibri;
 font-size: 90px;
 color:#1b1d29;
 padding: 0px;
 margin: 0px;
 line-height: 80px;
}
.name p{
 font-family: calibri;
 font-size: 16px;
 color:#c7c6c6;
 padding-left: 5px;
}
.details{
 width: 230px;
 font-family: calibri;
}
.details p{
 color:#BDBDBD;
 font-size: 16px;
}
.model {
 width: 420px;
 height: 450px;
 display: flex;
 justify-content: center;
 }
.model img{
 max-height: 100%;
 max-width: 100%;
}
.left-side{
 display: flex;
 width: 58%;
 height:100%;
 justify-content:center;
 align-items: center;
}
.follow h1{
 font-family: bebas kai;
 letter-spacing: 3px;
 color:#FFFFFF;
 font-weight: 400;
 font-size: 22px;
 margin: 0px 0px 10px 0px;
}
.social a{
 width: 35px;
 height: 35px;
 background-color: #544ea5;
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 
 margin:0px 5px;
}
.social{
 display: flex;
}
.social i{
 color:#FFFFFF;
 font-size: 12px;
}
.follow,.instagram,.youtube{
 display: flex;
 flex-direction: column;
 align-items: center;
 margin:0px 24px;
}
.instagram h1,.youtube h1{
 font-family: bebas kai;
 letter-spacing: 3px;
 font-weight: 400;
 color:#5b55b1;
 font-size: 24px;
 margin: 0px 0px 15px 0px;
}
.instagram p,.youtube p{
 font-family: bebas kai;
 letter-spacing: 2px;
 color: #FFFFFF;
 font-size: 35px;
 margin: 0px ;
 line-height: 30px;

}
.youtube p{
 border-left: 2px solid rgba(91,85,177,0.80);
padding:0px 70px;
 
}
.right-side{
 width:43%;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 }
.p-img{
 width: 110px;
 height: 110px;
 background-color: #5b55b1;
 margin: 10px;
 overflow: hidden;
 box-shadow: 2px 2px 12px rgba(0,0,0,0.3);
 border: 2px solid rgba(91,85,177,1);
}
.portfolio{
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 border-left: 2px solid rgba(91,85,177,0.40);
 z-index: 1;
}
.p-more a{
 color: #FFFFFF;
 font-size: 30px;
 font-family: calibri;
 font-weight: bold;
 margin: 0px 10px;
}
.p-img img{
 max-width: 100%;
}
.back-box{
 width:50%;
 height: 78%;
 border:6px solid rgba(91,85,177,1);
 position: absolute;
 left: 43%;
 top:50%;
 transform: translate(-43%,-50%);
}
.social a:hover{
 background-color:#1b1d29;
 transition: all ease 0.5s
}
.social a:hover i{
color:#FFFFFF ;
 transition: all ease 0.5s
}
.button{
 position: absolute;
 left: 39%;
 top: 52%;
 transform: translate(-39%,-52%);
 z-index: 1;
 display: flex;
 transform: rotate(-180deg);
}
.swiper-button-next,.swiper-button-prev{

 position: static !important;
 margin: 0px;
 padding: 0px;
 height: 15px;
 transform: rotate(-180deg);
box-sizing: border-box;
 background-size: cover;
 
}

.circule{
 width: 40px;
 height: 40px;
 background-color: #1b1d29;
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 margin:0px 7px;
 box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}
.circule:hover{
 background-color:#3b367c;
 transition: all ease 0.5s;
}
.swiper-pagination{
 top: 83%;
 transform: translateY(-83%);
 left: -7% !important;
 
}
@media(max-width:1100px){
 .model {
  width: 280px;
  height: 280px;
 }
 
 .top-section{
  display: flex;
  justify-content: space-around;
 }
 .youtube{
  display:none; 
 }
 .left-side{
  width: 50%;
 }
 .right-side{
  width:50%;
 }
 .p-img{
  flex-shrink:0;
 }
 .follow{
  margin:0px;
 }
}

 @media(max-width:985px){
  .model{
   display: none;
  }
  .instagram{
   display: none;
  }
  .left-side{
  width: 35%;
 }
  .right-side{
  width: 65%;
 }
  .swiper-pagination{
   transform: translate(6.5%,-75%);
  }
  .button{
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: row-reverse;
  }
  .swiper-button-next,.swiper-button-prev{
   transform:rotate(360deg) !important;
  }
  .navigation{
   position:fixed;
   margin:0px;
   width: 90%;
   padding: 0px;
   box-sizing: border-box;
   top: 3%;
   left: 50%;
   transform: translate(-50%,-3%);
   
  }
  .toggle{
   display:block;
  }
  .toggle:before{
 content:'\f0c9';
 font-family: fontAwesome;
 line-height: 30px;
}
  .toggle.active:before{
 content:'\f00d' !important;
 
  }
  
  nav ul{
  position:absolute; 
  width: 100%;
  height:auto;
  box-sizing:border-box;
  background-color:#3b367c;
  top: 50px;
  left: 0;
  transition: 0.5s;
  overflow: hidden;
  display: none !important;
  border:3px solid #574FAB;
 }
 
  nav ul li a{
  border-bottom: 1px solid rgba(255,255,255,0.10) ;
  border-right: none !important;
  color:#ffffff !important;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px !important;
  padding: 0px !important;
 }
  nav ul{
   padding:0px;
   margin:0px;
  }

  .active-menu {
  display: block !important;
 }
 
  nav ul li a:hover{
   background-color:rgba(27,29,32,0.15);
   color:#FFFFFF;
   }
}
@media(max-width:670px){
 .slider-box{
  grid-auto-columns:1fr ;
 grid-auto-rows:1fr 120px;
 }
 .details{
  width:90%;
 }
 .name h1{
 font-size:64px;
 }
 .right-side{
  display:none;
 }
 .left-side{
  width:100%;
 }
 .youtube,.instagram{
  display:flex;
  margin: 0px 12px;
 }
 .youtube p{
  padding: 0px 50px;
 }
 .top-section{
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  margin: auto;
 }
 .button{
  top:70%;
  left:50%;
  transform: translate(-50%,-70%);
 }
 .swiper-pagination{
  top: 87%;
  transform: translate(6%,-87%);
 }
 
}
@media(max-width:520px){
 .youtube,.instagram{
  display: none;
 
 }
}

7) Copy Graphic Designing WebsiteJs Code And Past In Your JS File.

Js 
 
 var swiper = new Swiper('.swiper-container', {
      spaceBetween: 0,
      effect: 'fade',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
   
   /*Responsive Navigation*/
   $(document).ready(function(){
  $('.toggle').click(function(){
   $('.toggle').toggleClass('active')
   
   $('nav ul').toggleClass('active-menu')
  
   
  })
 });

8) Download the Graphic Designing Website Source Code Link Given Below.
9) After Doing All Steps, Open HTML File And Enjoy The Graphic Designing Website.


The Download Links Will Be Shown in 30 Seconds


How To Dowload Files

Share
3 comments Labels

Comments

  1. hacker proSeptember 30, 2020 at 11:24 PM

    TANKS

    ReplyDelete
  2. UnknownOctober 20, 2020 at 7:50 AM

    thank you very much you are great


    ReplyDelete
  3. UnknownDecember 5, 2020 at 11:05 AM

    how can i get those image???

    ReplyDelete

Archive

Contact Form

Send