How to make Single Page Portfolio template using HTML and CSS.[Source Code]
To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
/**
Hello Future Developer Thanks for Using learningrobo.com,
Check our website Regularly For New Snippets Post.
Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
:root{
--main-font:'IBM Plex Sans', sans-serif;;
--content-font:'Varela Round', sans-serif;
}
*{
box-sizing: border-box;
}
body{
background-color: #121212;
font-family: 'Heebo', sans-serif;
}
.main{
width:100%;
height: fit-content;
padding:10px 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap:20px;
}
.sec1{
height:30vh;
width:70vw;
margin:0px;
padding:20px 0px 10px;
}
.sec1 h1{
text-align: center;
margin: 20px 0px 10px;
font-weight: bold;
font-size: 95px;
background: -webkit-linear-gradient(120deg,#663399, #a965ed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family:var(--main-font);
}
.sec1 p{
text-align: center;
margin: 10px;
font-weight: lighter;
font-size:22px;
color: white;
font-family:var(--content-font);
}
.sec2{
width: 70vw;
height: 110vh;
display: flex;
flex-direction: row;
column-gap: 25px;
}
.p1{
width:35%;
height: 110vh;
background:linear-gradient(120deg,#663399, #a965ed);
border-radius: 20px;
color: white;
padding:120px 20px 20px;
display: flex;
flex-direction: column;
row-gap:2px;
}
.p1 h6{
margin:0px;
font-size: 18px;
letter-spacing: 3px;
font-weight: 900;
font-family:var(--main-font);
}
.p1 p{
margin:0px 0px 30px;
font-size: 16px;
font-weight: 300;
font-family:var(--content-font);
}
.icon{
margin: 12px 0px;
display: flex;
flex-direction: row;
column-gap: 20px;
}
.icon i{
font-size:20px;
cursor: pointer;
color: #ffffff;
}
.p2{
width:65%;
height: 110vh;
display: flex;
flex-direction: column;
}
.p2 img{
width:100%;
height:50vh;
border-radius:20px;
object-fit: cover;
}
.c2{
width:100%;
height:60vh;
display: flex;
flex-direction: column;
}
.score{
margin:0px;
width: 80%;
height:50vh;
display: flex;
flex-direction: column;
background-color: #121212;
}
.s1,.s2{
width: 100%;
height: 25vh;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
column-gap: 10vw;
}
.s1 h2,.s2 h2{
margin: 5px 0 0 0;
font-size: 50px;
font-family: var(--main-font);
font-weight: bold;
color: #a965ed;
}
.s1 h6,.s2 h6{
margin: auto;
font-size: 14px;
font-family:var(--content-fonts);
color: white;
}
.butt{
width: 40vw;
height: 20vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
button{
width:100%;
height:8vh;
outline: none;
border: none;
border-radius:10px;
font-size: 15px;
font-weight: bold;
background:linear-gradient(120deg,#663399, #a965ed);
color: white;
}
button i{
margin-left: 20px;
}
@media (max-width:1024px){
.main{
height: fit-content;
}
.sec1{
width:100%;
flex-direction: column;
align-items: center;
height:20vh;
}
.sec2{
width:100vw;
flex-direction: column;
align-items: center;
height:fit-content;
}
.p1{
width:70%;
height:fit-content;
align-items: center;
order:2;
}
.p1 h6{
font-size:22px;
}
.p1 p{
font-size: 18px;
}
.p2{
height:fit-content;
order:1;
width:70%;
}
.p2 img{
width:100%;
height:35vh;
order:1;
}
.c2{
align-items: center;
order:2;
width:100%;
height:fit-content;
}
.score{
height:fit-content;
}
.s1,.s2{
margin:10px 0px 0px;
justify-content: center;
height:10vh;
}
button{
margin:20px 0px;
}
}
@media (max-width:630px){
.main{
height: fit-content;
}
.sec1{
width:100%;
flex-direction: column;
align-items: center;
height:fit-content;
}
.sec2{
width:100vw;
flex-direction: column;
align-items: center;
height:fit-content;
}
.p1{
width:90%;
height:fit-content;
align-items: center;
order:2;
padding:20px;
}
.p1 h6{
font-size:22px;
}
.p1 p{
font-size: 18px;
}
.p2{
height:fit-content;
order:1;
width:90%;
}
.p2 img{
width:100%;
height:35vh;
order:1;
}
.c2{
margin:20px 0px 0px;
align-items: center;
order:2;
width:100%;
height:fit-content;
}
.score{
height:fit-content;
}
.s1,.s2{
margin:10px 0px 0px;
justify-content:space-between;
height:20vh;
}
button{
margin:20px 0px;
width:90%;
}
}
.credit a{
text-decoration: none;
color: #ffffff;
font-weight: 800;
}
.credit{
color: #ffffff;
text-align: center;
margin-top: 10px;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
color:tomato;
font-size:20px;
}
Thank you for reading our blog. If you face any problem in Creating a Single Page Portfolio template using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.
Explore
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
In Our older post it doesnot work we working on that.
Post a Comment
Thank you
Learning robo team