본문 바로가기
HTML & CSS & JS

layout 2

이무쿤 2019. 11. 24. 16:07
반응형

 

 

<html>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

<!DOCTYPE html>

 

<html>

<head>

    <title>

 

    </title>

    <link rel="stylesheet" href="./style/seco.css">

</head>

 

<body>

 

    <img src="./img/logo.png" class="logo" >

    

    <div class = "frame">

        <div class="left">

 

            <div class="ltitle">

                <p class="title">홍익대학교</p>

                <p class="title">홈페이지 점검안내</p> 

            

            </div>

 

            <div class="lframe">

                <p class="category">· 점검<span class="point">안내</span></p>

                <p class="text">2019년 12월 12일 1시까지</p>

                <p class="category">· 점검<span class="point">내용</span></p>

                <p class="text">학교 네트워크 플랫폼 교체</p>

                <p class="category">· <span class="point">문의</span>사항</p>

                <p class="text">컴퓨터 공학과 3학년 임현준</p>

                <p class="category">· 점검<span class="point">범위</span></p>

                <p class="text">홍익대학교 홈페이지 참조</p>

                <p class="category">· <span class="point">안내</span>사항</p>

                <p class="text">홈페이지 서버는 이용 가능하나 </p>

                <p class="text">일부 서비스가 제공되지 않습니다.</p>

 

 

 

            </div>

        </div>

 

        <div class ="right">

            <iframe width="400" height="200" src="https://www.youtube.com/embed/DL7-CKirWZE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="border-radius: 10px;"></iframe>

            <a href=""><div class="button">홍익대학교 홈페이지</div></a>

            <a href=""><div class="button">홍익대학교 클래스넷</div></a>

            <a href=""><div class="button">홍익대학교 공지사항</div></a>

            <a href=""><div class="button">홍익대학교 학사정보</div></a>

            

 

        </div>

 

    </div>

    

    

    <img src="./img/copyright.png" class="copy">

    

</body>

 

 

</html>

Colored by Color Scripter

 cs

 

 

<CSS>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

 

@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding&display=swap');

 

 

body{

 

    text-align: center;

    padding: 0;

    margin: 0;

    background-image: url('../img/IMSI_Background.png');

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    background-attachment: fixed;

}

 

.logo{

 

   margin-top: 50px;

}

 

p{

    line-height: 1px;

}

.title{

 

    color:rgb(10, 10, 153);

    font-weight: 700;

    font-size: 3.2em;

    letter-spacing: -0.1em;

 

}

 

.category{

 

    font-size: 20px;

    line-height: 20px;

    text-align: left;

    font-weight: 800;

 

}

.button:hover{

 

    color: white;

    background-color: blue;

}

 

.text{

    

    font-family: 'Nanum Gothic Coding', monospace;

    line-height: 10px;

    text-align: left;

    margin-left: 30px;

    font-weight: 600;

}

 

.point{

    font-weight: 700;

    color: blue;

}

 

.left{

 

    margin-top: 30px;

    border-right: 1px solid rgba(255,255,255,0.7);

    position: absolute;

    left: 0;

    width: 425px;

    height: 540px;

}

 

.right{

 

    

    margin-top: 30px;

    position: absolute;

    right: 0;

    width: 425px;

    height: 540px;

 

}

 

.lframe{

 

 

 margin-top: 70px;

 padding-left: 50px;

 

}

.frame{

 

    position: relative;

    width: 850px;

    height: 600px;

    background-color: rgba(255,255,255,0.7);

    border-radius: 10px;

 

    margin-left: auto;

    margin-right: auto;

    margin-top: 30px;

}

 

.copy{

    margin-top: 20px;

}

 

.button{

 

    transition: 1s;

 

    margin-left: 10px;

    margin-top: 10px;

    padding-top: 15px;

    text-align: center;

    border-radius :10px;

    font-weight: 700;

    border: 1px solid rgb(27, 27, 119);

    color: white;

    background-color: rgb(37, 37, 122);

    width: 400px;

    height: 50px;

 

}

Colored by Color Scripter

 cs
반응형

'HTML & CSS & JS' 카테고리의 다른 글

Ajax  (0) 2019.12.24
html과 URI 매핑  (0) 2019.12.24
유튜브 영상 첨부  (0) 2019.11.24
p tag  (0) 2019.11.24
rgba & border-radius  (0) 2019.11.24

'HTML & CSS & JS' Related Articles

티스토리툴바