[ 목차 ]
728x90
반응형
구 GitHub 클린코딩 국비지원 과제로 한 내용이지만 필요없는데 있는 내용이나 이상한 부분이 많습니다. 개인 복습용 저장공간입니다.
✔ HTML 부분
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title@@@@@@@@@@@@@</title>
<meta name="author" content ="@@@@@@@">
<meta name="description" content="삶의 질을 개선하는 개발자">
<link rel="icon" type="image/png" href="./images/hippo-solid.png">
<script src=@@@@@@@@@@@@></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navbar start -->
<nav id="navbar">
<div class="navbar__logo">
<img src="./images/logo.svg" alt="">
</div>
<ul class="navbar__menue">
<li class="navbar__menue__item" >Personal</li>
<li class="navbar__menue__item">Open Source</li>
<li class="navbar__menue__item">Businees</li>
<li class="navbar__menue__item">Explore </li>
<li class="navbar__menue__item">
<li class="navbar__menue__item">pricing</li>
<li class="navbar__menue__item">Blog</li>
<li class="navbar__menue__item">Support</li>
<input type="text" name="userid" id="userid"
maxlength="20" placeholder=" Search GitHub" required style="width:120px; height: 30px "></li>
<li class="navbar__menue__item"
style="width: 90px; height: 30px; border: 1px solid gray; background-color: rgb(121, 121, 121);">
<button style="background-color:rgb(121, 121, 121) ; color: white;">sign in</button></li>
<li class="navbar__menue__item"
style="width: 100px; height: 30px; border: 1px solid #5CB335; background-color:#5CB335;">
<button style="background-color:#5CB335 ; color: white;">sign up</button></li>
</ul>
<!-- Button start -->
<button class="navbar__toggle-btn">
<i class="fa-solid fa-bars"></i>
</button>
<!-- Button end -->
</nav>
<!-- Navbar end -->
<!-- Home start -->
<section id="home">
<div class ="home__container">
<div class="h">
<h2 class="home__title">How people<br> build software</h1>
<h3 class="home__description">Millions of developers use GitHub to build<br>
personal projects, support their businesses,<br>
and work together on open source technologies.</h2>
</div>
<div class="ha">
<p><input type="text" name="sign" id="sign"
maxlength="20" placeholder=" Pick a username" required style="width:300px; height: 30px "></p>
<p></p><input type="text" name="sign" id="sign"
maxlength="20" placeholder=" Your email address" required style="width:300px; height: 30px "></p>
<p></p><input type="text" name="sign" id="sign"
maxlength="20" placeholder=" Create a password" required style="width:300px; height: 30px "></p>
<p style="color:beige">Use at least one letter, one numeral, and seven characters </p>
<p><button style="width: 300px; height : 50px; background-color: #6ABF45; color: white">Sign up for GitHub</button></p>
<p style="color:beige; text-align: center;">By clicking "Sign up for GitHub", you agree to our terms of service and privacy policy. We'll</p>
<p style="color:beige; text-align: center">occasionally send you account relate emails.</p>
</div>
</div>
</section>
<!-- Home end -->
<!-- My Profile start-->
<section id ="about" class ="section section__container">
<div class="about__avi">
<h2 id="first" style="text-align:center ;">Welcom hom, developers</h2>
<p >
<!-- <h2 style="margin: 50px;"><i class="fa-solid fa-person-chalkboard"></i> 자기소개</h2> -->
<p style = "margin-bottom:20px ;color: gray;" >GitHub fosters a fast, and collabprative development process<br>
that lets you work on your own or with others.</p>
</p>
<img class="avi" src="./images/캡처.PNG" alt="">
</div>
<hr>
<div class="about__jobs">
<div class="jobs">
<div class="job">
<img src="./images/feature-tile__build.png" alt="" class="about__jobs__icon">
<div class="job__description">
<p class="job__name">
For evrything you build
</p>
<p class="job__story">Host and manage your code on GitHub</p>
<p class="job__story">you can keep your work private or share</p>
<p class="job__story">it with the word</p>
</div>
</div>
</div>
<div class="jobs">
<div class="job">
<img src="./images/feature-tile__platform.png" alt=""class="about__jobs__icon">
<div class="job__description">
<p class="job__name">
A better way to work
</p>
<p class="job__story">From hobbyists to professionals, GitHub</p>
<p class="job__story">helps developers simplify the way they </p>
<p class="job__story">build software </p>
</div>
</div>
</div>
<!-- <hr> -->
<div class="jobs">
<div class="job">
<img src="./images/feature-tile__projects.png" alt="" class="about__jobs__icon">
<div class="job__description">
<p class="job__name">
Millions of projects
</p>
<p class="job__story">GitHub is home to millions of open</p>
<p class="job__story">source projects, Try one our or get</p>
<p class="job__story">inspired to create your own</p>
</div>
</div>
</div>
<div class="jobs">
<div class="job">
<img src="./images/feature-tile__work.png" alt=""class="about__jobs__icon">
<div class="job__description">
<p class="job__name">
Open platform, from start to finsish
</p>
<p class="job__story">whith hundreds of integrations, GitHub is</p>
<p class="job__story">flexible enough to be at the center of</p>
<p class="job__story">your development process.</p>
</div>
</div>
</div>
</div>
<!-- </div> -->
<hr>
<!-- </section> -->
<!-- education start -->
</section>
<!-- education end -->
<!-- My Profile end-->
<!--기술-->
<section id ="skills" class="section" style="padding: 20px;">
<div class =section__container>
<div style="text-align: left;">
<div style= "margin-bottom: 10px;"><h2>where is GitHub ?</h2></div>
<p style="color: gray;">GitHub is where people build software. More than 18 million people use Github to</p>
<p style = "margin-bottom:30px ; color: gray;" >discover, fork, and contribute to over 48 million project</p>
</div>
<p >
<img class="map" src="./images/map.PNG" alt=""></p>
<hr>
<div class="about__edus">
<div class="edus">
<div class ="edu">
<button style="width: 130px; height : 40px;
background-color: #6ABF45; color: white;margin: 10px;">Sign up for GitHub</button>
</div>
</div>
<div class ="edus">
<div class="edu" style="margin-top: 20px;">public projects are always free. Work together
across unlimited private repsitories for $7/month
</div>
</div>
</div>
<hr>
</section>
<section id="contact" class="section" style="padding: 10px;">
<!-- <ul class="navbar__menue"> -->
<!-- </div> -->
<div class="about__ends" >
<div class="ends">
<div class ="end">
<li style="color: black;">2016 GitHub.inc</li>
<li>Terms</li>
<li>privacy</li>
<li>Security</li>
<li>Help</li>
</div>
</div>
<div class ="ends">
<div class="end" >
<div class="git"><i style="margin: 0 autos; " class="fa-brands fa-github"></i></div>
</div>
</div>
<div class ="ends">
<div class="end" >
<li>Contact Github</li>
<li>API</li>
<li>Training</li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
</div>
</div>
</div>
</section>
<!-- contact end-->
</body>
</html>
✔ CSS 부분
/* html{
font-size: 10px;
} */
@font-face {
font-family: 'twayair';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_tway@1.0/twayair.woff') format('woff');
font-weight: normal;
font-style: normal;
}
:root{
--color-white : #ffffff;
--color-black : #000000;
--color-backg : #383838;
--color-asd : gray;
--color-orange :#feb546;
--font-large : 48px;
--font-medium : 2px;
--font-regular:18px;
--font-small:16px;
--font-micro:14px;
--size-border-radius :4px;
--animation-duration:300ms;
}
*{box-sizing: border-box;}
body{
font-family: 'twayair', sans-serif;
margin:0;
}
a{
text-decoration: none;
color: var(--color-white);
}
ul{
padding-left: 0;
}
li{
list-style: none;
}
button {
background-color: var(--color-white);
cursor: pointer;
border: none;
outline: none;
border-radius: 5%;
}
h1 {
font-size: 4rem;
/* font-weight: bold; */
color: var(--color-white);
margin: 16px 0px;
}
h2 {
font-size: 2.5rem;
color: var(--color-black);
margin: 8px 0px;
}
#first{
padding-left: 40px;
}
h3 {
font-size:1,8rem;
font-weight: bold;
color: var(--color-black);
margin: 8px 0px;
}
p{
font-size: 1,8rem;
color: var(--color-black);
margin: 4px 0;
}
.ends{
padding-left: 20px;
padding-right: 20px;
}
.end{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: var(--color-white);
}
.end > li{
margin: 8px;
color: blue;
}
.about__ends{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: var(--color-white);
}
.job__story{
color: gray;
font-size: 14px;
}
/* Navbar */
#navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 16px 6px 16px;
background-color: var(--color-white);
}
.navbar__logo {
font-size: var(--font-medium);
font-weight: bold;
color: var(--color-white);
padding-left: 200px;
}
.navbar__menue {
padding-right: 200px;
display: flex;
text-align: center;
}
.navbar__menue__item {
padding: 8px 12px;
margin: 0 4px;
color: var(--color-black);
cursor: pointer;
}
.navbar__menue__item.active {
/* border: 1px solid black; */
border-radius: var(--size-border-radius) ;
}
.navbar__toggle-btn {
position: absolute;
top: 24px;
right: 32px;
font-size: 24px;
color: gray;
display: none;
}
/* home */
#home {
background: url(./images/bg.jpg) center/cover no-repeat;
padding: 40px;
text-align: center;
height:500px;
width: auto;
padding-top: 100px;
margin: 20px;
}
.home__title, .home__description {
color : var(--color-white)
}
/* .home__description{
text-shadow: 3px 3px 1px var(--color-black);
} */
.home__contact {
color: var(--color-black);
font-size: var(--font-regular);
font-weight: bold;
margin: 24px;
padding: 8px 12px;
border: 2px solid var(--color-white);
border-radius: var(--size-border-radius);
}
.home__container{
text-align: left;
/* padding-left: 100px;} */}
.section {
padding: 50px;
text-align: center;
margin: auto;
}
.section__container {
max-width: 1200px;
margin: auto;
}
.about__jobs{
display: flex;
justify-content: center;
margin: 0;
}
.home__container{
display: flex;
justify-content: center;
margin: 0;
}
.job > img {
border: 1px solid ;
width: 200px;
height: 100%;
font-size: 60px;
margin: auto;
color: white;
margin: 70px;
}
.about__edus{
display: flex;
justify-content: center;
margin: 0;
}
.about__ends{
display: flex;
justify-content: center;
margin: 0;
}
.about__majors{
display: flex;
justify-content: space-between;
margin: 80px 0;
}
.major__icon {
width: 170px;
height: 170px;
line-height: 170px;
font-size: 70px;
margin: auto;
color: gray;
border: 1px solid ;
border-radius: 50%;
margin-bottom: 16px;
}
.major__icon i {
transform: all var(--animation-duration) ease ;
}
.major__icon:hover i {
color: black;
transform: rotate(-30deg) scale(1.1);
}
.major__title, .major__description{
color: var(--color-black);
}
.major__description{font-size: var(--font-small);}
.logos{
display: flex;
justify-content: space-between;
}
.logo{
margin: 10px;
margin-top: 50px;
width: 80px;
border-radius: 50%;
border: solid var(--color-asd);
}
.job__name{font-size: var(--font-small);}
.job_period{
font-size: var(--font-micro);
}
.about__jobs__icon {
width: 150px;
height: 60px;
} */
/*기술*/
#skills{
background-color: beige;
}
.skillset{
display: flex;
background-color: var(--color-asd);
color: var(--color-white);
margin: 20px 0;
}
.skillset__title {
color: var(--color-white);
}
.skillset__left {
flex-basis: 60%;
background-color: var(--color-black);
padding: 20px 40px;
}
.skill {
margin-bottom: 32px;
}
.skill__description{
display: flex;
justify-content: space-between;
}
.skill__bar {
width: 100%;
height: 3px;
background-color: var(--color-asd);
}
.skill__value {
height: 3px;
background-color: var(--color-orange);
}
.skillset__right{
flex-basis: 40%;
}
.tool{
padding: 20px;
background-color: var(--color-asd);
}
.etc {
padding: 20px;
}
/* 내 작업실 */
.work__categories{
margin: 40px;
}
.category__btn{
border: 1px solid var(--color-asd);
border-radius: var(--size-border-radius);
font-size: var(--font-regular);
padding: 8px 48px;
}
.category__btn.active, .category__btn:hover{
background-color: var(--color-orange);
color: var(--color-white);
}
.category__btn.active .category__count,
.category__btn:hover .category__count{
opacity: 1;
top: 0;
}
.category__count {
background-color: var(--color-orange);
border-radius: 50%;
color: var(--color-white);
width: 24px;
height: 24px;
line-height: 24px;
display: inline-block;
position: relative;
top: -20px;
left: 4px;
opacity: 0;
transition: all var(--animation-duration) ease-in;
}
div.ha{
width: 300px;
font-size: 5px;
}
div.h{
width: 500px;
}
.project:hover .project__description {
opacity: 0.8;
transform: translateY(0px);
}
.project__description h3 {
color: var(--color-white);
}
.project__description h3:after {
content: '';
display: block;
position: relative;
left: 50%;
width: 25px;
height: 2px;
margin-left: -12px;
margin-top: 8px;
background-color: peru;
}
/* 추천서 */
#skill{
background-color: blanchedalmond;
}
#testimonials{
background-color: var(--color-asd);
}
.testimonials {
margin: 40px;
}
.testimonial {
display: flex;
margin: 32px 0;
}
.testimonial__avatar {
width: 150px;
height: 150px;
border-radius: 50%;
}
.testimonial__avatar:nth-child(odd){
margin-right: 40px;
}
.testimonial__avatar:nth-child(even){
margin-left: 40px;
}
.testimonial__speech-bubble {
padding: 18px;
background-color: var(--color-white);
border-radius: var(--size-border-radius);
}
.testimonial__speech-bubble p {
color: var(--color-black);
}
.testimonial__speech-bubble a{
color: var(--color-orange);
}
#contact {
background-color: var(--color-white);
}
.about__avi{width: 100%;}
@media screen and (max-width : 768px) {
.navbar__toggle-btn {
display: block;
}
.git {
display: block;
}
#navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar__logo{
position: relative;
right:200px ;
}
.navbar__menue{
flex-direction: column;
text-align: center;
width: 100%;
display: none;
}
#home{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
width: 100%;
height: 100%;
}
h2.home__title{
font-size: 2rem;
}
h3.home__description {
font-size: 1rem;
text-align: center;
/* width: 300px; */
}
.about__majors {
flex-direction: column;
}
div.h{
width: 300px;
margin: 0 auto;
}
.home__container{
text-align: center;
width: 100%;
flex-direction: column;
}
.major{
margin-bottom: 38px;
}
.avi{
width: 100%;
display: flex;
flex-wrap : wrap;
}
.ha{
margin: 0 auto;
}
.map{
width: 100%;
display: flex;
flex-wrap : wrap;
}
.about__jobs{
margin: 0 auto;
flex-direction: column;
}
.about__edus{
margin: 0 auto;
flex-direction: column;
}
.about__ends{
margin: 0 auto;
flex-direction: column;
}
.ends{
font-size: 0.6em;
}
.git{
display: none;
}
.img{width: 100%;}
.skillset {
flex-direction: column;
}
.project{
flex-grow: 1;
}
.testimonial__avatar{
width: 80px;
height: 80px;
}
#home{
margin: 0 auto;
text-align: center;
width: 100%;
}
}반응형
'Frontend > CSS' 카테고리의 다른 글
| CSS 홈페이지 틀 만들기(휴대폰, 태블릿, 컴퓨터) (0) | 2022.11.01 |
|---|---|
| CSS (transform, animation, transition) (0) | 2022.10.31 |
| CSS( 미디어쿼리, em, rem) (0) | 2022.10.31 |
| CSS (레이아웃 종류, flex 종류) (0) | 2022.10.31 |
| CSS (box-model, padding, margin, border, display, form) (0) | 2022.10.31 |
