Ris345/Design Website Project

## Design Website Project
<!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>Designer Website</title>
    <link href = "CSS /design.css" rel = "stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Main-Section -->
    <div class = "acharya">
        <h1 class = "mainhead">Rishav Acharya's website</h1>
    </div>
    <!-- Color Section -->
    <div class = "box">
        <h2 class = "secondhead">Colors</h2>
        <div class = "colorbox"> <p class = "Colors1" > Kind of Blue</p>
            <p class = "Colorsnum1"> #2d5dcc </p></div>
        <div class = "colorbox"><p class = "Colors2"> Pink </p>
            <p class = "Colorsnum2">#d957d9</p> </div>
        <div class = "colorbox"><p class = "Colors3">Mint-Green </p> <p class = "Colorsnum3"> #4fe0b0 </p></div>
        <div class = "colorbox"><p class = "Colors4"> Beige</p> <p class = "Colorsnum4"> #efd9ca </p> </div>
    </div>
    <!-- Font-Section -->
    <div class = "box">
      <h2 class = "secondhead"> Fonts </h2>
      <div class = "fontcollector">
           <div class = "fontalpanel">
               <p class = "source"> Source Code Pro</p>
              <p class ="word1"> I enjoy coding in CodeAcademy,it's a great platform.</p>
              <p class = "word2"> I enjoy coding in CodeAcademy,it's a great platform.</p>
              <p class = "word3"> I enjoy coding in CodeAcademy,it's a great platform.</p>
              </div>
           <div class = "fontalpanel">
              <p class ="source1">Nunito Sans </p>
              <p class = "words1">I want to solve coding challenges, with my problem solving skills. </p>
              <p ID= "words2"> I want to solve coding challenges, with my problem solving skills. </p>
              <p class = "words3"> I want to solve coding challenges, with my problem solving skills. </p>
           </div>
           <div class = "fontalpanel">
              <p class = "source2"> Poppins </p>
              <p class ="letter1"> I want to connect my musical skills with software engineering. </p>
              <p class = "letter2"> I want to connect my musical skills with software engineering.</p>
              <p class = "letter3"> I want to connect my musical skills with software engineering.</p>
            </div>
            </div>
        </div>
        <!-- TextStyles -->
    <div class = box>
        <div class = "textstyles"> <h2> Text Styles </h2> </div>
        <div><h1 class = "mainhead"> Font Attributes </h1></div>
        <div class = "list">
            <ul>
                <li> Font-weight: 700 (bold) </li>
                <li> Font-size: 26px </li>
                <li> Font-family: Nunito Sans</li>
            </ul>
        </div>
        <div class = "list">
            <h3 class ="Subheading"> SubHeading Attribute </h3>
            <ul>
                <li> Font-weight: 500 </li>
                <li> Font-size: 18px</li>
                <li> Font-family: Poppins</li>
            </ul>
        </div>
        <div class = "list">
            <h3 class = "Subheading">  Paragraph Attribute </h3>
            <ul>
                <li> Font-weight: 400 (regular) </li>
                <li> Font-size: 14px </li>
                <li> Font-family: Poppins</li>
            </ul>
        </div>
    </div>
</body>
</html>


html{
    background-color: rgb(250, 252, 251);
}


 .acharya{
    text-align: left;
    margin-left: 90px;
    font-family: 'Nunito Sans' ,sans-serif;
}
.mainhead{
    font-family: 'Nunito Sans' , sans-serif;
    text-align: left;
    margin-right: 50px;
    font-weight: 700 bold;
    color: rgb(21, 39, 2);
    font-style: italic;
}

.secondhead{
    font-family: 'Nunito Sans' , sans-serif;
    text-align: left;

}


.box{
    border: 2px solid gray;
    margin-bottom: 10px;
    margin-left: 80px;
    margin-right:165px;
    margin-top: 5px;
    padding: 25px;
    border-collapse: separate;
}

p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-end: 5px;
    margin-inline-start: 5px;

}

.colorbox{
    display: inline-block;
    text-align: center;
}

.Colors1{
    background-color: #2d5dcc;
    padding: 10px 110px;
    color: white;
    margin-top: 25px;
}

.Colorsnum1{
    background-color: #2d5dcc;
    padding: 20px 30px;
    color: white;
    text-align: center;
}

.Colors2{
    background-color: #d957d9;
    padding: 10px 120px;
}

.Colorsnum2{
    background-color: #d957d9;
    padding: 20px 30px;
    text-align:center;
}

.Colors3{
    background-color: #4fe0b0;
    padding: 10px 110px;
}

.Colorsnum3{
    background-color:#4fe0b0;
    padding:20px 30px;
    text-align: center;
}

.Colors4{
    background-color: #efd9ca;
    padding: 10px 133px;
    margin-top: 35px;
}

.Colorsnum4{
    background-color: #efd9ca;
    padding: 20px 30px;
    text-align: center;
}

.fontcollector{
    display: block;
    font-size: medium;
}

.fontalpanel{
    display: inline-block;
}

.source{
    font-style: 'Source Code Pro';
    text-decoration: underline;
    margin-bottom: 20px;
    font-weight: lighter;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 2px;
}

.source1{
    text-decoration: underline;
    font-style: 'Nunito Sans';
    font-size: 26px;
    margin-bottom: 25px;
    font-weight: lighter;
    font-weight: 500;
    font-size: 20px;
}

.source2{
    text-decoration: underline;
    font-style: Poppins;
    font-size: 25px;
    margin-bottom: 20px;
    font-weight: lighter;
    font-weight: 500;
    font-size: 20px;

}

.word1{
    font-style:'Source Code Pro', monospace;
    letter-spacing: 2px;
    line-height: 2.0;

}

.word2{
    font-style:'Source Code Pro',monospace;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 2.0;
}

.word3{
    font-style: 'Source Code Pro',monospace;
    line-height: 2.0;
    margin-bottom: 10px;
    font-style: italic;

}
.words1{
    font-style:'Nunito Sans',sans-serif;
    line-height: 2.0;
    font-weight: lighter;

}

#words2{
   font-style:'Nunito Sans', sans-serif;
   font-weight: bold;

   line-height: 2.0;
}

.words3{
    font-style:'Nunito Sans',sans-serif;
    font-weight: lighter;

    line-height: 2.0;
    font-style: italic;

}
.letter1{
    font-style: 'Poppins', sans-serif;
    line-height: 2.0;
    font-weight: lighter;


}
.letter2{
    font-weight: bold;
    font-style:' Poppins', sans-serif;
    line-height: 2.0;


}

.letter3{
    font-style: 'Poppins',sans-serif;
    line-height: 2.0;
    font-weight: lighter;
    font-style: italic;

}

.textstyles{
    font-style: 'Nunito Sans', sans-serif;
}

.list{
    font-style: 'Nunito Sans', sans-serif;
}

.subheading{
   font-style: 'Poppins', monospace;
}
	<!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>Designer Website</title>
	<link href = "CSS /design.css" rel = "stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet">
	</head>
	<body>
	<!-- Main-Section -->
	<div class = "acharya">
	<h1 class = "mainhead">Rishav Acharya's website</h1>
	</div>
	<!-- Color Section -->
	<div class = "box">
	<h2 class = "secondhead">Colors</h2>
	<div class = "colorbox"> <p class = "Colors1" > Kind of Blue</p>
	<p class = "Colorsnum1"> #2d5dcc </p></div>
	<div class = "colorbox"><p class = "Colors2"> Pink </p>
	<p class = "Colorsnum2">#d957d9</p> </div>
	<div class = "colorbox"><p class = "Colors3">Mint-Green </p> <p class = "Colorsnum3"> #4fe0b0 </p></div>
	<div class = "colorbox"><p class = "Colors4"> Beige</p> <p class = "Colorsnum4"> #efd9ca </p> </div>
	</div>
	<!-- Font-Section -->
	<div class = "box">
	<h2 class = "secondhead"> Fonts </h2>
	<div class = "fontcollector">
	<div class = "fontalpanel">
	<p class = "source"> Source Code Pro</p>
	<p class ="word1"> I enjoy coding in CodeAcademy,it's a great platform.</p>
	<p class = "word2"> I enjoy coding in CodeAcademy,it's a great platform.</p>
	<p class = "word3"> I enjoy coding in CodeAcademy,it's a great platform.</p>
	</div>
	<div class = "fontalpanel">
	<p class ="source1">Nunito Sans </p>
	<p class = "words1">I want to solve coding challenges, with my problem solving skills. </p>
	<p ID= "words2"> I want to solve coding challenges, with my problem solving skills. </p>
	<p class = "words3"> I want to solve coding challenges, with my problem solving skills. </p>
	</div>
	<div class = "fontalpanel">
	<p class = "source2"> Poppins </p>
	<p class ="letter1"> I want to connect my musical skills with software engineering. </p>
	<p class = "letter2"> I want to connect my musical skills with software engineering.</p>
	<p class = "letter3"> I want to connect my musical skills with software engineering.</p>
	</div>
	</div>
	</div>
	<!-- TextStyles -->
	<div class = box>
	<div class = "textstyles"> <h2> Text Styles </h2> </div>
	<div><h1 class = "mainhead"> Font Attributes </h1></div>
	<div class = "list">
	<ul>
	<li> Font-weight: 700 (bold) </li>
	<li> Font-size: 26px </li>
	<li> Font-family: Nunito Sans</li>
	</ul>
	</div>
	<div class = "list">
	<h3 class ="Subheading"> SubHeading Attribute </h3>
	<ul>
	<li> Font-weight: 500 </li>
	<li> Font-size: 18px</li>
	<li> Font-family: Poppins</li>
	</ul>
	</div>
	<div class = "list">
	<h3 class = "Subheading"> Paragraph Attribute </h3>
	<ul>
	<li> Font-weight: 400 (regular) </li>
	<li> Font-size: 14px </li>
	<li> Font-family: Poppins</li>
	</ul>
	</div>
	</div>
	</body>
	</html>



	html{
	background-color: rgb(250, 252, 251);
	}


	.acharya{
	text-align: left;
	margin-left: 90px;
	font-family: 'Nunito Sans' ,sans-serif;
	}
	.mainhead{
	font-family: 'Nunito Sans' , sans-serif;
	text-align: left;
	margin-right: 50px;
	font-weight: 700 bold;
	color: rgb(21, 39, 2);
	font-style: italic;
	}

	.secondhead{
	font-family: 'Nunito Sans' , sans-serif;
	text-align: left;

	}


	.box{
	border: 2px solid gray;
	margin-bottom: 10px;
	margin-left: 80px;
	margin-right:165px;
	margin-top: 5px;
	padding: 25px;
	border-collapse: separate;
	}

	p {
	display: block;
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-end: 5px;
	margin-inline-start: 5px;

	}

	.colorbox{
	display: inline-block;
	text-align: center;
	}

	.Colors1{
	background-color: #2d5dcc;
	padding: 10px 110px;
	color: white;
	margin-top: 25px;
	}

	.Colorsnum1{
	background-color: #2d5dcc;
	padding: 20px 30px;
	color: white;
	text-align: center;
	}

	.Colors2{
	background-color: #d957d9;
	padding: 10px 120px;
	}

	.Colorsnum2{
	background-color: #d957d9;
	padding: 20px 30px;
	text-align:center;
	}

	.Colors3{
	background-color: #4fe0b0;
	padding: 10px 110px;
	}

	.Colorsnum3{
	background-color:#4fe0b0;
	padding:20px 30px;
	text-align: center;
	}

	.Colors4{
	background-color: #efd9ca;
	padding: 10px 133px;
	margin-top: 35px;
	}

	.Colorsnum4{
	background-color: #efd9ca;
	padding: 20px 30px;
	text-align: center;
	}

	.fontcollector{
	display: block;
	font-size: medium;
	}

	.fontalpanel{
	display: inline-block;
	}

	.source{
	font-style: 'Source Code Pro';
	text-decoration: underline;
	margin-bottom: 20px;
	font-weight: lighter;
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 2px;
	}

	.source1{
	text-decoration: underline;
	font-style: 'Nunito Sans';
	font-size: 26px;
	margin-bottom: 25px;
	font-weight: lighter;
	font-weight: 500;
	font-size: 20px;
	}

	.source2{
	text-decoration: underline;
	font-style: Poppins;
	font-size: 25px;
	margin-bottom: 20px;
	font-weight: lighter;
	font-weight: 500;
	font-size: 20px;

	}

	.word1{
	font-style:'Source Code Pro', monospace;
	letter-spacing: 2px;
	line-height: 2.0;

	}

	.word2{
	font-style:'Source Code Pro',monospace;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 2.0;
	}

	.word3{
	font-style: 'Source Code Pro',monospace;
	line-height: 2.0;
	margin-bottom: 10px;
	font-style: italic;

	}
	.words1{
	font-style:'Nunito Sans',sans-serif;
	line-height: 2.0;
	font-weight: lighter;

	}

	#words2{
	font-style:'Nunito Sans', sans-serif;
	font-weight: bold;

	line-height: 2.0;
	}

	.words3{
	font-style:'Nunito Sans',sans-serif;
	font-weight: lighter;

	line-height: 2.0;
	font-style: italic;

	}
	.letter1{
	font-style: 'Poppins', sans-serif;
	line-height: 2.0;
	font-weight: lighter;


	}
	.letter2{
	font-weight: bold;
	font-style:' Poppins', sans-serif;
	line-height: 2.0;


	}

	.letter3{
	font-style: 'Poppins',sans-serif;
	line-height: 2.0;
	font-weight: lighter;
	font-style: italic;

	}

	.textstyles{
	font-style: 'Nunito Sans', sans-serif;
	}

	.list{
	font-style: 'Nunito Sans', sans-serif;
	}

	.subheading{
	font-style: 'Poppins', monospace;
	}